Php Development » javascript

Serve your PHP file as JavaScript file

mahesh chari — Wed, 24 Mar 2010 17:23:17 +0000

Serve Your PHP script as JavaScript file.

Some times we need to serve user based JavaScript files, for example

passing your php variables to JavaScript on client side of browser.
protecting JavaScript variables.
setting browser cache manually for JavaScript files.
loading user based java script files.
for easy versification of your JavaScript files.

Download Demo

Suppose your php-javascript file “my-phpjavascript.js.php” ,now you can add this file as below example.

Client HTML code

my-phpjavascript.js.php code

 
// this is PHP variable
$sitename="My PHP development blog.";
?>
//this is javascript variable 
var site_name=" echo $sitename;?>";

some browsers don’t recognize this php file as javascript ,so to make all browser compatibility we have to send javascript headers to browser ,we can do that by adding a few line of code at starting of php script.


header( "Content-Type: text/javascript; charset=utf-8"  );
?>

Remember to preview this code you must installed PHP

Download Demo

prevent iframe ,frame theft

mahesh chari — Sun, 31 Jan 2010 09:56:17 +0000

How to stop iframe, frame thefts of our site resources.

Sites like Google Image search , goodphptutorials.com and phpcamp.net displays the website under the IFRAME .No one want their site to be displayed it under the IFRAME, FRAMES. If you want to protect your site to be displayed under the IFRAME,FRAMES then just copy and paste below javascript code after body tag.

if (window.top !== window.self) {
document.write = "";
window.top.location = window.self.location; setTimeout(function(){document.body.innerHTML='';},1);
window.self.onload=function(evt){
document.body.innerHTML='';};
}

Here we use simple logic that we check our page document window is main window or not. if our document isn’t in main window it might be in iframe or frame. then we switch the location of main window to our existing document locations. Before doing this redirection we make the document empty, because the imposter can break this code before loading .

jQuery ajaxstart ajaxstop

mahesh chari — Sat, 09 Jan 2010 11:14:48 +0000

Displaying Ajax started element using JQuery ajaxstart,ajaxstop

jQuery is most famous javascript library compared to its concurrents. One of importent functionality in jQuery is its Ajax handling. It has very flexible methods for Ajax.We seen how to handle the Ajax Errors in my previous Article.Here we concentrate on jQuery ajaxstart,ajaxstop default methods to handle globally.

Present it is very common to use ajax for every functionality,while querying externel resources with ajax we have to show the end user there is something happening behind the page.Some novice users don’t know about this functionality. So we must intimate the end user we are working on back end. Some times Ajax calls takes more time to respond with some reason. in that case most users confused about it may be stopped working . so here we take one example and tutorial.

ajaxStart

This method is called globally by jQuery while before starting any ajax call starts.

ajaxstop

This method called after stopping the Ajax stopped successfully or Ajax call cancelled.

These methods called on $.getJSON,$.get,$.post,$().load,$.getScript function.

Example

jQuery().ready(function(){ //Dom ready 
$('#loadimg').ajaxStart(function(){$(this).show();});//this method for ajax start		
$('#loadimg').ajaxStop(function(){$(this).hide();});//this method for ajax stop
$('#loadjson').click(function(){
$.getJSON('ajax.js',function(d){alert(d.name);});//$.getJSON method
});
$('#loadelement').click(function(){$(this).load('loadsnippet.html')});//load method
});

Try more examples

Demo Download

hide javascript code from non javascript browser

mahesh chari — Wed, 26 Aug 2009 03:14:42 +0000

hide JavaScript code from non-JavaScript browsers

Here we learn how to hide the javascript code from non javascript browsers , javascript disabled browsers and mobile browsers .Non javascript browsers renders the javascript code as generel text without exucuting the code. So we must aware how to hide the javascript from these browsers.

<script type="text/javascript">

script>

check browser java enabled

mahesh chari — Tue, 28 Jul 2009 11:48:33 +0000

Check Browser Java application enabled

Java is a high-level, third generation programming language, like C and many others.Java allows you to play online games, chat with people around the world, calculate your mortgage interest, and view images in 3D, just to name a few. It’s also integral to the intranet applications and other e-business solutions that are the foundation of corporate computing.
With some reasons the web browser don’t support Javas ,like user intentially disables,some browsers don’t support.Then we must check the whether user’s web browser has Java enabled.Here we discuss how to handle non Java browser.

We show normal warning message with javascript.

<script>
if (navigator.javaEnabled()){
alert('Java Enabled.');//we do our normal action
}else{
alert('Java Disabled.');//we warn the user to download or other 
}
script>

We redirect the user to seperate UI or seperate sub domain that handles for non java browser.

<script>
if (navigator.javaEnabled()){
alert('Java Enabled.');//we do our normal action
}else{
document.location="nonjava-html-page.html";
}
script>

check javascript disabled

mahesh chari — Tue, 21 Jul 2009 03:09:42 +0000

Check Browser Javascript enabled

JavaScript is a small, lightweight, object-oriented, cross-platform scripting language.JavaScript is used in millions of Web pages to add functionality, validate forms, detect browsers, and much more.With some reasons the web browser don’t support Javascript ,like user intentially disables,some mobile browsers version don’t support.Then it must we check the whether user’s web browser has Javascript enabled.Here we discuss how to handle non Javascript browser.

