Reload a DIV on click of another DIV

Question

I have a div called masterdiv, inside this div there are 3 other div div1, div2, and div3,

This is the html for these html:

<div id="masterdiv" class="masterdivclass">

        <div id="div1"><img class="div1class" src="image1.jpg" id="div1id" /></div>

        <div id="div2"><img class="div2class" src="image2.jpg" id="div2id" /></div>

        <div id="div3"><img class="div3class" src="image3.jpg" id="div3id" /></div>

</div>

I also have another div:

<div id=”reload”><img src="reload.png" width="200" height="70" onclick=loadDIV();></div>

What I’m trying to do is to reload the masterdiv div whenever the reload div is clicked on. Hiding and then showing the div isn’t enough as I need the content to be reloaded when the refresh div is clicked on. I don’t want to reload the entire page, just the masterdiv which contains the 3 other div. But I’m not certain this is possible.

I’m trying to do it with this Javascript function:

<script type="text/javascript">
       function loadDiv(){
       $("<div id="masterdiv" class="masterdivclass">

        <div id="div1"><img class="div1class" src="image1.jpg" id="div1id" /></div>

        <div id="div2"><img class="div2class" src="image2.jpg" id="div2id" /></div>

        <div id="div3"><img class="div3class" src="image3.jpg" id="div3id" /></div>

</div>").appendTo("body");
       }
    </script>

This isn’t working, I think maybe I'm going about this in the wrong way? Maybe I’m missing something very simple here? I’d really appreciate any help with this, thank you in advance!

UPDATE

After reconsidering my project's requirements, I need to change part of my question, I now need to randomise the images displayed in the divs, and have a new random image load every time the reload div is clicked on. I also need to remove each class that’s currently in each of the three divs and then reattach the same classes to the divs (if I don’t remove and reattach the classes then the divs just display the plain images without any class/effect applied to them, it seems like I need to reload the class every time I load an image into a div in order for the class/effect to be applied successfully).

I have 5 images, and I’m using each div’s id tag to attach a random image to each div.

First I’m assigning the 5 different images to 5 different ids:

<script>
document.getElementById('sample1').src="images/00001.jpg";
document.getElementById('sample2').src="images/00002.jpg";
document.getElementById('sample3').src="images/00003.jpg";
document.getElementById('sample4').src="images/00004.jpg";
document.getElementById('sample5').src="images/00005.jpg";
</script> 

And then I’m trying to use the following Javascript to load a randomised id (and its assigned image) to each of the 3 divs when the reload div is clicked:

<script>
$(function() {
    $('#reload').on('click',function(){
        $("#masterdiv").find("div[id^='div']").each(function(index){

//First, remove and reattach classes “div1class”, “div2class” and “div3class” 
//from “easyDIV”, “mediumDIV” and “hardDIV” respectively:
            $(“#easyDIV”).removeClass('div1class');
            $(“#easyDIV”).addClass('div1class');
            $(“#mediumDIV”).removeClass('div2class');
            $(“#mediumDIV”).addClass('div2class');
            $(“#hardDIV”).removeClass('div3class');
            $(“#hardDIV”).addClass('div3class');


//Get a random number between 1 and 5, then attach it to “sample”, 
//so that the result will be either “sample1”, “sample2”, “sample3”, “sample4” or “sample5”, 
//call this variable “variablesample”:
    var num = Math.floor(Math.random() * 5 + 1); 
       variablesample = "sample" +num;

//Attach this randomised id to all three divs using “variablesample”:
           jQuery(this).prev("easyDIV").attr("id",variablesample);
           jQuery(this).prev("mediumDIV").attr("id",variablesample);
           jQuery(this).prev("hardDIV").attr("id",variablesample);

        });
        var p = $("#masterdiv").parent();
        var el = $("#masterdiv").detach();
        p.append(el);
    });
});
</script> 

I’m trying to make it so that all 3 divs will show the same randomised picture (that’s why they’re all sharing the variable “variablesample”), and each div will reload its own class/effect (div1class, div2class and div3class) but it’s not working. I’m not sure if it’s correct to use jQuery inside a Javascript function, or if my syntax for updating the ids of the divs is incorrect.

Perhaps my logic to solving this problem is all wrong? I’d really appreciate any more help with this problem. Thanks again in advance!

Answer 1

For posterities sake, I will leave all my answers to all the edits to the original question.. I hope we reached the right question eventually..? :)

First answer (use of .detach() to "reload" an element): jsfiddle demo

Second answer (random class, as asked for): jsfiddle demo

Third answer (random image, but same image on all 3, and 3 class on/off switching): jsfiddle demo

$(function() {
    var imageArray = [
        'https://placehold.it/40x40',
        'https://placehold.it/80x40',
        'https://placehold.it/120x40',
        'https://placehold.it/160x40',
        'https://placehold.it/200x40'];
    reloadImages(imageArray);
    $('#reload').on('click',function(){
        $( "#masterdiv img[id^='div']" ).each(function(index){
            $(this).removeClass("div"+(index+1)+"class");
            $(this).fadeOut( "slow", function() {
                if(index==0) {
                    reloadImages(imageArray);
                }
                $(this).addClass("div"+(index+1)+"class");
                $(this).fadeIn();

            });
        });
    });
});


function shuffleArray(array) {
    for (var i = array.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var temp = array[i];
        array[i] = array[j];
        array[j] = temp;
    }
    return array;
}

function reloadImages(array){
    shuffleArray(array);
    for(var i=0;i<3;i++){
        // places the first image into all divs, change 0 to i if you want different images in each div
        document.getElementById('div'+(i+1)+'id').src=array[0];
    }
}

.div1class {
    border:2px dashed #0F0;
}
.div2class {
    border:2px dashed yellow;
}
.div3class {
    border:2px dashed red;
}
#reload {
    background-color:blue;
    width:100px;
    height:30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id='reload'>Click here</div>

<div id="masterdiv" class="masterdivclass">
    <div id="div1">
        <img src="https://placehold.it/20x40" class="div1class" id="div1id" />
    </div>
    <div id="div2">
        <img src="https://placehold.it/20x40" class="div2class" id="div2id" />
    </div>
    <div id="div3">
        <img src="https://placehold.it/20x40" class="div3class" id="div3id" />
    </div>
</div>

Answer 2

try:

function loadDiv(){

    $("#masterdiv").load(location.href + " #masterdiv");

}

Here's the code pen demo: http://codepen.io/anon/pen/xwgRWm

Answer 3

If content of container is not being changed dynamically then there is no point reloading it. appendTo wiil append DOM in existing DOM structure, you will need html() here which will replace the content inside container. Also note you had typo here onclick=loadDiv();

HTML:

<div id="masterdiv" class="masterdivclass">

    <div id="div1"><img class="div1class" src="image1.jpg" id="div1id"/></div>

    <div id="div2"><img class="div2class" src="image2.jpg" id="div2id"/></div>

    <div id="div3"><img class="div3class" src="image3.jpg" id="div3id"/></div>

</div>
<div id="reload"><img src="reload.png" width="200" height="70" onclick=loadDiv();></div>

JS:

function loadDiv() {
    $("#masterdiv").html('<div id="div1"><img class="div1class" src="image1.jpg" id="div1id" /></div>\
            <div id="div2"><img class="div2class" src="image2.jpg" id="div2id" /></div>\
            <div id="div3"><img class="div3class" src="image3.jpg" id="div3id" /></div>');
}

Answer 4

Line breaks and un-escaped quotes are why the functions is not working.

function loadDiv(){
    $('#masterdiv').remove();
    $("<div id='masterdiv' class='masterdivclass'><div id='div1'><img class='div1class' src='image1.jpg' id='div1id' /></div><div id='div2'><img class='div2class' src='image2.jpg' id='div2id' /></div><div id='div3'><img class='div3class' src='image3.jpg' id='div3id' /></div></div>").appendTo("body");
}