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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jul 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    New to js and Ajax in particular. Why is my <a> ignoring the attached function?

    Hello,

    I'm using the latest versions of Behaviour and Prototype for my experiment so I will not be posting the code for these.

    I am trying to get a js function to execute onclick by attaching to an <a> tag through Behaviour.

    When the page loads I can click the button and I'll successfully get my Ajax response. If I click the link called "1" I'll be taken to the page defined in the href of the element. However if I simply change the <a> to an <li> and refresh the page I can successfully get my Ajax response.

    For some reason (probably painfully obvious to some of you) my <a> tag ignores the attached function. What am I missing?


    Thanks!
    Chris.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <title></title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" type="text/css" media="screen" href="lib/css/general.css" />
    <script src="prototype-1.4.0.js" type="text/javascript"></script>
    <script src="behaviour.js" type="text/javascript"></script>
    </head>
    
    <script>
    	function getHTML()
    	{
    		var url = 'test_1_html.php';
    		var pars = 'someParameter=ABC';
    		
    		var myAjax = new Ajax.Updater(
    			'placeholder',
    			url,
    			{
    				method: 'get',
    				parameters: pars
    			});
    	}
    
    	var myrules = {
    		'#link1' : function(element){
    			element.onclick = function(){
    				// Your onclick event goes here - eg;
    				// load a page - do an AJAX etc.;
    				getHTML(this.href);
    			}
    		}
    	};
    	
    	Behaviour.register(myrules);
    </script>
    
    <input type="button" value="GetHtml" onclick="getHTML()">
    
    <a id="link1" href="test_1_html.php?value=2">1</a>
    <div id="placeholder"></div>
    
    <body>
    
    </body>
    </html>

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Try return false; in your getHTML function. The link might be going to the href before it gets the url.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Maybe this:
    element.onclick = function(){
    // Your onclick event goes here - eg;
    // load a page - do an AJAX etc.;
    getHTML(this.href);return false
    }
    Your a element do not ignore the function. It just follows the normal default HTML action and open the href. When using the li element, href becomes a simple attribute, with no HTML action, as li element can not open a link with href attribute.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #4
    New to the CF scene
    Join Date
    Jul 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Kor
    Maybe this:
    element.onclick = function(){
    // Your onclick event goes here - eg;
    // load a page - do an AJAX etc.;
    getHTML(this.href);return false
    }
    Ahh.. success!


    Thank you!


  •  

    Posting Permissions

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