This is my first time working with jquery modals. I'm trying to display the popup only when the form is submitted. But instead, it's displaying on page load. How do I fix it?
<script>
$( function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height: "auto",
width: 400,
modal: true,
buttons: {
"Yes": function() {
$( this ).dialog( "close" );
},
"No": function() {
$( this ).dialog( "close" );
}
}
});
} );
</script>
<div id="dialog-confirm" title="Not so fast">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px
20px 0;"></span>Did you want to add a third for only $50? Click Yes to add</p>
</div>
<form id="orderform" action="/action_page.php">
Package 1:<br>
<input type="text" name="packageonename" value="">
<br>
Package 2:<br>
<input type="text" name="packagetwoname" value="">
<br><br>
<input type="submit" value="Submit">
</form>
In order to prevent the dialog from automatically opening you can set autoOpen property to false when initializing the dialog.
Then, on form's submit event, you could open the dialog by calling element.dialog("open").
Note that I have added an event.preventDefault() in the submit event handler to prevent the form from submitting.
$(function() {
$("#dialog-confirm").dialog({
resizable: false,
height: "auto",
width: 400,
modal: true,
autoOpen: false,
buttons: {
"Yes": function() {
$(this).dialog("close");
},
"No": function() {
$(this).dialog("close");
}
}
});
$("#orderform").on("submit", function(e) {
$("#dialog-confirm").dialog("open");
e.preventDefault();
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="dialog-confirm" title="Not so fast">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px
20px 0;"></span>Did you want to add a third for only $50? Click Yes to add</p>
</div>
<form id="orderform" action="/action_page.php">
Package 1:<br>
<input type="text" name="packageonename" value="">
<br> Package 2:<br>
<input type="text" name="packagetwoname" value="">
<br><br>
<input type="submit" value="Submit">
</form>
You can do like this
$('#orderform').submit(function() {
$("#dialog-confirm").dialog("open");
return true; // return false to cancel form action
});
Related
I have a jquery dialog that adds a name to a table as well as a delete button beside that name. I am trying to add the functionality that deletes that name if a user clicks the delete button. I can't seem to make it so that when a user clicks on the delete button, the deleteUser function is called... nothing happens when i click the delete button.
dialog = $("#add-dialog-form").dialog({
autoOpen: false,
height: 400,
width: 350,
modal: true,
buttons: {
"Add Ownertest": addUser,
Cancel: function () {
dialog.dialog("close");
}
},
close: function () {
addform[0].reset();
allFields.removeClass("ui-state-error");
}
});
deleteDialog = $("#delete-dialog-form").dialog({
autoOpen: false,
height: 400,
width: 350,
modal: true,
buttons: {
"Delete Owner": deleteUser,
Cancel: function () {
dialog.dialog("close");
}
},
close: function () {
deleteform[0].reset();
allFields.removeClass("ui-state-error");
}
});
These dialogs are called here:
addform = dialog.find("form#addUser").on("submit", function (event) {
event.preventDefault();
addUser();
});
deleteform = dialog.find("form#deleteUser").on("submit", function (event) {
event.preventDefault();
deleteUser();
});
$("#create-user").button().on("click", function () {
dialog.dialog("open");
});
$("#delete-user").button().on("click", function () {
deleteDialog.dialog("open");
});
HTML is below:
<div id="add-dialog-form" title="Add Owner">
<form id="addUser">
<fieldset>
<label for="owners">NameOne</label>
<input type="text" name="owners" id="owners" value="" class="text ui-widget-content ui-corner-all">
<!-- Allow form submission with keyboard without duplicating the dialog button -->
<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
</form>
</div>
<div id="delete-dialog-form" title="Add Owner">
<form id="deleteUser">
<fieldset>
<label for="owners">NameTwo</label>
<input type="text" name="owners" id="owners" value="" class="text ui-widget-content ui-corner-all">
<!-- Allow form submission with keyboard without duplicating the dialog button -->
<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
</form>
</div>
And the part of the addUser() function that adds the delete button in the table:
var tblRow = $("<tr>" +
"<td>" + name.val() + "<button id='delete-user' style='float:right' title='Delete' class='btn btn-danger btn-xs actionbutton'><span class='glyphicon glyphicon-remove'></span></button>" + "</td>" +
"</tr>");
tblRow.find('button#create-user').button().on('click', function () {
dialog.dialog("open"); // where dialog is instance of jq dialog, dialog = $( "#dialog-form" ).dialog({...})
});
I have a hidden div which has some content :
<div id="email_content_hidden">
<div id="email_form">
<label>De: <span>*</span></label>
<input type='email' id='email_from' placeholder='De' required="true"/>
<label>A: <span>*</span></label>
<input type='email' id='email_to' placeholder='Destinataire' required="true"/>
<label>Sujet: <span>*</span></label>
<input type='text' id='email_subject' placeholder='Sujet' required="true"/>
<label>Message:</label>
<textarea id='email_message' placeholder='Votre Message'></textarea>
<div class='email_submit'>Envoyer email</div><div id='email_returnmessage'></div>
</div>
</div>
Then I have a button which triggers a jsPanel :
$('#new_document').click (function () {
var content = $('#email_content_hidden').html();
$.jsPanel({
content: content,
position: "center",
theme: "success",
title: "Nouveau document/email",
size: { width: function(){ return $(window).width()*0.75 },
height: function(){ return $(window).height()*0.75 } },
toolbarFooter: "<i>Popup footer</i>",
});
});
As you can see I duplicate the code of the hidden div into my jsPanel.
The problem is that the click event which was assigned to does not fire :
$('.email_submit').click(function() {
console.log('submit email');
});
Any idea ?
You have to delegate the event, otherwise newly appended elements to the DOM won't have the event bound:
$(document).on('click', '.email_submit', function() {
console.log('submit email');
});
I need to print popup dialog box.I have tried several times,but I could get whole window with popup dialog box.I need to print only the dialog box. not the around content of the dialog box.
here is my code
view
<script type="text/javascript">
$(document).ready(function(){
$("#dialogbox").dialog({
autoOpen:false,
modal:true,
title: "NDB BANK",
width:950,
height:300,
open: function( event, ui ) {
}
});
$('#submit').click(function() {
$('#dialogbox').empty()
var $clone=$("#show").clone()
$('#dialogbox').append($clone)
$('#dialogbox').append("<input type='button' id='submit2' value='save' onclick='myFunction2()'></input>")
$('#dialogbox').append("<input type='button' id='print' value='print' onclick='printFunction()'></input>")
$("#dialogbox :input").prop("disabled", true);
$("#dialogbox #submit2").prop("disabled", false);
$("#dialogbox #print").prop("disabled", false);
$("#dialogbox #amount_in_words").val($('#amount_in_words').val());
$('#dialogbox').dialog('open');
});
})
</script>
<script>
function printFunction() {
window.print();
}
</script>
<div id="dialogbox" style="height: 200px ; width: 400px; background-color: #FFA375"> </div>
<div id="content">
<div id="show">
<form action="#" id="cheque_details" name="cheque_details" method="post">
<div id="nameDiv"><p id="namecont">name: <input type="text" id="name"/></p> </div>
<div id="dateDiv"><p id="date">Date: <input type="text" id="datepicker"/></p></div>
<div id="amountDiv"><p>Amount: <input type="text" id="amount" onkeyup="myFunction()" /></p></div>
<div id="letAmountDiv"><p>Amount In letters:<textarea id="amount_in_words" rows="3" cols="30"></textarea></p></div>
<p id="addresscont">address: <input type="text" id="address"/></p>
<p id="acccont">Account No: <input type="text" id="acc_no"/></p>
<p id="bank_name">Bank: <input type="text" id="bank"/></p>
</form>
</div>
I would like to do something like the window of favorites on google chrome so the idea is write a hiperlink and then the link appears on the page.I m using jquery but doesn't work
html:
<div id="Add" title="Add Link">
<form>
<fieldset>
<label for="dir">URL</label>
<input id="dir" type="url" class="text ui-widget-content ui-corner-all"/>
</fieldset>
</form>
<div id="cuadro"></div>
$(function(){
var a = $("#Add");
a.dialog({
autoOpen: false,
height:350,
width:250,
modal: true,
buttons: {
"Accept": function(){ //Accept
AddLink();
$( this ).dialog( "close" );
},
"Reset": function(){//Reset
dir.val(" ")
},
"Cancel": function() {//Cancel
$( this ).dialog("close");
}
},
close: function() {
$( this ).dialog( "close" );
}
});
});
function AddLink(){
var dir=$("#dir);
var link=dir.val();
alert(dir.val());
$("#cuadro").append('<li>link1</li>');
}
If you want to use your linkvariable as the href then you need to change
$("#cuadro").append('<li>link1</li>');
to
$("#cuadro").append('<li>link1</li>');
DEMO FIDDLE
I'm not sure exactly what you meant by "write a hiperlink and then the link appears on the page", so I'm going to do my best and guess that this is what you want:
User types a URL into the input box.
You display it in some div below it.
HTML
<form>
<fieldset>
<label for="dir">URL</label>
<input id="dir" type="url" class="text ui-widget-content ui-corner-all"/>
</fieldset>
</form>
<p></p>
CSS
p {
color: green;
margin: 8px;
}
JavaScript
$( "#dir" )
.keyup(function() {
var value = $( this ).val();
$( "p" ).text( value );
})
.keyup();
Ok - I have a modal dialog form using a jquery-ui modal dialog, and the dialog buttons are supposed to submit the form.
When the Add Utility button is clicked, the form.submit action is called, but neither the invalidHandler, submitHandler, or notNone methods are ever called. The form is also never submitted to the webservice, so its not like it is just skipping over the validation portion.
Any help to figure out why the validation isn't running would be greatly appreciated! Thanks!
Javascript:
$(document).ready(function () {
$.validator.addMethod('notNone',
function (value, element) { return (value != 'none');},
'Please select an option.');
$("#modal-form-addUtility").validate({
errorContainer: "#errorblock-div1, #errorblock-div2",
errorLabelContainer: "#errorblock-div2 ul",
wrapper: "li",
rules: {
utilitySelectComboBox: {
notNone: true
}
},
invalidHandler: submitHandler: function (form) {
alert("Invalid");
},
submitHandler: function (form) {
alert("Submitted");
}
});
$('#AddUtility').click(function () {
$("#AddUtilityDialog").dialog("open");
});
$("#AddUtilityDialog").dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Add Utility": function () { $("#modal-form-addUtility").submit(); },
Cancel: function () {
$("#modal-form-addUtility").resetForm();
$(this).dialog("close");
}
}
});
});
HTML Code:
<input type="button" id="AddUtility" name="AddUtility" value="Add"/>
<div id="AddUtilityDialog" class="ui-widget" title="Add New Utility">
<div class="ui-widget ui-helper-hidden" id="errorblock-div1">
<div class="ui-state-error ui-corner-all" style="padding: 0pt 0.7em;" id="errorblock-div2" style="display:none;">
<p><span class="ui-icon ui-icon-alert" style="float: left; margin-right: 0.3em;"></span>
<strong>Alert:</strong> Errors detected!</p>
<ul></ul>
</div>
</div>
<form action="/TextManager.svc/AddUtility" name="modal-form-addUtility" id="modal-form-addUtility" method="POST">
<fieldset>
<label>Select Utility </label>
<select id="utilitySelectComboBox">
<option value="none">Select one...</option>
<option value="5506">PEE DEE Electric - 5506</option>
<option value="5505">Mower County Electric - 5505</option>
</select>
</fieldset>
</form>
</div>