Ajax – purabtech.in

add ajax pagination in wordpress blog

For without refresh the data from home page if you want to show the pages and pagination in wordpress blog than you can use the following code for add ajax pagination in wordpress blog.

add ajax pagination in wordpress blog

With the help of jquery you can easily add the pagination wordpress blog site. You just need to add the following code into header.php file.

[viral-lock message=”Source code is Hidden! It’s Visible for Users who Liked/Shared This article on Facebook or Twitter or Google+. Like or Tweet this article to reveal the content.”]


<!--?<span class="hiddenSpellError" pre="" data-mce-bogus="1"-->php wp_enqueue_script('jquery'); ?>
<script>
jQuery(document).ready(function(){
 // ajax pagination
 jQuery('#wp_pagination a').live('click', function(){ // if not using wp_pagination, change this to correct ID
 var link = jQuery(this).attr('href');
 // #main is the ID of the outer div wrapping your posts
 jQuery('#main-container').html('<div><h2>Loading...</h2></div>');
 // #entries is the ID of the inner div wrapping your posts
 jQuery('#main-container').load(link+' #entries')
 });
}); // end ready function
</script>

[/viral-lock]

just put above code in header.php file in head section. Just make sure that you are putting above code after wp_head function.

If you are not wordpress developer then dont use following code and If you are facing any issue then write to me on support@purabtech.in

Really Simple History of Ajax

Here in this article we discussed about ajax. We explored ajax history. As we know ajax is most useful and powerful tool in website development.

Really Simple History of Ajax

Ajax (pronounced /ˈeɪˌdʒæks/) (shorthand for Asynchronous JavaScript and XML) is a group of interrelated web development techniques used on the client-side to create interactive web applications. With Ajax, web applications can retrieve data from the server asynchronously in the background without interfering with the display and behavior of the existing page. The use of Ajax techniques has led to an increase in interactive or dynamic interfaces on web pages. Data is usually retrieved using the XMLHttpRequest object. Despite the name, the use of XML is not actually required, nor do the requests need to be asynchronous.

If you’re working on Ajax based websites, you’ll always face usability problems when users click on the Back or Forward buttons on the broswer. Using Really Simple History (RSH) allows you over come this issue.

The Really Simple History (RSH) framework makes it easy for AJAX applications to incorporate bookmarking and back and button support. By default, AJAX systems are not bookmarkable, nor can they recover from the user pressing the browser’s back and forward buttons. The RSH library makes it possible to handle both cases.

In addition, RSH provides a framework to cache transient session information that persists after a user leaves the web page. This cache is used by the RSH framework to help with history issues, but can also be used by your own applications to improve application performance. The cache is linked to a single instance of the web page, and will disappear when the user closes their browser or clear their browser’s cache.

RSH works on Internet Explorer 6+ and Gecko-based browsers, like Firefox. Safari is not supported.

Link: Really Simple History
Demo Link: testDhtmlHistory.html (try using the browser back button after you get to this demo)

How to use document.write and innerhtml

document.write and innerhtml both the functions are useful to adding the dynamic content in in Document.

Both function are many times used by developer in javascript functions, Ajax calls, Web services and many JS libraries.

How to use document.write and innerhtml

So We need understand the similarities and differences and limitation about document.write and innerhtml.

First whenever and where you calls document.write function that more important.

Here I am going to show you how to use the document.write first.

<script type="text/javascript">

var hello_world = function() {
document.write('Wordpressapi is good website'); // print hello world in DOM

var mytext = "Wordpressapi is best website";
document.write(mytext); // print again through variable.

}
</script>

Using above code you can print or execute the so much HTML content in DOM.

Here I am going to show you how to use the innerHTML in DOM.

<script type="text/javascript">
document.getElementById('sample_Div').innerHTML="Wordpressapi is good website"; // add simple text
//document.getElementById('sample_Div').innerHTML="<img src=sample.jpg></img>"; // add image
</script>

Note: In your document “sample_Div” id with div need to be present.
put following code in your document.

<div id=\"sample_Div\">
Sample Text
</div>

Loading iframe using innerhtml is the best techniqe and solution for web services and cross domain calls.

document.getElementById('sample_Div').innerHTML = "<iframe src='http://images.purabtech.in/'></iframe>";

Both the techniques are stand for as per situation and use

JSONP for cross domain communication solution using with javascript and PHP

Last year in Feb I heard about JSONP and really liked the JSONP solutions. JSONP allows you to make an HTTP request outside your own domain
JSONP consume the Web Services from JavaScript code. Earlier I worked on so on AJAX but there is issue with working or communication issue with cross domain sites.

XMLHttpRequest is blocked from making external requests.

JSONP for cross domain communication solution using with javascript and PHP

JavaScript code to make a JSONP call will as follows:

[viral-lock message=”Solution code is Hidden! It’s Visible for Users who Liked/Shared This article on Facebook or Twitter or Google+. Like or Tweet this article to reveal the content.”]

