I have made a blog application where I have this form for writing the blog. It has a title field, an instance of of tinymce editor for the blog body, a text field for adding tags and the submit button.
What I want to do is to by default show the whole form to the user when the page loads. The user can fill in the title. Now when the user comes on the text-editor, there will be a button on clicking which only the text editor will open in the modal window and the user can type in that.
Once the user clicks on the cross, then the text is copied to the underlying text editor. I am not that good at javascript and I have looked a few blogs, but that didn't help. Any directions will be really appreciated. I am adding a snapshot of how the blog page looks like.
You need to start off by initializing your TinyMCE editor with something like this (add in any options you want):
$(function() {
tinyMCE.init({
mode: "none",
theme: "simple",
});
//whatever code
});
You can set up any mode you like but I'm going to go with dynamic creation (mode: none) because it gives you more control. Initialize your modal in "whatever code" then create your editor inside the modal with the code below:
tinyMCE.execCommand('mceAddControl', false, 'id_of_textarea');
To get/set the content of your editor you would do this:
tinyMCE.activeEditor.getContent();
tinyMCE.activeEditor.setContent('data in here');
You'll need to close your tinyMCE editor before you close your modal or it will fail to load next time the modal opens. To close it you need to execute the following code:
tinyMCE.execCommand('mceRemoveControl', false, 'id_of_textarea');
Related
I have an separate Add button (neither on toolbar, nor on grid) and I want to open a popup window (having some fields) after clicking this button in order to create a new record. I have a look at the Kendo Demo pages, but all the samples use grid's or toolbar's Create button. Instead of them, a need a sample with a separate button. Any sample please?
Update: I want to create a listview as shown below instead of grid:
If you call dataGrid.addRow() method and edit mode is set to "popup", Popup window will be displayed.
Look at this dojo
I've added Magnific Popup gem in my Rails web app, and have initialized it simply with
$('.box p a').magnificPopup({
type:'image'
});
in my application.js.
How do I go about modifying content of the popup window? I would like to add some hover effects on left and right side of the image displayed in popup, in such way that if I, for example, hover on the right side of the image - div container with certain image info slides in.
Thank you for any information!
image.markup option allows you to change the HTML structure of popup content - http://dimsemenov.com/plugins/magnific-popup/documentation.html#image_type
Also, you may just use "inline" type of popup, and provide all the content by yourself.
How can we show password requirements for a Password field using twitter Bootstrap pop-over and jquery on hover.
<input id = "txtPassword" type = "password" title ="password" />
I want to pass custom "html" as the content of popover.
change title of pop-over to custom title
change the style of pop-over from current basic to custom style.
for starter you can make things simple and use the simplest popover bootstrap:
1.include in your project the right files of bootstrap in order to make it work:
a.bootstrap-tooltip.js
b.bootstrap-popover.js
c.jquery.min.js
d.bootstrap.css
2.use an element only as the element which will fire the popover, for example:
hover for popover
with the: id="example" you can access the element with jquery in order to display a content with the popover
on the data-content="some text": this is the text that will be shown on the popover window
on the data-original-title="some title": you can decide what title to show on the popover window
3.use jquery to access and activate the popover like this:
$(function ()
{ $("#example").popover();
});
just start with that and then try to dig deeper to your goal.
I am new to Kendo UI. I would like to be able to display a popup with the results from my controller.
My example is very simple. I have this data on my page.
Some text [Create]
When I click on [Create], a call in made to my controller. The controller will create a PDF file. Next, I would like to be able to display the pdf in a KendoUI Window.
I am getting hung up on how to pass info back to page so the KendoUi Window is aware of the PDF file name to display.
Thanks in advance for your tips.
Steve
MVC 4
KendoUI 2012.2.270
There are two basic approaches:
You create the window when page is loaded and have a function for changing the content and make it visible.
You create the window each time.
Assuming that you for 1. Then you have an HTML that is something like this
<div id="popup_window">
</div>
Create PDF
Then you define the window and the click bind for triggering the open as:
$("#popup_window").kendoWindow({
title :"PDF document",
visible :false
});
$("#show").click(function () {
$("#popup_window").html("<object id='pdf' data='doc.pdf' type='application/pdf'/>");
$("#popup_window").data("kendoWindow").open();
});
Where I create a kendoWindow but set it's visibility to not visible.
Then I bind a function to the click on the Create PDF message that sets the content to an HTML object where data attribute is the pdf document and then open by invoking kendoWindow open method.
Can Any one explain how to refresh a parent page from child page in C#
We have a requirement like, we have a textbox followed by image popup button , If we click on Image popup button it will open one popup which has a textbox in it.
If we add some text in that and click on the save button , The parent page textbox has to be updated.
It's updating only when we manually refresh the page.We want a requirement like we have to updated it without any manual refresh.
Does any one know this?
Is it a "real popup"--literally a new window? Or is it a simulated popup with an HTML Element? If the latter--you need some Javascript. You can do this without reloading the page with jQuery by:
PARENT PAGE:
<textarea id="parent-textbox"></textarea>
CHILD POPUP:
<textarea id="child-textbox">This is some content I'd type in the popup</textarea>
<button onclick="$('#parent-textbox').val($('#child-textbox').val())">Click Me To Copy</button>
After it copies, you can close your popup and see the results--no page refresh required. Add jQuery to your site with:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
For info on how to integrate jQuery into your site (it's very easy), see
http://encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/
try this (javascript):
window.top.reload()