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

sabinmash · 04-04-2012, 08:23 AM

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>

devnull69 · 04-04-2012, 08:36 AM

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.

sabinmash · 04-04-2012, 04:18 PM

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 :

Quote:

<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>

devnull69 · 04-04-2012, 04:42 PM

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.

sabinmash · 04-04-2012, 06:43 PM

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>

devnull69 · 04-04-2012, 07:28 PM

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();
});