We Keep Coding

How refresh particular div without reload whole page?

<div id="success_hold">
<?php
if($row['mandate_end']!=date('Y-m-d') && $row['job_position']=='unhold')
{
echo '<span class="badge badge-success">Open</span>';
}
else
{
echo '<span class="badge badge-warning">Hold</span>';
}
?>
</div>
<script>
$(document).ready(function(){
var flag = 1;
$(".hold").click(function(){
job_id = this.id;
if(flag == 1)
{
$.ajax({
type:"POST",
data:{"job_id":job_id},
url:"<?php echo base_url(); ?>pausehold",
success:function(data){
$("#success_hold").load("#success_hold");
}
});
flag = 0;
}
else
{
$.ajax({
type:"POST",
data:{"job_id":job_id},
url:"<?php echo base_url(); ?>resumehold",
success:function(data){
$("#success_hold").load("#success_hold");
}
});
flag = 1;
}
});
});
</script>
I have div where id="success_hold". Now, what happens when I click on class="hold" I am updating my data. Now, I want to refresh my <div id="success_hold"> without reload whole page where I am using .load() function But the problem is that when I use .load() the function shows the whole page in success_hold. So, How can I fix this issue? I want to refresh only success_hold.
Thank You

The problem is because load() is used to make another AJAX request and place the a portion of the HTML retrieved from that request in the target element.
As you're already making an AJAX request to get the data, which is presumably HTML, you simply need to append() data to the container.
Also note that the only difference between the two sides of your condition is the URL the request is sent to, so you can easily DRY this code up:
$(document).ready(function() {
var flag = true;
$(".hold").click(function() {
var url = '<?php echo base_url(); ?>' + (flag ? 'pausehold' : 'resumehold');
flag = !flag;
$.ajax({
type: "POST",
data: { job_id: this.id },
url: url,
success: function(data) {
$("#success_hold").append(data);
}
});
});
});
If data contains the entire page, then you should change that PHP file to return only the relevant HTML as it will help to speed up the request. If, for whatever reason, you can't do that then you can extract the required element from the response like this:
$("#success_hold").append($(data).find('#success_hold'));

success:function(data){
$("#success_hold").load("#success_hold");
}
This is your success method in ajax. You want to pur the content of data into your div #success_hold ?
If you want that, just do this :
success:function(data){
$("#success_hold").html(data);
}

Is it possible to load content of page without Refreshing the whole page

Actually i want to refresh my content of a page without Refreshing the whole page through JavaScript or j Query ....... and i did my whole project into ( Php or javaScript) so i face such type of problem
Note : i want to refresh my page content when user do some action
Here is my Code:
//On Button click, the below will be execute:
$('body').on('click', '#click', loadDoc);
and the LoadDoc functio:
function loadDoc() {
//alert('heruybvifr');
var _this = $(this);
var order_id= $(this).parents('.modal').find('.order-id').text();
$.get('myPHP.php',{order_id: order_id},function(){
_this.hide();
})
}
Now myPHP.php :
<?php
include("connection.php");
$limit = intval($_GET['order_id']);
echo $valuek;
$query="UPDATE orders
SET status ='cooking'
WHERE id = $limit";
if (mysqli_query($connection,$query)) {
echo "Record updated successfully";
} else {
echo "Error updating record: " . mysqli_error($connection);
}
?>

Yes you can use the jQuery.ajax() call. Like this:
Change the text of a element using an AJAX request:
$("button").click(function(){
$.ajax({url: "demo_test.txt", success: function(result){
$("#div1").html(result);
}});
});
See this tutorial for more information:
http://www.w3schools.com/jquery/ajax_ajax.asp

You can use JQuery Ajax functions to accomplish your requirement.
all there functions given below will work for loading the content without refreshing the page.
$.post("/controller/function", params, function(data) {
// set received data to html
});
$.ajax("/controller/function", params, function(data) {
// set received data to html
});
$.get("/controller/function", params, function(data) {
// set received data to html
});

You can load the data from the server and and place the returned HTML into the matched element.
<div id="content"></div>
$("#content").load( "ajax/test.html" );

Ajax test (wordpress)

So, I have been struggling with making ajax work.
Here is my previous question: AJAX (admin_url('admin-ajax.php');?action=) Not Found
Anyway, I decided to narrow down and only have necessary files.
Here is the set up.
test.php
<div class="test">
Items
</div>
<div id="test_demo"> </div>
<script>
jQuery(document).ready(function() {
jQuery('.test a').click(function(e) {
e.preventDefault();
var tab_id = jQuery('this').attr('id');
jQuery.ajax({
type: "GET",
url: "<?php echo admin_url('admin-ajax.php'); ?>",
dataType: 'html',
data: ({ action: 'test_tab', id: tab_id}),
success: function(data){
jQuery('#test_' + tab_id).html(data);
},
error: function(data)
{
alert("Error!");
return false;
}
});
});
});
</script>
function.php
function test_tab_callback() {
$template_part_path = 'page-parts/test_' . $_GET['id'];
get_template_part($template_part_path);
exit;
}
add_action('wp_ajax_test_tab', 'test_tab_callback');
add_action('wp_ajax_nopriv_test_tab', 'test_tab_callback');
test_demo.php
<div id="test_demo_content">Demo Content</div>
Here is the my idea on how it should work.
test.php: When user clicks Items button, then the tab_idvariable in the jQuery saves the anchor id (in this case, it will be id="demo").
Then admin-ajax.php is called.
The saved id ("demo") is then passed onto the function.php and it is used in the variable $template_part_path = 'page-parts/test_' . $_GET['id']; which gives page-parts/test_demo for test_demo.php
Then the template part is called and calledback to the jQuery.
Then the data is "insert" into the jQuery('#test_' + tab_id).html(data); which is id="test_demo.
The test_demo.php content should be displayed in the #test_demo div.
But it is not working. I used console.log(data) but showed no result.
What am I doing wrong?

