WOOHOO! Finally got my ajax working

  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

So as you can see from the forum section, I've kinda been hogging the posts trying to get this thing working and I think I finally got it.

my xml:
XML Code: [ Select ]
      <image
         source="tadesign/images/carcare.jpg"
         description="Description text goes here about carcaredetail"
         id="web"
      />
     
      <image
         source="tadesign/images/monster.jpg"
         description="Description text goes here about monster resolution"
         id="web"
      />
 
      <image
         source="tadesign/images/logistics.jpg"
         description="Description text goes here about Business Logistics"
         id="business"
      />
     
      <image
         source="tadesign/images/CSINK.jpg"
         description="Description text goes here about CSINK poster design"
         id="ad"
      />
     
      <image
         source="tadesign/images/openmic4.jpg"
         description="Description text goes here about open mic night"
         id="ad"
      />
 
  1.       <image
  2.          source="tadesign/images/carcare.jpg"
  3.          description="Description text goes here about carcaredetail"
  4.          id="web"
  5.       />
  6.      
  7.       <image
  8.          source="tadesign/images/monster.jpg"
  9.          description="Description text goes here about monster resolution"
  10.          id="web"
  11.       />
  12.  
  13.       <image
  14.          source="tadesign/images/logistics.jpg"
  15.          description="Description text goes here about Business Logistics"
  16.          id="business"
  17.       />
  18.      
  19.       <image
  20.          source="tadesign/images/CSINK.jpg"
  21.          description="Description text goes here about CSINK poster design"
  22.          id="ad"
  23.       />
  24.      
  25.       <image
  26.          source="tadesign/images/openmic4.jpg"
  27.          description="Description text goes here about open mic night"
  28.          id="ad"
  29.       />
  30.  


my jQuery ajax:
Code: [ Select ]
$.ajax({
  url: "js/img3.xml",type: 'GET',dataType: 'xml',timeout: 1000,error: function(){alert('Error loading XML document');},
  success: function(xml) {
     $(xml).find('image[id=web]').each(function(){
             var source = $(this).attr('source');
             var desc = $(this).attr('description');
             var category = $(this).attr('id');
             var index = $(xml).find('image').index(this);
       $("#textcontainer").append('<p class="web' + index + '">' + desc + '</p>');
             $("#webthumblist").append('<li><a class="web' + index + '"></a>');
             $("#imagecontainer").append('<img src="' + source + '" class="web' + index + '" alt="' + desc + '" />');
     });
         $(xml).find('image[id=business]').each(function(){
             var source = $(this).attr('source');
             var desc = $(this).attr('description');
             var category = $(this).attr('id');
             var index = $(xml).find('image').index(this);
       $("#textcontainer").append('<p id="business' + index + '">' + desc + '</p>');
             $("#logothumblist").append('<li><a id="business' + index + '"></a>');
             $("#imagecontainer").append('<img src="' + source + '" class="business' + index + '" alt="' + desc + '" />');
     });
         $(xml).find('image[id=ad]').each(function(){
             var source = $(this).attr('source');
             var desc = $(this).attr('description');
             var category = $(this).attr('id');
             var index = $(xml).find('image').index(this);
       $("#textcontainer").append('<p class="ad' + index + '">' + desc + '</p>');
             $("#adthumblist").append('<li><a class="ad' + index + '"></a>');
             $("#imagecontainer").append('<img src="' + source + '" class="ad' + index + '" alt="' + desc + '" />');
     });
         $(xml).find('image[id=personal]').each(function(){
             var source = $(this).attr('source');
             var desc = $(this).attr('description');
             var category = $(this).attr('id');
             var index = $(xml).find('image').index(this);
       $("#textcontainer").append('<p class="personal' + index + '">' + desc + '</p>');
             $("#personalthumblist").append('<li><a class="personal' + index + '"></a>');
             $("#imagecontainer").append('<img src="' + source + '" class="personal' + index + '" alt="' + desc + '" />');
     });
  }
});
  1. $.ajax({
  2.   url: "js/img3.xml",type: 'GET',dataType: 'xml',timeout: 1000,error: function(){alert('Error loading XML document');},
  3.   success: function(xml) {
  4.      $(xml).find('image[id=web]').each(function(){
  5.              var source = $(this).attr('source');
  6.              var desc = $(this).attr('description');
  7.              var category = $(this).attr('id');
  8.              var index = $(xml).find('image').index(this);
  9.        $("#textcontainer").append('<p class="web' + index + '">' + desc + '</p>');
  10.              $("#webthumblist").append('<li><a class="web' + index + '"></a>');
  11.              $("#imagecontainer").append('<img src="' + source + '" class="web' + index + '" alt="' + desc + '" />');
  12.      });
  13.          $(xml).find('image[id=business]').each(function(){
  14.              var source = $(this).attr('source');
  15.              var desc = $(this).attr('description');
  16.              var category = $(this).attr('id');
  17.              var index = $(xml).find('image').index(this);
  18.        $("#textcontainer").append('<p id="business' + index + '">' + desc + '</p>');
  19.              $("#logothumblist").append('<li><a id="business' + index + '"></a>');
  20.              $("#imagecontainer").append('<img src="' + source + '" class="business' + index + '" alt="' + desc + '" />');
  21.      });
  22.          $(xml).find('image[id=ad]').each(function(){
  23.              var source = $(this).attr('source');
  24.              var desc = $(this).attr('description');
  25.              var category = $(this).attr('id');
  26.              var index = $(xml).find('image').index(this);
  27.        $("#textcontainer").append('<p class="ad' + index + '">' + desc + '</p>');
  28.              $("#adthumblist").append('<li><a class="ad' + index + '"></a>');
  29.              $("#imagecontainer").append('<img src="' + source + '" class="ad' + index + '" alt="' + desc + '" />');
  30.      });
  31.          $(xml).find('image[id=personal]').each(function(){
  32.              var source = $(this).attr('source');
  33.              var desc = $(this).attr('description');
  34.              var category = $(this).attr('id');
  35.              var index = $(xml).find('image').index(this);
  36.        $("#textcontainer").append('<p class="personal' + index + '">' + desc + '</p>');
  37.              $("#personalthumblist").append('<li><a class="personal' + index + '"></a>');
  38.              $("#imagecontainer").append('<img src="' + source + '" class="personal' + index + '" alt="' + desc + '" />');
  39.      });
  40.   }
  41. });


