I have written this code to post my comment form with jquery ajax:
- $('#loading').hide() .ajaxStart(function() { $(this).show(); }) .ajaxStop(function() { $(this).hide(); }); //I never see this on the pc FF :(
- $("#commentForm").submit(function(event) {
- event.preventDefault();
- var $form = $( this ),
- Cname = $form.find( 'input[name="name"]' ).val(),
- Comment = $form.find( 'textarea' ).val(),
- urlt = $form.attr( 'action' );
- if(!Cname){
-
- $( 'input[name="name"]' ).focus();
- var content = "<p><strong style=\"color:red;\">Please leave your name</strong></p>"; $( "#result" ).html( content );
- $( 'input[name="name"]' ).css({'border': '1px solid #ff0000'});
- $( 'textarea' ).css({'border': '1px solid #cbcbcb'});
-
- }
- else if(!Comment){
-
- $( 'textarea' ).focus();
- var content = "<p><strong style=\"color:red;\">You haven't added a comment!</strong></p>";$( "#result" ).html( content );
- $( 'textarea' ).css({'border': '1px solid #ff0000'});
- $( 'input[name="name"]' ).css({'border': '1px solid #cbcbcb'});
-
- }else{
- //IT SEEMS TO WORK FINE UP UNTIL HERE:
- $.post( urlt, $("#commentForm").serialize() ,
- function( data ) {
- var content = "<p><strong style=\"color:red;\">Your comment has been submitted for approval. Thank You.</strong></p>";
- $( "#result" ).html( content );
- $(':input','#commentForm').not(':button, :submit, :reset, :hidden').val('');
- $( 'textarea' ).css({'border': '1px solid #cbcbcb'});
- $( 'input[name="name"]' ).css({'border': '1px solid #cbcbcb'});
- }
- );
- }
- });
It works on FF4, safari & chrome on the mac
I then checked it on the pc and it worked in chrome, but not in FF3.6.3 or IE
Any ideas? Using jquery 1.6.1 - I tried rolling back to 1.3.1 and my loading gif appears but it doesn't go any further than that. The errors in the error console (and there are loads!) mean nowt to me and they appear even when there is no jquery on the page other than the link to the jquery script itself.