We show a alert ,warning message if user browser don’t hav Javascript enabled.using

We show a alert ,warning message with Javascript itself if user browser doesn’t support

check cookie enabled javascript php

mahesh chari — Mon, 20 Jul 2009 02:49:18 +0000

How to check browser cookie enabled with php javascript

Cookies are typically used by web servers to perform functions such as tracking your visits to websites, enabling you to log in to sites, and storing your shopping cart. Cookies can be used to interaction between Javascript and Server Side Scripts like PHP.Cookies also used to transfer small amount of data between one page to other pages via HTTP headers .If user disables this cookies or user’s browser won’t support the interaction between JS and PHP fails.So we must ensure user must enable these Cookies.

In this article,we check the user’s browser Cookie enabled or not.This can be achieved by both client side Javascript and Server Side Script.

Checking with Javascript

1 2 3
if (navigator.cookieEnabled == 0) { alert("You need to enable cookies for this site to load properly!"); }

Checking with PHP

If user disables Javascript we fail to check the Cookie enabled or not.So we check on the server side also.below PHP snippet check the Cookie enabled or not.

1 2 3 4 5 6 7 8 9 10
function check_cookie(){ if (setcookie("test", "test", time() + 360)) { if (isset (@$_COOKIE['test'])) { return true; } } return false; }

jquery ajax error handling

mahesh chari — Thu, 09 Jul 2009 13:05:19 +0000

How to handle ajax errors using jQuery ?

jQuery is the most awesome javascript library that made easy for asynchronous ajax calls.it has global ajax function and some pre defined ajax functions like $.get, $.post, load .etc. but we don’t find any error messages by default with this library. we can see the errors with firefox’s addon firebug or with IE developer toolbar.So we manage most common ajax errors in our application with global ajaxSetup function which come with jQuery by default. We can set many options,to see available ajaxsetup options please check here.

most ajax errors we get errors are server response errors and some JSON parse errors. To know more about the HTTP errors details please check here. To test this error handling just copy and paste it to your head section of HTML document.

Javascript Code for setting global error handling.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
$().ready(function(){ $.ajaxSetup({ error:function(x,e){ if(x.status==0){ alert('You are offline!!\n Please Check Your Network.'); }else if(x.status==404){ alert('Requested URL not found.'); }else if(x.status==500){ alert('Internel Server Error.'); }else if(e=='parsererror'){ alert('Error.\nParsing JSON Request failed.'); }else if(e=='timeout'){ alert('Request Time out.'); }else { alert('Unknow Error.\n'+x.responseText); } } }); });

In the above example we handle following common error and show response text for other rare errors.

0-xhr status ,is it initialized or not that means user is offline.

404-page not found

500-Internel Server error.

request timeout – jQuery custom error.

parseerror-jQuery custom error when parsing JSON data.

we just throw other errors with response error

Example1

1 2
params={name:'mahesh'}; $.get(url,params,function(){})

In above example,jQuery automatically raises all available errors,except parse error. because we didn’t give any return type format.

Example2

1 2 3
params={name:'mahesh'}; $.get(url,params,function(){},'json'); $.getJSON(url,params,function(){});

In above example,jQuery automatically raises all available errors,because we added return type format at end. $.getJSON automatically adds the return type of parameter to “JSON”

Example3

1 2
params={name:'mahesh'}; $.get(url,params,function(){},'xml');

In the above example 3 ,we gave xml type return parameter, here also jQuery automatically raises all errors even parse error also.

javascript bookmark

mahesh chari — Fri, 26 Jun 2009 21:28:12 +0000

javascript add bookmark or add favorite function tutorial

A simple cross-browser bookmarking / add to favorites script that works in IE6+ ,FF2+,Opera 7+.Adding the "bookmark this page" javascript below will help to encourage your site return visits. To add this link just copy paste a small script at your link position.it will add only supported browsers.

Download source code

bookmark

javascript code

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
<script > function bookmark() { title =document.title; url = document.location.href; if (window.sidebar) { //firefox bookmark functionality window.sidebar.addPanel(title, url,""); } else if( window.external ) { //ie favorite functionality window.external.AddFavorite( url, title); }else if(window.opera){//opera virtual sidebar link a = document.createElement("A"); a.rel = "sidebar"; a.target = "_search"; a.title = title; a.href = url; a.click(); } } function bookmarklink(){ if (window.sidebar || window.external || window.opera) { //we build link for only supported browsers document.write('Add to Favorites'); } } script>

html code

1 2 3 4 5 6 7 8 9 10
javascript bookmarking for firefox/IE/Safari

Download source code

bookmark

javascript image rollover

mahesh chari — Tue, 23 Jun 2009 17:00:25 +0000

image rollover effect with javascript image object

we create a image object with new Image();

set a source attribute to test1.jpg.

create onmouseover even function ,then set image object src to test2.jpg

create onmouseout event function,then set image object src to test1.jpg

to test click even we can see a small alert box.

Download Sorce Code

image-rollover-javascript

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
Image Roll over

Download Sorce Code

image-rollover-javascript