Develop Reference

Confirmation Dialog is not showing

I have never worked in jquery before. This is my first time. I need it for some confirmation dialog. I have write this to test it first before applying in my project. I have written this code. I want dialog box only if specified radio button is selected.
Main Problem: Show Confirmation Dialog if Specified Option in radio button is selected.
Jquery code:
(function($){
$.fn.checkLeave = function() {
return this.each(function(){
if($("input[name='second']").is(':checked')) {
alert("Second Radio Button is CLicked");
$.confirm({
text: "Are you sure to submit the form",
title: "Confirmation required",
confirm: function(button) {
$("form").submit();
},
cancel: function(button) {
// nothing to do
},
confirmButton: "Yes",
cancelButton: "No",
post: true,
confirmButtonClass: "btn-default",
cancelButtonClass: "btn-danger",
dialogClass: "modal-dialog modal-lg"
});
}
});
};
})( jQuery );
and HTML is:
<form action="dialogJquery.html" method="post">
<input type="text" name="username" placeholder="Username">
<input type="radio" id="first">
<input type="radio" name="second" checked="">
<input type="submit" value="Submit" id="submit" name="confirm"
onclick="$(this).checkLeave();"></button>
</form>
The above code shows the alert defined before dialog. but after that dialog is not shown. This is from where i am using Jquery Dialog Plugin. But through debugging when debugger reaches $.confirm and i click on step over then dialog is shown but when i resume script it again disappers.

The basic problem is that the form is being submitted because your code is doing nothing to stop it from being submitted. Accordingly, the dialog is being shown only for the duration of time it takes for the browser to submit the form and go to the specified page (dialogJquery.html).
Once someone who is a better programmer looks at this, they can likely come up with a better solution, but following is what I came up with that seems to work. I have added some IDs to elements and such--you should be able to follow that without further explanation. One thing I found is that if any of the elements has a name or ID of "submit" then the .submit() function will not work on the form.
In general, I handle the submit event for the form and preventDefault so that it doesn't submit. The confirm button sets submitConfirm to true and submits the form.
HTML
<form id="myForm" action="dialogJquery.html" method="post">
<input type="text" name="username" placeholder="Username">
<input type="radio" id="first">
<input type="radio" name="second" checked>
<input type="submit" value="Submit" id="btnSubmit" name="confirm">
</form>
Javascript
(function($) {
var submitConfirm = false;
$("#myForm").submit(function(event) {
if (!submitConfirm) {
event.preventDefault();
if ($("input[name='second']").is(':checked')) {
$.confirm({
text: "Are you sure to submit the form",
title: "Confirmation required",
confirm: function(button) {
submitConfirm = true;
$("#myForm").submit();
},
cancel: function(button) {
// nothing to do
},
confirmButton: "Yes",
cancelButton: "No",
post: true,
confirmButtonClass: "btn-default",
cancelButtonClass: "btn-danger",
dialogClass: "modal-dialog modal-lg"
});
}
}
});
})(jQuery);

submit form loaded on the bootstrap popover

