I have the folloing textboxes located in a form:
<input type="text" id="duration" name="duration" readonly="readonly" style="width:0px"/>
<input type="text" id="renew" name="renew" readonly="readonly" style="width:0px"/>
<input type="text" id="accountAfter" name="accountAfter" readonly="readonly" style="width:0px"/>
On form post these text boxes will pass the data to the controller retrieved from the following dialog:
$('#fixed').dialog({
autoOpen: false,
width:600,
resizable: false,
title: 'Fixed Account Details',
modal: true,
buttons: {
"Close": function () {
$(this).dialog("close");
},
"OK": function () {
$('#duration').val($('#duration').val());
$('#renew').val($('#renew').is(':checked'));
$('#accountAfter').val($('#accountAfter').val());
$(this).dialog("close");
}
}
});
Is it possible hide these textboxes from the user whilst still passing data?
Change them to hidden input elements. For example:
<input type="hidden" id="duration" name="duration" />
I think the rest of your code can stay the same, although I'm not really sure what you're trying to accomplish here; you're just updating the the values to themselves.
$('#duration').val($('#duration').val());
$('#renew').val($('#renew').is(':checked'));
$('#accountAfter').val($('#accountAfter').val());
Related
I have a form with three inputs: Save, Delete, and Exit. When Delete is clicked, I pop a JQuery UI Dialog box to confirm that the user wants to delete that data. They have two buttons as options: Delete or Cancel. Cancel works fine and closes the Dialog box. If they click Delete, I wish to submit the original form and delete the data as if the Dialog box was not there, which is not working. I click it and nothing appears to happen.
I am attempting to submit the "update_purchase" form but simulate using the "delete_purchase" input to convey information. With the below code, once I click "Delete" on the Dialog box nothing happens; however, if I click "Cancel" to exit the dialog box and then click "Exit" on the original form, I find the entry has been deleted.
Thanks for any and all help.
<form method="post" id="update_purchase" enctype="multipart/form-data" action="{{ url }}">
...
<input type="Submit" name="save" value="Save">
<input type="Submit" name="delete_purchase" id="delete" value="Delete">
<input type="Submit" name="exit_edit" value="Exit">
// Confirm Delete dialog
$(function() {
$("#dialog").dialog({
autoOpen: false,
resizable: false,
height: 180,
modal: true,
buttons: {
"Delete": function() {
$("#update_purchase").submit( function(eventObj){
$('<input />').attr('type', 'hidden')
.attr('name', "delete_purchase")
.attr('value', "Delete")
.appendTo('#update_purchase');
$( this ).dialog( "close" );
return true;
});
},
"Cancel": function() {
$( this ).dialog( "close" );
}
}
});
$("#delete").click(function() {
$("#dialog").dialog("open");
return false;
});
});
I'm trying to create dynamic dialog, with one input field and with some texts. Problem is, that dialog remembers value of old input fields and is not updating them. I created JSfiddle example of my problem. If you click on <li> element than dialog will come up. There is one input field, that is changing content of <li> element and some pointless text. Problem comes if, when you change content of input field and save it, from this time is stopped being dynamic and become pure static field. I totally don't understand why. PS Sorry for my bad english
HTML
<div id="dialog" title="text">
<input type="text" id="xxx" value="test">Some text
</div>
<ul>
<li id="menu-item-1">one</li>
<li id="menu-item-2">two</li>
<li id="menu-item-3">three</li>
</ul>
JavaScript
$('li').click(function () {
$('#xxx').attr("value", $(this).text());
$("#dialog").dialog('open').data("opener", this.id);
});
$("#dialog").dialog({
autoOpen: false,
modal: true,
buttons: {
Save: function () {
$('#' + $("#dialog").data("opener")).text($("#xxx").val());
$(this).dialog('close');
},
Storno: function () {
$(this).dialog('close');
}
}
});
jsfiddle
Change the dialog to a <form>, then use its reset() method.
$('li').click(function() {
$('#xxx').attr("value", $(this).text());
$("#dialog").dialog('open').data("opener", this.id);
});
$("#dialog").dialog({
autoOpen: false,
modal: true,
buttons: {
Save: function() {
$('#' + $("#dialog").data("opener")).text($("#xxx").val());
$(this).dialog('close');
this.reset();
},
Storno: function() {
$(this).dialog('close');
this.reset();
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<form id="dialog" title="text">
<input type="text" id="xxx" value="test">Some text</form>
<ul>
<li id="menu-item-1">one</li>
<li id="menu-item-2">two</li>
<li id="menu-item-3">three</li>
</ul>
I think you can easily achieve what you want to achieve by setting the input value with the jquery val() method on the input.
Here is what i mean
Change this
$('#xxx').attr("value", $(this).text());
to this
$('#xxx').val($(this).text());
And here is a working jsfiddle http://jsfiddle.net/gzx3z6e5/
It is my first time using the plugin and .validate() method. Now I have a form and every time I click the submit button it runs with out doing the form validation. Here is my code:
<form class="form d" method="post" action="">
<input type="text" name="searchtitle" id="searchtitle" placeholder="Enter the textbook's title">
<input type="text" name="searchauthor" id="searchauthor" placeholder="Enter the textbook's author">
<input type="text" name="searchpublisher" id="searchpublisher" placeholder="Enter the textbook's Publisher">
<input type="text" name="searchedition" id="searchedition" placeholder="Enter the textbook's edition">
<select name="searchuniversity" id="searchuniversity"></select>
<select name="searchuniversitycampus" id="searchuniversitycampus" ></select>
<input type="submit" id ="searchsubmit" name="searchsubmit" value="Search">
</form>
I then have the following Javascript:
$(document).on('pageinit',"#searchpage",
//this funciton will carry out the things we need to do to carry out our search
function(e)
{
e.preventDefault();
$(".form.d").validate({
rules: {
name: {
required: true
},
email: {
required: true,
email: true
},
comments: {
required: true,
minlength: 5,
nourl: true
}
},
messages: {
name: "Required Field",
email: "Valid Email Required",
comments: "Required Field + No URL's"
}
});
$("#searchsubmit").click(
function(e)
{
//Do a lot of processing here
});
});
Like I said I'm very new to doing the forma validation and using the function.
Here is a jsFiddle of the problem. When you click on submit in the fiddle it alerts "hello" and then it does the validation. How to stop this from happening. i.e validate first 1st and then run the function?
Your whole problem is your click handler. The plugin already has callback functions built in that will capture the click event of the submit button. Use the submitHandler to fire a function when the form is valid. Use the invalidHandler to fire a function when the form is invalid.
You already have the submitHandler callback in your jsFiddle so I refactored your jsFiddle code as follows:
$(document).on('pageinit', function(){
$('#myform').validate({ // initialize the plugin
rules: {
field1: {
required: true
},
field2: {
required: true
}
},
submitHandler: function (form) {
alert("hello"); // stuff to do when form is valid
alert('valid form submitted'); // for demo
return false;
},
invalidHandler: function () {
// stuff to do when form is invalid
alert("invalid form"); // for demo
}
});
// remove click handler
// use the plugin's built-in callback functions instead
//$("#test").click(function(){alert("hello")});
});
DEMO: http://jsfiddle.net/BTwaP/1/
See documentation for all callback functions
EDIT:
As of jQuery Mobile version 1.4, the pageinit event has been deprecated and replaced with pagecreate.
Good Reference: https://stackoverflow.com/a/14469041/594235
I want to have two different Autocomplete boxes but both using the same AJAX method in the background.
Here is my script
$(document).ready(function () {
$("#SearchProject")
.each(function () {
var urlloc = "/Project/FindProjects";
$(this).autocomplete({
source: function (request, response) {
$.ajax({
url: urlloc, type: "POST", dataType: "json",
data: { searchString: request.term, maxResults: 10 },
success: function (data) {
response($.map(data, function (item) {
return { label: item.name, value: item.name, id: item.id }
}))
}
})
},
select: function (event, ui) {
$("[id$='ProjectID']").val(ui.item.id);
// alert(ui.item ? ("You picked '" + ui.item.label + "' with an ID of " + ui.item.id)
// : "Nothing selected, input was " + this.value);
}
});
});
});
I want my input fields on the form as below.
<input id="SearchProject" name="SearchProject" type="text" value="" /><input type="hidden" name="ProjectID" id="ProjectID" value="" />
<input id="SearchProject2" name="SearchProject" type="text" value="" /><input type="hidden" name="ProjectID" id="ProjectID2" value="" />
When autocomplete select is complete I want the corresponding hidden field to be updated.
How do i achieve this?
Two possibilities:
First (the one I prefer): extract your auto-complete setup into a method:
function configureAutocomplete(autoField, updatedField)
You call this method for as many auto-complete fields as you want, passing it two JQuery selectors: the selector for the auto-complete field, and the hidden update field.
The other way is to base the ID of the hidden field on that of the auto-complete field. This will let you use an each to attach behavior to the fields, but I think it' more trouble than it's worth.
Works fine with a text link to fire dialog - but lasts for about .5 second if triggered from an html form submit button. Sounds crazy! Yep, just cannot get it to work. Help!
$(document).ready(function() {
$('#rating-0').click(function() { $('#dialog').dialog('open'); }); $('#dialog').dialog({ autoOpen: false, height: 280, modal: true, resizable: false, buttons: { Continue: function() {
$(this).dialog('close'); // Submit Rating
}, 'Change Rating': function() {
$(this).dialog('close'); // Update Rating
} }
});
});
<form action="https://www.etc" id="rating-0">
<input type="hidden" name="cmd" value="_s-xclick" />
<input name="submit" type="image" src="https://www.paypal.com/en_GB/i/btn/btn_cart_LG.gif" />
</form>
<div id="dialog" title="Are you sure?">
<p>You've assigned the current celebrity a rating of 0…</p> <p>Perhaps you are just judging them on the terrible last movie…</p>
</div>
Add return false; to your submit or click handler to prevent the browser from submitting the form and reloading the page.
EDIT:
$(document).ready(function() {
$('#rating-0').submit(function() {
$('#dialog').dialog('open');
return false;
});
...
});