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(
Related
I have a jqueryUI dialog popup that is showing on the page... and popping up when requested. Some odd functionality. Anything within the div will show on the page, and the popup will work however be without the contents on the div. I am trying to create the popup before the document is ready. Here is the code that my object is running, again before document ready.
var edit_div=document.createElement('div');
var me = this;
$(edit_div).dialog(
{
autoOpen: false,
height: 400,
width: 600,
resizable: false,
modal: true,
buttons:
{
"Submit": function()
{
me.submitForm();
},
Cancel: function()
{
$( this ).dialog( "close" );
}
},
close: function()
{
},
});
The popup works correctly if I move the dialog creation code to a separate function and call that when the document is ready like so:
$(document).ready(function()
{
mfg_table.init();
}
And the init code to create the dialog
this.init = function()
{
//alert('initing');
var me = this;
$('#' +this.table_id + this.edit_table_name).dialog(
{
autoOpen: false,
height: 400,
width: 600,
resizable: false,
modal: true,
buttons:
{
"Submit": function()
{
me.submitForm();
},
Cancel: function()
{
$( this ).dialog( "close" );
}
},
close: function()
{
},
});
}
So why can't I create the dialog on the DOM object before rendering of the page?
Is it possible your script is being called before your jquery.js files are being loaded by the browser?
Document.ready waits until the page is fully loaded before running your code. The fact that it isn't working correctly without it, implies that the necessary resources aren't being loaded before you try to run your script.
You may want to try to move your inline script to the very end of your html file, particularly after all your .js and plugin files have been referenced.
I wish I could be more specific, but it's hard to see whats going on without more of the code or a live example.
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 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;
}};
I have a page that uses multiple dialogs for different things. Some dialogs may have buttons that others do not while other may need to be a different height than another... All of them have a set of params that will not change. My question, can I have a default like:
$('.someElement').dialog({
width: 999,
show: 'slide',
hide: 'slide',
ETC: 'some other option'
});
and use it for all of my dialogs, then pass buttons or height to it dynamically when I open a dialog? It just seems wrong to have something like the above for every dialog I need...
Thanks!
You could create a wrapper function for this:
function showDialog(target, options){
options.width = 999;
options.show = 'slide';
options.hide = 'slide';
$(target).dialog(options);
}
And then you would just call the function when you want to create a dialog. You could even get fancy and turn it into a jQuery plugin if you really want to...
You can use the "option" method (which takes an object, of the same format), like this:
$('.someElement').dialog({
width: 999,
show: 'slide',
hide: 'slide',
autoOpen: false
});
$('.someElement').dialog('option', {
buttons: { "Ok": function() { $(this).dialog("close"); } },
height: 400
}).dialog('open');
You can see a demo here, this just sets whatever options you want before calling the open method.