When your getting the jquery object of "this" you can't use the quotes. This was making tab_id as undefined and ruining the rest.
Here is what I mean:
http://jsfiddle.net/7r1dg7L4/2/
jQuery(document).ready(function() {
jQuery('.test a').click(function(e) {
e.preventDefault();
var tab_id = jQuery(this).attr('id');
alert(tab_id);
});
});

Show content from external php file with GET parameter inside div

Im struggling to make links for files appear on same page inside DIV.
Simply nothing happens when I a href click link, no links appear.. however I can see links when I'm going directly to example.com/ajaxdetails.php?id=OneOftheIDs
Here is mine main HTML file:
<script src="/jquery-1.11.2.min.js"></script>
<script>
function getSummary(id)
{
$.ajax({
type: "GET",
url: "detailsajax.php",
data: "id=" + id,
success: function(data) {
$('#returned-details').html(data);
}
});
}
</script>
PHP part:
foreach ($pirmiRezai as $key=>$rezultatas)
{ $i++;
echo '<div class="r">
'.$rezultatas['desc'].'
Some unrelated php code here
<div id="returned-details"></div>
</div>';
if($i>=10)
break;
}
And the detailsajax.php file contains simple textarea with returned download link from database for specific ID (detailsajax.php?id=random). I need that html code with returned download link to appear inside returned-details DIV next to a href that was clicked.
Hope its clear.

First of all id's should be always unique or else u could replace it with the class attribute.In your case something like this might help u mate.. :)
Script
<script src="/jquery-1.11.2.min.js"></script>
<script>
$(document).ready(function() {
$(".r a").on("click", function() {
var id = $(this).attr("myId");
$.ajax({
type: "GET",
url: "detailsajax.php",
data: "id=" + id,
context: this,
success: function(data) {
$(this).next('.returned-details').html(data);
}
});
});
});
</script>
PHP
foreach ($pirmiRezai as $key=>$rezultatas)
{ $i++;
echo '<div class="r">
'.$rezultatas['desc'].'
Some unrelated php code here
<div class="returned-details"></div>
</div>';
if($i>=10)
break;
}

How to use PHP to send javascript

I posted a more specific question on this yesterday, but I think my problem is more basic than what I initially asked.
I am trying to use PHP to set a setTimeout() with a wait variable from a database, but any script I echo doesn't work, even if it involves no PHP manipulation. Take a look below.
Here is the ajax call
function loadContent()
{
$.ajax(
{
url: "controller/loadContent.php",
cache: false,
success: function(html)
{
$("#contentWindow").html(html);
}
});
}
// Initial Load
loadContent();
And here is the PHP it receives.
echo '<h1>Upload content to start the show</h1>';
echo '<script>
setTimeout(loadContent, 4000);
</script>';
The is showing, so I believe the ajax and the PHP is working properly. The script works properly when I place it inside the javascript file, but the script won't run when it's echoed to the page.
My problem is the javascript I echo doesn't run. How can I use PHP to send javascript to the user? Why is what I wrote not functioning?
UPDATE: I realized that when I echo script, it echoed to the middle of the body and technically is above where the script file is loaded on the bottom of the body. Can I echo to the bottom of the body?

Here is a workaround:
function loadContent()
{
$.ajax(
{
url: "controller/loadContent.php",
cache: false,
success: function(html)
{
var myArray = html.split("|");
var message = myArray[0];
var counter = parseInt(myArray[1]); //Minor fix
$("#contentWindow").html(message);
startCounter(counter);
}
});
}
function startCounter(counter){
//counter as the value of 1000 milliseconds are equal to 1 second
setTimeout(loadContent, counter);
}
PHP File
$refreshTimer = 1000; //This is a test
echo "Upload content to start the show|".$refreshTimer; //The message and the counter

If you return just the script portion in your php file you can set the dataType in the .ajax call to 'script' and it will execute the returned javascript (http://api.jquery.com/jquery.ajax/)
So:
function loadContent()
{
$.ajax(
{
url: "controller/loadContent.php",
cache: false,
dataType: 'script',
success: function(html)
{
$("#contentWindow").html(html);
}
});
}
// Initial Load
loadContent();
Then in your PHP:
echo 'setTimeout(loadContent, 4000);';