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.
Related
I have an javascript / jquery object that renders html - a div with a table and an edit button, and a jquery popup dialog.
I have always called the jquery dialog in $(document).ready(function(){});
Is it possible to create the dialog when I create the object.
in other words
object = new newTable('div_id');
and in the object there is
$(document).ready(function()
{
$( "#" + this.popup_id ).dialog(
{
autoOpen: false,
height: 600,
width: 600,
resizable: false,
modal: true,
buttons:
{
"Next": function()
{
process_account_wizard('next');
},
"Skip": function()
{
process_account_wizard('skip');
},
Cancel: function()
{
$( this ).dialog( "close" );
}
},
close: function()
{
},
});
});
so when the document is ready the objects sets up the dialog.
An alternate question is can I automatically run initialization code for an object once the page is loaded?
Edit: I have confirmed I can first create the object then run object.init() in the document ready function and the dialog works correctly. Trying to avoid this an make the object do it automatically.
I might have to edit this question a few times to figure out how to ask it. Thanks for your help
Basically you want to convert your object variable (though I'd want to think up a more appropriate name than "object") and initialise the dialog against that.
So, within whatever function calls object = new newTable('div_id'); paste your dialog initialisation from your question replacing -
$( "#" + this.popup_id ).dialog(
with
$(object).dialog(
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 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 have been trying to use follow scroll to move dialog together with user scroll but no success
<script>
$(function() {
$( "#dialog:ui-dialog" ).dialog( "destroy" );
$( "#dialog-report-problem-form" ).dialog({
autoOpen: true,
height: 550,
width: 700,
modal: true,
buttons: {
"<?= $this->translate('REPORT_PROBLEM'); ?>": function() {
reportProblem();
},
"<?= $this->translate('CANCEL'); ?>": function() {
$( this ).dialog( "close" );
}
},
close: function() {
}
});
$.scrollFollow("#dialog-report-problem-form",{speed: 10});
});
</script>
.
<div id="dialog-report-problem-form" title="<?= $this->translate('REPORT_PROBLEM'); ?>">
<?= $this->form ?>
</div>
I have been receiving the error
box.cont.offset() is null
Does anyone knows how could fix or another jquery based solution to follow user scroll?
The plugin scrollFollow seems to be pretty buggy and development discontinued (last update in 2008)
when you use it with $.scrollFollow(), the default option values are not set so you get a lot of errors like the one you got.
when using it with $(...).scrollFollow, the main option container is not obtained correctly so it does not really work...
Here is a small script that will move the dialog around when the window is scrolled:
(function(wnd, $) {
// query for elements once
var $dlg = $("#dialog-report-problem-form").parent(),
$wnd = $(wnd),
// get the initial position of dialog
initialTop = $dlg.offset().top - $wnd.scrollTop();
$wnd.scroll(function() {
// when qscrolling, animate the 'top' property
$dlg.stop()
.animate({
"top": ($wnd.scrollTop() + initialTop) + "px"
}, "slow");
})
.resize(function() {
// in case of resize, re-set the initial top position of the dialog
initialTop = $dlg.offset().top - $wnd.scrollTop();
});
// if you close/open the dialog, it will mess up the 'initialTop'
// this will re-set the correct 'initialTop' when the dialog opens again
$dlg.bind('dialogcreate dialogopen', function(e) {
initialTop = $dlg.offset().top - $wnd.scrollTop();
});
})(window, jQuery);
Working example on jsfiddle.
I have a table that, when any row is clicked, launches a jQueryUI modal dialog box to allow users to edit that record. I use the following script which seems to work, successfully loading the relevant record's details in using AJAX:
$("#datatbl tr").bind('click', function() {
var url = 'item_edit.asp?id='+$(this).attr("data-myid");
var dialog = $('<div style="display:hidden" title="Record details:"></div>').appendTo('body');
// load remote content
dialog.load(
url,
{},
function (responseText, textStatus, XMLHttpRequest) {
dialog.dialog({
height: 440,
width: 550,
autoOpen: false,
modal: true,
buttons: {
"Update this record": function() {
$('#editform').submit();
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
dialog.dialog('open');
}
);
//prevent the browser to follow the link
return false;
});
It works ok the first time I click on a record, but if I click cancel and try to edit another record, the dialog box does appear (with the correct record details) however, no scripts within the dialog box work - eg: there's a jqueryUI datepicker input and some validation.
There are no javascript errors and, from my limited understanding of FireBug, I can't spot anything going wrong so I would appreciate some advice how to proceed, thanks!
EDIT: Argh! Sometimes, it takes something like typing it out here to spot the obvious. I just realised that the DIV created for the dialog box doesn't get destroyed when the box closes. I've added a line to do this and it now works. Thanks for listening. :)
For future reference, I added an ID to the DIV created in 'var dialog' and removed it in the Cancel function:
Cancel: function() {
$( this ).dialog( "close" );
$('#dialogbox').remove();
}
I'd still appreciate if anybody suggests a better way to handle this behaviour.
I fixed it: the DIV created for the dialog box doesn't get destroyed when the box closes.
I added an ID to the DIV created in 'var dialog' and removed the DIV in the Cancel function:
Cancel: function() {
$( this ).dialog( "close" );
$('#dialogbox').remove();
}
You can create the dialog at one time only, not on every load of its content, just set the autoOpen to false.
<div id="dialog">
<div id="content" style="display:hidden" title="Record details:"></div>
</div>
$('#dialog').dialog({
height: 440,
width: 550,
autoOpen: false,
modal: true,
buttons: {
"Update this record": function() {
$('#editform').submit();
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
$("#datatbl tr").bind('click', function() {
var url = 'item_edit.asp?id='+$(this).attr("data-myid");
// load remote content
$('#content').load(url);
$('#dialog').dialog('open');
return false;
}};