function common_jsonpRequest(url, name, query) {

 if (url.indexOf("?") > -1)
 url += "&jsonp="
 else
 url += name + "&";
 if (query)
 url += encodeURIComponent(query) + "&";
 url += new Date().getTime().toString(); // prevent caching

 var JSONPscript = document.createElement("script");
 JSONPscript.id = 'wordpressapi_jsonpRequest';
 JSONPscript.setAttribute("src", url + "&CacheBuster=" + Math.random());
 JSONPscript.setAttribute("type","text/javascript");

 // write the jsonp script tag
 document.body.appendChild(JSONPscript);
 //script.text = "";

}

function returncall (data){
 alert(data);
// you can use data as a variable also.
}

[/viral-lock]

In same javascript you should write the returning function as above.

You can call JSONP this function as follows;

<a href="http://images.purabtech.in/JSONP-request.gif">
<img class="alignnone size-medium wp-image-1167" title="JSONP-request" src="http://images.purabtech.in/JSONP-request-300x125.gif" alt="" width="300" height="125" />
</a>
common_jsonpRequest(base_url+'getData.php?jsonp=mycallback&name=for_wordpressapi');

Notel: getData.php file will beahave like externaal javascript file so handle this file carefully.
getData.php sample file.

<?php
$data = "this is our dynamic data";
if($_REQUEST['name']=='for_wordpressapi'){

echo "returncall(".$data.")";

}

?>&nbsp;

This will return the “this is our dynamic data” as a alert.

How to append html code using javascript and php

append html code using javascript and php, In this example I am going to show you how to add the dynamic HTML code into Document using javascript and PHP.

How to append html code using javascript and php

<!--?<span class="hiddenSpellError" pre="" data-mce-bogus="1"-->php

$random_id = 125845465; // PUTTING SOME RANDOM ID YOU CAN USE YOURSELF.

$DYNAMIC_HTML = '<div>
<b>Sponsored Links</b>

<div>
 12px;font-weight:bold;" href="http://www.ucoz.com/" rel="nofollow">Create a website for free - uCoz

Build a website quickly and easily
Customizable templates and graphics

</div>

<div>
 12px;font-weight:bold;" href="http://www.purabtech.in/files/domain_names/">$1.99 Domain Names

 With every new non-domain purchase thru <a href="http://www.purabtech.in/files/domain_names/" rel="nofollow">wordpressapi</a>, you get a domain name for only $1.99.
</div>

<div>
 12px;font-weight:bold;" href="http://www.purabtech.in/files/" rel="nofollow">FREE Hosting!

 With every domain you register with <a href="http://www.purabtech.in/files/" rel="nofollow">wordpressapi</a> you get FREE hosting.
</div>
</div>';

 $HTML = "var objHead = document.getElementsByTagName('head');
 var objCSS = objHead[0].appendChild(document.createElement('link'));
 objCSS.id = '.$random_id.';
 objCSS.rel = 'stylesheet';
 objCSS.href = 'http://YOURSITE/STYLE.css';
 objCSS.type = 'text/css';";

 $HTML .= '
 var WORDPRESAPI_html_'.$random_id.' = document.createElement("div");
 WORDPRESAPI_html_'.$random_id.'.id = "WORDPRESAPI_html_'.$random_id.'";
 WORDPRESAPI_html_'.$random_id.'.style.position = "absolute";
 WORDPRESAPI_html_'.$random_id.'.style.zIndex = "100";
 WORDPRESAPI_html_'.$random_id.'.style.left = "0px";
 WORDPRESAPI_html_'.$random_id.'.style.top = "0px";
 WORDPRESAPI_html_'.$random_id.'.style.visibility = "hidden";
 WORDPRESAPI_html_'.$random_id.'.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=100)";
 WORDPRESAPI_html_'.$random_id.'.innerHTML = "'.addcslashes($DYNAMIC_HTML,"\\\'\"&\n\r<>").'";
 document.body.appendChild(WORDPRESAPI_html_'.$random_id.');';

echo $HTML;

?>

In this code if you observe then following line is very important.

 WORDPRESAPI_html_'.$uniqid.'.innerHTML = "'.addcslashes($HTML,"\\\'\"&\n\r<>").'";

How to append html code using javascript and php

Whenever you are using javascript and PHP both together then use following way to push your HTML in Dom.

AJAX Login Demo

Here’s a demo of a login system built using Ajax. This is a cool implementation which allows a user to login, without having to refresh the page. Here are some advantages of the noted by author of the code:

User does not need to refresh the page to login.
User is notified instantly on incorrect username/password combination.
Overall user experience is more seamless.
Password is not sent in plain text ever (more secure than traditional system).
Javascript convenience with server-side security (uses PHP/MySQL).
Uses one-time use random seed to hash the password before sending (making interceptions useless)

Source code for the login form is also available on the site.

Link: JamesDam.com ≈ AJAX Login System Demo

add ajax pagination in wordpress blog

Share Article:

Really Simple History of Ajax

RSH works on Internet Explorer 6+ and Gecko-based browsers, like Firefox. Safari is not supported.

Share Article:

How to use document.write and innerhtml

Share Article:

JSONP for cross domain communication solution using with javascript and PHP

Share Article:

How to append html code using javascript and php

Share Article:

Share Article: