When I click on the link 'alert' then the message will only popup once, which is correct. Strangely if I click on the link 'dialog' and then on the link 'alert' then the message is popping up twice consecutively, which is incorrect.
How can I fix this so that the message will only be displayed once?
HTML
<p id="test">alert</p>
dialog
jQuery
$(function() {
$("p#test a").click(function() {
alert('alert');
});
}
function showDialog(){
$("<div class='popupDialog'>Loading...</div>").dialog({
closeOnEscape: true,
height: 'auto',
modal: true,
title: 'About Ricky',
width: 'auto'
}).bind('dialogclose', function() {
jdialog.dialog('destroy');
}
You can try this script.
<script type="text/javascript">
$(document).ready(function () {
$("p#test a").click(function () {
alert('alert');
});
});
function showDialog1() {
$("<div class='popupDialog'>Loading...</div>").dialog()({
closeOnEscape: true,
height: 'auto',
modal: true,
title: 'About Ricky',
width: 'auto'
}).bind('dialogclose', function () {
$(this).dialog('destroy');
});
}
<script>
Related
I use jquery webcam in a jquery dialog it works fine in Chrome but it does not show anything in IE.
$("#camera-dialog").dialog({
autoOpen: false,
width: 380,
resizable: false,
height: 320,
open: function(event, ui){
$(this).load("#Url.Action("Popup")");
},
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "fadeOut",
duration: 1000
}
});
and this is my partial view Popup
<script type="text/javascript">
$("#camera").webcam({
width: 320,
height: 240,
mode: "save",
swffile: "#Url.Content("~/Scripts/jscam.swf")",
onTick: function () { },
onSave: function () { },
onCapture: function () {
webcam.save("#Url.Content("~/Cap")/");
},
debug: function () { },
onLoad: function () { }
});
</script>
<div id="camera">
</div>
and if I do not use the dialog but just put it on a page then it works fine too.
What's happening and how can I make this work in IE too?
Thank you in advance.
i have some problem with ie9 and jquery ui but still cant find solution please help me
When i click Detail dialog must be open and it works on ie7,ie8,FF,Chrome but don't in ie9
$(function() {
var popup = $("#popup"),
allFields = $([]).add(popup);
$("#dialog-form").dialog({
autoOpen: false,
height: 800,
width: 1200,
modal: true,
buttons: {},
close: function() {
allFields.val("").removeClass("ui-state-error");
}
});
});
function dialogOpen(id) {
$('#dialog-form').dialog('open');
}
<div id="pageopen" onclick="dialogOpen('dialog-form')">
<div id="detail" style="text-decoration:underline;">Detail</div>
</div>
<div id="dialog-form" title="Detail"></div>
Add the following code in document.ready. You trying to open the dialog before it is being created.
$(document).ready(function(){
$("#dialog-form").dialog({
autoOpen: false,
height: 800,
width: 1200,
modal: true,
buttons: {},
close: function() {
allFields.val("").removeClass("ui-state-error");
}
});
});
Following is my JS:
ShowHoverServerImageModalWindow: function () {
$("#divSettings").dialog({
width: 200,
height: 200,
modal: false,
title: "Server Image",
autoOpen: false,
closeOnEscape: true,
draggable: false,
resizeable: false,
/*position: "my position!!", */
buttons: [
{
text: "Close",
click: function () { $(this).dialog("close"); }
},
]
});
//Show the dialog
$("#divSettings").dialog('open');
},
I want the modal to be opened where my curser is at
How can i do that?
source: http://jqueryui.com/demos/dialog/ and http://docs.jquery.com/Tutorials:Mouse_Position
$("#divSettings").dialog({
... //your previous code
position: [e.pageX, e.pageY]
});
Easily found on google.
or just before you trigger the pop-up:
EDIT: now include the trigger.
$(document).click(function (e) {
$("#divSettings").dialog('option', 'position', [e.pageX, e.pageY]);
$("#divSettings").dialog('open');
});
I am playing with Jquery UI
I create a dialog on the fly from a DIV, i gave this DIV and ID and a button to call a closeDialog Function
It works fine as shown on this example
http://jsbin.com/ubovej
The problem I am having, is that if I d load a page THAT contains the BUTTON. The button will not work
as in:
$("<div id='mydialog1'>").dialog({
autoOpen: false,
modal: false,
width: 740,
height: 840,
title: 'Dialog1 = dynamic',
open: function(e, ui){
$(this).load(myUrl);
}
});
If this is the button Click Event code then
autoOpen: false,
should be
autoOpen: true,
EDIT: If you don't want it opened til you click the button then:
Do this when you want the dialog created.
var $dialog = $("<div id='mydialog1'>").dialog({
autoOpen: false,
modal: false,
width: 740,
height: 840,
title: 'Dialog1 = dynamic',
open: function(e, ui){
$(this).load(myUrl);
}
});
and do this after they click the button (only after the dialog is created)
$("button_selector").click(function () {
$dialog.dialog("open");
});
EDIT: Try changing
function closeDialog1(){
alert('closing Dialog1');
window.parent.$('#mydialog1').dialog('close');
return false;
}
to
function closeDialog1(){
alert('closing Dialog1');
$('#mydialog1').dialog('close');
return false;
}
Or a better way to do this might be
$("<div id='mydialog1'>").dialog({
autoOpen: false,
modal: false,
width: 740,
height: 840,
title: 'Dialog1 = dynamic',
open: function(e, ui){
$(this).load('dialogtest1a.html');
},
buttons: {
"Close" : function () {
$(this).dialog("close");
}
}
});
Does the button that closes the dialog HAVE TO be in the page you are loading?
I open modal dialog twice,
the textbox is locked in the first dialog(parent dialog) after the second dialog closed
Why? How to resolve the problem? I am new user,so I can't post the image
Any answer will be appreciated, thank you
Html:
<XMP>
<input id="btnDlg" type="button" value="open dialog" />
<div id="dlg1"><%=Html.TextBox("txtName","can not edit") %><input id="btnShowDlg" type="button" value="dialog again" /></div>
<div id="dlg2"><div>the second dialog</div><%=Html.TextBox("txtName2") %></div>
</XMP>
jquery:
$("#dlg1").dialog({
autoOpen: false,
height: 350,
width: 300,
title: "The first dialog!",
bgiframe: true,
modal: true,
resizable: false,
buttons: {
'Cancel': function() {
$(this).dialog('close');
},
'OK': function() {
$(this).dialog('close');
}
}
})
$("#dlg2").dialog({
autoOpen: false,
height: 200,
width: 300,
title: "This is the second dialog!",
bgiframe: true,
modal: true,
resizable: false,
buttons: {
'Cancel': function() {
$(this).dialog('close');
},
'OK': function() {
$(this).dialog('close');
}
}
})
$("#btnDlg").click(function() {
$("#dlg1").dialog("open");
})
$("#btnShowDlg").click(function() {
$("#dlg2").dialog("open");
})
buttons: {
"Save": function () {
//validate
if (typeof (Page_ClientValidate) == 'function') {
Page_ClientValidate(newValGroup);
}
if (Page_IsValid) {
gettHTML(divID, PriceID);
}
},
Cancel: function () {
$(this).dialog("close");
}
},
close: function (ev, ui) {
$(this).dialog("destroy");
}
});
$("#" + divID).dialog('open');
return false;
Yes divid can you try Making Modal : false. it will work..
let me know..
Thanks