Click here to Skip to main content
13,355,311 members (57,171 online)
Click here to Skip to main content
Add your own
alternative version

Stats

8K views
5 bookmarked
Posted 5 Aug 2015

Loading or Refreshing a div Content using JQuery

, 5 Aug 2015
Rate this:
Please Sign up or sign in to vote.
In this post, we will discuss how we can load or refresh some contents to our container div in a particular interval of time.

In this post, we will discuss how we can load or refresh some contents to our container div in a particular interval of time. To do this, we will be using normal setInterval in JQuery. We will create an element which is to be considered as our container div. And by using setInterval, we will refresh the content which we create dynamically to our container div. I hope you will like this.

Using the Code

To work with, load your jQuery reference first. I am using the following version of JQuery.

<script src="http://sibeeshpassion.com/content/scripts/jquery-2.0.2.min.js"></script>

Create a container div

<div id='container'></div>

So now we can do our script part.

Implementation

Please find the below scripts:

$(document).ready(
function() {
setInterval(function() {
var randomnumber = Math.floor(Math.random() * 20);
    var html='';
    for(i=0;i<randomnumber;i++)
    {
        html+='<p>'+ randomnumber+ '</p>';
    }
    $('#container').html(html);
}, 1000);
});

As you can see, we are creating some random numbers which are less than 20.

var randomnumber = Math.floor(Math.random() * 20);

And assigning the random value to the dynamically created p tag.

html+='<p>'+ randomnumber+ '</p>'

Now, we need to style our p tag as follows:

p {
  border: 1px solid #ccc;
  border-radius: 5px;
  height: 18px;
  width: 18px;
  padding: 5px;
  text-align: center;
  background-color: #999;
  color: #fff;
  float: left;
}

That is all, it is time to run our code.

jsfiddle link: Loading or refreshing a div content jsfiddle

Output

Conclusion

I hope you liked this post. Please share your valuable feedback. Thanks!

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Sibeesh Passion
Software Developer Cognizant Technology Solutions
India India
Microsoft MVP (2016, 2017), C# Corner MVP (2014, 2015, 2016), DZone MVB

See more here

You may also be interested in...

Pro
Pro

Comments and Discussions

 
QuestionjQuery Plugin Pin
Rechousa18-Aug-15 15:48
memberRechousa18-Aug-15 15:48 
AnswerRe: jQuery Plugin Pin
Sibeesh Passion18-Aug-15 20:20
professionalSibeesh Passion18-Aug-15 20:20 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.180111.1 | Last Updated 5 Aug 2015
Article Copyright 2015 by Sibeesh Passion
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid