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>

Input text value not changing in jquery dialog

I am trying to change the value of an input text box that is inside a dialog based on a value selected by user in a select option in the previous form submitted by the user. I am able to get the value and I able to set the value to the text box inside the dialog at first. But when I re-submit the form with a different option selected and open the dialog again, the value doesn't get changed at first. It changes only when I open the dialog a second time.
Below is the code where the dialog is called and function that sets the value to the text box is called:
$("#displayOrderDetailsDiv").on('click','.shippedOrder',function() {
var dc = $("#DC").val();
var shipmentKey = $(this).closest('tr').find('td:first').text().trim();
$("#printLabelDialog").html("<form><fieldset><label for=\"ip\">Printer IP</label> <input type=\"text\" name=\"ip\" id=\"ipAddr\" class=\"text ui-widget-content ui-corner-all\" placeholder=\"IP address of printer(eg: 10.56.89.175)\"> <labelfor=\"stnid\">Station ID:</label> <input type=\"text\" name=\"stnid\" id=\"stnid\" class=\"text ui-widget-content ui-corner-all\" placeholder=\"station id in 3 digits(Eg: 002)\"></fieldset></form>");
setIPandStn(dc);
$( "#printLabelDialog" ).dialog( {
autoOpen: false,
height : 200,
width : 900,
modal: true,
buttons: [ {
text: "Print",
click: function() {
var ip = $("#ipAddr").val().trim();
if (!validateIp(ip)){
alert("Please enter a valid IP");
return false;
}
var stnid = $("#stnid").val().trim();
if ((stnid.length != 3) || (isNaN(stnid))){
alert("Please enter a valid station Id");
return false;
}
var ajax_load = "<img class='loading' src='loading.gif' alt='loading...' style='width: 35px; height: 35px; top: 50%; left: 50%; position:absolute;' />";
$( this ).html(ajax_load);
var options = {
buttons: {}
};
$("#printLabelDialog").dialog('option', options);
$( "#printLabelDialog" ).dialog( "option", "width", 150 );
$( "#printLabelDialog" ).dialog( "option", "height", 120 );
$.ajax({
url : 'printLabelTrackingNumber.jsp',
type : 'POST',
data : {
ipAddr : ip,
stationId : stnid,
sKey : shipmentKey
},
success : function(data) {
$( "#printLabelDialog" ).dialog( "option", "width", 400 );
$("#printLabelDialog").dialog('option', options);
$("#printLabelDialog").html(data);
},
error : function(err) {
alert(err.responseText);
},
close : function(e,ui){
$(this).dialog('destroy').remove();
}
});
}
} ]
});
$( "#printLabelDialog" ).dialog( "open" );
});
Below is the function to set the value to the dialog
function setIPandStn(dcVal){
if (dcVal == "02"){
$("#ipAddr").val("10.56.89.175");
$("#stnid").val("102");
}
else if (dcVal == "13"){
$("#ipAddr").val("10.56.111.48");
$("#stnid").val("101");
}
else if (dcVal == "12"){
$("#ipAddr").val("10.26.25.166");
$("#stnid").val("004");
}
}
As you see, I am trying to set the value of $("#ipAddr") with the function setIPandStn(). The dc value is changed when I submit the form, but the value inside the text box gets changed only if I open and close the dialog once and open it the second time.
Could someone please help me identify the problem?

At first glance, it looks like you submit the form via Ajax and then open up a new dialog box in the success function. However, you don't run the "setIPandStn(dc);" function again until you click on the dialog trigger again.
I suggest running setIPandStn(dc); again in the success function of your ajax call, after you opened the new dialog box.
[...]
success : function(data) {
$( "#printLabelDialog" ).dialog( "option", "width", 400 );
$("#printLabelDialog").dialog('option', options);
$("#printLabelDialog").html(data);
setIPandStn(dc);
},
[...]

An issue with jQuery dialog

