Develop Reference

Stop execution of code in JQuery Dialog like Jquery Confirm

Html Select Tag
<select name="testSelect" id="testSelect" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
Jquery code :-
(function () {
var previous;
$("#testSelect").on('focus', function () {
previous = $(this).val();
}).change(function() {
var r = confirm("If you change display type, default value fields will get reset !");
if (r === true) {
previous = $(this).val();
}
else {
console.log(previous);
$(this).val(previous);
}
});
})();
I am using this code to restore the previous selected value if I press No..and its working fine when I use Jquery confirm. Here Jquery confirm stops the execution when I change any value and unless I press Yes or no.
But Now I want to remove Confirm box and Want to use Jquery Dialog box for confirmation. Like this :-
$( function() {
var previous;
$("#testSelect").on('focus', function () {
previous = $(this).val();
}).change(function(event) {
var that = this;
$( "#dialog-confirm" ).dialog({
resizable: false, height: "auto", width: 400, async: false, modal: true,
buttons: {
Yes: function() {
console.log($(that).val());
previous = $(that).val();
$( this ).dialog( "close" );
},
No: function() {
$(that).val(previous);
$( this ).dialog( "close" );
}
}
});
})
} );
But here the problem is .. code gets executed even there is Dialog confirm popup. It doesnot stop like the Jquery confirm box does. I tried many stuff but not working, can anyone please help?
Remember: Everything was working fine in JQuery confirm....but not working in Jquery Dialog...

You need your code in the jQuery document ready state, so that It will get invoke only when the page is completed load and will bind your events to #testSelect.
$( document ).ready(function() {
var previous;
$("#testSelect").on('focus', function () {
previous = $(this).val();
}).change(function(event) {
var that = this;
$( "#dialog-confirm" ).dialog({
resizable: false, height: "auto", width: 400, async: false, modal: true,
buttons: {
Yes: function() {
console.log($(that).val());
previous = $(that).val();
$( this ).dialog( "close" );
},
No: function() {
$(that).val(previous);
$( this ).dialog( "close" );
}
}
});
})
});

Disable a submit input from submitting a form jquery

I am implementing a password manager like chrome extension, which detect the password field and try to intercept the submit function. What I would like is:
User click "login" in a website (say Facebook). The extension content script detect the value of password and username
Ask if the user would like to store the login credentials in the manager
If yes, store the credentials.
The problem is in step 2, I was trying to prevent it from submitting until the dialog returns user action, just like any other browser built-in password manager. But apparently the preventDefault() does not work because the webpage keeps refreshing just like calling curSubmit[0].click(), which would make the dialog keep reappearing.
Is there any idea what is wrong? Part of my code is:
var inputs = document.getElementsByTagName("input");
for (var i=0; i<inputs.length; i++) {
if (inputs[i].type.toLowerCase() === "password") {
var curSubmit = $("input[type=submit]",inputs[i].closest('form'));
curSubmit[0].click(function(event){
event.preventDefault();
});
curSubmit[0].onclick = function(){
$('body').append('<div id="store-dialog" title="Store password?"><p>Do you want to store the login credentials?</p></div>');
var buttons = $( ".store-dialog" ).dialog( "option", "buttons" );
$( "#store-dialog" ).dialog({
resizable: false,
height: "auto",
position: { my: "center", at: "center", of: window },
modal: true,
buttons: {
"Yes": function() {
$( this ).dialog( "close" );
},
"Not this time": function() {
$( this ).dialog( "close" );
},
"Never": function() {
$( this ).dialog( "close" );
}
}
});
}
}
break;
}

The syntax you're using for the click handler is invalid because curSubmit[0] is not a jQuery object but a standard DOM element.
These are correct:
curSubmit[0].onclick = function(e) { ...... };
curSubmit[0].addEventListener("click", function(e) { ...... });
As for stopping try the entire artillery for both click and submit events:
event.preventDefault();
event.stopPropagation();
event.stopImmediatePropagation();

Issue with code running regardless

