Actualizar / recargar el contenido en Div usando jquery / ajax

Quiero recargar un div al hacer clic en un botón. No quiero volver a cargar la página completa.

Aquí está mi código:

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>

Al hacer clic en el <input type="button" id="getCameraSerialNumbers" value="Capture Again">botón, se <div id="list">....</div>debe recargar sin cargar ni actualizar la página completa.

A continuación se muestra el Jquery que probé, pero no funciona: -

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

Por favor recomiende.

Aquí está el DIV en mi página, que contiene imágenes y números de serie de algunos productos ... que vendrán de la base de datos por primera vez en la carga de la página. Pero si el usuario se enfrenta a algún problema, hará clic en el botón "Capturar de nuevo" " <input type="button" id="getCameraSerialNumbers" value="Capture Again">" que cargará esa información nuevamente.

El código HTML de 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>

Ahora, al hacer clic en el <input type="button" id="getCameraSerialNumbers" value="Capture Again" class="disabled" />botón, la información que se encuentra <div id="list">... </div> debe cargarse nuevamente.

Por favor avíseme si necesita más información.

Yo siempre uso esto, funciona perfecto.

$(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);

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

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

Siempre tome nota del espacio justo antes del segundo signo # ; de lo contrario, el código anterior devolverá la página completa anidada dentro de su DIV deseado. Pon siempre espacio.

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

Cuando este método se ejecuta, recupera el contenido de location.href, pero luego jQuery analiza el documento devuelto para encontrar el elemento divId. Este elemento, junto con su contenido, se inserta en el elemento con un ID ( divId) de resultado, y el resto del documento recuperado se descarta.

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

espero que esto pueda ayudar a alguien a entender

Lo que quieres es volver a cargar los datos pero no volver a cargar el div.

Debe realizar una consulta Ajax para obtener datos del servidor y completar el DIV.

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

Si bien no ha proporcionado suficiente información para indicar realmente DÓNDE debe extraer los datos, debe extraerlos de algún lugar. Puede especificar la URL en carga, así como definir parámetros de datos o una función de devolución de llamada.

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

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

Prueba esto

código HTML

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

código jQuery

 <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>

ruta del código de la página php = / ruta / a / file.php

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

Debe agregar la fuente desde donde está cargando los datos.

Por ejemplo:

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

Espero que te ayude.

Sé que el tema es antiguo, pero puede declarar el Ajax como una variable, luego usar una función para llamar a la variable en el contenido deseado. Tenga en cuenta que está llamando a lo que tiene en el Ajax si desea un elemento diferente del Ajax, debe especificarlo.

Ejemplo:

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

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

La esperanza ayuda

si no prueba:

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

$(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");
}