Say I have the following link:
<a onclick="confirmDelete()" href="delete.do&xyz">Delete user</a>
and the following is the confirmDelete function:
function confirmDelete()
{
if(!confirm("delete user?"))
{
return false;
} else
{
return true;
}
}
Basically when click on link, it checks whether the user select ok or cancel and then perform based on it.
Problem: I have got hundreds of similar links on my platform and we decide to turn all the javascript alerts to jquery dialog.
I used the following to somehow override the alert:
$(function(){
window.confirm = function(message) {
$('#overrideAlert').text(message).dialog({
resizable: false,
modal: true,
buttons: {
"Ok": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
};
});
It works fine and the alert comes up as a jquery dialog but the issue is because of the fact that it is not possible to return something from a handler like dialog, I am not sure how to tell my button in the filed, that the user selected ok or cancel.
Basically I m not sure how to link them all together.
Please help

The issue is because of javascript asynchronous nature . As you are using jQuery . could try following method .
$('a[onclick="confirmDelete()"]')
.attr('onclick','')
.click( function(){
var anch = this,
message = "delete user?";
$('#overrideAlert').text(message).dialog({
resizable: false,
modal: true,
buttons: {
"Ok": function() {
$( this ).dialog( "close" );
alert( "window.location=" + anch.href );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
return false ;
});
I made jsfiddle http://jsfiddle.net/wB389/

Maybe like so:
"Ok": function() {
window.location=deleteURL;
$( this ).dialog( "close" );
},
It's probably a little more complicated that that since you use relative url's but you can get the current url using window.location.protocol + window.location.port + window.location. window.location.host + window.location.pathname

Generating button clicked event on Jquery Dialog on ENTER Press?

i have below function in my jsp which create and opens the dialog. There is textbox in this dalog. What i want is when i enter on this dialogue
CreateCustomer button should be licked
function createCustomerDialog(){
$("#createCustomerDialog").dialog( {
title : ""Create Customer,
buttons : {
'CreateCustomer' : function() {
},
'Cancel': function() {
$( this ).dialog( "close" );
}
}
});
$("#createCustomerDialog").dialog("open");
}
i tried this but dnot working
$('.ui-dialog-buttonpane > button:last').focus();

On dialog input's onKeyPress event check for a keycode == 13 (ENTER key), when this code is reached just click your button.
$("#yourInputId").keypress(function (e) {
if (e.keyCode == 13)
$("#yourButtonId").click();
});

May be you should use .click() method instead .focus() in this code:
$('.ui-dialog-buttonpane > button:last').focus();
And I think you should try button:first selector, because CreateCustomer button will first.
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Delete all items": function() {
$( this ).dialog( "close" );
alert('Delete all items clicked');
},
Cancel: function() {
$( this ).dialog( "close" );
alert('Cancel clicked');
}
}
});
And in browser console try this:
$('.ui-dialog-buttonpane button:first').click();

modal box change title and button names in runtime

I want to be able to change the title of my modal and the buttons on run time.
currently I have this
I have actions either approval or Deny
var recButton = actions =='approval' ? 'Approve' : 'Deny';
$("#dialog").dialog(
{
modal : true,
buttons : {
'update all' : function() {
// window.location.reload();
// $( this ).dialog( "close" );
//do something here
},
Cancel : function() {
$(this).dialog("close");
}
}
}); //dialog
});
I also tried to do this for button
$("#dialog").dialog(
{
modal : true,
buttons : {
recButton : function() { ...
but in modal it didn't translate well and just said recButton instead of the variable value. Also I need to change title too.
Update: got title working by simply title:

Hey Autolycus: try this man: working demo http://jsfiddle.net/C4A9b/10/
Please use firebug to check the element id / class:
$('.ui-dialog-title').html("HULK is awesome"); should do the trick.
Hope it helps :)
code
$(document).ready(function() {
$('#theLink').click(function(){
$( "#forgot-dialog" ).dialog( "open" );
});
$( "#forgot-dialog" ).dialog({
modal: true,
autoOpen: false,
height: 255,
width: 300,
buttons: {
"ChangeTitle": function() {
alert("Title before cahnge ==> " + $('.ui-dialog-title').html());
$('.ui-dialog-title').html("HULK is awesome");
// document.forms["forgotform"].submit();
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
});
});
OR
var formname = "form_name_here";
$("#ui-dialog-title-"+formname).innerHTML = "Hulk is awesome title";
Below Image show before and After.
Image before clicking changetitle button
After clicking change title