SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Jquery .load() not working in IE8/7 for three links. Two links work correctly though

    Hello,
    I have a .load() function loading dynamic information from a .html site. Now in FF,Chrome and Safari it all works fine. But in IE8 and IE7 it seems to have an issue. The last two links (other services and packages) seem to work BUT the top three do not work but the href does seem to be corret before and after the load.

    Is there any specific issue here that I am not seeing?

    http://www.stwsonline.com/web-services/

    The Javascript code is below:
    The first 14 lines are in regards to this issue. Any pointing in the right direction would be great.

    Code:
    $(document).ready(function() { /*start of document ready */
      
    		$('#basic-text').siblings().hide();
    		$('#web-nav-container ul li a:first').css('background-color','#ffffff');
    		$('#web-nav-container li a').click(function() {
    			$('#web-nav-container li a').css('background', '#CBCBCB');
    			$(this).css('background', '#FFFFFF');
    		});
    		$('.more').live('click',function(){
    			var href = $(this).attr('href');
    			if ($('#web-content-container').is(':visible')) {
    				$('#web-content-container').empty();
    			}
    				$('#web-content-container').load('http://www.stwsonline.com/wp-content/themes/stws/web-service-text.html '+href);
    			});
    
      $(".content").hide();
      //toggle the componenet with class msg_body
       $(".header").click(function()
      { 
      $('.content').hide(700);
      $(this).next().slideToggle(200);
      });
      /* highlight content and when you click slideToggle*/
      
      $("#foo2").carouFredSel({
      	height: 'auto',
      	width: '700',
    	circular: false,
    	infinite: false,
    	auto 	: false,
    	padding : 0,
    	align	: "center",
    	prev	: {	
    		button	: "#foo2_prev",
    		key		: "left"
    	},
    	next	: { 
    		button	: "#foo2_next",
    		key		: "right"
    	},
    	pagination	: "#foo2_pag",
    	scroll	: {
    		fx	: "fade"
    	},
    	items		: {
    		visible		: 4,
    		minimum		: 1
    	}
    	});
    	/*CarouselFred information*/
    
    
    	$(".web1")
        .attr('rel', 'gallery')
        .fancybox({
            padding : 0,
    		'titlePosition' : 'inside'
        });
    	
    	$(".web2")
        .attr('rel', 'gallery2')
        .fancybox({
            padding: 0,
    		'titlePosition': 'inside'
        });
    	
    	$(".web3")
        .attr('rel', 'gallery3')
        .fancybox({
            padding: 0,
    		'titlePosition': 'inside'
        });
    	
    	$(".web4")
        .attr('rel', 'gallery4')
        .fancybox({
            padding: 0,
    		'titlePosition': 'inside'
        });
        /* Web1 - web4 facybox*/
        
       //$('#other').click(function() {
    	$('.input-radio').attr('checked', false);
    	$('#other').click(function() {
    		$('#other-radio').attr('checked', true);
    	});
    	/*input radio manipulation*/
    
    	$('input[type="text"]').addClass("idleField");
    	    $('input[type="text"]').focus(function() {  
            $(this).removeClass("idleField").addClass("focusField");
            if (this.value == this.defaultValue){  
            this.value = '';  
        	}    
        });
        /* border around form*/
    
        $('input[type="text"]').blur(function() {  
            $(this).removeClass("focusField").addClass("idleField");
               
         if ($.trim(this.value) == ''){  
                this.value = (this.defaultValue ? this.defaultValue : '');  
         }   
         });
         /* border goes away on un-focus*/
        
        $("#textarea").focus(function() {
            if (this.value === this.defaultValue) {
                this.value = '';
            }
            $(this).removeClass("idleField").addClass("focusField");
     	 });
    	/* textarea on focus text disappears and focusField class applied */
      	$("#textarea").blur(function() {
            if (this.value === '') {
                this.value = this.defaultValue;
            }
            $(this).removeClass("focusField").addClass("idleField");
    	});
    	/* textarea on un-focus text disappears and focusField class applied */
    });
      
      
      (function($,W,D)
    {
        var JQUERY4U = {};
     
        JQUERY4U.UTIL =
        {
            setupFormValidation: function()
            {
            	
            	 $.validator.addMethod('defaultCheck', function (value, element) {
                    if (element.value == element.defaultValue) {
                        return false;
                    }
                    return true;
     			 });
    
                //form validation rules
                $("#feedbackform").validate({
                    rules: {
                        phone: "required defaultCheck",
                        comment: "required",
    					cname: "required defaultCheck",
    					comment: "required defaultCheck",
                        email: {
                            required: true,
                            email: true
                        }
                    },
                    messages: {
    					cname: "Please enter your first name",
                        phone: "Please enter a phone number",
                        comment: "Please enter a comment",
                        email: "Please enter a valid email address"
                    },
                    submitHandler: function(form) {
                        form.submit();
                    }
                }); /* end of .validate() */
    			
    			$("#commentform").validate({
                    rules: {
                        CuCo_Phone: "required",
                        comment: "required",
    					author: "required defaultCheck",
    					comment: "required defaultCheck",
                        email: {
                            required: true,
                            email: true
                        }
                    },
                    messages: {
    					author: "Please enter your first name",
                        CuCo_Phone: "Please enter a phone number",
                        comment: "Please enter a comment",
                        email: "Please enter a valid email address"
                    },
                    submitHandler: function(form) {
                        form.submit();
                    }
                }); /* end of .validate() */
            }
        }
     
        //when the dom has loaded setup form validation rules
        $(D).ready(function($) {
            JQUERY4U.UTIL.setupFormValidation();
        });
     
    })(jQuery, window, document);

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,090
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    My first guess as to why this won't work in IE7/8, is that your mark-up is shot to smithereens.
    In "advanced text" there is an unclosed <ul> tag, in "custom text" there are unclosed <li>, <span> and <ul> tags.

    If I was you, I would get the document validating here: http://validator.w3.org/, then see if that has any effect on IE (my guess is that it will).

    HTH

  3. #3
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,090
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    I see you've got this working in IE7/8 now.
    Just out of curiosity, did the problem have anything to do with the unclosed tags?


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
  •