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({...})
});
Related
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
});
Somehow this code doesn't work properly.
All Buttons are shown, only the "Generate" Button hides after the sucessful link generation. On the same site I have another dialog, implement the same way, which is working fine.
$("#guest-link-dialog").dialog({
autoOpen: false,
resizable: false,
height: 300,
width: 510,
modal: true,
draggable: false,
closeOnEscape: false,
open: function() {
$("#closeButton").hide();
},
buttons: [{
id: 'generateButton',
text: 'Generieren',
click: function() {
$('#generatedlink').html('<img src="<?php echo Yii::app()->request->baseUrl; ?>/images/icons/32x32/loading.gif" alt="loading" style="padding-left:215px;padding-top:40px;" />');
$.getJSON('<?php echo Yii::app()->request->baseUrl; ?>/index.php?r=ajax/guestlink&fileid=' + $(this).data('fileid') + '&count=' + $('#inputcount').val())
.done(function(json) {
if (json.status == "SUCESS") {
$('#generatedlink').html('<a href="' + json.url + '" >' + json.url + '</a>');
$('#generateButton').hide();
$('#cancelButton').hide();
$('#closeButton').show();
} else if (json.status == "ERROR") {
$("#message").css('color', 'red');
}
$("#message").text(json.message);
})
.fail(function(json) {
$("#message").css('color', 'red');
$("#message").text('Fehler');
});
}
}, {
id: 'closeButton',
text: 'Schliessen',
click: function() {
$(this).dialog('close');
}
}, {
id: 'cancelButton',
text: 'Abbrechen',
click: function() {
$(this).dialog("close");
}
}],
close: function() {
$("#message").css('color', '');
$('#generatedlink').html('');
$('#generateButton').show();
$('#cancelButton').show();
$('#closeButton').hide();
}
});
Edit:
<div id="guest-link-dialog" title="Gast Link erstellen">
<form>
<fieldset style="border:1;">
<label for="count">Anzahl mögliche Downloads</label>
<input type="text" name="count" id="inputcount" class="text ui-widget-content ui-corner-all" size="1" value="1" maxlength="1" />
</fieldset>
</form>
<div id="generatedlink" style="width:100%"></div>
</div>
The problem was, the Button IDs were already used by the other Dialog.
Giving them other IDs solves the problem.
I am using Grails 3.1.9 as the platform, my problem is that when the button Add Item has not been clicked, I can see the contents of the dialog box at the bottom of the page, and when the button is clicked, the contents disappear from the bottom. How do I prevent this from happening? Any help you can provide will be greatly appreciated.
Before Clicking Add Item Button
After Clicking Add Item Button
show.gsp Code is:
<div id="dialogEntry" title="Item Entry">
<fieldset class="form">
<form id="entryForm" action="" method="post" ><input type="hidden" name="_method" value="PUT" id="_method" />
<input type="hidden" name="invoice.id" value="${invoice.id}" />
<div class="fieldcontain required">
<label for="product">
<g:message code="orderItem.product.label" default="Product" />
<span class="required-indicator">*</span>
</label>
<input type="text" name="product" value="" required="" id="product" />
<input type="hidden" id="prodid" value="" />
<div class="fieldcontain">
<label for="quantityInStock">
Quantity in Stock
</label>
<input type="text" id="quantityInStock" value="" readonly="true" />
</div>
</div>
<div class='fieldcontain required'>
<label for='quantity'>Quantity
<span class='required-indicator'>*</span>
</label><input type="number" name="quantity" value="1" required="" min="1" id="quantity" />
</div>
<div class='fieldcontain required'>
<label for='price'>Price
<span class='required-indicator'>*</span>
</label><input type="number" name="price" value="" required="" step="0.01" min="1.00" id="price" />
</div>
<div class="fieldcontain">
<label for="totalAmount">
Total Amount
</label>
<input type="null" name="totalAmount" value="" id="totalAmount" />
</div>
</form>
</fieldset>
</div>
<script>
var editId;
document.getElementById("add").onclick = function() {myFunction()};
function myFunction() {
document.getElementById("add").innerHTML =
$( "#dialogEntry" ).dialog({
autoOpen: true,
modal: true,
width: 500,
buttons: [
{
text: "Save",
click: function() {
var quantity = $('#quantity')[0].value;
var quantityInStock = $('#quantityInStock')[0].value;
if (quantity.length == 0) {
alert('Quantity is required');
$('#quantity')[0].focus();
return;
}
if (parseInt(quantity) > parseInt(quantityInStock)) {
alert('Quantity cannot be served as Quantity in Stock is just ' + quantityInStock);
$('#quantity')[0].focus();
return;
}
$( this ).dialog( "close" );
var price = $('#price')[0].value;
var prodid = $("#prodid")[0].value;
// submit to server
//var form = $('#entryForm')[0];
if (editId != 0) {
$.ajax({
type: "POST",
url: "${resource(dir:'orderItem/updatex')}/" + editId,
data: {'productid':prodid, 'quantity':quantity, 'price':price},
async: true,
cache: false,
success: function (result) {
//alert('OK ' + result.success.message)
update(editId)
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus + " " + errorThrown);
}
});
} else {
$.ajax({
type: "POST",
url: "${resource(dir:'orderItem/savex')}/" + editId,
data: {'productid':prodid, 'quantity':quantity, 'price':price, 'invoiceid':${invoice.id}},
async: true,
cache: false,
success: function (result) {
var id = result.success.id
//alert('OK ' + id)
update(id)
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus + " " + errorThrown);
}
});
}
}
},
{
text: "Cancel",
click: function() {
$( this ).dialog( "close" );
}
}
]
});
}
</script>
<div id="dialogEntry" title="Item Entry">
Change this to:
<div id="dialogEntry" title="Item Entry" style="display:none;">
Change this:
document.getElementById("add").innerHTML =
$( "#dialogEntry" ).dialog({
to
document.getElementById("add").innerHTML =
$( "#dialogEntry" ).show().dialog({
Change this to:
text: "Cancel",
click: function() {
$( this ).dialog( "close" ).hide();
}
I'm trying to submit a form, once the user has accepted they want to continue via the jQuery UI Dialog.
<form method="POST" action="url" onsubmit="return APP.dom.confirm(this);">
<button type="submit" class="btn btn-sm btn-danger"><i class="fa fa-trash"></i></button>
</form>
My APP.dom.confirm method looks like:
confirm: function(form) {
$("#dialog-confirm").dialog({
modal: true,
buttons: {
"Confirm": function() {
$(form).submit();
},
"Cancel": function() {
$(this).dialog("close" );
}
}
});
return false;
}
This works, however when they click confirm I'd like the form to get submitted.
$(form).submit();
That doesn't work. Logging it out I get the above HTML back. I've tried variations of, to no avail:
$(form).clostest('form').submit();
How do I submit this?
Change
$(form).submit();
to
form.submit();
When you call submit on a jQuery object, it calls your submit handler again. Calling it directly on the DOM element does not.
Example (interestingly, Stack Snippets won't let me submit a form, not even with target="_blank"):
var nesting = 0;
function submitHandler(form) {
var which = $(form).find("input[type=radio]:checked").val();
++nesting;
if (nesting > 5) {
snippet.log("Nested to 5, gave up");
} else {
if (which === "jQuery") {
snippet.log("Calling via jQuery, nesting = " + nesting);
$(form).submit();
} else {
snippet.log("Calling via DOM, nesting = " + nesting);
form.submit();
}
}
--nesting;
return false;
}
<form id="the-form"
onsubmit="return submitHandler(this);"
action="http://www.google.com/search"
target="_blank"
method="GET">
<input type="text" name="q" value="kittens">
<div>
<label>
<input type="radio" name="opts" value="jQuery"> Submit with jQuery
</label>
</div>
<div>
<label>
<input type="radio" name="opts" value="DOM"> Submit with DOM
</label>
</div>
<button>Submit</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
confirm: function() {
var that = this;
$("#dialog-confirm").dialog({
modal: true,
buttons: {
"Confirm": function() {
$(that).submit();
},
"Cancel": function() {
$(this).dialog("close" );
}
}
});
}
Replace onsubmit="return APP.dom.confirm(this);" by
$('form').on('submit', APP.dom.confirm);
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>