i have an html page in which i sue TinyMCE editor in iframe and i have a button which is out side the iframe. my problem is taht iwant to get the value of editor on button click but when i click the button i found nothing please help here is my code
Iframe Code:
<iframe id="EditorFrame" src="UploadTemplates.aspx" frameborder="0" style="height: 900px;
width: 1000px" scrolling="auto"></iframe>
UploadTemplates.aspx Code:
<div>
<p>
<textarea id="TemplateEditor" cols="50" rows="50" runat="server">
</textarea>
</p>
</div>
Jquery Code:
$(function () {
uploader = $("#TempateFileUploader");
tinyMCE.init({
// General options
mode: "textareas",
theme: "advanced",
plugins: "autolink,lists,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
theme_advanced_resizing: false,
width: "800",
height: "640"
// setup: function (ed) {
// ed.onClick.add(function (ed, e) {
// alert('Editor was clicked: ' + e.target.nodeName);
// });
// }
});
$("#Button1").click(function () {
alert(tinymce().get("TemplateEditor").getCOntent());
});
});
on the click of Button1 hsing Jquery i found nothing of TinyMCE althoug i found the object of tinyMCE but not able to get value please help how can i get the value of timyMCE out side the iframe on button click using jquery
The solution to your problem might be to use getContent() instead of getCOntent() .
Using getCOntent() you should get javascript errors!!
Related
I have a package with a dashboard single page. On this single page I need a dynamically created dialog popup, and so
I also need to use the router, views (package/mypackage/views) and controllers.
The questions now are the following:
What looks the directory structure like?
Where and how do I use Router::register('what_path_?', 'Namespace\?\Class::method') to create the route to the view/controller?
How do I call upon the route inside the single page view (Url::to(?)) and in combination with the dialog JS?
Please add comments if some questions are still open!
In concrete5, you can use $.fn.dialog.open, for example:
$.fn.dialog.open({
width: 500,
height: 300,
element: $('<div>This is an example!</div>')
});
To create modal dialogs on dashboard single pages in packages, the following steps are necessary (assuming the package already exists):
Creating the following supplementary files / folders (for sake of readability):
/my_package/controllers/dialog/my_dialog.php
/my_package/views/dialogs/my_dialog.php
The 'my_dialog' controller should look like this:
namespace Concrete\Package\MyPackage\Controller\Dialog;
use Concrete\Core\Controller\Controller;
class MyDialog extends Controller
{
protected $viewPath = 'dialogs/my_dialog';
public function view()
{
/** your code */
}
}
The 'my_dialog' view is a standard Concrete5 view.
Add (if not exists) the following method inside the package controller:
public function on_start()
{
Route::register('/my_package/my_dialog',
'\Concrete\Package\MyPackage\Controller\Dialog\MyDialog::view');
}
Now in the single page view:
<a class="btn btn-default btn-xs" data-button="my-dialog">My dialog</a>
<script type="text/javascript">
$('a[data-button=add-event]').on('click', function() {
$.fn.dialog.open({
href: '<?= URL::to('/my_package/my_dialog'); ?>',
title: 'My dialog',
width: '280',
height: '220',
modal: true
});
return false;
});
</script>
To note:
The route can be named however one wants it (ex.: /superuser/needs/new/pants).
The call on the dialog JS might be better handled, please comment on it.
To add another "inline-code" possibilty:
HTML:
<div id="my_dialog" style="display: none">
<div>
This is an example!
</div>
</div>
jQuery:
$('#my_dialog').dialog({
title: 'My Title',
width: 500,
height: 300,
modal: true,
buttons: [
{
text: 'Yes',
icons: {
primary: "ui-icon-confirm"
},
click: function () {
// Confirmed code
}
},
{
text: 'No',
icons: {
primary: "ui-icon-cancel"
},
click: function () {
$(this).dialog('close');
}
}
]
});
I'm trying to change the content of the menu whenever the user clicks a button. The CSS loads fine initially, but once i press the button to initiate the ajax call, the menu bar returns, but none of the CSS is applied. All of the code is in an MVC 4 partial view.
Here's my JS
$(document).ready(function () {
$("#menu").wijmenu({
orientation: 'vertical'
});
$("#TDButtons a").click(function () {
var href = $(this).attr("href");
$('#menuAjax').fadeOut('slow', LoadAjaxContent(href));
return false;
});
function LoadAjaxContent(href) {
$.ajax(
{
url: href,
success: function (data) {
$("#menuAjax").html(data).fadeIn('slow');
}
});
}
});
Here's the nav tag
<nav id="menuAjax">
<ul id="menu">
<li>Breaking News
<ul>
...
Here's the HTML for the buttons to initiate the AJAX
<div class="navDiv">
<div id="TDButtons">
<a href="#Url.Action("_menu", "Home", new { TakeoutDelivery = "TakeOut" }, null)">
<img class="headerLogo" src="../../Content/Images/TakeoutButton.jpg" alt="Take Out" /></a>
<a href="#Url.Action("_menu", "Home", new { TakeoutDelivery = "Delivery" }, null)">
<img class="headerLogo" src="../../Content/Images/DeliveryButton.jpg" alt="Delivery" /></a>
</div>
Please let me know if you need anything else.
Put this on the page.
function pageLoad(sender, args) {
$('#OutsideDiv').trigger('create');
}
This will re attach the css on page load. The problem I presume is that it is only a partial post and hence you are lossing the style sheets. I had a very similar problem with my mobile site in jquery-mobile when making partial postback calls. This fixed it re partial postbacks.....
Note: there is a very small delay for it to render... Not sure if this will be a problem for you....
Hope it helps
Cheers
Robin
I needed to add
$("#menu").wijmenu({
orientation: 'vertical'
});
into the LoadAjaxContent function.
function LoadAjaxContent(href) {
$.ajax({
url: href,
success: function(data) {
$("#menuAjax").html(data).fadeIn('slow');
$("#menu").wijmenu({
orientation: 'vertical'
});
}
});
}
I'm using the following JQuery block in my DotNetNuke module:
jquery(document).ready(function (){
$( "#dialog:ui-dialog").dialog("destroy");
$( "#dialog-message").dialog({
modal: true,
buttons: {
Ok: function(){
$( this ).dialog("close");
}
}
});
});
</script>
<div id="dialog-message" title="Registration Confirmed">
I'm not sure how to redirect the user to the home page when they click the Ok button? Also, how do I wire up the dialog-message DIV to only fire when my ASP:Button is clicked?
Thanks much!!
You can put an OnClientClick on your Button and call a function that will show your modal. When the ok button is clicked you can change the window.location to the path of your homepage.
HTML
<asp:Button runat="server" ID="btn_ShowModal" OnClientClick="showModal(); return false;" />
Javascript
function showModal()
{
$( "#dialog-message").dialog({
modal: true,
buttons: {
Ok: function(){
$( this ).dialog("close");
window.location = "pathToHomepage";
}
}
});
}
Edit
There are two types of paths that can be used in javascript and in web development in general: relative paths and absolute paths.
Relative paths: start from the current directory and you access the desired location from there using '/' to go forward a directory and '../' to go backward
Absolute paths: the full url to the desired location
You can find a more thorough description here
'~/' is a sever side "shortcut" that unfortunately does not work on the client side without using something like this.ResolveClientUrl.
'<%= this.ResolveClientUrl("~/default.aspx") %>'
<script type="text/javascript">
function ShowPopup(message) {
$(function () {
$("#dialog").html(message);
$("#dialog").dialog({
title: "Alert",
buttons: {
Close: function () {
$(this).dialog('close');
window.location = "home.aspx";
}
},
modal: true
});
});
};
</script>
client side
string message = "Profile Updated!!.";
ClientScript.RegisterStartupScript(this.GetType(), "Popup", "ShowPopup('" + message + "');", true);
I am dynamically creating an iframe and loading it with content from a cgi. The content is a table. I would like to apply jeditable to a div in that iframe content. Here is the html which renders as I need.
<td align=left width=5%><font style="font-family:lucida console; font-size: 10px;"><div class="edit" id="div_1">$databasename</div><div class="edit_area" id="div_2"></div>
and here is the js:
var iframe = document.createElement('IFRAME');
$(iframe).attr({
id: 'frameName',
frameBorder: 'none',
width: '100%',
height: '465',
scrolling: 'yes',
src: "./dump.cgi?system=" + sys
});
document.body.appendChild(iframe);
$(iframe).load(function() {
$(document).ready(function () {
$('.edit').editable('./adtu.php', {
indicator : 'Saving...',
tooltip : 'Click to edit...'
});
$('.edit_area').editable('./adtu.php', {
type : 'textarea',
cancel : 'Cancel',
submit : 'OK',
indicator : '<img src="img/indicator.gif">',
tooltip : 'Click to edit...'
});
});
});
The jquery.js and jquery.jeditable.js ARE NOT coded in the cgi. I'm hoping to avoid that overhead, but I will try if advised.
So when the page loads I click on the "databasename" in the table and I get nothing. I have had the jeditable code in numerous places. This code is my latest attempt, my thinking being that the iframe was not ready for jeditable to find the div class when coded outside the load() function.
I would lose the cgi and frame altogether but the cgi has other submit functions and the iframe container is how I contain the page refresh.
Thank you,
Mike
Simplemodal works perfectly but I dont know how to automatically close the Iframe after the form is submitted.
I have tried to get the event outside the modal options using js, but
if I close the modal window on the submit event, then the form is not submitted...
I have also added the class simplemodal-close to the input button, but it doest work in the form??
Any suggestions??
Here is my code
//Modal Window
modal.click(function(e){
e.preventDefault();
$.modal('<iframe src="' + this.href + '" height="480" width="525" style="border:0" >',{
containerCss:{
backgroundColor:"#fff"
},
overlayClose:true,
onShow: function (dialog) {
$("input",dialog.data).click(function (e) {
e.preventDefault();
alert('Here'); //Doesnt execute
$.modal.close();
parent.$.modal.close();
alert('Here');
});
}
});
Ok, I just did it.. I didnt use iframe because after parent.$.modal.close().. The js included in that iframe didnt execute anymore..
So I just did it this way..
//Modal Window
modal.click(function(e){
e.preventDefault();
$.get(this.href,function(data){
var resp = $('<div></div>').append(data); // wrap response
$(resp).modal({
overlayClose:true,
minHeight:450,
minWidth: 500,
containerCss:{
backgroundColor:"#fff",
borderColor:"#fff"
},
onShow: function(dialog){
autocomplete();
}
});
});
});
If I use a div instead that an iframe,, when I submit, the modal closes otherwise it stays open....
It was easy, but I got confused..