Develop Reference

window confirm print the html tag in ajax post

I want to show the confirmation window for the user who want to delete the data from database.
And I use this confirm() function to achieve this:
var str = document.getElementById("myHiddenDiv").innerHTML;
if (confirm(str))
{
$.ajax(...
<div id="myHiddenDiv" style="display: none;"><strong>Dont delete this</strong>
<br />
...
</div>
However it prints the html attribute in the windows confirmation such as the tag of <strong> and <br/>. I don't want that. How to do that?

Get the text from selected div like
var str = document.getElementById("myHiddenDiv").innerText;
Or you can also getting text with
var str = document.getElementById("myHiddenDiv").textContent;

I recommend using a modal window to this, http://jqueryui.com/dialog/#modal-confirmation.
<script>
$(function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Delete all items": function() {
$( this ).dialog( "close" );
//$.ajax(...
},
Cancel: function() {
$( this ).dialog( "close" );
//$.ajax(...
}
}
});
});
</script>

jQuery dialog ui on button click with function not working

I am trying to get the following logic to work. Any suggestions would be greatly appreciated.
here is what I'm trying to do..
if <input type="button" name="filter" id="filter" value="Save / Change" /> is clicked.
then check if requiredFields() returns true
if requiredFields() returns true
then display jQuery UI dialog
from jQuery dialog action
set form field, change form action, submit form, change form action back to original action
jQuery(function($)
{
$("#filter").on("click", function() {
if(requiredFields()) {
$("#dialog").dialog("open");
$( "#dialog" ).dialog({
resizable: false,
height:175,
modal: true,
position: {
my: "center top",
at: "center top",
of: window
},
buttons: {
"Yes": function() {
$( this ).dialog( "close" );
$('input[name="setAccess"]').val('1');
$("#myForm").attr("action", "submit.epl");
$( "form:myForm" ).submit();
$("#myForm").attr("action", "form.epl");
},
"No": function() {
$( this ).dialog( "close" );
$('input[name="setAccess"]').val('');
$("#myForm").attr("action", "submit.epl");
$( "form:myForm" ).submit();
$("#myForm").attr("action", "form.epl");
}
}
});
}
});
});

Here is Fiddle demo
I would suggest to change your workflow a bit... I would suggest to initialize modal dialog immediately on document ready event with autoOpen: false and later just use $("#dialog").dialog("open"); method to open it.

Open a modal window and redirect to a new page with one link

