Should I use JQuery dialog to display/submit form elements? - javascript

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>

Related

Sending the next element of the clicked button into jQuery UI dialog box

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/

Spectrum color picker: the original input field is showing

I'm using the following code:
<script src="/js/spectrum.js" type="text/javascript"></script>
<link rel="stylesheet" href="/css/spectrum.css" />
<script type="text/javascript">
jQuery(function() {
var opts = {
showInput: true,
className: "full-spectrum",
showInitial: true,
showPalette: true,
showSelectionPalette: true,
maxSelectionSize: 20,
preferredFormat: "hex"
};
jQuery( '#driverColor' ).spectrum( opts );
} );
</script>
...
<input type="text" name="driverColor" value="#ff0000" id="driverColor" />
when I hit the color picker, the original input field is also appearing:
How can I fix it?
TIA
This may be a little late but, in an older rails app (2.3.4), I was able to force the original input field to not show up by adding width, height, border and padding to the style of the input eg:
<input id="your_id" name="your_field_name" type="text" style="width:0;height:0;padding:0;border:0;">

DateBox Jquery mobile extension

I was trying to make a extension of datebox were I first needed to select the date and then click "Choose date".
All works, well almost. When I click the "Choose date" button the content behind the modal window get clicked, and in my case it is a search button.
Anyone know why?
if (o.useSelectDateButton) {
$('Välj datum')
.appendTo(hRow).buttonMarkup({ theme: o.theme, icon: 'check', modal: true, iconpos: 'left', corners: true, shadow: true })
.on(o.clickEvent, function(e) {
if ($(this).jqmData('enabled')) {
w.theDate.set(2, 1).set(1, $(this).jqmData('month')).set(2, $(this).jqmData('date'));
w.d.input.trigger('datebox', { 'method': 'set', 'value': w._formatter(w.__fmt(), w.theDate), 'date': w.theDate });
}
if (w.theDate == new Date()) {
w.theDate.set(2, 1).set(1, $(this).jqmData('month')).set(2, $(this).jqmData('date'));
w.d.input.trigger('datebox', { 'method': 'set', 'value': w._formatter(w.__fmt(), w.theDate), 'date': w.theDate });
}
w.d.input.trigger('datebox', { 'method': 'close' });
});
}
I call the datebox like this:
<input name="datepicker" id="datepicker" type="date" data-role="datebox" data-options='{"mode": "calbox", "calShowWeek": true, "overrideCalStartDay": 1, "useModal": true, "useAltIcon": true, "afterToday": true, "useFocus": true }'>
Added a JsFiddle
Click for fiddle
The problem is that i cant recreate the problem in the browser, it only happens in a mobile device.
can you make fiddle with this?which jquery libraries you use for this?
An another option / alternative:
Take at look at this
its a very simple datetimepicker which jquery libraries and it is very simple to put this to work.
head tag:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
body tag:
<p>Date: <input type="text" id="datepicker" /></p>

jQuery Dialog with nested form

I have a jQuery dialog with a nested form inside of it. The form contains an input box and a submit button. When the dialog pops up I want the user to only be able to fill it out, and nothing else on the page. My css for that is done here:
.ui-widget-overlay
{
height: 1339px !important;
width: 595px !important;
}
This works in allowing the user not to do anything else on the page, but the problem is that the input field is also disabled.
Any suggestions?
Edit: Here is how I make the dialog
function dialog(left, top) {
//Creates a new dialog
$('#dialog').dialog({
position: [left, top],
height: 90,
width: 200,
resizable: false,
modal: true,
title: '<span class="ui-icon ui-icon-home"></span> Enter Info',
});
}
Here is the form I use for the dialog:
<!-- Store Location Dialog -->
<div id = "dialog">
<form id = "info" method = "post" action = "Default.aspx" \>
<input type = "text" id = "changeDialogText" name = "changeLocation" /> <!-- THIS IS DISABLED -->
<input type = "button" id = "changeDialogSubmit" value = "" onclick = "function()"/>
</form>
</div>
I figured out the issue. I had the z-index of my form lower then the z-index of the page. This caused issues with the dialog because it was unsure if the input was in the dialog or on page
The above does not provide a literal answer that is correct. z-Index auto does not cut it.
title: 'Quantity 1',
autoOpen: false,
show: 'slide',
hide: 'explode',
resizable: true,
stack: true,
height: "200",
width: "790",
zIndex: "auto",
modal: true

jQuery iframe modal close on form submit

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");
}

Categories