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

    AJAX to replace text then revert back to original text not working

    I am animation a box, and asynchronously changing its text that's coming in from another file. When I click on it, the box animates (grows and changes color), and call in the other text. But the box should shrink and put the original content back with clicked again, or when the close anchor link is clicked, I don't care which works. This doesn't happen, the box only animates, and I am not sure why.

    My guess is that since the anchor 'close' link is inside the '#effect div' that's to be clicked on to replace the original text, it keeps calling the first $ajax() function that replaces the original text. I dont know what would make this work the way I want though.

    Also, I know that success() is going to be deprecated soon, but when i replacing it with done, the ajax doesn't work. Not sure why.

    Code:
    		//open source file
    		$( "#effect" ).click(function() { //when this div is clicked
    			$.ajax({
    			url: 'loadedContent.html', //take this url and..
    			success: function(data) { //if this is successful
    				$('#content').html(data); //put it in here
    				}
    			}); console.log("grow");
    		});
    		//close source file
    		$( "a" ).click(function() {
    			$.ajax({
    			url: 'originalContent.html',
    			success: function(data) {
    				$('#content').html(data);
    				}
    			});  console.log("shrink");
    		});
    		
    		$( ".node" ).toggle(
    			//grow
    			function() {
    				$( ".node" ).animate({
    					backgroundColor: "#636668",
    					color: "#fff",
    					width: 800,
    					fontSize: "15pt",
    					bottom: "-=100px",
    				}, 1000 );
    			},
    			//shrink
    			function() {
    				$( ".node" ).animate({
    					backgroundColor: "#C6CCD1",
    					color: "#000",
    					width: 240,
    					fontSize: "10pt",
    					bottom: "+=100px",
    				}, 1000 );
    			}
    		); // end toggle
    	});
    	</script>
    </head>
    
    <body>
    	<div class="demo">
    	<div class="toggler">
    		<div id="effect" class="node">
    			<div id="contentContainer">
    			<div id="content">
    				<h3>Quote:</h3>
    				<p>
    					<q>Etiam libero neque, luctus a, eleifend nec, semper at, lorem.<q>
    				</p>
    			</div></div>
    		</div>
    	</div>
    	</div><!-- End demo -->
    </body>
    </html>

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    Hm curious, there is no <a> anchor tag in your code (at least you didn't show it). So why do you bind a click handler to it?

    Will the anchor tag be added dynamically? Then you need to think about using .live()/.delegate() (jQuery pre 1.7) or .on() (starting with jQuery 1.7) to delegate the click event from a higher level element.

  • #3
    New to the CF scene
    Join Date
    Apr 2012
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Sorry, the anchor tag is in the other file. I didn't think there was anything important to show in that file. It's here:

    loadedContent.html :
    <div id="loaded" >
    <div class="link"><a href="colorAnimation.html">close [x]</a>
    </div>
    <h3>LOADED SOURCE CONTENT</h3>
    <p>
    source content here
    </p>
    </div>

  • #4
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    That's what I was talking about. You can only bind .click() to existing elements. The <a> anchor tag doesn't exist yet, so you'll have to use delegate techniques as described above.

  • Users who have thanked devnull69 for this post:

    sabinmash (04-04-2012)

  • #5
    New to the CF scene
    Join Date
    Apr 2012
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I tried a few things, including toggle for the ajax. Even when it works, there is something about the ajax calls that created a 2nd set of divs from #effect, downward, after clicking the div a 2nd time, to get the old content back.

    So basically, copied from firebug after the ajax ran, this shows that is is causing a a set of divs to show inside the original set of divs.

    The following is not the actual code, but it shows the current hierarchy after the ajax runs. I am not sure why this happens (I'm really new to jQery and ajax).

    Code:
    <div class="demo">
        <div class="toggler">
            <div id="effect" class="node">
                 <title> </title>
                     <style type="text/css">
    
                      //another set starts here
                     <div class="demo">
                          <div class="toggler">
                                 <div id="effect" class="node">
                                       <div id="contentContainer">
                                             <h3>Quote:</h3>
                                               <p>

  • #6
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    Are you adding the <a> anchor tags inside the #effect div? That would explain why this happens, because both(!) .click() handlers will react on one click of the anchor which results in replacing the original content and(!) inserting the new content etc etc.

    Try to stop the propagation process from the anchor's click handler.
    Code:
    $('a').click(function(evt) {
       ...
       evt.stopPropagation();
    });

  • Users who have thanked devnull69 for this post:

    sabinmash (04-04-2012)


  •  

    Posting Permissions

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