I would like to be able to open a jQuery UI Dialog and redirect to a new page onclick of a single link. Is there a way to do this?
Here is my dialog handler:
$.fx.speeds._default = 1000;
$(function() {
$( "#dialogDiv" ).dialog({position:['middle',60],
open: function(event, ui) {
jQuery('.ui-dialog-titlebar-close').removeClass("ui-dialog-titlebar-close").html('<span style="float:right;"><img src="../images/x.png" /></span>');
},
dialogClass: 'ui-widget-shadow',
modal: true,
autoOpen: false,
width: '950px',
close: function(ev, ui) {$(this).close();}
});
$( ".opener" ).click(function() {
$( "#dialogDiv" ).dialog( "open" );
return false;
});
$( ".btnDone" ).click(function(){
$('.ui-dialog-content').dialog( "close" );
})
});
And this is the link I am currently using (it opens the modal window fine, but doesn't redirect to the page):
View
<div style="display:none;" id="dialogDiv" title="Your custom page">
</p>Here is your new custom dashboard</p>
<br />
OK
</div>
So when the user clicks the "View" button, they will see the new page loaded in the background and the modal dialog on top of it. How do I adjust my code to make this work?

Try this out :- http://jsfiddle.net/adiioo7/tURMc/1/
You can probably use a iframe and show the pop up and iframe will load the href url. So, the popup will open up and the required page will open up in the iframe.
HTML Change:-
<iframe id="testiframe" height="400" width="400" border="0"></iframe>
JS Change:-
$(".opener").click(function () {
$("#dialogDiv").dialog("open");
$("#testiframe").attr("src",$(this).attr("href"));
return false;
});

How do I bind a close button with an open button using jQuery UI Dialog?

I am trying to create a wizard-like experience with 5 jQuery Dialog modals. I want to fire a new modal from the first one that opens the second, but closes the first. The same with third, the fourth, and the fifth.
I can open the modals nested inside the other modals just fine, but the previous one doesn't close when the next one opens. In the end, I have 5 windows open on top of each other.
Here is the code I am using to open two of the 5 modals(the rest will go in order using the same logic:
<script>
$(function() {
$( "#modal_1" ).dialog({position:['middle',60],
open: function(event, ui) {
dialogClass: 'ui-widget-shadow',
modal: true,
autoOpen: false,
width: '950px',
close: function(ev, ui) {$(this).close();}
});
$( ".modal_1open" ).click(function() {
$( "#modal_1" ).dialog( "open" );
return false;
});
$( ".btnNext" ).click(function(){
$('.ui-dialog-content').dialog( "close" );
})
});
</script>
<script>
$(function() {
$( "#modal_2" ).dialog({position:['middle',60],
open: function(event, ui) {
dialogClass: 'ui-widget-shadow',
modal: true,
autoOpen: false,
width: '950px',
close: function(ev, ui) {$(this).close();}
});
$( ".modal_2open" ).click(function() {
$( "#modal_2" ).dialog( "open" );
return false;
});
$( ".btnNext" ).click(function(){
$('.ui-dialog-content').dialog( "close" );
})
});
</script>
Here is an example of the html:
<a class="button btnNext">Continue</a> <!--this is the button inside the modal that is supposed to fire the next modal-->
<div style="display:none" id="modal_1" title="Login">
<!--#include file="modal_1.asp"-->
</div>
<div style="display:none;" id="modal_2" title="Page Two Title">
<!--#include file="modal_2.asp"-->
</div>
I think I can bind the close function with an opening of the next, but I don't know how. Any help??

I diet your code to clue and did some test.
IMO you had missassigned options.
close: is for event handler, not button.
Use buttons field for define buttons. when click close your dialog and open next one...
$(this).dialog("close");
$("#modal_2").dialog("open");
My simple version below:
$(function() {
$("#modal_1").dialog({
modal: true,
autoOpen: true,
buttons: [{text: "Next",click: function() {
$(this).dialog("close");
$("#modal_2").dialog("open");
}
}]
});
$("#modal_2").dialog({
modal: true,
autoOpen: false,
buttons: [{text: "Next",click: function() {
$(this).dialog("close");
$("#modal_1").dialog("open");
}}]
});
});
I tested it here:
http://jsfiddle.net/JmgKS/8/

closing jquery dialog from an iFrame

I have created a jquery dialog with an Iframe in it that's a form and I would like the dialog to close when the user hits cancel's or submits the form in the dialog...
$( "#dialog" ).dialog( "option", "title",["Create"] );
$( "#dialog" ).dialog( "open" );
$("#dialog-content").html("<iframe id='iframe_manage' width='825px' height='800px' class='popup_iframe' src='manage.php?PME_sys_operation=Add&pv=popup'></iframe>");
thoughts?
i tried something like this..
$("#iframe_manage").load(function () {
$('input[name=PME_sys_canceladd]').click(function() {
alert('Handler for .submit() called.');
//$('input[name=PME_sys_canceladd]').submit();
});
});
but doesn't seem to pick up the click event on the button..

I think you should be doing this
$("iframe").contents().find()
instead of just using $().
So maybe this would work:
$("#iframe_manage").load(function () {
$("#iframe_manage").contents().find('input[name=PME_sys_canceladd]').click(function() {
alert('Handler for .submit() called.');
//$('input[name=PME_sys_canceladd]').submit();
});
});