Simple code to automatically click submit button.
document.forms["myform"].submit();
I already have ajax code when this button is click.
However, it will refresh the page. May I know how to prevent page reload and it will still run the code?
.submit() will refresh the page, you will have to use ajax submits like $.ajax or $.post.
Use examples from here: https://api.jquery.com/jquery.post/
Have your ajax code that is running when the button is clicked call event.preventDefault() and return false.
Edit:
document.getElementById("yourButtonID").onclick = function(event) {
event.preventDefault();
// your ajax code here
return false;
}
Related
I am trying lot to get it work but no luck..any jquery expert can share there view please.
i have form, for validation i use form validation plugin (jquery) which doese validation correctly when i put.
$("#contact").validationEngine(); // #contact is my form id.
now i want to submit the form using ajax on button click (submit form button) which is also happening correctly using following.
$(".button").click(function() {
ajax code goes here ...
}
here problem is when i click on submit button it goes and update database it does not wait for formvalidation plugin to validate it...
what actually i want to do is first validate the form if all okay then go and call ajax function to update the database. if validation fails then dont call ajax function to update data base.
could any one please share some clues.
Thank you in advance...
regards, Mona.
$(function() {
$("#contact").validate({
rules: {
},
submitHandler: function(form){
ajax call
}
});
});
orignal post jQuery: validate before submitting try if this helps to resolve your issue..
I have a jqGrid loaded by AJAX inside a jQuery UI Dialog. Everything is working fine, except the Dialog which is not closing. When I click in both buttons, it reaches the alerts, but the Dialog is not being closed.
buttons: {
'Confirm': function() {
alert('OK Confirm');
$('#test-grid').dialog('close');
},
'Cancelar': function() {
alert('OK Cancel');
$(this).dialog('close');
}
}
I've tried with $('#test-grid').dialog('close') and $(this).dialog('close'), but no one works. If I remove the jqGrid loaded by AJAX, everything works fine.
The error console on Firefox and Chrome is empty.
I'm loading the jqGrid page with:
$('#test-grid').load('/grid').dialog('open');
Can anyone help me?
UPDATE
I've tried to load a simple HTML snippet using AJAX and the problem persists.
The problem is that the call to load is interfering with the call to open the dialog. You can fix this by loading the AJAX content into a child element of test-grid. For example:
$('#test-grid-child').load('/grid');
$('#test-grid').dialog('open');
Update
I just read the docs for load and gave this a bit more thought. What is happening is that when the code $('#test-grid').load('/grid').dialog('open'); is executed, an AJAX request is started and the dialog is created immediately. But once the load's AJAX request finishes, jQuery comes back and overwrites the contents of #test-grid. This explains why the dialog could not be closed, because the underlying markup is modified out from underneath the dialog object.
Retrieving data to a child element eliminates this problem since load and dialog each now manipulates a different section of the DOM.
Note that if the AJAX request takes a long time to complete, you might want to consider implementing a complete function to give feedback to the user - maybe by displaying a spinner until the data is ready. For example:
$('#test-grid-child').load('ajax/test.html', function() {
alert('Load was performed.'); // Perform any necessary UI action here
});
Anyway, more information than you probably needed, but I just wanted to update this question while it was still fresh in my mind...
Im building a browser-based app by jQueryMobile and facing a problem: Now I have a single HTML contains multiple "data-role=page" sections each of them will call backend to grab content once activated.
$('body').bind('pagechange',function(event){
//grab content base on page id here, working!!!
});
However, if user reload the page by press "refresh" button on browser how can I detect and call backend page?
Thanks
Use the pageshow event. Something like this:
$("[data-role=page]").live('pageshow',function(event, ui){
var myId = $.mobile.activePage.attr('id');
// do something
});
I'm actually working with jQuery mobile 1.0 and the auto complete widget from jQuery UI.
Everything works perfectly except one little thing :
When the user has been redirected (location.href) using the autocomplete feature, there is no back button on the page where he has been redirected.
I've set the $.mobile.page.prototype.options.addBackBtn to true in the mobileinit and the script is loaded before jQuery Mobile.
I didn't find any answer anywhere so this is why i'm asking to you guys
Thanks in advance
By the way sorry for the bad english it's not my first laguage
How do you redirect the user to other page? With location.href? Then that's your problem, setting location.href causes a page refresh and then jQuery Mobile loses it's history (so it won't show the back button)
Please use $.mobile.changePage( url ) to switch to another page
Something like:
$("#yourAutocompleteID").autocomplete({
select: function(event, ui) {
$.mobile.changePage("nextpage.html?id="+ui.item.id);
}
});
For simplicity I pass here the data in the querystring
I am using a master page on a JQuery-Mobile app that have few controller , and I want to set up a Javascript call to an initialize function on every page even when it loads through Ajax,
Iam sure there are few ways to do that, but whats the best approach and what would be the alternative to $(document).ready when the page is called through ajax instead of being directly loaded without that.
takepara's answer is correct, but...
If you want to modify the content of the page you will have to bind earlier.
Take a look at beforepagecreate event.
If your handler for this event returns false, then no JQM widgets and styles will be applied and you can work with it manually.
jQuery Mobile Docs - Events
$('div').live('pageshow',function(event, ui){
alert('This page was just hidden: '+ ui.prevPage);
});
or
$(document).bind("pageshow".function(){
// initialize code here
});