I work on the system where JQuery dialog is used as a main tool to display text/elements in dialog box. I need to display form with some elements that should be validated. I like to use HTML5 validation with pattern. In order to use that I need to trigger form submit. I'm wondering how that can be triggered with JQuery dialog Save/Submit button?
Here is example of my code:
$(".add").on('click', addRecord);
function addRecord() {
var form = $('<form name="frm_save" id="frm_save" autocomplete="off"></form>');
var subject = $('<div class="form-group"><label class="control-label" for="title">Title:</label><input type="text" class="form-control" name="frm_title" id="frm_title"></div>').attr({
pattern: "[a-zA-Z][A-Za-z '.,-:()]{0,50}$",
title: "Allowed charachters: A-Za-z .,-():",
maxlength: 50,
required: true,
placeholder: "Enter Title"
});
form.append(subject);
displayForm(form, 'Add Record');
}
function saveRecord() {
//Here I want to preventDefault() and run some checks before form gets submited.
console.log('Submit');
}
function displayForm(msg, msgTitle, minH, width) {
if (msgTitle == undefined) msgTitle = 'System Message';
if (minH == undefined) minH = 100;
if (width == undefined) width = 435;
if (!$("#message-dialog").length) $("<div id='message-dialog'></div>").appendTo("body");
$("#message-dialog").html(msg);
$("#message-dialog").dialog({
autoOpen: true,
title: msgTitle,
minHeight: minH,
width: width,
modal: true,
position: {
my: "center",
at: "center",
of: window
},
draggable: false,
buttons: [{
text: "Submit",
class: "btn btn-primary",
id: "btn_submit",
click: function() {
saveRecord(this);
}
},
{
text: "Close",
class: "btn btn-primary",
click: function() {
$(this).dialog("close");
}
}
]
});
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<button class="add">Add</button>
Simply having a <form> and form controls with the [required] attribute already covers basic validation (like an empty field). By adding constraints by [type] or [pattern] the constraint validation API will cover it 99% of the time. The following demo submits to a live test server, the iframe will display the server response. The input value is intentionally invalid so submit the form as is to test validation.
<form id='main' action='https://www.hashemian.com/tools/form-post-tester.php' method='post' target='response'>
<input id='test' name='test' type='email' value='byte2me.com' required><input type='submit'>
</form>
<iframe name='response'></iframe>
After trying to animate an element, when clicking on a button using this script:
$(document).ready(function()
{
$("#oone, #otwo, #othree, #ofour, #ofive, #osix, #oseven, #oeight, #onine, #oten, #otwelve, #otwenty, #othirteen, #ofourteen, #ofifteen, #osixteen, #loone, #lotwo, #lothree, #lofour, #lofive, #losix, #loseven, #loeight, #lonine, #laaten, #lotwelve, #lotwenty, #lothirteen, #lofourteen, #lofifteen, #losixteen").click(function()
{
// $(this).css('border', "solid 2px red");
// var divs = $("#div_one, #div_two, #div_three, #div_four, #div_five, #div_six, #div_seven, #div_eight, #div_nine, #dive_ten, #div_eleven, #div_twelve, #div_thirteen, #div_fourteen, #div_fifteen, #div_sixteen, #div_lone, #div_ltwo, #div_lthree, #div_lfour, #div_lfive, #div_lsix, #div_lseven, #div_leight, #div_lnine, #dive_lten, #div_leleven, #div_ltwelve, #div_lthirteen, #div_lfourteen, #div_lfifteen, #div_lsixteen");
// $(divs).siblings().slideToggle();
$(this).next().slideToggle();
$(this).siblings().slideToggle();
});
});
I've got some animation unwanted result. So I decided, instead of animating the next element of the clicked button, why I don't send the result into dialog bix using jQuery UI plugin. So I tried the following:
<script src="../include/jquery-1.12.1.min.js"></script>
<script src="../include/jquery-ui.min.js"></script>
<script src="../include/bootstrap.min.js" type="text/javascript"></script>
$(document).ready(function() {
$("#oone, #otwo, #othree, #ofour, #ofive, #osix, #oseven, #oeight, #onine, #oten, #otwelve, #otwenty, #othirteen, #ofourteen, #ofifteen, #osixteen, #loone, #lotwo, #lothree, #lofour, #lofive, #losix, #loseven, #loeight, #lonine, #laaten, #lotwelve, #lotwenty, #lothirteen, #lofourteen, #lofifteen, #losixteen").click(function() {
$(this).next().dialog({
autoOpen: false,
hide: "puff",
show: "slide",
width: 800,
modal: true
});
//$(this).dialog("open");
});
});
And here is the html code for only the first 2 buttons, because the cod is too long:
<div class="form-group col-md-12">
<input class="img1" type="image" style="width:60px;height:60px" src="../images/molar_left_t.png" id="oone" name="one" alt="button" />
<div id="div_one" class="collapse">3rd Molar:
<?php echo $resTeeth['one'] ?>
</div>
<input class="img1" type="image" style="width:60px;height:60px" src="../images/molar_left_t.png" id="otwo" name="two" alt="button" />
<div id="div_two" class="collapse">
<?php echo $resTeeth['two'] ?>
</div>
So I had this error:
jquery-1.12.1.min.js:2 Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method 'open'
How to fix this error, and is it possible to send the next() div element into dialog box using jQuery UI, or should I specify id for each div, and create a dialog script for each one of them ?
Your problem is, you're creating the dialog from the next div, but you're trying to open the dialog on the CURRENT div.
You can fix this pretty easy:
$(document).ready(function() {
$("#oone, #otwo, #othree, #ofour, #ofive, #osix, #oseven, #oeight, #onine, #oten, #otwelve, #otwenty, #othirteen, #ofourteen, #ofifteen, #osixteen, #loone, #lotwo, #lothree, #lofour, #lofive, #losix, #loseven, #loeight, #lonine, #laaten, #lotwelve, #lotwenty, #lothirteen, #lofourteen, #lofifteen, #losixteen").click(function() {
var dialog = $(this).next();
dialog.dialog({
autoOpen: false,
hide: "puff",
show: "slide",
width: 800,
modal: true
});
dialog.dialog("open");
});
});
I made the assumption you want the dialog to contain the contents of the next (following) div.
This would do that:
$(document).ready(function() {
var dialog = '<div class="mydialog" title="Basic dialog"><p class="dialogcontent">me</p></div>';
var newDiv = $(dialog);
newDiv.dialog({
autoOpen: false,
hide: "puff",
show: "slide",
modal: true,
buttons: {
Ok: function() {
$(this).dialog("close");
}
}
});
$(".form-group").on('click', ".img1", function() {
var me = $(this);
newDiv.find('.dialogcontent').html(me.next('.collapse').html())
newDiv.dialog("open");
});
});
Example in action: https://jsfiddle.net/89pyhsuj/
Got a form displaying data. When you click a form field a jQuery dialog opens to edit the value. But the dialog is getting lost behind the table. Not sure how to correct this.
Here is some code.
Table code
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover">
Link opening dialog
<td>Create Lab Job</td>
Dialog Div
<div id="dialog" title="" style="overflow: hidden;"></div>
JavaScript
function OpenDialog(urlAction) {
$('#dialog').dialog({
autoOpen: false,
width: 400,
resizable: false,
modal: true,
closeOnEscape: true,
draggable: true,
resizable: true,
title: "PTP Popup",
open: function (event, ui) {
$(this).load(urlAction);
},
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
});
$('#dialog').dialog('open');
}
And a screenshot of the issue
I was able to correct it by setting the z-index property on the .ui-dialog class to 1000 in my css files which is loaded after bootstraps. Effectively overwritting it.
.ui-dialog {z-index:1000;}
I have a view which renders a partial view and in this view there is a dialog box which contains a list of check boxes. This view is called Create.
The process flow of this page is:
1)The first time users opens this page, they upload a file by selecting the file and by hitting the upload button. The action method parses the file and returns the model and displays a set of dates in the dialog box in the form of a check box list.
2) From this dialog box they select/check dates and using the select button in the dialog box, A post request is made to a controller action which based on the selected checboxes calculates a few form fields and returns the partial view.
3)Once users are okay with the pre-populated fields returned they click save and record is saved.
Everything works fine on the Create page. In the edit page it seems to be a different story. When the page is loaded the first time, the list which was saved upon create, is present in the dialog box. However when they hit Select within the dialog box, the post to the action method receives this list as empty. I am not sure why it is null. Not sure what exactly I am doing wrong but the code for edit is as follows.
Thanks!!
THE JS FILE:
var RunDialog;
$(document).ready(function () {
$(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);
RunDialog = $("#runDatestreeview").dialog({ closeOnEscape: true, stack: false, autoOpen: false,
modal: false, resizable: true, draggable: true, title: 'Select Run Dates to Auto-Populate Form Fields:',
width: 600, height: 500, position: 'center',
buttons: { Select: function () {
$.post("/RunLogEntry/LogFileConfirmation",
$("#form").serialize(),
function (data) {
$("#runDatestreeview").remove();
$("#testExceptiontreeview").remove();
$("#main").html(data);
$(RunDialog).dialog("close");
}, "html");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
RunDialog.closest("div.ui-dialog").appendTo("#form");
$('#RunDatesChildDialogLink').click(function () {
$(RunDialog).dialog("open");
});
//Region Auto-Open Modal Box
var modalOpen = $("#LogModals").val();
if (modalOpen == "0") {
$("#runDatestreeview").dialog({ autoOpen: true });
}
//End Auto Open Modab Box Regiom
});
EDIT VIEW
#model RunLog.Domain.Entities.RunLogEntry
#{
ViewBag.Title = "Update";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/runLogEntry.js")" type="text/javascript"></script>
<script type="text/javascript">
var runlogListErrorsUrl = '#Url.Action("ListErrorCodes", "RunLogEntry")';
</script>
#using (Html.BeginForm("Edit", "RunLogEntry", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<div id="main">
#Html.Partial("_RunLogEntryPartialViewEdit", Model)
</div>
}
<script src="#Url.Content("~/Scripts/exitCode.js")" type="text/javascript"></script>
Partial View for Edit I am not posting the entire model for the sake of readability. The Dialog div is called runDAtestreeview.
#model RunLog.Domain.Entities.RunLogEntry
<script src="#Url.Content("~/Scripts/runDates.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/testexception.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.blockUI.js")" type="text/javascript"></script>
#Html.ValidationSummary(true)
<div class="bodyContent">
#if (Model.RunDatesDisplay != null && Model.RunDatesDisplay.Count() > 0)
{
<span class="leftContent">
#Html.Label("Run Dates")
</span><span class="rightContent"><span id="RunDatesChildDialogLink" class="treeViewLink">
Click here to Select/View Run Dates</span>
<br />
<span id="RunDatesDisplayy" style="cursor: pointer; text-decoration: underline;">
</span></span>
}
</div>
<div id="runDatestreeview" title="Dialog Title" style="font-size: 10px; font-weight: normal;
overflow: scroll; width: 400px; height: 450px; display: none;">
<table class="grid" style="width: 600px; margin: 3px 3px 3px 3px;">
<thead>
<tr>
<th>
Run Dates:
</th>
<th>
Minimum Replicate:
</th>
</tr>
</thead>
<tbody>
#Html.EditorFor(x => x.RunDatesDisplay)
</tbody>
</table>
</div>
Ok this seems to trivial but changing the form to the following by including "id = form" made it work. Looks like Earlier when I was clicking the select button, the form was null.
#using (Html.BeginForm("Create", "RunLogEntry", FormMethod.Post, new { id = "form", enctype = "multipart/form-data" }))
{
I have a jQuery Modal dialog with an iframe in it, the iframe includes a form. When a user submits the form, I would like to close down the modal dialog.
How can I do that?
jquery modal script on index.php:
<script type="text/javascript">
function showRegDialog(url) {
$(function() {
var $this = $(this);
var horizontalPadding = 30;
var verticalPadding = 30;
$('<iframe id="externalSite" scrolling="no" frameborder="0" class="externalSite" src="' + url + '" />').dialog({
title: ($this.attr('title')) ? $this.attr('title') : 'Choose your location',
autoOpen: true,
width: 700,
height: 700,
modal: true,
resizable: true,
autoResize: true,
overlay: {
opacity: 0.5,
background: "black"
}
}).width(700 - horizontalPadding).height(700 - verticalPadding);
});
}
</script>
link on index.php to call showRegDialog modal:
Register now
This is the content of the register.php
<html>
<body>
<form action="" method="POST">
<input type="text">
<input type="submit">
</form>
</body>
</html>
Call javascript function in parent window like this:
parent.yourJsFunction();
put it in "onsubmit" in your form.
You might be looking for close
Give your form an id.
$("#formID").submit(function(){
parent.closeModal();
});
// function for closing modal window (in parent page)
function closeModal() {
$("#externalSite").dialog("close");
}