Now if I could just figure out how to get the class of the generated link when a person clicks on it so I can add functionality to all the other items on my page with the same class...

any takers?
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

So this isn't working:
JAVASCRIPT Code: [ Select ]
$("#leftcolumn li a").click(
      function(){
         var index = $(this).attr("class").text();
         $(*).find(index).each(
            function(){
               $(this).addClass('active');
            });
      });
 
  1. $("#leftcolumn li a").click(
  2.       function(){
  3.          var index = $(this).attr("class").text();
  4.          $(*).find(index).each(
  5.             function(){
  6.                $(this).addClass('active');
  7.             });
  8.       });
  9.  


I'm sure you could figure out what I'm trying to do. I want to find all elements with the same class as the link being clicked and add a class to them called "active"

Where am I going wrong?
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

You don't need the .text as .attr returns the text, and the selector is a bit off. Have a look at this. Demo here.

JAVASCRIPT Code: [ Select ]
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<style>
   .active { background-color: red; }
   div { width:100px; height:100px; margin-bottom: 10px; background-color: black; }
</style>
</head>
<body>
 
   <div="#" id="leftcolumn">
      <ul>
         <li><a href="#" class="first">First</a></li>
         <li><a href="#" class="second">Second</a></li>
         <li><a href="#" class="third">Third</a></li>
      </ul>
     
      <div class="first">&nbsp;</div>
      <div class="second">&nbsp;</div>
      <div class="third">&nbsp;</div>
   </div>
 
<script>
   $("#leftcolumn li a").click( function(){
      var index = $(this).attr("class");
      $('.' + index).each( function(){
         $(this).addClass('active');
      });
   });
 