I have dynamically created rows, on each rows i have a add button when user click on the add button then dynamically created form will be loaded on the bootstrap propover.
FIDDLE DEMO
my problem is :
why this code is NOT getting call?
Basically i am Submitting this form From bootstrap popover ?
...............
...............
console.log($("#"+formidd));// NOTE: i have accurate form id
$("#"+formidd).validate({
rules: {
sproject_name: {
minlength: 3,
maxlength: 15,
required: true
}, tooltip_options: {
sproject_name: {placement: 'center', html: true, trigger: 'focus'}
}
},
submitHandler: function(form) {
alert("form submit");
}
});
...............
...............
Any help will be highly appreciated.Please help me...
Form looks like this:(I want to validate It & submit it when user press ENTER)
My html data look like this:
<div id="project-div-id">
<ul style="padding: 0px 0 2px;margin-left: 0px;">
<li><span class="slilink"> tour </span>
<img class="del_btn" src="/images/icons/add.gif">
<form action="http://localhost/task/index.php/mypage" method="post" accept-charset="utf-8" name="160subproj" id="160subproj" style="display:none;">
<input type="text" value="1st">
<input class="red-tooltip" data-trigger="focus" placeholder="add sub project" name="project_name" type="text" >
</form>
</li>
<li><span class="slilink"> personal</span>
<img class="del_btn" src="/images/icons/add.gif">
<form action="http://localhost/task/index.php/mypage" method="post" accept-charset="utf-8" name="161subproj" id="161subproj" style="display:none;">
<input type="text" value="2st">
<input class="red-tooltip" data-trigger="focus" placeholder="add sub project" name="project_name" type="text" >
</form>
</li>
<li><span class="slilink"> business</span>
<img class="del_btn" src="/images/icons/add.gif">
<form action="http://localhost/task/index.php/mypage" method="post" accept-charset="utf-8" name="162subproj" id="162subproj" style="display:none;">
<input type="text" value="3rd form">
<input class="red-tooltip" data-trigger="focus" placeholder="add sub project" name="project_name" type="text" >
</form>
</li>
</div>
This is my FULL jquery code:
<script type="text/javascript">
$(document).ready(function() { var formidd='';
$('.add_btn').popover({
html: true,
title: function () {
formidd=$(this).parent().find('.projform_id').html();
return $(this).parent().find('.sub_proj_head').html();
},
content: function() {
return $(this).parent().find('.sub_proj_content').html();
}
});
$('.add_btn').click(function(e) {
console.log($("#"+formidd));//i have loaded form id
$("#"+formidd).validate({
rules: {
sproject_name: {
minlength: 3,
maxlength: 15,
required: true
}, tooltip_options: {
sproject_name: {placement: 'center', html: true, trigger: 'focus'}
}
},
submitHandler: function(form) {
alert("form submit");
}
});
$('.add_btn').not(this).popover('hide');
e.stopPropagation();
});
$(document).click(function(e) {
if (($('.popover').has(e.target).length == 0) || $(e.target).is('.close')) {
$('.add_btn').popover('hide');
}
});
});
</script>

I think I see what you're trying to do. The enter button will not work by default unless you have an <input type='submit' /> somewhere in the form.
Some hackery you can try is to place a submit button right after your input, give it a classname like "invisible", and set that class to remove all borders, margins, padding, etc... Warning, setting display:none will not work because some browsers effectively remove the element.
For example: jsfiddle
EDIT: I only got tour to work in the fiddle, but the idea is the same. There has to be a submit input inside the form.

Jquery UI dialog to check form

I have sat here and fiddled with multiple different examples and none work. What I am trying to do is take a form that has three buttons (save, cancel, and delete). The delete button needs to come up with a prompt asking if the user is sure. Here is the code i have so far... and have tried multiple examples... none are working for me.
<form id="templateEdit" method="post" action="/admin/template/{{ var temp }}/{{ var page }}">
<div class="control right"><input type="submit" name="save" value="submit" /><input type="submit" name="cancel" value="cancel" /><input type="submit" name="delete" id="delete" value="delete" /></div>
<textarea name="editor" class="ckeditor">{{ var contents }}</textarea>
</form>
The following code is in a document ready Jquery function:
$("#dialog-confirm").dialog({
resizable: false,
autoOpen: false,
modal: true,
buttons: {
"Yes": function () {
$('#templateEdit').off("submit").submit();
$(this).dialog("close");
},
"No": function () {
$(this).dialog("close");
}
}
});
$('#templateEdit').submit(function (event) {
event.preventDefault();
$('#dialog-confirm').dialog('open');
});
Edit: The no button does work, but yes button is now submitting, but no post data is getting sent with submit.
Update: So this is how I have fixed my issue completly:
$(document).ready(function(){
$("#dialog-confirm").dialog({
resizable: false,
autoOpen: false,
modal: true,
width: 500,
buttons: {
"Yes": function () {
$("#templateEdit").attr('action', "/admin/templates.php?temp={{ var temp }}&page={{ var page }}&action=delete");
$('#templateEdit').get(0).submit();
$(this).dialog("close");
},
"No": function () {
$(this).dialog("close");
}
}
});
$('#delete').click(function (event) {
$("#dialog-confirm").dialog("open");
event.preventDefault();
});
});

