How can I disable form submit using ajax? The user must click first the button in the ajax dialog before the form will be submitted.
//on form submit
//I'm using input type submit and not button (as much as possible, I don't want to change that)
$.ajax({
type: "POST",
url: "<?=url::base(TRUE)?>prompt",
data: $('#formname').serialize(),
async: false,
success: function(response){
$("#dialogpromt").html(response);
$("#dialogpromt").dialog({
autoOpen: true,
height: 'auto',
width: '100',
resizable: 'false',
dialogClass: 'dFixed'
});
//onlcick event would change a hidden field to '1'
//works fine
},
});
//Is there a way I can ensure that the dialog above is closed first before the below lines will execute?
if(document.getElementById('submitInd').value == "0")
return false;
else
return true;
Thanks in advance!
$("Your Submit button Id").click(function (event) {
event.preventDefault(); // this will be used to stop the reloading the page
$.ajax({
type: "POST",
url: "<?=url::base(TRUE)?>prompt",
data: $('#formname').serialize(),
async: false,
beforeSend: function () { /// use beforeSend to open a dialog box
$("#dialogpromt").dialog({
autoOpen: true,
height: 'auto',
width: '100',
resizable: 'false',
dialogClass: 'dFixed'
});
},
success: function (response) {
$("#dialogpromt").html(response);
//tried the if else here, no luck.
//the dialog will just load but the form will still continue to submit
}
});
});
There are a few ways to make buttons not submit. The way I learned when I started using forms was to use spans instead of buttons.
A better, simpler way, because it allows you to keep your button structure, is to simply write
<button type='button'>....</button>
I'm not sure exactly what it does, but including the type='button, as opposed to the type='submit' which is default in forms, suppresses the default form submit action.
There are other ways to change this using javascript, such as manually suppressing the default action, not even using a form in the first place and instead wrapping the items in a div with the class 'form', and a ton of other versatile ways that fit your needs.
Related
I'm working on a message board and inputs forms have to be validated if javascript is disabled. If javascript is enabled it has to have AJAX to stop refresh and submit form.
I have an html form which is validated by php. And now I'm trying to add jquery and ajax to stop page refresh.
I added a loading gif and inactive inputs field on submit button. But when I add $.ajax gif won't stop spinning and fields won't become active. After I refresh the page I can see that the input data was added to database.
I'm quite new in using ajax and maybe you could help me find a solution to my problem.
here is my code:
$(document).ready(function(){
$("#submit").click(function(e){
e.preventDefault();
// getting input values by id
var fullname = $("#fullname").val();
var message = $("#message").val();
// array for input values
var data = { fullname : fullname,
message : message };
//disabled all the text fields
$('.text').attr('disabled','true');
//show the loading sign
$('.loading').show();
// AJAX Code To Submit Form.
$.ajax({
type: "POST",
url: "validation.php",
//dataType : 'json',
data: data,
cache: false,
success: function(data){
alert('success');
}
}).done(function(result) {
if (result == "")
form.submit();
else
alert(result);
}).fail(function() {
alert('ERROR');
});
});
});
I get success and input value alert, when I use dataType : 'json', I get error alert.
I would appreciate any kind of help.
maybe once you display .gif image than you are not going to hide the same .gif image again although your ajax finished or stop or fail (in any case).
So, on success of ajax add below two lines to hide .gif and enable text fields.
//enabled all the text fields
$('.text').prop("disabled", false);
//hide the loading sign
$('.loading').hide();
Whole code seems like this,
// AJAX Code To Submit Form.
$.ajax({
type: "POST",
url: "validation.php",
data: data,
cache: false,
success: function(data){
//enabled all the text fields
$('.text').prop("disabled", false);
//hidethe loading sign
$('.loading').hide();
alert('success');
}
});
I have this problem with my JQuery UI Modal window. Its used when i click a button, then it opens up and append contents to it trough an Ajax call to a php file. Works perfectly the first time i open it, but then when i click another button that should show different content, it still shows the old content in it, and i have to refresh the page for it to work.
This is my Dialog open event which is triggered by a switch, and the last part which appends data to my select box on creation.
$( "#attack" ).dialog({
resizable: false,
width:"400px",
buttons: {
Attack: function() {
$(this).dialog("close");
},
Cancel: function() {
$(this).dialog("close");
}
}
});
$("#users").selectmenu({
create: function( event, ui ) {
$.ajax({
type: "POST",
url: "mapfunctions/FetchUsers.php",
data: {RegionID: RegionID},
success: function(data) {
$("#users").append(data);
}
});
}
});
The dialog looks like this: http://i.imgur.com/02a2GYB.png
The HTML for it is a bit long, so i hope you dont need that dialog code, if so, let me know and i will add.
Its the Select menu which keeps the old data from the first ajax call.
I tried using Destroy and such on close, but then the dialog would simply never open again heh.
Thanks a lot people, hope this is enough for a clear understanding
This is very common problem with ajax and modal windows.. on clicking next button you have to reset the form and load it new.
for eg:
If you are using form with id "myForm" then on clicking another button reset the form like $("#myForm").trigger('reset'); in jQuery. or any other way
I am having an issue with popup blockers. I want to open a window for my users only after I receive some data from server, in other words I need it on success.
Issue is that popup blocker will stop the window in the success section as it thinks that script is currently executing. I am using jQuery 1.7.1.min and I have tried using (as you can see below)
async:false, but for some reason that doesn't work. The only workaround that I was able to do is to open a fake window and when the response comes back
overwrite the fake window. It works in Chrome but it gives problems in Firefox. Need some help.
function mypopup() {
$j.ajax({
type: 'POST',
url: "/my/phppage",
data: mydata,
async: false,
success: function (response) {
window.open(response, 'Dialogue Message', 'width=650,height=550,left=50,top=50,location=no,status=yes,scrollbars=yes,resizable=yes');
}
});
window.open("openfakewindow", 'Dialogue Message', 'width=650,height=550,left=50,top=50,location=no,status=yes,scrollbars=yes,resizable=yes');
}
The issue is Firefox only allows popups if it is created from a user generated event, for example a click event.
You can get around this by opening a blank window before the Ajax call, keep a reference to it and then set the URL after the ajax call is complete.
Why don't you use a dialogue box that is essentially a element that you identify and then open?
$(document).ready(function () {
$("#divAccountDialog").dialog(
{
modal: true,
autoOpen: false,
width: 700,
buttons: { Cancel: function () { $(this).dialog("close"); } }
}
);
});
someotherfunction () {
$('#divAccountDialog').dialog('open');
Is it possible to delay the moment when the unload method is called on a web page?
I have N pages and each page contains a form. I don't want users to click on a submit button so I simulated a click on the hidden submit button via javascript. This is activated everytime the user change page:
window.onbeforeunload = function() {
document.getElementById('submit_id').click();
}
This doesn't work but if I put an alert after .click ()
window.onbeforeunload = function() {
document.getElementById('submit_id').click();
alert("submitting form");
}
everything works like a charm. This because the alert gives the form the time to actually submit its data; without the alert the page unloads before the form has been submitted and therefore the changes are not saved.
I tried to put a dummy setTimeout after .click()
window.onbeforeunload = function() {
document.getElementById('submit_id').click();
setTimeout(console.log("dummy"), 200);
}
but it didn't work. Any help or feedback on this would be greatly appreciated.
if you use jquery, you can try to save via ajax. and maybe adding async to false, not recomended but could work in your example if save function is really fast.
http://api.jquery.com/jQuery.ajax/
here is how i save:
var $form = $('#formId');
$.ajax({
type: "POST",
url: $form.attr('action'),
data: $form.serialize(),
error: function (xhr, status, error) {
// error
},
success: function (response) {
// sucess
}
});
I am creating a website and have a jqGrid on my page. I am using the advanced search feature by adding a custom button to my navgrid (pager) that calls the jqGrid 'searchGrid' function.
$('#My_Grid_Id').jqGrid(settingsObject)
.navGrid('My_Grid_Id_toolbar1',{del:false,add:false,edit:false,refresh:false,search:false})
.navButtonAdd('My_Grid_Id_toolbar1',
{
caption: 'Search',
buttonicon: 'ui-icon-search',
title: 'Search',
onClickButton: function() {
$(gridSelector).jqGrid ('searchGrid', {
caption: 'Search',
multipleSearch:true,
overlay: false,
multipleGroup:true,
recreateFilter: true
});
}
});
I would like to be able to save the search settings when the user leaves the page so I can reload them when the user returns. I almost have a working solution, but after I have saved and reloaded the search settings, the 'Reset' button on the search dialog window does not work as expected. The search setting do seem to be reset in the background but the window does not refresh and the grid still shows the old results.
To explain a bit more. I catch the window unload event and store the search settings by sending the potdata.filters parameter to the server with an ajax call. I then store the data in a cookie which I can load later.
$(window).unload( function () {
$.ajax({
type: "POST",
url: saveUrl,
dataType: 'json',
traditional: true,
async: false,
data: {
searchSettings: $('#My_Grid_Id').getGridParam('postData').filters
}
});
});
When I reload the grid I check if my cookie has a value then insert the saved filters back into the grid in the constructor.
postData: {
filters: mySavedSearchSettings
},
At this point the grid works well, the search has been saved and the results show as expected. When I open the search window dialog the search options appear as expected. But when I click the 'Reset' button the window does not update properly and neither do the grid results. I have attempted to add an onclick event to the reset button to manually reset the search but nothing seems to happen.
afterShowSearch: function() {
$('.fm-button-icon-left').click(function(){
$('#My_Grid_Id').jqGrid('setGridParam', { search: false, postData: { "filters": ""} }).trigger("reloadGrid");
});
}
Can anyone offer any help? I think I am close, I just need to reset the search window somehow then reload the grid.
The answer turned out to be two things.
Firstly, the grid was not reloading the correct data as I did not correctly handle the server side code. I have recently started using php and I had a bug where the code did not correctly identify that the filter post data was null/empty.
Secondly, I was able to reset the search window dialog by calling the 'searchGrid' function to open it again. So after the search is shown I add an on click event to the reset button as follows:-
$(gridSelector).navButtonAdd(gridSelector + '_toolbar1',
{
caption: 'Search',
buttonicon: 'ui-icon-search',
title: 'Search',
onClickButton: function() { OpenAdvancedSearchDialog(gridSelector); }
});
}
function OpenAdvancedSearchDialog(gridSelector) {
$(gridSelector).jqGrid ('searchGrid', {
caption: 'Search',
multipleSearch:true,
overlay: false,
multipleGroup:true,
recreateFilter: true,
afterShowSearch: function() {
$('.fm-button-icon-left').click(function(){
OpenAdvancedSearchDialog(gridSelector);
});
}
});
}