JavaScript bind method

JavaScript Kendo Window as Dialog (async/await)

	
	// This function will add following methods in kendo Window
	//		openAsync()		opens the window asynchronously, true = OK, false = Cancel
	//		closeOk()		call this method on "OK" button click
	//		closeCancel()		call this method on "Cancel" button click
	//	IMPORTANT: kendoWindow paramter must be a kendow window
	//				e.g. addOpenAsyncInKendoWindow($("#popup").data("kendowWindow"));
    
	function addOpenAsyncInKendoWindow(kendoWindow) {
  		if (!kendoWindow.openAsync) {
			kendoWindow.bind("deactivate", () => {
      				if (kendoWindow.dispatchClosePopupCall)
        				kendoWindow.dispatchClosePopupCall(kendoWindow.asyncDialogResult);
			});
    			kendoWindow.getResponseAsync = async () => {
      				return (new Promise(resolve => kendowWindow.dispatchClosePopupCall = resolve)).then((data) => { kendowWindow.dispatchClosePopupCall = null; return data; });
			};  
    			kendoWindow.openAsync = async () => {
      				kendoWindow.center();
      				kendoWindow.open();
      				return await kendowWindow.getResponseAsync();
			};
    			kendoWindow.closeOk = () => {
      				kendoWindow.asyncDialogResult = true;
      				kendoWindow.close();
			};
    			kendoWindow.closeCancel = () => {
      				kendoWindow.asyncDialogResult = false;
      				kendoWindow.close();
			};
		}
	}
    
	// Example Usage
	$("#btnOpenPopup").on("click", async e => {
		e.preventDefault();
		const kp = $("#popup").data("kendoWindow");
		addOpenAsyncInKendowWindow(kp);
		const dialogResult = await kp.openAsync();
		if (dialogResult)
			alert("Ok was clicked");
		else
			alert("Cancel was clicked");
	});
    
	$("#btnOk").on("click", e => {
		e.preventDefault();
		const kp = $("#popup").data("kendoWindow");
		kp.closeOk();
	});
	$("#btnCancel").on("click", e => {
		e.preventDefault();
		const kp = $("#popup").data("kendoWindow");
		kp.closeCancel();
	});

JsFiddle Demo

Another way of accessing a file on Web Server (Javascript/ASP.net)

Few days back while working on back-end of a Web Portal. I was trying to create an Anchor Tag (<a>) in such a way that a log should also be created whenever that anchor tag is clicked by user.

So there are couple of techniques.

Approach #1:
On Click: Post back to server create the log and redirect to the URL.

Approach #2:
Use AJAX

So I used the 2nd approach. For this purpose I first created a Javascript function as,

First Try:

function createlog(param1, param2) {
 var xmlHttp;
 try
  {  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();  
 }
 catch (e)
 {  // Internet Explorer
  try
  {
   xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");    
  }
  catch (e)
      {
   try
   {
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
       catch (e)
   {
    alert("Your browser does not support AJAX!");
    return false;
   }
  }
 }
 try
 {
  var u;
  u = "createlog.aspx?param1=" + param1 + "&param2=" + param2;
  xmlHttp.open("POST", u, false);
  xmlHttp.send(null);
  return true;
 }
 catch (e)
 {
  return false;
 }
}

So this is an example function. Which will create a log by executing a "createlog.aspx" file on server which accepts 2 parameters in QueryString. The above function is simply using the XMLHttpRequest() object for AJAX call.

Then we can use this function in an anchor tag as,

<a href="http://www.domain.com" onclick="return createlog(1, 2);">www.domain.com</a>

When user will click on the link the createlog() function will be executed first. Which then will create the log on server and then redirect to the link.

Second Try:
Secondly I looked in the Google's Result Page. Because they are doing this also. Whenever we click on a result, Google redirects to that URL directly (without posting back) but also keeps the track of clicking. I looked into their Javascript and found a very interesting thing. And hence modified my Javascript function to this,

function createlog(param1, param2) {
 var u = "createlog.aspx?param1=" + param1 + "&param2=" + param2;
 (new Image).src = u;
 return true;
}

Because my requirement is to just execute the "createlog.aspx" file on the server. I do NOT need the returned value. That is why XMLHttpRequest() is NOT critically required in this scenario. On the other hand (new Image).src approach is lot simpler.

What happens is that the browser creates an Image object and go to the "source" (in this case my createlog.aspx) which actually do NOT return any data (i.e. image bytes). But by going to that URL it actually is executed on server. And the Image object is then discarded at the end of function (I guess).

One more thing I found was Google is using "onmousedown" event instead of "onclick". I don't know exactly the benefits but I have experience that "onclick" event is NOT fired (on some browsers) when we right click and open the link in new window or tab. "onmousedown" event is triggered each time we click on link even if we right click on it. So it seems that this is NOT a good approach to use "onmousedown". But I have checked that whenever we right/left click on the link for the first time, the file "createlog.aspx" is executed on server. But it does NOT execute, if we click again. I think this is due to cache maybe.

Java Script Function to Show Flash Banner

Usually I develop Desktop Application. But sometimes I also get involve in Web Development. So we were developing a Website in which we were trying to create a Flash Banner rotator. To accomplish this there are several techniques, but I created the following Java Script function for our Web Developer.

function showflashbanner(htmlobjectid, flashfilename, width, height) {
    var script;
    script = "<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' " +
             "codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0' " +
             "width='" + width + "' height='" + height + "' \>" +
             "<param name='movie' " +
             "value='" + flashfilename + "' /\>" +
             "<param name='quality' value='high' /\>" + 
             "<embed src='" + flashfilename + "' " + 
             "quality='high' " +
             "pluginspage='http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash' " +
             "type='application/x-shockwave-flash'" +
             "width='" + width + "'" +
             "height='" + height + "'\>'" +
             "</embed\>" +
             "</object\>";
    document.getElementById(htmlobjectid).innerHTML = script;
}

Example:

<body onload="showflashbanner('bannercontainer', 'http://www.mywebsite.com/banners/banner1.swf', 720, 100)">
<div id="bannercontainer">Loading...</div>
</body>

As you can see the above example we have used "div" as a Banner container. Then we are passing this div's id in our function so the Flash File will be loaded in it.

The Web developer then used this function by creating an Array of Flash Files. He also created another function in which he used setTimeout function. So the function calls itself after some time with new Flash File.