You have a spelling mistake in the selector temaplteEdit instead of templateEdit
You need to rename the button with name submit
<input type="submit" name="save" value="submit" />
then call
$('#templateEdit').get(0).submit();
Demo: Fiddle
or
$('#templateEdit').off('submit').submit();
Demo: Fiddle
Update:

transfer data from javascript popup multiline textbox to a select control

I am trying to transfer data from a multiline textbox to a select control.
The multiline textbox appears as a popup and I want all the records pasted in the textbox to be transferred to the select control once the user will click submit in the popup window.
Probably with jquery or javascript, or maybe something else. The page is built in MVC3 Razor.
Here is the code from the page:
The script for the popup control:
<script type="text/javascript">
$(function () {
$("a[id^=opener]").click(function () {
$("#dialog").dialog('destroy');
$("#dialog").attr("title", "Please paste your products")
.html("<p><textarea name=\"TextMessage\" rows=\"10\" cols=\"72\" /><br /><input type=\"submit\" value=\"Submit\" /></p>");
$("#dialog").dialog({
height: 420,
width: 650,
modal: true
});
});
});
</script>
The .cshtml page:
#using (Html.BeginForm("ASPXView", "Report", FormMethod.Post)) {
#Html.ValidationSummary(true, "Password change was unsuccessful. Please correct the errors and try again.")
<div>
#Html.Hidden("Id", Model.Report.Id)
<div id="accordion">
#{int i=0;}
#foreach (var item in Model.Parameters)
{
<h3>#Html.LabelFor(m => item.Name, item.Prompt)</h3>
<div>
<div class="editor-label">
Search #*Html.TextBox("Search")*#
<input id="#("Search" + item.Name)" type="text" name="q" data-autocomplete="#Url.Action("QuickSearch/" + item.Name, "Report")" />
</div>
<div class="editor-field">
<select multiple id="#("Select" +item.Name)" name="#("Select" +item.Name)"></select>
</div>
<div class="removed" style="clear:both; float:left; margin-left:440px;">
Remove selection
<a id= "opener#(i)" class="OpenDialogClass" href="#" >Open Dialog</a>
</div>
</div>
i++;
}
</div>
<p style="text-align: right">
<input type="submit" value="Generate Report" />
</p>
</div>
}
<div id="dialog" title="Basic dialog">
</div>
Screenshot from the page:
So the data which will be pasted in the popup textbox, I would like to have it in the select control once the submit button is clicked.
Any idea how I can do that?
Thanks in advance, Laziale

You could serialize the contents of the textarea and then do what you need to do with it (Post it to a controller or perhaps hand it off to the underlying page somewhere)
$('form').submit(function(e){
e.preventDefault();
e.stopPropagation();
var o = {};
$( $('textarea').val().split(/\n|\r/) ).each(function(i){
o[i] = this;
});
var jsonString = JSON.stringify(o);
// DO SOMETHING WITH JSON OBJECT HERE
});​
http://jsfiddle.net/vUH3a/

This will give you a start.
$("Button Selector").click(function(){
var SelectOptions= [];
$("list Selector").each(function () {
SelectOptions.push($(this).attr('id'));
});
SelectOptions.each(function () {
//build your mark up here and return
});
});

Get data from JQuery UI dialog to Java

I am trying to get data from dialog to Java. I have:
<FORM method="post" action="index.jsp" target="_self" name="myForm" id="myForm">
...
<div id="dialog">
<INPUT TYPE="text" NAME="name" VaLUE="enter name">
</div>
....
</FORM>
$(function() {
var saveDialogData = function() {
document.myForm.submit();
}
$( "#dialog" ).dialog({
modal: true,
buttons: { "Ok": function() { $(this).dialog("close"); saveDialogData(); } }
});
});
After submit I am checking name value and in request is missing.
Know anyone why? Or how can I get dialog data to Java?