Refresh/reload the content in Div using jquery/ajax

Question

I want to reload a div on click of a button. I do not want to reload the full page.

Here is my code:

HTML:

<div role="button" class="marginTop50 marginBottom">
    <input type="button" id="getCameraSerialNumbers" value="Capture Again" class="disabled" />
    <input type="button" id="confirmNext"  value="Confirm & Proceed" class="disabled marginLeft50" />
</div>

On click of <input type="button" id="getCameraSerialNumbers" value="Capture Again"> Button a <div id="list">....</div> should reload without loading or refreshing full page.

Below is the Jquery which I tried, but not working:-

$("#getCameraSerialNumbers").click(function () {
    $("#step1Content").load();
});

Please suggest.

Here is the DIV on my page, which contains Pictures and Serial numbers of some products... Which will be coming from database 1st time on the Page Load. But Is User faces some issue he'll click tthe "Capture Again" button "<input type="button" id="getCameraSerialNumbers" value="Capture Again">" which will load those information again.

The HTML Code of Div:-

<div id="step1Content" role="Step1ShowCameraCaptures" class="marginLeft">

<form>
    <h1>Camera Configuration</h1>
    <!-- Step 1.1 - Image Captures Confirmation-->
    <div id="list">
        <div>
            <p>
                <a id="pickheadImageLightBox" data-lightbox="image-1" title="" href="">
                    <img alt="" id="pickheadImage" src="" width="250" height="200" />
                </a>
            </p>
            <p>
                <strong>Pickhead Camera Serial No:</strong><br />
                <span id="pickheadImageDetails"></span>
            </p>
        </div>
        <div>
            <p>
                <a id="processingStationSideImageLightBox" data-lightbox="image-1" title="" href="">
                    <img alt="" id="processingStationSideImage" src="" width="250" height="200" />
                </a>
            </p>
            <p>
                <strong>Processing Station Top Camera Serial No:</strong><br />
                <span id="processingStationSideImageDetails"></span>
            </p>
        </div>
        <div>
            <p>
                <a id="processingStationTopImageLightBox" data-lightbox="image-1" title="" href="">
                    <img alt="" id="processingStationTopImage" src="" width="250" height="200" />
                </a>
            </p>
            <p>
                <strong>Processing Station Side Camera Serial No:</strong><br />
                <span id="processingStationTopImageDetails"></span>
            </p>
        </div>
        <div>
            <p>
                <a id="cardScanImageLightBox" data-lightbox="image-1" title="" href="">
                    <img alt="" id="cardScanImage" src="" width="250" height="200" />
                </a>
            </p>
            <p>
                <strong>Card Scan Camera Serial No:</strong><br />
                <span id="cardScanImageDetails"></span>
            </p>

        </div>
    </div>
    <div class="clearall"></div>

    <div class="marginTop50">
        <p><input type="radio" name="radio1" id="optionYes" />Yes, the infomation captured is correct.</p>
        <p><input type="radio" name="radio1" id="optionNo" />No, Please capture again.</p>
    </div>
    <div role="button" class="marginTop50 marginBottom">
        <input type="button" id="getCameraSerialNumbers" value="Capture Again" class="disabled" />
        <input type="button" id="confirmNext"  value="Confirm & Proceed" class="disabled marginLeft50" />
    </div>
</form>

Now on click of <input type="button" id="getCameraSerialNumbers" value="Capture Again" class="disabled" /> button, the information which is in <div id="list">... </div> should be loaded again.

Please let me know if you need some more information.

Solution 1

I always use this, works perfect.

$(document).ready(function(){
        $(function(){
        $('#ideal_form').submit(function(e){
                e.preventDefault();
                var form = $(this);
                var post_url = form.attr('action');
                var post_data = form.serialize();
                $('#loader3', form).html('<img src="../../images/ajax-loader.gif" />       Please wait...');
                $.ajax({
                    type: 'POST',
                    url: post_url, 
                    data: post_data,
                    success: function(msg) {
                        $(form).fadeOut(800, function(){
                            form.html(msg).fadeIn().delay(2000);

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

Solution 2

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

Always take note of the space just before the second # sign, otherwise the above code will return the whole page nested inside you intended DIV. Always put space.

Solution 3

$("#myDiv").load(location.href+" #myDiv>*","");

Solution 4

When this method executes, it retrieves the content of location.href, but then jQuery parses the returned document to find the element with divId. This element, along with its contents, is inserted into the element with an ID (divId) of result, and the rest of the retrieved document is discarded.

$("#divId").load(location.href + " #divId>*", "");

hope this may help someone to understand

Solution 5

While you haven't provided enough information to actually indicate WHERE you should be pulling data from, you do need to pull it from somewhere. You can specify the URL in load, as well as define data parameters or a callback function.

$("#getCameraSerialNumbers").click(function () {
    $("#step1Content").load('YourUrl');
});

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

View more solutions

Comments

[Rory McCrossan]

There's not nearly enough detail here. Where are you trying to get content from? What code have you got to do that? Are there any errors? Why does it 'not work'?

[Alvaro]

What do you exactly want to reload? Would you need to call the database?

[jcubic]

What is inside #step1Content and what you want it to be after clicking the button?

[A. Wolff]

The question is how do you firstly fill DIV #list content?

[m4rtin]

Please provide explanations along your answer, it will help others understand why you think it is a good answer to the question.

[Shashank Shekhar]

@php_coder_3809625 To be honest, Peca answered a couple of months after Juan :)

[Domenico De Felice]

I think you can also remove the delay since it, as per documentation, delays subsequent calls.

[Gucho Ca]

Oh Yes, its Just a nice effect! ;)

[Mathias]

This nests a #mydiv in a #mydiv for every call to load. The correct version is provided by Juan.

[Gucho Ca]

This is not AJAX as the questions says.

[Gaurav Parek]

@Juan: could you please explain what it does exactly. thanks

[151291]

$('#loader3', form); contains form ? can i remove this? because i am using change methed not submit.

[Ricky Barnett]

How would I adjust this to also reload all children?

[Dale Clifford]

It's not necessarily AJAX, but delivers the expected user experience

[Gucho Ca]

151291 yes, its the ID of my form, change it as your needs.

[Koeno]

Is it possible to include parameters in the uri? For example: $("#relation-body").load(location.href+" #relation-body?organization_id="+item.id);

[jack blank]

form is a wrapped in jquery so why did you do $(form).fadeOut(800, function(){

[Thamilhan]

This would affect jquery calls as it creates dynamic elements on the DOM, jquery fails. So make use of on event in jquery instead of directly accessing the element inside this div

[TarangP]

can i use class insted of id ?

[weegolo]

worth noting that any jquery $(document).ready functions that apply to elements within that div will not get triggered by this reload.

[Matthew]

I am finding that this implementation also results in the nesting problem.

[harshil suthar]

is will create #mydiv inside parent #mydiv. so if you are using bootstrap then it will affect shchema.