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" );
}
}
]
}
);
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 am somewhat new to javascript and need to integrate couple plugins for one project. Is there a way to get customer_id (that was gotten when the dialog window was opened, and suggested by autocomplete) into "Create new job" button location.
I want to close first dialog after user clicks "Create new job" and then open new dialog window, but I want to pass customer_id from the first dialog window into second dialog window. There might be some dialog and autocomplete interaction that I might not understand, I just can't get customer_id before I call new_job() function.
$(function() {
$( "#dialog-name" ).dialog({
autoOpen: false,
})});
function customer_funct(){
$( "#dialog-name" ).dialog( "open" )
$(function() {
var name = $( "#name" );
$( "#name" ).autocomplete({
source: "suggest_name.php",
minLength: 2,
select: function( event, ui ) {
var customer_id = ui.item.customer_id;
// I am able to get customer_id here,
//now I need to pass it to the function below.
}
});
$( "#dialog-name" ).dialog({
autoOpen: false,
height: 300,
width: 500,
modal: true,
buttons: {
"Create new job": function() {
$( this ).dialog( "close" );
cust_name = (name.val());
// is there any way to get "customer_id" at this location
// before I call new_job() function after the user selects customer
// from the database and clicks "Create new job"?
new_job(customer_id, cust_name);
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});
By default the select event ui parameter only contains a "label" and "value" property
JQuery UI Autocomplete Success Event
In order to access a custom property you would need to explicitly add it after you retrieve your data via an ajax call. Similar to this post.
I guess I answer the question myself after some thinking. If someone else is working on jQuery autocomplete and dialog interaction, and if you need to open the new dialog window (in new_job(customer_id))with the id value from the previous dialog window and close that previous dialog window on success:
$(function() {
$( "#dialog-name" ).dialog({
autoOpen: false,
})});
function customer_funct(){
$( "#dialog-name" ).dialog( "open" )
$(function() {
var name = $( "#name" );
$( "#name" ).autocomplete({
source: "suggest_name.php",
minLength: 2,
select: function( event, ui ) {
var customer_id = ui.item.customer_id;
new_job(customer_id);
$(this).val(''); return false;
}
});
$( "#dialog-name" ).dialog({
autoOpen: false,
height: 300,
width: 500,
modal: true,
buttons: {
"Create new job": function() {
alert('Please select customer or click "Add New" customer');
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});
}
I wrote a function named confirmMessage(msg) to work with onclick event of links:
Delete
The code of the function is:
<script>
function confirmMessage(msg){
p = true
elementHtml = '<div id="ConfirmMessage">'+msg+'</div>';
$("body").append(elementHtml);
$("#ConfirmMessage").dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Delete": function() {
p = true;
$( this ).dialog( "close" );
},
Cancel: function() {
p = false;
$( this ).dialog( "close" );
}
}
}
);
return p;
}
</script>
In the function above I set a variable p to be case container i.e. true or false and initially I set it to be true. Also, The message element is created on the fly. However, when I click on the delete link, it dose not wait till I decide to delete or cancel and it go to delete.
When I set p initially to be false, it does not do anything else closing the dialog what ever the decision.
Where is the mistake in this code?!
jQuery dialog asynchronous -- it doesn't block. The function will go on and return without waiting for a response. You will need to use the following code:
function confirmMessage(msg,goto){
elementHtml = '<div id="ConfirmMessage">'+msg+'</div>';
$("body").append(elementHtml);
$("#ConfirmMessage").dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Delete": function() {
$( this ).dialog( "close" );
window.location.href=goto;
},
Cancel: function() {
$( this ).dialog( "close" );
},
},
});
return false;
}
and:
Delete
Changing so the return is not what is actually determining what happens.
See this JSFiddle.
Your mistake is in thinking that the function waits for you to click on one of the buttons before returning. .dialog() displays the dialog and returns immediately. Responding to user interactions must be done in callback functions.
Use the close: handler to run code when the dialog is closed:
$("#ConfirmMessage").dialog({
resizable: false,
height:140,
modal: true,
close: function() {
if (p) {
...
} else {
...
}
},
buttons: {
"Delete": function() {
p = true;
$( this ).dialog( "close" );
},
Cancel: function() {
p = false;
$( this ).dialog( "close" );
}
}
}
);
you "return p" is executed before you are even able to see the modal window. your dialog method is executed asynchronously
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
}
}
//...
I have a page that call from ajax a form with a specific target. this form has a delete entry and for that a warning with a jQuery dialog is used. everything works great.
BUT :
After doing the change or even not doing it, when I open another form (different form by ajax call) and I call the same code below described. When It is submit the dialog the #var_blabla as a value of 1 (the value of the first dialog opened/loaded) and for that moment should be '2'.
I try to figure it out.. So my problem I guess is not for the dialog it self, since I try to load a second page without the constructor and the dialog didn't open (what should be expected).
The problem is on the button 'Submit Delete' that has an event function and it stays active over another that is created.
The site have a lot of forms and many dialogs for each form, is there a wait to unbind, or destroy completely the dialog and the buttons? Ideas please?
Thanks
simplified 1st dialog call code:
$("#dialog-confirm-elimina").dialog({
autoOpen: false,
resizable: false,
height:220,
modal: true,
buttons: {
'Submit Delete': function() { $('#var_blabla').val('1');
$('#form_submit').submit();
$(this).dialog('close');
},
Cancel: function() {
$(this).dialog('close');
}
}
simplified 2nd dialog call code:
$("#dialog-confirm-elimina").dialog({
autoOpen: false,
resizable: false,
height:220,
modal: true,
buttons: {
'Submit Delete': function() { $('#var_blabla').val('2');
$('#form_submit').submit();
$(this).dialog('close');
},
Cancel: function() {
$(this).dialog('close');
}
}
UPDATE:
<script type="text/javascript">
submited=false;
var toggleOpened = true;
$("#admin_retractil_1").click(function () {
if(!toggleOpened){
$('#admin_retractil_1').toggleClass('toggleGESBHeadown');
toggleOpened=true;
}
else{
$('#admin_retractil_1').toggleClass('toggleGESBHeadown');
toggleOpened=false;
}
var objecto = $(this).attr("id");
$('#' + objecto+"_div").slideToggle("slow");
});
var toggleOpened2 = false;
$("#admin_retractil_2").click(function () {
if(!toggleOpened2){
$('#admin_retractil_2').toggleClass('toggleGESAHeadown');
toggleOpened2=true;
}
else{
$('#admin_retractil_2').toggleClass('toggleGESAHeadown');
toggleOpened2=false;
}
var objecto = $(this).attr("id");
$('#' + objecto+"_div").slideToggle("slow");
});
$(document).ready(function() {
//$( "button").button();
var locked = true;
$( "#EditDataForm").button({ icons: { primary: "ui-icon-locked" }});
$( "#EditDataForm" ).click(function() {
if(locked){
locked = false;
$( "#EditDataForm").button({ icons: { primary: "ui-icon-unlocked" }});
$('#edit_data_admin').slideToggle("slow");
$('#view_data_admin').slideToggle("slow");
}else{
locked = true;
$( "#EditDataForm").button({ icons: { primary: "ui-icon-locked" }});
$('#edit_data_admin').slideToggle("slow");
$('#view_data_admin').slideToggle("slow");
}
return false; });
$( "#DelDataForm").button({ icons: { primary: "ui-icon-scissors" }});
$( "#DelDataForm" ).click(function() {
$('#dialog-confirm-del').dialog('open');
return false; });
/*abre popup de alerta de eliminar */
arrayRemove.push("dialog-confirm-del");
$("#dialog-confirm-del").dialog({
autoOpen: false,
resizable: false,
height:220,
modal: true,
buttons: {
'Remove Stuff': function() {
$('#sel_action_form').val('TypoDesClients_DelDef');
$('#name').val('_____');
$('#form_submit').submit();
$(this).dialog('close');
},
Cancelar: function() {
$(this).dialog('close');
}
}
});
$( "#AcceptChanges").button({ icons: { primary: "ui-icon-check" }});
$("#form_submeter").validator({
position: 'center right',
offset: [0, 0],
message: '<div><em /></div>'
}).bind("onSuccess", function(e, els) {
var numSucceeded = els.length,
numExpected = $(this).data('validator').getInputs().length;
if (numSucceeded === numExpected) {
if(!submited){submited=true;
SubmitFormSV('form_submit', 'action/action_a.php');
return false;
}else return false;
}
});
$( "#radio" ).buttonset();
$("#1_radio").click(function () {
$("#tr_1").show();
});
$("#2_radio").click(function () {
$("#tr_1").hide();
});
});
local lib:
function SubmitFormSV(formul, address)
{
DoChecks();
$("#loading").show("slow");
$.post(baseURL + address, $('#' + formul).serialize(), function(html){
$('#content').slideUp("slow", function () {
AjaxChargePage(html, true);
});
});
$("#loading").hide("slow");
return false;
}
next the next chuck of javascript is similar to this one.
and with this work because destroy didn't:
DoChecks() As:
$.each(arrayRemove, function() {
var element = arrayRemove.pop();
$('#'+element).remove();
});
When you're done with dialog 1 try...
$("#dialog-confirm-elimina").dialog("destroy");
or in your Cancel function...
$(this).dialog("destroy");
The .dialog command creates a new dialog on the element selected. You're doing this twice, and thus having problems. Once the dialog is created it can be reused using open and close methods or destroyed as I've shown above and then recreated.
Ok, then finally I got a solution that make everything works. Instead of using the
$("#dialog-confirm-elimina").dialog("destroy");
I use:
$("#dialog-confirm-elimina").remove();
I still don't know the reason but clearly don't have the problem anymore.
Thanks for the answer though.
PS: If anyone know how could this append I appreciate to illuminate me about it.Thanks