Change element of AJAX loaded content

Question

I have a question regarding passing information with Ajax. I have a project which consists of a main page that has various sections. Each section is loaded using ajax. The home page has a picture gallery that one can browse using the plus and minus arrows. The gallery.html page has all the pictures in a smaller size. I don't reproduce the css here to save time. If you look at eh js file, you will see that for the home page there is a simple function that changes the source of the image in order to browse.

What I would like to do is that on the gallery page, when you click on an image, not only the home page is loaded, but that the picture you clicked on is loaded.

my function

$( document ).on('click', '.littleImages', function(e){
var imageSource = $(this).attr('src');
$( '#container' ).remove();
$( '#content').load('index.html' + ' #content').hide().fadeIn('slow');
$( '#front' ).attr('src', imageSource);
});
    });

is not working. This is my first attempt at doing something like this with ajax. I think you can pass information with your ajax request but not too sure how to do it. How would I go about this? Thank you.

index.html

<!DOCTYPE html>
<html lang="en-US">

    <head>

        <meta charset="UTF-8">
        <title>Photography</title>
        <link rel="stylesheet" type="text/css" href="styles.css">

    </head>

    <body>

    <div id="header">
      <div id="title"><h1>TITLE<span id="subtitle">SUBTITLE</span></h1></div>
          <nav class="cf" id="menu">
          <ul>
            <li><a href="about.html">ABOUT</a></li>
            <li><a href="gallery.html">GALLERY</a></li>
            <li><a href="bio.html">BIO</a></li>
            <li><a href="contact.html">CONTACT</a></li>
            <li><a href="index.html" class="current">HOME</a></li>
          </ul>
          </nav>
    </div>

    <section id="content">

    <div id="container">

      <div id="imagewrap">
        <img src="Images/Images/Image1.jpg" id="front" />

        <div id="previous" class="buttons"></div>

        <div id="next" class="buttons"></div>
      </div>

    </div> <!-- end of content -->

    </section> <!-- end of container -->


    <div id="footer">
    </div>

    <script type="text/javascript" src="jquery-3.1.0.min.js"></script>
    <script type="text/javascript" src="JavaScript.js"></script>

    </body>

</html>

gallery.html

<!DOCTYPE html>
<html lang="en-US">

  <head>

    <meta charset="UTF-8">
    <title>Photography</title>
    <link rel="stylesheet" type="text/css" href="styles.css">

  </head>

  <body>

    <section id="content">

    <div id="container">

      <div id="gallery" class="sections">
        <img src="Images/Image1.jpg" class="littleImages">
        <img src="Images/Image2.jpg" class="littleImages">
        <img src="Images/Image3.jpg" class="littleImages">
        <img src="Images/Image4.jpg" class="littleImages">
        <img src="Images/Image5.jpg" class="littleImages">
        <img src="Images/Image6.jpg" class="littleImages">
        <img src="Images/Image7.jpg" class="littleImages">
        <img src="Images/Image8.jpg" class="littleImages">
        <img src="Images/Image9.jpg" class="littleImages">
        <img src="Images/Image10.jpg" class="littleImages">
        <img src="Images/Image11.jpg" class="littleImages">
        <img src="Images/Image12.jpg" class="littleImages">
        <img src="Images/Image13.jpg" class="littleImages">
        <img src="Images/Image14.jpg" class="littleImages">
        <img src="Images/Image15.jpg" class="littleImages">
        <img src="Images/Image16.jpg" class="littleImages">
        <img src="Images/Image17.jpg" class="littleImages">
        <img src="Images/Image18.jpg" class="littleImages">
        <img src="Images/Image19.jpg" class="littleImages">
        <img src="Images/Image20.jpg" class="littleImages">

      </div>

    </div> <!-- end of content -->

    </section> <!-- end of container -->

  </body>

</html>

.js

$( document ).ready(function() {

$( "#imagewrap" ).hide();

function showPicture() {
$( "#imagewrap" ).fadeIn('slow');
}

setTimeout(showPicture, 2000);

$( "nav a" ).on('click', function(e){
    e.preventDefault();
    var url = this.href;
    $( "nav a.current" ).removeClass("current");
    $(this).addClass("current");
    $( '#container' ).remove();
    $( '#content').load(url + ' #content').hide().fadeIn('slow');
    });


counter = 1;
$( '.buttons' ).on('click', function(e){
    if (counter < 1 || counter > 5) {return false;}
    var id = e.target.id;
    if (id == "next" && counter < 5){counter++;
    } else if (id == "previous" && counter > 1){counter--;}
    getImage();
});
getImage = function() {
    document.getElementById("front").src = "Images/Images/Image" + counter + ".jpg";
}

$( document ).on('click', '.littleImages', function(e){
var imageSource = $(this).attr('src');
$( '#container' ).remove();
$( '#content').load('index.html' + ' #content').hide().fadeIn('slow');
$( '#front' ).attr('src', imageSource);
});
    });

Answer 1

You are trying to access an element that is not loaded into the DOM yet. AJAX is "asynchronous", as the name suggests. So you're trying to set the source on your front element before the load() has completed. Use the completion call back to fix this.

$( '#content').load('index.html' + ' #content', function(){
  $( '#front' ).attr('src', imageSource);
}).hide().fadeIn('slow');

Change element of AJAX loaded content

Question

1 answers

solution1
0 ACCPTED 2017-04-25 23:09:48

Change element of AJAX loaded content

Question

1 answers

solution1 0 ACCPTED 2017-04-25 23:09:48

solution1
0 ACCPTED 2017-04-25 23:09:48