I got this select tag in my form, which contains the name of a room
<select class = 'form-control' id = 'room_select' name = 'room'>".$rooms."</select>
I got 4 rooms so this select contains 4 options
$(document).ready(function(){
$("select").msDropDown();
$("#room_select").change(function(e){
e.preventDefault();
$("#room_select_form").submit();
});
$("#room_select option[value='<?php echo $room; ?>']").attr('selected', 'selected');
});
Then I got this doc ready function first one .msDropDown(); is to be able to get images in the options. Then I got the change function which I googled around and put in a preventdDefault to not refresh page, (still refresh) I thought that I could use an ajax funciton to do this but I dont really know how to write it down or even if it works.
So currently the problem is that my function changes the room value as seen last in the code, but it refreshes the select tag and I see room nr 1 again,
Your page is getting refreshed, because you are submitting the form in onchange listener. You need to put e.preventDefault(); in your form submit listener to prevent default form submit and then you can call ajax in you submit listener.
$(document).ready(function(){
$("select").msDropDown();
$("#room_select").change(function(e){
$("#room_select_form").submit();
});
$("#room_select option[value='<?php echo $room; ?>']").attr('selected', 'selected');
$("#room_select_form").submit(function(e){
e.preventDefault(); // to prevent page refresh
// your Ajax call goes here....
});
});
Related
In a particular form I have a div with 5 checkboxes and I like to preselected all 5 on first load (or when the form has not been submitted).
I thought this was ok, but when I uncheck 2 boxes and I submit the form which reload the same page, all 5 boxes are checked again. And not just the selected ones.
I am using a simple PHP ternary to check which div-view box is selected and this works if I remove the following .js
$(document).ready(function () {
//Preselect All Div Views
$("#div-views input:checkbox").prop("checked", true);
...
});
I need to trigger the .js just once, I guess. I am using jquery for most of the javascript handling.
Just remove your javascript code if your form hasn't been submitted yet.
Php
<?php
// If the button is in the $_POST var (or $_GET), the form has already been sent.
if (!isset($_POST['MyButtonName'])) {
?>
$(document).ready(function () {
//Preselect All Div Views
$("#div-views input:checkbox").prop("checked", true);
<?php } ?>
I have the following jquery script that is supposed to post data to the data base,
//delegated submit handlers for the forms inside the table
$('#issue').on('click', function (e) {
e.preventDefault();
//read the form data ans submit it to someurl
$.post('<?php echo base_url() ?>pharm_profile/dept_issue/', $('#Issues_Form').serialize(), function () {
//success do something
alert("Success Approved Successfully");
var url = "<?php echo base_url() ?>pharm_profile";
$(location).attr('href',url);
}).fail(function () {
//error do something
alert("Failed please try again later or contact the system administrator");
})
})
Whenever I click the button, the script runs twice / posts the data twice. How can I control that to only once?
This can happen if your DOM has more than one element "#issue" inside. This can happen, even if only one is shown,
On the other hand, the "on" actually gets registered every time you add an element with id "issue". So if you on happen to add this elements dynamically, each time you add it, a new click event handler gets assigned...
To be pragmatic, because it doesn't seam that you really wanted that behavior... before the "on" registration use the off..
$('#issue').off('click');
$('#issue').on('click',function....);
On page1.php I have a click event that causes the user to be redirected to page2.php. It goes something like this:
$("#someButton").click(function() {
window.location = "page2.php";
});
And that works great. But what I really want is to open a hidden, UI-blocking <div> on page2. The user can already open this <div> manually by clicking another button on page2, that goes something like this:
$('#someOtherButton').click(function() {
$("#pageContainer").block({message: $("#theDivIWant2See")});
});
Can I make a click event from the JavaScript on one page call the JavaScript on another? Or will I need to add in some HTML-parsing to pass information between pages? (I'm not looking for a JavaScript hand-out here, just a strategy to help me move forward.)
When you redirect from the first page, add a querystring value in your url. and in the second page, using your server side page language, set in in a hidden field and in the document ready event check the value of that hidden field. If the value is expected, call a javascript function to show the popup.
Some thing like this
$("#someButton").click(function() {
window.location = "page2.php?showpopup=yes";
});
and in page2.php set it (forgive for errors, i am not a php guy)
<input type='<?php $_GET["showpopup"] ?>' id='hdnShow' />
and in the script
$(function(){
if($("#hdnShow").val()=="yes")
{
//Call here the method to show pop up
}
});
You need to do your stuff when DOM for page2 is ready. You can use jQuery's ready function for that.
$(document).ready(function() {
// put code for showing your div here
});
Hope that helps.
Could you pass a query string argument or assign a cookie that the other page could then check when the document loads? If the value exists then present a modal dialog (e.g. jQuery UI Modal Popup)
http://jqueryui.com/demos/dialog/
I have a form setup where a user can register, and on submittal, a PHP script runs which validates the user, and once that is done, it echoes a messagebox which jQuery quickly hides and then fades in over the course of 1 second. What I now want to do is to be able to hide that form on submittal, and I thought this might do it:
$(document).ready(function() {
$('div.mainsuccess,div.mainerror').hide(0).fadeIn(1000);
$('form.register').submit(function() {
$(this).hide(1000);
});
});
Where div.mainsuccess is the success message, and form.register is the form (with a class of register). Now the first line works, which tells me the script is being called, but the form is not being hidden at all. I'm doing something stupid here, but I cannot figure out what?
I've tried to look through the jQuery API documentation for submit(), but I cannot understand what is being said. Thanks.
I think the reason it may not work is because the form is submitting it's data and waiting for page to refresh... which means, it will stop all of it's javascript stuff coz it's pointless ... I could be wrong but hey, your hide would take 1 second to hide but your page could reload quicker.
$(document).ready(function() {
$('div.mainsuccess,div.mainerror').hide(0).fadeIn(1000);
$('form.register').submit(function(e) {
e.preventDefault();// will stop the form being submited...
$(this).hide(1000);
// do ajax here...
return false;
});
});
Updated
here is a list of tutorials
http://viralpatel.net/blogs/2009/04/jquery-ajax-tutorial-example-ajax-jquery-development.html
http://www.devirtuoso.com/2009/07/beginners-guide-to-using-ajax-with-jquery/
http://www.sitepoint.com/ajax-jquery/
Videos ....
http://www.youtube.com/watch?v=0CMTQtnZ0G0
Try this:
$("form").submit(function(e){
e.preventDefault();
$(this).hide(1000);
});
You'd want to incorporate an ajax call (I'm taking post) to call the php instead of reloading the page
$('form.register').submit(function(e) {
e.preventDefault();
url = $(this).attr('action');
$.post(url,$(this).serialize(), function(data) {
alert('success');
// data will return source code of the URL so you can grab that data and put it somewhere on the script like so.
$('#result').html($(data).find('form'));//form can be replaced with anything
// #result is the id of an element you wish to return the info to
});
$(this).hide(1000);
});
And you'd be done.
More info here
Well, seems that the form refreshes after submission, so it is still there.
I suggest using something like jQuery form: http://jquery.malsup.com/form/
Read up on it and you will find how to use it, and when it is submitted, it won't refresh, and using hide() you will be able to hide it.
N.B you will need jQuery referenced in your code to use jQuery form.
Enjoy.
I am trying to post a form using ajax.
Right now, the code I have is
$("#sub").click(function() {
var tag = $("#tagbar").val();
var opinion = $("#op").val();
alert($("#expressform").serialize());
$.post("dbfunctions.php", $("#expressform").serialize());
});
This works, but it takes a long time to post and add to the database (thats what dbfunctions does) compared to how long it took before, when I was using a form action and refreshing the page. Why is this?
Also, if I remove the alert, the script stops working completely. I can't figure out anyway in which this makes sense.
Thanks
Make sure you cancel the default action of the button by returning false from the click handler:
$("#sub").click(function() {
$.post("dbfunctions.php", $("#expressform").serialize());
return false;
});
Also instead of subscribing for submit button clicks, it's better to subscribe to the submit event of the corresponding form directly:
$("#expressform").submit(function() {
$.post(this.action, $(this).serialize());
return false;
});
This way you are no longer hardcoding any urls in your javascript files. You are simply unobtrusively AJAXifying your form.
You can use below function for submit the data
through Ajax form Submit
$('#form1').ajaxForm({
success:function(response){
$('#save_data').html(response);
});
$('#btnSubmit').click(function() {
$('#form1').submit();
});