</script>
</body>
</html>
 
  1. <html>
  2. <head>
  3. <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
  4. <style>
  5.    .active { background-color: red; }
  6.    div { width:100px; height:100px; margin-bottom: 10px; background-color: black; }
  7. </style>
  8. </head>
  9. <body>
  10.  
  11.    <div="#" id="leftcolumn">
  12.       <ul>
  13.          <li><a href="#" class="first">First</a></li>
  14.          <li><a href="#" class="second">Second</a></li>
  15.          <li><a href="#" class="third">Third</a></li>
  16.       </ul>
  17.      
  18.       <div class="first">&nbsp;</div>
  19.       <div class="second">&nbsp;</div>
  20.       <div class="third">&nbsp;</div>
  21.    </div>
  22.  
  23. <script>
  24.    $("#leftcolumn li a").click( function(){
  25.       var index = $(this).attr("class");
  26.       $('.' + index).each( function(){
  27.          $(this).addClass('active');
  28.       });
  29.    });
  30.  
  31. </script>
  32. </body>
  33. </html>
  34.  


If you wanted to add active to all elements sharing the class EXCEPT the link you just clicked, then I recommend placing the links in one div and affected elements in another, and then using the parent ID as a selector filter. Demo here (notice the link doesn't take on the red bg this time).


Code: [ Select ]
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<style>
    .active { background-color: red; }
    div { width:100px; height:100px; margin-bottom: 10px; background-color: black; }
</style>
</head>
<body>

    <div="#" id="leftcolumn">
        <ul>
            <li><a href="javascript:void(0);" class="first">First</a></li>
            <li><a href="javascript:void(0);" class="second">Second</a></li>
            <li><a href="javascript:void(0);" class="third">Third</a></li>
        </ul>
    </div>
    <div id="everythingElse">
        <div class="first">&nbsp;</div>
        <div class="second">&nbsp;</div>
        <div class="third">&nbsp;</div>
    </div>

<script>
    $("#leftcolumn li a").click( function(){
        var index = $(this).attr("class");
        $('#everythingElse > .' + index).each( function(){
            $(this).addClass('active');
        });
    });

</script>
</body>
</html>
  1. <html>
  2. <head>
  3. <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
  4. <style>
  5.     .active { background-color: red; }
  6.     div { width:100px; height:100px; margin-bottom: 10px; background-color: black; }
  7. </style>
  8. </head>
  9. <body>
  10.     <div="#" id="leftcolumn">
  11.         <ul>
  12.             <li><a href="javascript:void(0);" class="first">First</a></li>
  13.             <li><a href="javascript:void(0);" class="second">Second</a></li>
  14.             <li><a href="javascript:void(0);" class="third">Third</a></li>
  15.         </ul>
  16.     </div>
  17.     <div id="everythingElse">
  18.         <div class="first">&nbsp;</div>
  19.         <div class="second">&nbsp;</div>
  20.         <div class="third">&nbsp;</div>
  21.     </div>
  22. <script>
  23.     $("#leftcolumn li a").click( function(){
  24.         var index = $(this).attr("class");
  25.         $('#everythingElse > .' + index).each( function(){
  26.             $(this).addClass('active');
  27.         });
  28.     });
  29. </script>
  30. </body>
  31. </html>
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

Just copied and pasted your script and it's not working. I'm not sure why. My css doesn't seem to have any issues. Is it because the classes I'm trying to effect are generated?
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

I don't know man. Best I can do - both of those examples have links to working examples. Not sure why it wouldn't work for you.
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

alright, I'll keep tinkering with it.
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

I just tried to dynamically hide my images and paragraphs that are generated via ajax using this:

JAVASCRIPT Code: [ Select ]
$('#textcontainer p').css({
         display : "none",
                  });
$('#imagecontainer img').css({
         display : "none",
                  });
 
  1. $('#textcontainer p').css({
  2.          display : "none",
  3.                   });
  4. $('#imagecontainer img').css({
  5.          display : "none",
  6.                   });
  7.  


I'm not a programming genious, but I know for a fact that this script should work, but it's not hiding them; which leads me to believe that it's because my code is generated.
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

hang on, this is interesting. The script works when I put it inside my success parameter of my ajax call.
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

Awesome dealio, I've got it. Check it out!

No possible way I would have ever done it without your help UPSguy. Thanks a ton!
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

You're welcome. Looking good. :)

Post Information

  • Total Posts in this topic: 10 posts
  • Users browsing this forum: No registered users and 137 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.