I've now tried this using the ajaxForm plugin for jquery, and the
redirect has stopped, and the form is being submitted, but the success
is not being returned even though I can see the successful response
via firebug.
I have barely made any changes to the ajaxForm example, so I am
surprised this isn't working.
I even tried putting an alert function right in the success call, but
no luck.
Any ideas on this? Does it matter that the form is loaded into the
page via a seperate ajax call?
[ code]
$(document).ready(function(){
$(".stripeTable tr").mouseover(function() {$
(this).addClass("over");}).mouseout(function() {$
(this).removeClass("over");});
$(".stripeTable tr:even").addClass("evenRow");
$(".addShift").click(function() {
var id = this.id;
$.ajax({
type: "GET",
url: "addShift.php",
data: id,
success: function(response){
$("#addShiftForm").html(response);
}
});
// prepare the form when the DOM is ready
var options = {
target: '#addShift', // target element(s) to be
updated with server response
beforeSubmit: showRequest,
success: function(){
alert('success')
}
};
// bind to the form's submit event
$('#addShiftForm').submit(function() {
// inside event callbacks 'this' is the DOM element so we
first
// wrap it in a jQuery object and then invoke ajaxSubmit
$(this).ajaxSubmit(options);
// !!! Important !!!
// always return false to prevent standard browser submit and
page navigation
return false;
});
});
// pre-submit callback
function showRequest(formData, jqForm, options) {
// formData is an array; here we use $.param to convert it to a
string to display it
// but the form plugin does this for you automatically when it
submits the data
var queryString = $.param(formData);
// jqForm is a jQuery object encapsulating the form element. To
access the
// DOM element for the form do this:
// var formElement = jqForm[0];
alert('About to submit: \n\n' + queryString);
// here we could return false to prevent the form from being
submitted;
// returning anything other than false will allow the form submit
to continue
return true;
}
// post-submit callback
function showResponse(responseText, statusText) {
// for normal html responses, the first argument to the success
callback
// is the XMLHttpRequest object's responseText property
// if the ajaxSubmit method was passed an Options Object with the
dataType
// property set to 'xml' then the first argument to the success
callback
// is the XMLHttpRequest object's responseXML property
// if the ajaxSubmit method was passed an Options Object with the
dataType
// property set to 'json' then the first argument to the success
callback
// is the json data object returned by the server
alert('status: ' + statusText + '\n\nresponseText: \n' +
responseText +
'\n\nThe output div should have already been updated with the
responseText.');
}
});
[/code]
On Dec 17, 8:04 pm, Hamish Campbell <[EMAIL PROTECTED]> wrote:
> I think you need to add "return false;" to the end of your submit
> function.
>
> This will tell the browser not to redirect to "addShift.php" after
> running your function.
>
> You should make the action page the 'non-ajax' alternative, so if the
> function doesn't execute it can continue anyway.
>
> On Dec 18, 4:18 pm, pedalpete <[EMAIL PROTECTED]> wrote:
>
> > I've been looking at this for a while and can't get this to work.
>
> > What I want to do is submit a form, but have the page not redirect to
> > the form page, but rather to refresh a div in the current page. This
> > should be simple, but everything I do ends up taking me to the
> > submitted form response page.
>
> > Here's the code for my form and the jquery
>
> > [code]
> > $("#addShiftForm").submit(function() {
> > var startHrSelected = $("select[name='startHour']
> > [EMAIL PROTECTED]")
> > var startMinSelected = $("select[name='startMin']
> > [EMAIL PROTECTED]")
> > var startHrSelected = $("select[name='endHour']
> > [EMAIL PROTECTED]")
> > var startMinSelected = $("select[name='endMin']
> > [EMAIL PROTECTED]")
> > var startDateForm = $("input[name='date']")
> > var uidForm = $("input[name='uid']")
> > var sidForm = $("input[name='sid']")
> > $.ajax({
> > type: "GET",
> > url: "addShift.php",
> > data: "startHour="+startHrSelected.val(),
> > data: "startMin="+startMinSelected.val(),
> > data: "endHour="+endHrSelected.val(),
> > data: "endMin="+endMinSelected.val(),
> > data: "startDate="+startDateForm.val(),
> > data: "uid="+uidForm.val(),
> > data: "sid="+sidForm.val(),
> > success: function(response){
> > $("#temp").html(response);
> > }
>
> > });
> > [/code]
>
> > and the from code
>
> > [code]
> > <form action=\"addShift.php\" method=\"get\" id=\"addShiftForm\" >
> > <fieldset>
>
> > <legend>Add Shift to $uid, on
> > $date</legend>
> > Start Time: <select name=\"startHour\">
>
> > <option value=\"1\">1am</option>
> > <option value=\"2\">2am</option>
> > <option value=\"3\">3am</option>
> > <option value=\"4\">4am</option>
> > <option value=\"5\">5am</option>
> > <option value=\"6\">6am</option>
> > <option value=\"7\">7am</option>
> > <option value=\"8\">8am</option>
> > <option value=\"9\">9am</option>
> > <option value=\"10\">10am</option>
> > <option value=\"11\">11am</option>
> > <option value=\"12\">Noon</option>
> > <option value=\"13\">1pm</option>
> > <option value=\"14\">2pm</option>
> > <option value=\"15\">3pm</option>
> > <option value=\"16\">4pm</option>
> > <option value=\"17\">5pm</option>
> > <option value=\"18\">6pm</option>
> > <option value=\"19\">7pm</option>
> > <option value=\"20\">8pm</option>
> > <option value=\"21\">9pm</option>
> > <option value=\"22\">10pm</option>
> > <option value=\"23\">11pm</option>
> > <option
> > value=\"24\">Midnight</option>
>
> > </select> <select name=\"startMin\">
> > <option
> > value=\"00\">00</option>
> > <option
> > value=\"15\">15</option>
> > <option
> > value=\"30\">30</option>
> > <option
> > value=\"45\">45</option>
> > </select>
>
> > <br />
> > End Time: <select name=\"endHour\">
> > <option value=\"1\">1am</option>
> > <option value=\"2\">2am</option>
> > <option value=\"3\">3am</option>
> > <option value=\"4\">4am</option>
> > <option value=\"5\">5am</option>
> > <option value=\"6\">6am</option>
> > <option value=\"7\">7am</option>
> > <option value=\"8\">8am</option>
> > <option value=\"9\">9am</option>
> > <option value=\"10\">10am</option>
> > <option value=\"11\">11am</option>
> > <option value=\"12\">Noon</option>
> > <option value=\"13\">1pm</option>
> > <option value=\"14\">2pm</option>
> > <option value=\"15\">3pm</option>
> > <option value=\"16\">4pm</option>
> > <option value=\"17\">5pm</option>
> > <option value=\"18\">6pm</option>
> > <option value=\"19\">7pm</option>
> > <option value=\"20\">8pm</option>
> > <option value=\"21\">9pm</option>
> > <option value=\"22\">10pm</option>
> > <option value=\"23\">11pm</option>
> > <option
> > value=\"24\">Midnight</option>
>
> > </select> <select name=\"endMin\">
> > <option
> > value=\"00\">00</option>
> > <option
> > value=\"15\">15</option>
> > <option
> > value=\"30\">30</option>
> > <option
> > value=\"45\">45</option>
> > </select>
> > <input type=\"hidden\" name=\"sid\"
> > value=\"$sid\"></input>
> > <input type=\"hidden\" name=\"uid\"
> > value=\"$uid\"></input>
> > <input type=\"hidden\" name=\"date\"
> > value=\"$date\"></input>
> > <input type=\"submit\" id=\"submitForm\"
> > value=\"submit\"></input>
> > </fieldset>
> > </form>
> > [/code]
