Re: [jQuery] Ajax numpty, stumbling around
Klaus Hartl schrieb: If desired I would put it on the jQuery blog. Or add that to the cookbook section. Or both - I'm all open... Actually I added it to the Wiki already: http://jquery.com/docs/ProgressiveEnhancement/ -- Jörn ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Ajax numpty, stumbling around
Klaus Hartl schrieb:
Ah, btw, I made a little error here. This is correct:
$('#hijax-me').submit(function() {
return false;
});
Ye gods! Updated the wiki entry :-)
-- Jörn
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Ajax numpty, stumbling around
Rey Bango schrieb: Awesome explanation Klaus and what you're saying makes total sense! You should definitely speak with Yehuda about doing a writeup on this. This is great info. Rey... Thank you Rey and Bryan. If desired I would put it on the jQuery blog. Or add that to the cookbook section. Or both - I'm all open... -- Klaus ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Ajax numpty, stumbling around
Klaus Hartl schrieb:
$('#hijax-me').submit({
return false;
});
Ah, btw, I made a little error here. This is correct:
$('#hijax-me').submit(function() {
return false;
});
-- Klaus
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
[jQuery] Ajax numpty, stumbling around
Right, First of id like to give a big thanks to all you on the jQuery list that have helped me while i get my head wrapped around the basics of jQuery, the help ive had of this list has been great and really helped me. For months now i have put of doing anything AJAX related as i just didnt get how it worked, but with my new found love of jQuery i belive i should be able to finaly push myself into AJAX without hurting myself too much. Im currently trying to do a simpe re-write of my login page for a custom CMS im writing in PHP, what i want to know is how do i pass the submitted form values to the jQuery AJAX call and if there anything else i need to do to my PHP functions to make them work with the AJAX or can i just keep them looking for $_POST/GET values? My current test login page source can be found below http://pastecode.net/?action=viewposttag=997 Any help you can provide will be great, as ive not been able to find online tuts for AJAX parts of jQuery - least none that help me with this. Many thanks Mark 'Phunky' Harwood ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Ajax numpty, stumbling around
I would consider hashing the username and password in the script before submitting, as you'd effectively be sending unencrypted personal data over a HTTP connection. That's not so good, and I think users would complain. Mark Harwood-2 wrote: Any help you can provide will be great, as ive not been able to find online tuts for AJAX parts of jQuery - least none that help me with this. -- View this message in context: http://www.nabble.com/Ajax-numpty%2C-stumbling-around-tf2317327.html#a6446231 Sent from the JQuery mailing list archive at Nabble.com. ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Ajax numpty, stumbling around
Thats very true Dan, but at the moment im just trying to figure out how it all works - security will come once i actualy get my head around AJAX :D -- mark Dan Atkinson wrote: I would consider hashing the username and password in the script before submitting, as you'd effectively be sending unencrypted personal data over a HTTP connection. That's not so good, and I think users would complain. Mark Harwood-2 wrote: Any help you can provide will be great, as ive not been able to find online tuts for AJAX parts of jQuery - least none that help me with this. ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Ajax numpty, stumbling around
Hi Mark, I threw up some code so you can see a very simple Ajax call that should help you out: http://www.intoajax.com/harwood.htm Look at the source and the comments will explain whats happening. As for php, one of the community members, Mike Alsup, helped me out with an issue and he sent me a php file. In that, he set the content-type of the document by using this line: ?php header(Content-Type: text/html; charset=UTF-8); ? So you'll want to follow suit depending on what you're sending back. HTH. Rey... Mark Harwood wrote: Right, First of id like to give a big thanks to all you on the jQuery list that have helped me while i get my head wrapped around the basics of jQuery, the help ive had of this list has been great and really helped me. For months now i have put of doing anything AJAX related as i just didnt get how it worked, but with my new found love of jQuery i belive i should be able to finaly push myself into AJAX without hurting myself too much. Im currently trying to do a simpe re-write of my login page for a custom CMS im writing in PHP, what i want to know is how do i pass the submitted form values to the jQuery AJAX call and if there anything else i need to do to my PHP functions to make them work with the AJAX or can i just keep them looking for $_POST/GET values? My current test login page source can be found below http://pastecode.net/?action=viewposttag=997 Any help you can provide will be great, as ive not been able to find online tuts for AJAX parts of jQuery - least none that help me with this. Many thanks Mark 'Phunky' Harwood ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/ ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Ajax numpty, stumbling around
Hi Rey, Thanks alot for that test page, i have just managed to find out about the .val() function on the visualjquery site. It worked wonders and ive got the login page working great now :) But thanks for the page you have knocked up, i shall have a good look at how you have done the AJAX calls on it. Thanks Mark Rey Bango wrote: Hi Mark, I threw up some code so you can see a very simple Ajax call that should help you out: http://www.intoajax.com/harwood.htm Look at the source and the comments will explain whats happening. As for php, one of the community members, Mike Alsup, helped me out with an issue and he sent me a php file. In that, he set the content-type of the document by using this line: ?php header(Content-Type: text/html; charset=UTF-8); ? So you'll want to follow suit depending on what you're sending back. HTH. Rey... Mark Harwood wrote: Right, First of id like to give a big thanks to all you on the jQuery list that have helped me while i get my head wrapped around the basics of jQuery, the help ive had of this list has been great and really helped me. For months now i have put of doing anything AJAX related as i just didnt get how it worked, but with my new found love of jQuery i belive i should be able to finaly push myself into AJAX without hurting myself too much. Im currently trying to do a simpe re-write of my login page for a custom CMS im writing in PHP, what i want to know is how do i pass the submitted form values to the jQuery AJAX call and if there anything else i need to do to my PHP functions to make them work with the AJAX or can i just keep them looking for $_POST/GET values? My current test login page source can be found below http://pastecode.net/?action=viewposttag=997 Any help you can provide will be great, as ive not been able to find online tuts for AJAX parts of jQuery - least none that help me with this. Many thanks Mark 'Phunky' Harwood ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/ ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/ ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Ajax numpty, stumbling around
Rey Bango schrieb:
Hi Mark,
I threw up some code so you can see a very simple Ajax call that should
help you out:
http://www.intoajax.com/harwood.htm
Look at the source and the comments will explain whats happening.
As for php, one of the community members, Mike Alsup, helped me out with
an issue and he sent me a php file. In that, he set the content-type of
the document by using this line:
?php
header(Content-Type: text/html; charset=UTF-8);
?
So you'll want to follow suit depending on what you're sending back.
HTH.
Here's another tip (to promote good practice right from the beginning):
Every Ajax call by jQuery sends a special request header, upon which
you can decide what to do, i.e. deliver the complete page or deliver
only a part in the response.
This is especially useful if you want to hijax your forms, so that they
both work with and without Ajax/JavaScript.
You can check that in PHP like:
if ( $_SERVER[HTTP_X_REQUESTED_WITH] == XMLHttpRequest) {
// handle XHR request
} else {
// handle standard request
}
Cheers, Klaus
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Ajax numpty, stumbling around
I'm going to update it again Mark, since I realized that I didn't get you code to serialize your form fields. Rey.. Mark Harwood wrote: Hi Rey, Thanks alot for that test page, i have just managed to find out about the .val() function on the visualjquery site. It worked wonders and ive got the login page working great now :) But thanks for the page you have knocked up, i shall have a good look at how you have done the AJAX calls on it. Thanks Mark Rey Bango wrote: Hi Mark, I threw up some code so you can see a very simple Ajax call that should help you out: http://www.intoajax.com/harwood.htm Look at the source and the comments will explain whats happening. As for php, one of the community members, Mike Alsup, helped me out with an issue and he sent me a php file. In that, he set the content-type of the document by using this line: ?php header(Content-Type: text/html; charset=UTF-8); ? So you'll want to follow suit depending on what you're sending back. HTH. Rey... Mark Harwood wrote: Right, First of id like to give a big thanks to all you on the jQuery list that have helped me while i get my head wrapped around the basics of jQuery, the help ive had of this list has been great and really helped me. For months now i have put of doing anything AJAX related as i just didnt get how it worked, but with my new found love of jQuery i belive i should be able to finaly push myself into AJAX without hurting myself too much. Im currently trying to do a simpe re-write of my login page for a custom CMS im writing in PHP, what i want to know is how do i pass the submitted form values to the jQuery AJAX call and if there anything else i need to do to my PHP functions to make them work with the AJAX or can i just keep them looking for $_POST/GET values? My current test login page source can be found below http://pastecode.net/?action=viewposttag=997 Any help you can provide will be great, as ive not been able to find online tuts for AJAX parts of jQuery - least none that help me with this. Many thanks Mark 'Phunky' Harwood ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/ ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/ ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/ ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Ajax numpty, stumbling around
Hi Mark, I updated the sample slightly so you could see an actual ajax call that included serializing form vars and then returning what you typed in. http://www.intoajax.com/harwood.htm HTH. Rey Mark Harwood wrote: Hi Rey, Thanks alot for that test page, i have just managed to find out about the .val() function on the visualjquery site. It worked wonders and ive got the login page working great now :) But thanks for the page you have knocked up, i shall have a good look at how you have done the AJAX calls on it. Thanks Mark Rey Bango wrote: Hi Mark, I threw up some code so you can see a very simple Ajax call that should help you out: http://www.intoajax.com/harwood.htm Look at the source and the comments will explain whats happening. As for php, one of the community members, Mike Alsup, helped me out with an issue and he sent me a php file. In that, he set the content-type of the document by using this line: ?php header(Content-Type: text/html; charset=UTF-8); ? So you'll want to follow suit depending on what you're sending back. HTH. Rey... Mark Harwood wrote: Right, First of id like to give a big thanks to all you on the jQuery list that have helped me while i get my head wrapped around the basics of jQuery, the help ive had of this list has been great and really helped me. For months now i have put of doing anything AJAX related as i just didnt get how it worked, but with my new found love of jQuery i belive i should be able to finaly push myself into AJAX without hurting myself too much. Im currently trying to do a simpe re-write of my login page for a custom CMS im writing in PHP, what i want to know is how do i pass the submitted form values to the jQuery AJAX call and if there anything else i need to do to my PHP functions to make them work with the AJAX or can i just keep them looking for $_POST/GET values? My current test login page source can be found below http://pastecode.net/?action=viewposttag=997 Any help you can provide will be great, as ive not been able to find online tuts for AJAX parts of jQuery - least none that help me with this. Many thanks Mark 'Phunky' Harwood ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/ ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/ ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/ ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Ajax numpty, stumbling around
Hi Klaus,
Could you elaborate on this a little more? I'm not clear on what you
mean by this. I'm all for best practices and I'm definitely interest
in this.
Thanks,
Rey...
Here's another tip (to promote good practice right from the beginning):
Every Ajax call by jQuery sends a special request header, upon which
you can decide what to do, i.e. deliver the complete page or deliver
only a part in the response.
This is especially useful if you want to hijax your forms, so that they
both work with and without Ajax/JavaScript.
You can check that in PHP like:
if ( $_SERVER[HTTP_X_REQUESTED_WITH] == XMLHttpRequest) {
// handle XHR request
} else {
// handle standard request
}
Cheers, Klaus
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Ajax numpty, stumbling around
From what i can tell from that, its basicly a call in the PHP that
deals with the submitted data depending on how the form has been submitted.
So if the user has JS enabled on the browser they can have nice fancy
error checking via AJAX and if not they can get some nice standard PHP
based error check thrown in.
Looks good :) thanks for your help guys, im getting there slowly
Rey Bango wrote:
Hi Klaus,
Could you elaborate on this a little more? I'm not clear on what you
mean by this. I'm all for best practices and I'm definitely interest
in this.
Thanks,
Rey...
Here's another tip (to promote good practice right from the beginning):
Every Ajax call by jQuery sends a special request header, upon which
you can decide what to do, i.e. deliver the complete page or deliver
only a part in the response.
This is especially useful if you want to hijax your forms, so that they
both work with and without Ajax/JavaScript.
You can check that in PHP like:
if ( $_SERVER[HTTP_X_REQUESTED_WITH] == XMLHttpRequest) {
// handle XHR request
} else {
// handle standard request
}
Cheers, Klaus
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Ajax numpty, stumbling around
I highly recommend using the form plugin to handle form submission. ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Ajax numpty, stumbling around
On 22/09/06, Dan Atkinson [EMAIL PROTECTED] wrote: I would consider hashing the username and password in the script before submitting, as you'd effectively be sending unencrypted personal data over a HTTP connection. That's not so good, and I think users would complain. Hashing the username/password is what you would do in a live application. That and transmitting over HTTPS (does jQuery work over a secure connection - I recall at one point that $(document).ready did not work?) - unless there is nothing particularly sensitive (like a bookmarks site, rather than a shopping one). Mark Harwood-2 wrote: Any help you can provide will be great, as ive not been able to find online tuts for AJAX parts of jQuery - least none that help me with this. ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Ajax numpty, stumbling around
Rey Bango schrieb:
Hi Klaus,
Could you elaborate on this a little more? I'm not clear on what you
mean by this. I'm all for best practices and I'm definitely interest
in this.
Thanks,
Rey...
Here's another tip (to promote good practice right from the beginning):
Every Ajax call by jQuery sends a special request header, upon which
you can decide what to do, i.e. deliver the complete page or deliver
only a part in the response.
This is especially useful if you want to hijax your forms, so that they
both work with and without Ajax/JavaScript.
You can check that in PHP like:
if ( $_SERVER[HTTP_X_REQUESTED_WITH] == XMLHttpRequest) {
// handle XHR request
} else {
// handle standard request
}
Cheers, Klaus
Rey, sure.
To make forms accessible with and without Ajax, I start with building
the form as if I were building a standard form with its traditional
submit and refresh the page behavior. Think of JavaScript being disabled.
This handling goes all into the else block of my example because there
will be no X-REQUESTED-WITH header in the http request (I come to that
later). You are simply sending back a complete page as response to the
form submit.
In the next step I so called hijax that form to enhance the user
experience a little bit. This is also refered to as Progressive
Enhancement.
That means:
1. I will pick up the form and switch off the default submit action by
adding my own event handler.
$('#hijax-me').submit({
return false;
});
2. Then add some logic to gather all the form values and transmit it via
Ajax in the background, while you are pickinq up the form‘s action as well:
$('#hijax-me').submit({
// stupid IE returns an object for the forms action
var url = this.attributes[action]
this.attributes[action].nodeValue || this.getAttribute('action');
// works fine with very simple forms, just as an example
var data = $('input', this).serialize();
$.ajax({
type: 'POST',
url: url,
data: data,
dataType: 'json',
success: function(response) {
// show message for example
}
});
return false;
});
$.ajax calls the same page as if you were submitting the page in the
traditional way. But because jQuery's $.ajax also adds a custom header
to the request, of the form X-Requested-With: XmlHttpRequest (same as
Prototype if I remember correctly) you know in your page how the page
was requested and can handle the request according to that.
This happens in the if block in my example. You can now decide to only
send back a part of the page (like only the markuped confirmation
message to replace the form, or maybe sendback JSON or XML to be further
processed on client-side).
As a result you still can have all your backend logic in one place and
have a 100% accessible form with enhanced user experience if JavaScript
is enabled. And in the end this means only a little more work to do, if
at all.
jQuery's form plugin makes it even easier to do that, I think there is
an $.ajaxSubmit function, that does all the stuff for you...
Hope that made it clearer...
-- Klaus
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Ajax numpty, stumbling around
Hi Mike, Any chance of a link to it? Mike Alsup wrote: I highly recommend using the form plugin to handle form submission. ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/ ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Ajax numpty, stumbling around
Any chance of a link to it? The form plugin is available here: http://jquery.com/dev/svn/plugins/form/form.js?format=txt Sample usage can be found here: http://malsup.com/jquery/form/ ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Ajax numpty, stumbling around
Awesome explanation Klaus and what you're saying makes total sense! You
should definitely speak with Yehuda about doing a writeup on this. This
is great info.
Rey...
Rey, sure.
To make forms accessible with and without Ajax, I start with building
the form as if I were building a standard form with its traditional
submit and refresh the page behavior. Think of JavaScript being disabled.
This handling goes all into the else block of my example because there
will be no X-REQUESTED-WITH header in the http request (I come to that
later). You are simply sending back a complete page as response to the
form submit.
In the next step I so called hijax that form to enhance the user
experience a little bit. This is also refered to as Progressive
Enhancement.
That means:
1. I will pick up the form and switch off the default submit action by
adding my own event handler.
$('#hijax-me').submit({
return false;
});
2. Then add some logic to gather all the form values and transmit it via
Ajax in the background, while you are pickinq up the form‘s action as well:
$('#hijax-me').submit({
// stupid IE returns an object for the forms action
var url = this.attributes[action]
this.attributes[action].nodeValue || this.getAttribute('action');
// works fine with very simple forms, just as an example
var data = $('input', this).serialize();
$.ajax({
type: 'POST',
url: url,
data: data,
dataType: 'json',
success: function(response) {
// show message for example
}
});
return false;
});
$.ajax calls the same page as if you were submitting the page in the
traditional way. But because jQuery's $.ajax also adds a custom header
to the request, of the form X-Requested-With: XmlHttpRequest (same as
Prototype if I remember correctly) you know in your page how the page
was requested and can handle the request according to that.
This happens in the if block in my example. You can now decide to only
send back a part of the page (like only the markuped confirmation
message to replace the form, or maybe sendback JSON or XML to be further
processed on client-side).
As a result you still can have all your backend logic in one place and
have a 100% accessible form with enhanced user experience if JavaScript
is enabled. And in the end this means only a little more work to do, if
at all.
jQuery's form plugin makes it even easier to do that, I think there is
an $.ajaxSubmit function, that does all the stuff for you...
Hope that made it clearer...
-- Klaus
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
