The idea is: i have a main DIV with content mini divs of cars info divided two per row, that i'm getting with a query from DB, i want when pressing that button to make reload of that main content with new content from the DB, is that possible to do ? please advise.

code looks like this:

<div class="SearchBlocks">
    <div class="row">
        <div class="car_section">INFO</div>
        <div class="car_section">INFO</div>
        <div class="car_section">INFO</div>
        <div class="car_section">INFO</div>
        ......

    </div>
    <h2 class="load_more"><a id="more_link" href="#">Load more <i class="icon-custom_arrow"></i></a></h2>
</div>

The idea is: i have a main DIV with content mini divs of cars info divided two per row, that i'm getting with a query from DB, i want when pressing that button to make reload of that main content with new content from the DB, is that possible to do ? please advise.

code looks like this:

<div class="SearchBlocks">
    <div class="row">
        <div class="car_section">INFO</div>
        <div class="car_section">INFO</div>
        <div class="car_section">INFO</div>
        <div class="car_section">INFO</div>
        ......

    </div>
    <h2 class="load_more"><a id="more_link" href="#">Load more <i class="icon-custom_arrow"></i></a></h2>
</div>

• javascript
• ajax
• jquery

• 1 That is possible. What have you tried so far? Also, what back-end technology and database are you using. – Kenneth Commented Nov 10, 2013 at 11:23
• @Kenneth it's WP custom with PHP MySQL, i don't have quite experience with this, so didn't try much really... – Abude Commented Nov 10, 2013 at 11:33
• Well, you need to show some effort at least. SO is not a programmer-for-free website. There are plenty of examples out there on the web. I suggest you try something and when you get really stuck, you can e back and ask a specific question – Kenneth Commented Nov 10, 2013 at 11:35
• @Kenneth As you can see it's not the actual code, so i'm not trying to solve my personal problem, i'm trying to get the best solution for this Ajax reloading for others too – Abude Commented Nov 10, 2013 at 11:38

3 Answers 3

    function reload(url){
       $.get(url, function(data){      // $.get will get the content of the page defined in url and will return it in **data** variable 
            $('#row').append(data);
       }
    }

$('#more_link').click(function(e){ 
        e.preventDefault();
        var url = 'http://example./somepage.html';
        reload(url);  // this calls the reload function
});

You haven't shown the exact code you're using to generate your AJAX request, however the general pattern will be something like this, where the update logic is extracted in to it's own function which is called both on load of the page, and click of the #reload_cars button.

function getData() {
    $.ajax({
        url: 'yoururl.foo',
        success: function(data) {
            $('#row .car_section').remove();
            $('#row').append(data);
        }
    });
}
$('#reload_cars').on('click', getData);
getData();

just use

    function refreshDiv(){
       var container = document.getElementById("divId");
       var content = container.innerHTML;
       container.innerHTML= content;
    }