javascript refresh page after response ajax code

JavaScript Refresh

The preferred page refresh/reload method uses a JavaScript technique that will replace the current page with each refresh in the visitor’s page history.

This version uses an under-utilized method of dealing with cross browser and old version browser compatibility.  It defines multiple JavaScript code blocks, where each JavaScript version block redefines the same function.  Only the last version block that is supported by the browser will be used.  So older browsers will use the “JavaScript” block, while later browsers will use either the “JavaScript1.1” or “JavaScript1.2” block depending upon the browser’s capabilities.  If the browser does not support JavaScript or has it disabled, the “noscript” block will be used.

We do use the “refresh” meta-tag as a backup method to the JavaScript.

See this script in action.


<html>

<head>
<title>Refresh JavaScript Example</title>
<noscript>
<!--
    We have the "refresh" meta-tag in case the user's browser does
    not correctly support JavaScript or has JavaScript disabled.

    Notice that this is nested within a "noscript" block.
-->
<meta http-equiv="refresh" content="2">

</noscript>

<script language="JavaScript">
<!--

var sURL = unescape(window.location.pathname);

function doLoad()
{
    // the timeout value should be the same as in the "refresh" meta-tag
    setTimeout( "refresh()", 2*1000 );
}

function refresh()
{
    //  This version of the refresh function will cause a new
    //  entry in the visitor's history.  It is provided for
    //  those browsers that only support JavaScript 1.0.
    //
    window.location.href = sURL;
}
//-->
</script>

<script language="JavaScript1.1">
<!--
function refresh()
{
    //  This version does NOT cause an entry in the browser's
    //  page view history.  Most browsers will always retrieve
    //  the document from the web-server whether it is already
    //  in the browsers page-cache or not.
    //  
    window.location.replace( sURL );
}
//-->
</script>

<script language="JavaScript1.2">
<!--
function refresh()
{
    //  This version of the refresh function will be invoked
    //  for browsers that support JavaScript version 1.2
    //
    
    //  The argument to the location.reload function determines
    //  if the browser should retrieve the document from the
    //  web-server.  In our example all we need to do is cause
    //  the JavaScript block in the document body to be
    //  re-evaluated.  If we needed to pull the document from
    //  the web-server again (such as where the document contents
    //  change dynamically) we would pass the argument as 'true'.
    //  
    window.location.reload( false );
}
//-->
</script>
</head>

<!--
    Use the "onload" event to start the refresh process.
-->
<body onload="doLoad()">

<script language="JavaScript">
<!--
    // we put this here so we can see something change
    document.write('<b>' + (new Date).toLocaleString() + '</b>');
//-->
</script>


                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   </body>

</html>

JavaScript Refresh Button

A similar JavaScript will refresh/reload the page when the visitor clicks on a link, on an image/button, or a form button.  In similar fashion we use the technique that will replace the current page with each refresh in the visitor’s page history.

See this script in action.


<html>

<head>
<title>Refresh Button Example</title>
<script language="JavaScript">
<!--

//  The "refresh" function implementations are identical
//  to our regular "JavaScript-Refresh" example.  The only
//  difference from our JavaScript Refresh example is
//  we do not have a doLoad function that starts our
//  refresh timer (since we use a refresh button).

var sURL = unescape(window.location.pathname);

function refresh()
{
    window.location.href = sURL;
}
//-->
</script>

<script language="JavaScript1.1">
<!--
function refresh()
{
    window.location.replace( sURL );
}
//-->
</script>

<script language="JavaScript1.2">
<!--
function refresh()
{
    window.location.reload( false );
}
//-->
</script>
</head>

<body>

<script language="JavaScript">
<!--
    // we put this here so we can see something change
    document.write('<b>' + (new Date).toLocaleString() + '</b>');
//-->
</script>

<!--

    In every example that we use below, we simply call the "refresh"
    JavaScript function.
    
    Our first example uses a "link" that invokes the JavaScript function.
-->
<p><a href="javascript:refresh()">Refresh Link</a></p>

<!--
    The "image" button is nothing more than an image nested in a link.
-->
<p><a href="javascript:refresh()"><img src="images/button_green.gif" border="0"
align="middle" width="71" height="70"></a>image as a button</p>

<!--
    The last method ties into the "onclick" event for a form button.
-->
<form method="GET" action="refreshbutton.htm">
  <p><input type="button" onclick="refresh()" value="Refresh Form Button"
  name="button1"></p>
</form>

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        </body>

</html>

“refresh” meta-tag

The biggest problem with the “refresh” meta-tag method of page-refresh is that it can add to the visitor’s page-history on various versions of browsers.  This means that for each automatic page refresh/reload your site visitor must select the browser’s back button.  This potentially can be a considerable bother to your visitors as well as a confusion.

The preferred refresh method is “JavaScript Refresh

See this script in action.


<head>
<!--
    The "refresh" meta-tag's content identifies the number of
    seconds to delay before refreshing the current document.
    Notice that the URL tag is not specified, indicating that
    the current document will be refreshed.
-->
<meta http-equiv="refresh" content="2">
</head>




<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script>
function serviceDataVal(id,status)
{    
    var dataString = 'id='+ id+'&status='+status;
    $.ajax({type:"POST", url: "<?php echo $base_url ?>/checkstatus.php",
    data:dataString, success: function(response) {
    var txt=response;
    if(txt==1)
    {
    varmsg='Record updated successfully';
    document.getElementById("msg").innerHTML=varmsg;
    var sURL = unescape(window.location.pathname);
    window.location.href = sURL;
    }
    }});
    
}
</script>




checkstatus.php

$id=$_REQUEST['id'];
$status=$_REQUEST['status'];
if($status=='0')
{
$selectQuery="update cor_local_banner set status='1' where id='".$id."'";
}
else
{
$selectQuery="update cor_local_banner set status='0' where id='".$id."'";
}
$query=mysql_query($selectQuery);
echo 1;
die;











Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s