Refresh/reload the content in Div using jquery/ajax

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.

$("#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.

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

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);
						
                        });
                    }
                });
            });
        });
         });

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

What you want is to load the data again but not reload the div.

You need to make an Ajax query to get data from the server and fill the DIV.

http://api.jquery.com/jQuery.ajax/

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/

Try this

html code

 <div id="refresh">
    <input type="text" />
    <input type="button" id="click" />
 </div>

jQuery code

 <script>
    $('#click').click(function(){
    var div=$('#refresh').html();
    $.ajax({
    	url: '/path/to/file.php',
    	type: 'POST',
    	dataType: 'json',
    	data: {param1: 'value1'},
    })
    .done(function(data) {
if(data.success=='ok'){
    	$('#refresh').html(div);
}else{
// show errors.
}
    })
    .fail(function() {
    	console.log("error");
    })
    .always(function() {
    	console.log("complete");
    });
    });
    
</script>

php page code path=/path/to/file.php

<?php
   header('Content-Type: application/json');
   $done=true;
   if($done){
       echo json_encode(['success'=>'ok']);
   }
?>

You need to add the source from where you're loading the data.

For Example:

$("#step1Content").load("yourpage.html");

Hope It will help you.

I know the topic is old, but you can declare the Ajax as a variable, then use a function to call the variable on the desired content. Keep in mind you are calling what you have in the Ajax if you want a different elements from the Ajax you need to specify it.

Example:

Var infogen = $.ajax({'your query')};

$("#refresh").click(function(){
  infogen;
  console.log("to verify");
});    

Hope helps

if not try:

$("#refresh").click(function(){
      loca.tion.reload();
      console.log("to verify");
    });    

   $("#categoryTable").load(window.location + " #categoryTable");

Here i mentioned Table Id where i loading data and after delete. i am calling this code and it will refresh data without whole Page load.

What I did was something like this:

$('#x').html($('#x').html())

$(document).ready(function() {
var pageRefresh = 5000; //5 s
	setInterval(function() {
		refresh();
	}, pageRefresh);
});

// Functions

function refresh() {
	$('#div1').load(location.href + " #div1");
	$('#div2').load(location.href + " #div2");
}