Ok, I've been trying to get this script to work but I just can't figure out what's wrong.
I'm trying to get tinyMCE to take input from 2 fields using jquery dialogue and output it in specific format. Here is my tinyMCE plugin code:
(function() {
tinymce.create('tinymce.plugins.RMFtooltip', {
init : function(ed, url) {
ed.addButton('RMFtooltip', {
title : 'ToolTip',
image : url+'/RMFtooltipbutton.png',
onclick : function() {
i = jQuery('<div title="Create your tooltip" ></div>');
/*jQuery.get(url+'/ajax/form.html', function(data) {
i.html(data);
});*/
i.load(url+'/ajax/form.html');
i.dialog({
autoOpen: true,
draggable: false,
resizable: false,
modal: true,
buttons: {
"OK": function() {
RMFtooltip_text = jQuery("#RMFtooltip_text").val();
RMFtooltip_tip = jQuery("#RMFtooltip_tip").val();
if (RMFtooltip_text != null && RMFtooltip_text != '' && RMFtooltip_tip != null && RMFtooltip_tip != ''){
ed.execCommand('mceInsertContent', false, '[tooltip tip="'+RMFtooltip_tip+'"]'+RMFtooltip_text+'[/tooltip]');
}
jQuery( this ).dialog( "close" );
},
Cancel: function() {
jQuery( this ).dialog( "destroy" );
}
}
});
...
Now, the first time I click the button in tinyMCE everything works fine, but if I click it again I get the same out put no matter what the input is. eg: I enter foo in the text and bar in the tip and click ok, everything works fine (I get "[tooltip tip="bar"]foo[/tooltip]"), then I use it again, this time I enter blah in the text and blue in the tip, but I still get the same output ("[tooltip tip="bar"]foo[/tooltip]"). It seems that it doesn't re read the input...
Please help
PS: I'm using ajax to get the form (because this is a js file), I can attach it here but it doesn't seems like it could matter to me....
You will need to empty the dialog each time you close it as jQuery will just keep creating new html behind the scenes each time your click function is called. You will never see this html again, but it's there and is messing with your calls using the IDs of your form elements.
To fix this, just empty the dialog after each call
//...
buttons: {
"OK": function() {
RMFtooltip_text = jQuery("#RMFtooltip_text").val();
RMFtooltip_tip = jQuery("#RMFtooltip_tip").val();
if (RMFtooltip_text != null && RMFtooltip_text != '' && RMFtooltip_tip != null && RMFtooltip_tip != ''){
ed.execCommand('mceInsertContent', false, '[tooltip tip="'+RMFtooltip_tip+'"]'+RMFtooltip_text+'[/tooltip]');
}
jQuery( this ).dialog( "close" );
jQuery(this).empty(); //Add this
},
Cancel: function() {
jQuery( this ).dialog( "destroy" );
jQuery(this).empty(); //Add this
}
}
//...
Related
Proper abstraction aside, how can I grab the 'title' option of a jQuery dialog amongst multiple scripts?
For example, below I have 2 scripts where the first returns a var as a string, where the other does not return the variable as a string:
<script>
$(function() {
$( ".scheduleDiv" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
Cancel: function() {
$( this ).dialog( "close" );
}
});
$( ".device-modal" )
.click(function() {
$( ".scheduleDiv" ).dialog({"title": $(this).attr('title')});
alert($( ".scheduleDiv" ).dialog('option', 'title'));
var single = $(this).dialog('option', 'title'); //works as expected
$( ".scheduleDiv" ).dialog( "open" );
return false;
});
});
</script>
<script>
$(document).ready(function() {
$('.locks').hide();
$('.device_groups').hide();
var single = $(this).dialog('option', 'title'); //is undefined...
if (single == "Add Single Lock") {
$('.locks').show();
//$('.locks select').removeAttr('disabled');
}
else {
$('.device_groups').show();
//$('.device_groups select').removeAttr('disabled');
}
});
</script>
So, how can I set 'single' to return the title as a string in the second script?
Many Thanks
Your context of this is likely not correct. When you handle the $(document).ready() event, this is the document. You need to manually grab your dialog window, and then get the title:
$('.scheduleDiv').dialog('option', 'title');
The code you are using to get the title is firing ondocumentready, but your initialization doesn't actually set a title. You are not setting the title until you click the 'deviceModal'. At that point, the code to log the title will not get re-fired, as the document only loads once.
I have zozo tabs script and i want make ajax request at change tabs.
Here is my preview
Animation doesn't work here- i don't now why, but you can see javascript code:
$(document).ready(function () {
checkOrientation("vertical");
var onSelect = function(event, item) {
console.log("Selected tab text: " + item.tab.text()); alert('dsadsa');
};
var tabbedNav = $("#tabbed-nav").zozoTabs({
orientation: "vertical",
animation: { duration: 200 },
defaultTab: "tab1",
effects: "slideD",
easing: "easeOutQuad",
select: onSelect
});
$("#ddl-orientation").bind("change", function (e) {
var orientation = $(this).val();
checkOrientation(orientation);
tabbedNav.data('zozoTabs').setOptions({ "orientation": orientation });
});
$("#ddl-position").bind("change", function (e) {
tabbedNav.data('zozoTabs').setOptions({ "position": $(this).val() });
});
function checkOrientation(orientation) {
jQuery('#ddl-position').children('option[data-orientation="h"]').attr('disabled', !(orientation === "horizontal"));
}
});
Apparently this animation is easy to use in ajax.
here is documentation
I don't know well javascript and i don't have idea what i must do.
Could you show me where i must put code to active ajax ? simple alert message will by ok : ) I will be grateful too, if you tell me how return ajax request to content tab.
function onSelect(event,item)
{
if(item.tab.text() == 'some tab name')
{
alert("i can rollerblade");
}
}
I have used 'select' attribute of zozo tabs but it never worked for me.
But I have found an alternative for it
Put a class or id in li.
$("li#123").live("click", function(e){
if($(this).text() == 'some tab name')
{
alert("i can rollerblade");
$.ajax({
..........
});
}
}
I want to use translations in my code, they are coming from PHP/MySql and are converted into an javascript array:
var translate = <?= json_encode($Object->translate);?>;
Translations are available in Javascript (tested).
Now, I want to use them in my Javascript code, by example Jquery UI dialog:
$("#logoff").click(function(){
var action = "logoff";
var btnLogoff = translate["dialog/buttonLogoff"]; // this gives the translation from the array
var btnCancel = translate["dialog/buttonCancel"]; // this gives the translation from the array
$("#dialog").dialog(
{
title: translate["dialog/titleLogoff"],
modal: true,
resizable: false,
buttons: {
btnLogoff : function() {
var loadUrl = "includes/_ajax/actions.ajax.php";
$.post(loadUrl,{action:action}, function(data) {
if(data)
location.reload();
});
$( this ).dialog( "close" );
},
btnCancel: function() {
$( this ).dialog( "close" );
}
}
}
);
$("#dialog").html("<span class='ui-icon ui-icon-alert' style='float: left; margin: 0 7px 20px 0;'></span>" + translate["dialog/textLogoff"]);
});
The problem is dat the property btnLogoff is not showing the translated text but instead shows itself ("btnLogoff").
In the last section, translate["dialog/textLogoff"] is translated like it is meant to be. I am clearly doin something wrong. Can I use the var as a property id? How?
I think you aren't using the jQuery.dialog API fully. See http://api.jqueryui.com/dialog/#option-buttons
Have a try using the 'text' property of the buttons configuration:
$("#dialog").dialog(
{
title: translate["dialog/titleLogoff"],
modal: true,
resizable: false,
buttons: [
{
text : btnLogoff,
click : function() {
var loadUrl = "includes/_ajax/actions.ajax.php";
$.post(loadUrl,{action:action}, function(data) {
if(data)
location.reload();
});
$( this ).dialog( "close" );
}
}
,
{
text : btnCancel,
click: function() {
$( this ).dialog( "close" );
}
}
]
}
);
I'm trying to allow users to delete multiple records, they click a link "delete" and a dialog shows saying are you sure? On clicking OK it should delete.
It works for the first time I do it, but for any other delete buttons I click it doesn't work. I'm setting a hidden field to store some information then getting that information in the dialog.
I have identified the problem see comment in code, but not sure why its a problem.
This is for the delete buttons:
$(".delete-item").click(function () {
$(this).css('font-weight', 'bold');
var delId = $(this).attr("id");
$("#hidden-itemid").val(delId);
$("#dialog-delete-sure").dialog("open");
});
heres the dialog:
$("#dialog-delete-sure").dialog({
autoOpen: false,
resizable: false,
height: 140,
modal: true,
buttons: {
Ok: function () {
var hiddenId = $("#hidden-itemid").val();//*** This comes back undefined the second time***//
var itemId = $("#hidden-itemid").val().split('-')[1];
var iType = $("#hidden-itemid").val().split('-')[0];
$.post('/User/Delete/', { id: itemId, itemType: iType }, function (json) {
if (json.success) {
$("#" + iType + "-row-" + itemId).hide('slow', function () { $("#hidden-itemid").remove(); });
$("#dialog-success-delete").dialog("open");
} else {
if (json.error == "unknown") {
$("#dialog-unknown-error").dialog("open");
}
if (json.error == "unauthenticated") {
$("#dialog-unauthenticated").dialog("open");
}
}
});
$("#hidden-itemid").css('font-weight', 'normal');
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
a typical delete button looks like this:
<a id="event-63" class="delete-item">Delete</a>
any ideas?
You are running
$("#hidden-itemid").remove();
on json.success so you remove the element from the DOM .. next time it does not exists and thus you get an error..
I definitely don't think of myself as a jQuery/javascript expert, but I know enough programming to get by - but on this project I ran into a problem where jQuery UI fails to initialize the 2nd dialog. I have 2 if statements to test before initializing each of them, but only the 1st if statement seems to be kicking in.
$(document).ready(function(){
// regular dialog box
$("#dialog").dialog({autoOpen: false, modal: true});
$("#dialog_link").click(function(){
$("#dialog").dialog("open");
return false;
});
// confirm box
if($.cookie("modal_confirm").length > 0 && $.cookie("modal_confirm")!="") {
$("body").prepend(''+$.cookie("modal_confirm")+'');
var g = $("#confirm");
g.html( g.html().replace(/\+/g," ") );
$("#confirm").dialog({
modal: true,
stack: true,
buttons: {
'OK': function() { window.location.replace($.cookie("confirmGo"))); (this).dialog('close'); },
Cancel: function() { $(this).dialog('close'); }
},
close: function(){ $.cookie("modal_confirm",null); $.cookie("confirmGo",null);}
});
}
// alert box
if($.cookie("alert").length > 0 && $.cookie("alert")!="") {
$("body").prepend(''+$.cookie("alert")+'');
var f = $("#alert");
f.html( f.html().replace(/\+/g," ") );
$("#alert").dialog({modal: true, stack: true, buttons: {'OK': function() {$(this).dialog('close');}}, close: function(){ $.cookie("alert",null); }});
}
});
In this case, the alert modal wouldn't open while the confirm opens. If I move it in front of the confirm, then the alert would open but the confirm wouldn't open.
Is this a jQuery UI problem? If so, is there a workaround?
Please help and thanks in advance.
You had an extra parenthesis on line 18 and forgot the $ in front of (this) later on the same line. It should read:
'OK': function() { window.location.replace($.cookie("confirmGo")); $(this).dialog('close'); },
Used jslint to locate those errors.