We Keep Coding

Making Jquery UI element more reusable

New to OOP. I currently use the jQuery UI Dialog for both signup and login forms. However I violate DRY by assigning properties each time I use the dialog. I'm trying to figure out what the best approach is to reusing this element.
signUpDialog = $('.js-sign-up-dialog').dialog({
autoOpen: false,
height: 300,
width: 350,
open: function(event, ui) { $(".ui-dialog-titlebar-close", ui.dialog || ui).hide(); }
});
// dialog for login
loginDialog = $('.js-login-dialog').dialog({
autoOpen: false,
height: 300,
width: 350,
open: function(event, ui) { $(".ui-dialog-titlebar-close", ui.dialog || ui).hide(); }
});
// event hunder for click on sign-up button
$(document).on('click','.js-join-button', function() {
event.preventDefault ? event.preventDefault() : event.returnValue = false;
signUpDialog.dialog('open');
});
// event hunder for click on log-in button
$(document).on('click','.js-login-button', function() {
event.preventDefault ? event.preventDefault() : event.returnValue = false;
loginDialog.dialog('open');
});
};

Create an object that holds all of the arguments for the .dialog function and pas the object in.
var dialogParamObj = {
autoOpen: false,
height: 300,
width: 350,
open: function(event, ui) {
$(".ui-dialog-titlebar-close", ui.dialog || ui).hide();
}
};
signUpDialog = $('.js-sign-up-dialog').dialog(dialogParamObj);
loginDialog = $('.js-login-dialog').dialog(dialogParamObj);
Note: you should probably put var in front of signUpDialog and loginDialog like this:
var signUpDialog = $('.js-sign-up-dialog').dialog(dialogParamObj);
var loginDialog = $('.js-login-dialog').dialog(dialogParamObj);

Dialog, datapicker get id

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" );
}
}
});
});
}

Confirmation message with Jqueryui always return true

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

call a ui-dialog box using javascript function

I need to open (call) a ui-dialog box from a function javascript. Currently I have these two codes:
setTimeout(function() {
var zone = event.getTarget().getName();
var x = window.confirm("Do you want to continue?");
if (x) {
readData();
} else {
e.preventDefault();
}
}, 0);
and,
$( "#dialogZone" ).dialog({
autoOpen: false,
show: "blind",
hide: "blind",
modal: true,
buttons: {
"YES": function() {
$(this).dialog("close");
readData();
},
Cancel: function() {
$(this).dialog("close");
//avoid some info windows in #tab1
}
}
});
$( "#openEvent" ).click(function() {
$( "#dialogZone" ).dialog( "open" );
return false;
});
});
Please, can I have some thing like...
setTimeout(function() {
// show ui-dialogbox
}
Thanks in advance for your answers. Regards.

You already have it in your code:
$( "#dialogZone" ).dialog( "open" );
to open dialog, so put this line in your timeouted function

jquery dialog with issue after ajax call

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