I have a html button
<input class="showOptions" type="button" style="width:100%" value="<%= (PRCDMU) %>" onclick="programSelector(this.value)" />
That calls some JavaScript
function programSelector(value){
var origin = document.getElementById('origin').value();
if(origin === ""){
$( "#popup" ).dialog( "open" );
}
if(origin === "Product Specification"){
url = 'http://brmappsvr:7018/Enquiries/CMENPROC.rpgle?ProductCode=' + value;
window.location.href = url;
}elseif(origin === "Future Requirements Forecast")
url = 'http://brmappsvr:7018/Enquiries/CMENPRF.rpgle?ProductCode=' + value;
window.location.href = url;
}
However a part of this process is a pop up in Jquery.
$(".showOptions").click(function(){
var $self = this.value;
$( "#popup" ).dialog({
modal: true,
width: 465,
draggable: true,
buttons: {
"Product Specification": function() {
window.location.href = 'http://brmappsvr:7018/Enquiries/CMENPROC.rpgle?ProductCode=' + $self;
$( this ).dialog( "close" );
},
"Future Requirements Forecast": function() { //cancel
window.location.href = 'http://brmappsvr:7018/Enquiries/CMENPRF.rpgle?ProductCode=' + $self;
$( this ).dialog( "close" );
}
}
});
});
The issue I have is that the popup is appearing regarless, whereas It is only meant to appear depending on the contents of the origin variable, if it's empty the pop up should work
EDIT:
origin is displayed on a html page.
<div align="left">Please click on the<strong> Product Code</strong>, to use it within the <div class="style1" id="origin"><%= (origin) %> program. </div></div>

Syntax Error in .value()
It should be
var origin = document.getElementById('origin').value;
Instead Of
var origin = document.getElementById('origin').value();

You have attached both onclick and click events on the same button:
take out this code from click event and add autoOpen to false;
$( "#popup" ).dialog({
autoOpen: false,
modal: true,
width: 465,
draggable: true,
buttons: {
"Product Specification": function() {
window.location.href = 'http://brmappsvr:7018/Enquiries/CMENPROC.rpgle?ProductCode=' + $self;
$( this ).dialog( "close" );
},
"Future Requirements Forecast": function() { //cancel
window.location.href = 'http://brmappsvr:7018/Enquiries/CMENPRF.rpgle?ProductCode=' + $self;
$( this ).dialog( "close" );
}
}
});
$(".showOptions").click(function(){
//based on the value open the dialog.
}
and remove this onclick="programSelector(this.value)"

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

Set value for dynamically created form elements in dynamic JQuery UI dialog using JQuery

I'm trying to read data from a service (returns JSON object) and create an editable form in a dynamic JQuery UI dialog so the end user can use it to make changes and submit. The trouble is, when I get data from the server, I can't seem to set the data in the form. If I don't use a dialog, then everything works.
I created an associated JSFiddle in case it helps.
var dialog_box = $('<div></div>');
var animal = { kind : "Cat", has_whiskers : true };
var s = $('<select />', {
"id":"s1"
}).append(
$('<option />',
{
value:"Dog",
text:"Dog"
}
),
$('<option />',
{
value:"Cat",
text:"Cat"
}
),
$('<option />',
{
value:"Bird",
text:"Bird"
}
)
);
s.appendTo(dialog_box);
// doesn't work
$('#s1 option:[value="'+ animal.kind +'"]').prop('selected', true);
var new_div = $('<div/>').html('<input type="checkbox" id="has_whiskers_checkbox" />');
new_div.appendTo(dialog_box);
(animal.has_whiskers) ? $("#has_whiskers_checkbox").prop("checked", true) : $("#has_whiskers_checkbox").prop("checked", false);
dialog_box.dialog({
autoOpen: false,
modal: true,
buttons: {
"OK": function() {
console.log("OK Pressed");
$( this ).dialog( "close" );
$( this ).remove();
}
}
}).dialog('open');

$('#s1 option:[value="'+ animal.kind +'"]', dialog_box).prop('selected', true);
Example