jQuery modal dialog not centering with position flag present - javascript

I have a site here...
I didn't create a fiddle because I'm not sure how to replicate the issue with ajax.
When the site loads, there's an auto-popup that brings in an ajax request.
It's way off center and when I add the position flag there, the modal doesn't come up at all. I don't get any syntax errors, so I'm not sure what's wrong.
With this code, the popup opens (but off center)...
$(document).ready( function() {
jQuery('#compliance').load('jquery-ajax.html').dialog();
});
And when I add the position flag, it doesn't show up at all...
$(document).ready( function() {
jQuery('#compliance').load('jquery-ajax.html').dialog({
position: {my: "center top", at:"center top", of: window },
});
});
Edit-
This is what ultimately worked...
$(document).ready( function() {
jQuery('#compliance').load('jquery-ajax.html').dialog({
resizable: false,
modal: true,
width: 750,
show: 'fade',
hide: 'fade',
position: {my: "center top", at:"center top", of: window }
});
});

I believe your issue has to do with ajax being loaded into the modal box. This can cause content sizing issues among other things. You can try adding
jQuery('#compliance').load('jquery-ajax.html').dialog({
resizable: false,
modal: true,
width:'auto'
});
Also for future reference, you shouldn't have to use jQuery when acting upon an element. You can use the $ sign. If this isn't working then you may have an issue with the load order of your javascripts in the DOM

A short timeout re-positioning the dialog did the trick for me. All other attempts failed.
setTimeout(function(){
$("#dialog-selector").dialog('option', 'position', 'center');
}, 50);

Related

Appending to jquery dialog apparent bug -- any workarounds?

When appending to a jquery dialog, it automatically resizes the dialog to fit the new content.
That's great.
After moving the dialog, this functionality breaks.
That sucks.
As you can see in this fiddle, the dialog works great UNTIL you move it.
$("#dialog").dialog({
resizable: true,
autoOpen: true,
});
window.setInterval(function(){
$("#innerdiv").append("<br>Append!");
}, 2000);
https://jsfiddle.net/f8dtd8bg/
Anyway to work around this apparent bug in jquery?
Oops, I was using an old version of Jquery UI. Works now :P
https://jsfiddle.net/f8dtd8bg/1/
$("#dialog").dialog({
resizable: true,
autoOpen: true,
});
window.setInterval(function(){
$("#innerdiv").append("<br>Append!");
}, 2000);

How to add two buttons in ajax modelpopup in wordpress?

I have been searching myself silly for this and can't find anything to help.
I want to add 2 buttons to my nav_menu one for register and one for login.
also i want it to popup with the ajax and can't seem to find that either.
I don't want to use the pages for registration or login.
Can somebody help me on this.
Thank You
You can accomplish this in a few ways. I would suggest using jquery/javascript to bind to those menu options and use jquery dialog to view the page in a popup.
$("#dialog").dialog({
autoOpen: false,
position: 'center' ,
title: 'EDIT',
draggable: false,
width : 300,
height : 40,
resizable : false,
modal : true,
});
$("#loginOption").click( function() {
$("#dialog").load('path/to/file.html', function() {
$("#dialog").dialog("open");
});
});
jQuery Dialog Docs: https://jqueryui.com/dialog/

showModalDialog deprecated Chrome37, other suggestions?

Does anyone have any viable suggestions for the replacement of the showModalDialog() functionality in Chrome 37? I understand that there is the path until May 2015, but that's not 'viable' in my opinion, and if I can avoid changing everything to window.open() functions that would be great.
Do you have some of the code you are tying use? I see you've tagged jQuery. So I will provide a jQuery answer.
You can use the following code to 'open' or 'show' a jquery Dialog
$(divSelector).dialog('open');
$(divSelector).dialog({
autoOpen: false,
width: 200,
modal: true,
closeOnEscape: true,
draggable: false,
resizable: false,
buttons: {'Ok': function(){
$(this).dialog('close');
}}
});
the .dialog('open') will trigger the dialog to open up. I am not sure how difficult it would be to wrap your dialog div in the $(divSelector).dialog tags and include the jQuery UI css and javascript into your application.

D3,js dialog modal not working any more

I have a google map with popup alerts which used to work but for some reason isn't now.
It is supposed to be modal and have an x to close it. It ought to expand to include all text. This worked before but not any more.
It has a close button instead of the x. The text overflows the size of the window.
I copied the code from a working map but that did not help.
Here is the code:
function prettyAlert(p_message, p_title) {
p_title = p_title || "";
$(p_message).dialog({
title: p_title,
width:400,
height:200,
resizable: true,
modal : true,
close: function(ev, ui) {
$(this).remove();
}
}).css("background", "lightgrey");
}
What could have broken this code. (It is embedded in a Drupal 7 page.)
I resolved this by completely removing the various jquery libraries I had added to the Drupal configuration and using the explicit definitions in the code. I must have introduced something that conflicted with the behaviour of alerts.

Load another page within a JQuery UI modal (from within the JQuery UI modal...)

I have a JQuery UI modal:
$('#avatar-manager').click(function () {
$('#dialog').dialog('open');
return false;
});
$('#dialog').dialog({
autoOpen: false,
resizeable: false,
modal: true,
position: 'center',
width: 600,
open: function () {
$(this).load('/a/path/to/my/page.aspx');
}
});
And it works wonderfully. page.aspx (example name) contains my upload functionality for images. What I'd like to do is on completion of the upload, to redirect the user to another modal:
uploader.bind('FileUploaded', function (up, file, obj) {
alert("I've done uploading stuff...");
//redirect to another modal here...
});
I know I can't use windows.location and the like, because that will change the main parent window, so I'm not sure how - or even if I can - do this...
Have you tried simply close the current dialog and open another one?
$('#dialog2').dialog({
autoOpen: false;
modal: true
});
uploader.bind('FileUploaded', function (up, file, obj) {
$('#dialog').dialog('close');
$('#dialog2').html('Upload finished').dialog('open');
});
Edit:
You can refer to the dialog several ways depending on how you want to do it. If you want absolute reference, just use $('#dialog'); if you want a relative reference, you could make use of $.proxy(), apply() or call() to pass in the dialog as the substituting context, so you can use $(this) to refer to the dialog.

Categories