Appending to jquery dialog apparent bug -- any workarounds? - javascript

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

Related

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.

jQuery modal dialog not centering with position flag present

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

How does one gets the jQuery UI layout plugin to work?

I am willing to use the jQuery UI layout plugin (layout.jquery-dev.net) to make 2 resizable <div>. It would be just the center and east panels we can see here.
From the documentation I could make the simplest layout to work :
<script type ="text/javascript">
$(document).ready(function () {
var oOptions = {
applyDefaultStyles: true
};
$('body').layout(oOptions);
});
</script>
<body>
<div class="ui-layout-center">Center</div>
<div class="ui-layout-east">East</div>
</body>
But when I try my own thing (with both panels resizable by dragging the vertical divider), it stops working entirely.
var oOptions = {
closable: false,
resizable: true,
slidable: true,
center__minWidth: 200,
east__minSize: 200
};
I have no background in JavaScript and I might just be dumb asking here. But from what I understood when reading the <script> at the demo page (same as above), it should works fine with the resizable option only.
Using jQuery 1.9.2 did the thing.

Categories