Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2

Thread: Plugin Question

  1. #1
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Plugin Question

    hi guys,

    Just started learning about jQuery plugins today. The following code is driving me crazy:

    Code:
    <!DOCTYPE html>
    <html>
    
      <head>
        <title>Chapter 09, Exercise 01</title>
        <script src="js/jquery-1.10.2.js"></script>   
        <script>
        
    
    	$.fn.logAttr = function(opts)
    	{
    						
    		var defauts = 
    			           {
    				      attr: "id",
    				      backup:"N/A",
    				      useAlert:false	
    				     }
    			
    	    var options = $.extend({}, defaults, opts);
    			            
    		return this.each(function()
    				      {
    				           var val = $(this).attr("id");
    				            alert(val);//this does not show???
    				       });
    				         
    	};
    		   
    	$(function()
    	{
             $("div").logAttr(
             {    	
             	 attr:"rel"  	
             });
        });
    	
    	
    	
       </script>
      </head>
      
      <body>
    	    <div id="div1" rel="blue">Hello</div>
    	    <div id="div2" rel="red">Hello</div>
    	    <div id="div3">Hello</div>
    	    <div id="div4" rel="pink">Hello</div>
    	    <div id="div5">Hello</div>
    	    <div id="div6">Hello</div>
    	    <div id="div7">Hello</div>
      </body>
    </html>
    my simple question is why do my alerts ONLY show when

    var options = $.extend({}, defaults, opts); is commented out but not otherwise?

    I understand my code isnt complete because Im not using the values populated into the options variables..but that shouldnt affect the alert statements should it.

    Thanks in advance for your help.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    This is happening because you have a typo here:

    Code:
    var defauts = 
    			           {
    				      attr: "id",
    				      backup:"N/A",
    				      useAlert:false	
    				     }
    This results in an error when you try and assign a value to options because defaults is not defined.

    You should be able to see errors of this type by viewing the console window, in for example, Firebug, or Chrome dev tools or Opera Dragonfly etc. Here, Firebug gives the error:

    ReferenceError: defaults is not defined
    var options = $.extend({}, defaults, opts);
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting


  •  

    Posting Permissions

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