SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Guru ripcurlksm's Avatar
    Join Date
    Aug 2004
    Location
    San Clemente, CA
    Posts
    857
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery: on click, update div with text

    I know this can be done with (1) ajax and also (2) hide/show div's.

    I have three links and I want to update the text inside a div when each link is clicked. I thought I was doing this right...

    Code JavaScript:
    <script type="text/javascript" src="include/jquery-ui-1.8/js/jquery-1.4.2.min.js"></script>
     
    <script type="text/javascript">
     
    	$(function() {
     
    		// default text
    		$("#welcomebox").text("Welcome!");
     
    		// text if first link is clicked		
    		$("#cs1").click(function (){
    			$("#welcomebox").text("Test 1");
    		});
     
    		// text if second link is clicked
    		$("#cs2").click(function (){
    			$("#welcomebox").text("Test 2");
    		});
     
    		// text if third link is clicked
    		$("#cs3").click(function (){
    			$("#welcomebox").text("Test 3");
    		});
     
    	});
    </script>
     
     
    <a id="#cs1">One</a> | <a id="#cs2">Two</a> | <a id="#cs3">Three</a>
     
    <div id="welcomebox" style="width: 400px;"></div>

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Take a second look at the id attribute on each HTML element.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Addict
    Join Date
    Jul 2007
    Location
    San Jose, California
    Posts
    355
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code HTML4Strict:
    <a id="cs1" href="#">One</a> | <a id="cs2" href="#">Two</a> | <a id="cs3" href="#">Three</a>


    You had a hash tag in your id. I also added href that's person style makes the browser recognize the link. you can change your click function to look like this
    Code JavaScript:
    $("#cs1").click(function (e){
        e.preventDefault();
        $("#welcomebox").text("Test 1");
    });

    and will stop the link from firing but will change the text as desired.

  4. #4
    SitePoint Guru ripcurlksm's Avatar
    Join Date
    Aug 2004
    Location
    San Clemente, CA
    Posts
    857
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ahh thank you gents


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
  •