SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot w1nk5's Avatar
    Join Date
    Aug 2009
    Location
    Ontario, Canada
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JavaScript works in all browsers but Safari?

    http://www.forfuturesale.com/propert...e-floor-condo/

    At the page above, at the bottom, there is a button that says "E-mail Seller". This loads a small contact form in a jQuery fancyBox (lightbox).

    The following script (form-handler.js) is meant to handle the form to and from the form-handler.php.

    Code JavaScript:
    jQuery(document).ready(function(){
     
    	jQuery('#contact-seller-form').submit(function(){
     
    		var action = $(this).attr('action');
     
    		jQuery("#message").slideUp(750,function() {
    		jQuery('#message').hide();			
     
    		jQuery.post(action, { 
    			buyer_name: jQuery('#buyer_name').val(),
    			buyer_email: jQuery('#buyer_email').val(),
    			buyer_message: jQuery('#buyer_message').val(),
    			seller: jQuery('#seller').val(),
    			refnum: jQuery('#refnum').val()
    		},
    			function(data){
    				document.getElementById('message').innerHTML = data;
    				jQuery('#message').slideDown('slow');
    				jQuery('#contact-seller-form img.loader').fadeOut('fast',function(){$(this).remove()});
    				jQuery('#contact-seller-form #submit').attr('disabled',''); 
    				//if(data.match('success') != null) $('#contactform').slideUp('slow');
    			}
    		);
     
    		});
    		return false; 
    	});	
    });

    Everything works fine in Firefox, IE and Chrome. However in Safari, it's like the contents of form-handler.js are not there, its not doing anything. Using Safaris dev tools you can clearly see the script has loaded fine.

    Any help would be greatly appreciated.

    Cheer

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Personally rather then using return false i would use the following to prevent the form running its normal action event.

    Code JavaScript:
    jQuery('#contact-seller-form').submit(function(e){
        e.preventDefault();
     
        // continue...
    });

    That is the only thing i can see that would let the form continue normally.

  3. #3
    SitePoint Zealot w1nk5's Avatar
    Join Date
    Aug 2009
    Location
    Ontario, Canada
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Zing. Unfortunately modifying my code like you suggested did not help. Everything still works fine in all browsers except Safari.

    The confirmation message should be appearing dynamically under the form via the javascript, however it is loading in a new windown but again, only in Safari.

    Is anyone aware of any quirks when it comes to Safari and javascript I may be overlooking?

    Cheers

  4. #4
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Okay try this

    Code JavaScript:
    jQuery('#contact-seller-form').live('submit', function(){}

  5. #5
    SitePoint Zealot w1nk5's Avatar
    Join Date
    Aug 2009
    Location
    Ontario, Canada
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That fixed it!!! You da man!

    Thanks a lot for you help.

  6. #6
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    No problem

  7. #7
    SitePoint Zealot w1nk5's Avatar
    Join Date
    Aug 2009
    Location
    Ontario, Canada
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SgtLegend View Post
    Okay try this

    Code JavaScript:
    jQuery('#contact-seller-form').live('submit', function(){}
    Any chance you can help me understand why this works?

  8. #8
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,189
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    When i looked at how your modal window worked i saw Ajax requests which inputted the form that everyone sees, once i saw that i said to use the .live() method because it seeks out DOM elements that are not part of the original DOM structure where as the .submit() method can only seek out DOM elements that are part of the pre-existing DOM.

    I had the same trouble when i first started with Ajax and form submissions but after a while you start to understand what works better with Ajax.

  9. #9
    SitePoint Zealot w1nk5's Avatar
    Join Date
    Aug 2009
    Location
    Ontario, Canada
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SgtLegend View Post
    When i looked at how your modal window worked i saw Ajax requests which inputted the form that everyone sees, once i saw that i said to use the .live() method because it seeks out DOM elements that are not part of the original DOM structure where as the .submit() method can only seek out DOM elements that are part of the pre-existing DOM.

    I had the same trouble when i first started with Ajax and form submissions but after a while you start to understand what works better with Ajax.
    Awesome. Thanks a lot. I really appreciate your help.

    Cheers


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •