Refresh and replace content in a div using JQuery

Question

Ill try and make this quick and easy...I hope,

Right now I have a div that ( on page refresh ) changes the content inside. the content that is being changed is actully on the same document and im not trying to get any content form any other sources.

but what im trying to do is make a button that will refresh that div so that the user can cycle through the randomized content. it can still cycle through randomly, is there a way to do this? here is my code any help would Rock! thank you!

<div id="topjob-contain">
<ul class="jobcontrols">
<li><a href="#" id="jobchanger"  >Load Another Job +</a></li>
</ul>

<div class="newjobz">
<h1><a href="#" target="_blank">#1 Random Job Title Here</a></h1>
<p>#1 Random Agency Name here</p>
<p>#1 Random Discription of job : .sed diam nonumm tincidunt ut laoreet dolorey nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
<br clear="all" />
</div>

<div class="newjobz">
<h1><a href="#" target="_blank">#2 Random Job Title Here</a></h1>
<p>#2 Random Agency Name here</p>
<p>#2 Random Discription of job : .sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
<br clear="all" />
</div>

<div class="newjobz">
<h1><a href="#" target="_blank">#4 Job Title Here</a></h1>
<p>#3 Random Agency Name here</p>
<p>#3 Random Discription of job : .sed diam nonummy t ut laoreet dolore magna aliquam erat volutpat. </p>
<br clear="all" />
</div>

<br clear="all" />
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
////////////Randomize content on pageload
function randomFromTo(from, to){
return Math.floor(Math.random() * (to - from + 1) + from);
}

$(document).ready(function(){
var r = randomFromTo(1, $('div.newjobz').length);

$('div.newjobz').eq(r - 1).show();


});
</script>

Answer 1

You were just about there. A few changes are needed.

First add a css rule to hide your divs.

.newjobz{ display: none; }

Then change your javascript like so:

function randomFromTo(from, to) {
    return Math.floor(Math.random() * (to - from + 1) + from);
}

function displayRandomJob() {
    var r = randomFromTo(1, $('div.newjobz').length);
    $('div.newjobz').hide().eq(r - 1).show();
}

$(document).ready(function() {
    displayRandomJob();
    $('#jobchanger').click(function() {
        displayRandomJob();
    });
});

jsFiddle

Answer 2

How about something like this:

$("#buttonId").click(function() {
   var numElements =  $(".newjobz").length;
   var randomContent = $(".newjobz").eq(Math.floor(Math.random() * numElements)).html();
   $("#divToChange").html(randomContent); 
});

You could shorten this by getting rid of the variable declarations and doing it all on one long line, but I broke it up to make it more readable.

That will take the HTML from a random div with class "newjobz" and overwrite the HTML of the div with id "divToChange" with it.

Answer 3

Use http://api.jquery.com/load/