How to reload a div without reloading the entire page?
Asked Answered
J

5

16

I suppose what I am asking is really easy for most of you. I want to reload a div without reloading the entire page. What's the best way to do it?

<div class="black_text" id="cp_in_content_div">
<?php
$id = $_GET["id"];
$result = mysql_query("SELECT * FROM Setting WHERE ID = $id");
$row = mysql_fetch_array($result);
switch ($_GET["action"])
{
    case "delete":
    if (!unlink("$_SERVER[DOCUMENT_ROOT]setting/$row[Filename]"))
    {
        echo "Error.";
        header("Refresh: 2.5; URL=delete_setting.php?id=$id");
        exit();
    }
    if (!mysql_query("DELETE FROM Setting WHERE ID = $id"))
    {
        echo "Error.";
        header("Refresh: 2.5; URL=delete_setting.php?id=$id");
        exit();
    }
    else
    {
        echo "Ok!";
        header("Refresh: 1.25; URL=index.php");
    }
    break;
    default:
    echo "form";
}
?>
</div>

I need those header("Refresh:...") to only reload the div instead of the page.

Juliajulian answered 24/8, 2011 at 11:59 Comment(3)
Welcome to SO @Gabriele! Can you edit the question to provide the code that you are working on ?Collective
@jas:I feel he has got no code :)Lacquer
Ajax is the wayCryptoclastic
R
26

jQuery.load() is probably the easiest way to load data asynchronously using a selector, but you can also use any of the jquery ajax methods (get, post, getJSON, ajax, etc.)

Note that load allows you to use a selector to specify what piece of the loaded script you want to load, as in

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

Note that this technically does load the whole page and jquery removes everything but what you have selected, but that's all done internally.

Roundabout answered 24/8, 2011 at 12:3 Comment(3)
How do I show a "loader.gif" until entire div is not loaded. Because my div is very huge and coming from a file. So it takes about 2 seconds. How to I show something like loading... until jquery completes the task.Foliole
is there an option to load by tag not by id !?Yardman
@Yardman you can use any valid selector, even $("div").load should work, but keep in mind that this will select all divs on the page and trigger the loadRoundabout
L
8
$("#div_element").load('script.php');

demo: http://sandbox.phpcode.eu/g/2ecbe/3

whole code:

<div id="submit">ajax</div> 
<div id="div_element"></div> 
<script> 
$('#submit').click(function(event){ 
   $("#div_element").load('script.php?html=some_arguments');  

}); 
</script> 
Lacquer answered 24/8, 2011 at 12:0 Comment(0)
M
5

Use this.

$('#mydiv').load(document.URL +  ' #mydiv');

Note, include a space before the hastag.

Mainspring answered 23/2, 2017 at 10:49 Comment(1)
can i call it with tag instead of id !!?Yardman
M
1

write a button tag and on click function

var x = document.getElementById('codeRefer').innerHTML;
  document.getElementById('codeRefer').innerHTML = x;

write this all in onclick function

Misdate answered 7/6, 2016 at 11:21 Comment(1)
hi, I tried this for updating a table. but it seems like the table is still the same as before. No update in the table data, even though new data is added to the table. @Ambala ChandrashekarPrecaution
E
-1

Add id or class in that you want to reload.This javascript function replace div with new div with latest data without creating extra element without reload whole page

    $.get(location.href, function(data) {
        $(`#task_list`).html($(data).find(`#task_list`).html());
    });
 
Estreat answered 19/7 at 4:55 Comment(1)
Your answer could be improved by adding more information on what the code does and how it helps the OP.Lizarraga

© 2022 - 2024 — McMap. All rights reserved.