Posts Tagged ‘AJAX’

AJAX Control ToolKIT ConfirmButton Extender Tutorial in ASP.NET 4.0 C#

Hi were you looking for an AJAX tutorial? Specifically on the ConfirmButton Extender Control?
Are you sure about that? Get the theme here?

Well it’s all about confirming today, and we are absolutely sure you have experienced this great and very useful control before. We are also quite positive you have also experienced an event where you wished this Control was enabled on an application or website.

Ever found yourself filling out a questionnaire form or application or profile, you just typed in what seems to be the longest questionnaire of all time to only have hit the delete button by mistake or the back button on your browser by mistake? And it prompted you with Are you sure you want to leave this page? If you do everything you just wrote will be lost in the internet forever.

Well if that has happened to you then you are lucky that it was using a ConfirmButton or at least a variation of it. So in short we will show you how to use AJAX ConfirmButton Extender, how to enable it and have it show a result or warning or whatever you may want to have it say.

Also if you’re ever in the market for some great Windows web hosting, try Server Intellect. We have been very pleased with their services and most importantly, technical support.

Now that I gave you the simple user guide explanation I will also give you a reference or more semi technical explanation.

The ConfirmButton is a simple extender that catches clicks on a button and displays a message to the user. If the “OK” button is clicked, the button or link functions normally. If not, the click is trapped and the button will not perform its default submit behavior; optionally, a client script is executed if the OnClientCancel property is set. This is useful for delete links or anything else that requires confirmation from the user.

The properties in italics are optional.

Default.aspx

<ajaxToolkit:ConfirmButtonExtender ID ="cbe" runat ="server" TargetControlID ="LinkButton1" ConfirmText ="Are you sure you want to click this?" OnClientCancel ="CancelClick" />

• TargetControlID – The ID of the Button control to extend.
• ConfirmText – The confirmation text to display. HTML entities can be used, such as
for a newline character.
• OnClientCancel – The client script to execute when the Cancel button is clicked in the confirm dialog box.
• ConfirmOnFormSubmit – true if the confirm dialog box should not be displayed until just before the form is submitted. This is useful if the page contains ASP.NET validator controls and the confirm dialog box should be displayed only after all validation checks pass.
• DisplayModalPopupID – Specifies the ID of a ModalPopup control to use to display the confirm dialog box instead of the default window.confirm window. When you use the DisplayModalPopupID property, the following conditions must be met:
• The ModalPopup control must be configured with the same TargetControlID value as the ConfirmButton extender. (It will work properly if the ConfirmButton extender is disabled.)
• The ModalPopup control must specify the OkControlID or the CancelControlID properties in order to identify the buttons that correspond to the the OK and Cancel buttons in the confirm dialog box.
• The ModalPopup must not specify a OnOkScript or OnCancelScript property.

ConfirmButton Client Reference
Sys.Extended.UI.ConfirmButtonBehavior Class
Events
• showing(handler) – Adds or removes an event handler for the showing event.
• Parameters – A function that represents the event handler.
• hidden(handler) – Adds or removes an event handler for the hidden event.
• Parameters – A function that represents the event handler.

Methods
• initialize() – Initializes the ConfirmButton behavior.
• dipose() – Disposes the ConfirmButton behavior.
• raiseShowing(eventArgs) – Raises the showing event.
• Parameters – A Sys.EventArgs object that represents event arguments for the showing event.
• raiseHidden(eventArgs) – Raises the hidden event.
• Parameters – A Sys.EventArgs object that represents event arguments for the hidden event.

Properties
• OnClientCancel – Gets or sets a string that contains client script that executes when the Cancel button is clicked in the confirm dialog box.
• ConfirmText – Gets or sets the confirmation text to display.
• Remarks – HTML entities can be used, such as
for a newline character.
• ConfirmOnFormSubmit – Gets or sets a Boolean value that specifies that the confirm dialog box should not be displayed until just before the form is submitted. This is useful if the page contains ASP.NET validator controls and the confirm dialog box should be displayed only after all validation checks pass.
• displayModalPopupID – Gets or sets a string that contains the ID of a ModalPopupBehavior control to use instead of the default window.confirm dialog box.
• postBackScript – Gets or sets a string that contains script to run in order to initiate a postback.

Sys.Extended.UI.ConfirmButtonHiddenEventArgs Class
• Summary – Defines arguments for the hidden event.
• Parameters – Boolean confirmed

Properties
• confirmed – Gets a Boolean value that indicates whether the user clicked OK.

Got that? Are you sure?

Did You Know?
We used over 10 web hosting companies before we found Server Intellect. They offer dedicated servers, and they now offer cloud hosting!

Default.aspx
As you can see we built a simple example of a confirm button
</script></head><body> <form id="form2" runat="server"> <cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"> </cc1:ToolkitScriptManager> <asp:Label ID="Label1" runat="server" Text="Click this button to open AJAX Confirm box:" Font-Bold="true" Font-Size="16px"></asp:Label><br /><asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:Button ID="btnConfirm" runat="server" Text="Confirm" OnClick="btnConfirm_Click" /> <cc1:ConfirmButtonExtender ID="ConfirmButtonExtender1" runat="server" TargetControlID="btnConfirm" ConfirmText="Are you sure?
You want to run the server code." OnClientCancel="onCancel" ConfirmOnFormSubmit="false"> </cc1:ConfirmButtonExtender> <asp:Label ID="lblMessage" runat="server"></asp:Label><br /> </ContentTemplate></asp:UpdatePanel> </form></body></html>

We stand behind Server Intellect and their support team. They offer dedicated servers , and they are now offering cloud hosting!

Default.aspx.cs
We set the logic to pop up a label message in a modal window.
protected void btnConfirm_Click(object sender, EventArgs e) { lblMessage.Text = "You clicked the <b>OK</b> button of AJAX confirm"; } Read the rest of this entry »

VN:F [1.9.18_1163]
Rating: 2.0/10 (15 votes cast)

Event Calendar for ASP.NET MVC with dhtmlxScheduler

This tutorial describes the steps required to integrate a Google-like event calendar in your ASP.NET MVC application, using dhtmlxScheduler – an open source JavaScript calendar control. You will learn how to add an Ajax-based event calendar on a web page, load events from .NET sever side, and update them in the database when user makes changes in the browser. Read the rest of this entry »

VN:F [1.9.18_1163]
Rating: 0.1/10 (11 votes cast)

Paging using PHP & MySQL with AJAX

Most users when works with large databases for websites with much more records in it and when want to list all results, experiencing problems how to display the data and how to keep small and nice looking web page with fast page load time.

Very elegant way to workaround with this is to display the limited result using SELECT * FROM `table` LIMIT $from, $how_much where:

$from – from which result to start listing
$how_much – how much results to list

And below the table with listed results to display paging navigation like this:

[1] 2 3 4 5

Next when user clicks on any button he can navigate in results by sending different values for $from parameter using GET or POST method. In our case this will be made with AJAX for prevent page loading and faster paging in the results.

In this tutorial I will show you exactly this – how to make Paged Result Query with AJAX using PHP & MySQL.

Now lets start with configuration of main parameters for data base connection and page result listing. This is our config.php file which we will include in several other files later: Read the rest of this entry »

VN:F [1.9.18_1163]
Rating: 7.3/10 (41 votes cast)

AJAX Drop Down Select

If you are developing WEB application which need two <select> inputs, and the list options of second <select> depends from the first <select> choose, it is good to be used AJAX. This mean that you will receive responding options for second <select> immediately after selection in first <select> is made. And all of this will done without webpage reloading, but just loading small part of data, which will increase the speed and interactivity of your web application.

With this tutorial we will continue our series of AJAX Tutorials. Read the rest of this entry »

VN:F [1.9.18_1163]
Rating: 9.0/10 (7 votes cast)

AJAX POST Method Request

All AJAX Application are based on small requests of data between client and server. Like in the standard HTML form requests, in this AJAX requests have two types of requests – GET and POST. Sometimes POST method is better to use than GET, because he is more secure (requested parameters cant be seen normally in the url), POST method can handle more that than GET, etc.

In this tutorial I will show how you can make your AJAX applications to use POST method.

Let say that we have some Javascript function with two parameters. This parameters have to be checked for something, and when they pass this check, next to be sent with POST method. Here is our simple Javascript function:

  1. function check_data(var1,var2) {
  2.  if (var2>var1) {
  3.   return "Larger value is: "+var2;
  4.  } else if (var2<var1) {
  5.   return "Larger value is: "+var1;
  6.  } else {
  7.   return "The two values ae equal.";
  8.  }
  9. }

The result from the above function, and with sample values for var1=5 and var2=7 will returned string:

Larger value is: 7

And here is Javascript function with added AJAX POST functionality which send var1 or var2 to the server for future manipulations.

  1. function check_data(var1,var2) {
  2.  
  3.  // check for bigger value between var and var2
  4.  // and send it to the server. If equal send whichever.
  5.  if (var2>var1) {
  6.   var send=var2;
  7.  } else if (var2<var1) {
  8.   var send=var1;
  9.  } else {
  10.   var send=var1;
  11.  }
  12.  
  13.  // geting XMLHttpRequest object
  14.  var xmlhttp=GetXmlHttpObject();
  15.  if (xmlhttp==null) {
  16.   alert ("Your browser does not support AJAX!");
  17.   return;
  18.  }
  19.  
  20.  // make unique request prameters for prevent request from caching
  21.  var date=new Date();
  22.  var timestamp=date.getTime();
  23.  var url="/ajax.php";
  24.  var param="value="+send+"&timestamp="+timestamp;
  25.  // handle ready status of request
  26.  xmlhttp.onreadystatechange=function() {
  27.   // check for really ready
  28.   if (xmlhttp.readyState==4 || xmlhttp.readyState=="complete") {
  29.    // simple alert of server respond
  30.    alert(xmlhttp.responseText);
  31.   }
  32.  }
  33.  // define reuqest method – POST
  34.  xmlhttp.open("POST",url,true);
  35.  
  36.  // define header for content type of data
  37.  xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  38.  
  39.  // define header for size of request and send actual request
  40.  xmlhttp.setRequestHeader("Content-length", param.length);
  41.  xmlhttp.setRequestHeader("Connection", "close");
  42.  xmlhttp.send(param);
  43. }

In this case sending headers (content-type, content-length, etc) for the request is mandatory. When GET method is used this not need.

Please note that this function uses external GetXmlHttpObject() function for handling XMLHttpRequest object which we already was examined. Also our AJAX function uses timestamp parameter for preventing the function from caching the requests.

You have to note, the in your server script (ajax.php in our case), you have to use method for handling POST data if server side scripting language which you are using is set to makes differences between GET, POST, SESSION, COOKIE, etc. global variables.

VN:F [1.9.18_1163]
Rating: 2.6/10 (15 votes cast)

Google-like AJAX Progress Bar

Each AJAX applications interact between server and client browser on small parts of data. Even this data is small, user have to be informed about progress of operation. For example, if no progress bar or some animation are displayed while AJAX application working, user will be not be informed whats happening.

For this, when you start interaction with the server it is good to inform the user, that the operation started and when work is finished, to stop the progress bar and this makes user to feel, that the job is done.

For our example we will use already prepared AJAX application of MySQL PHP AJAX Query and will add some Google-like progress bar.

Like you see, in application below, when you select an employее from the drop down list, now will appear small awaiting icon until the result is displayed:



In our AJAX application we will use some AJAX suitable animated GIF file for displaying "work in progress".

First, we have to set this gif file on suitable place around the <select> drop down, and to set him to be invisible. For this purpose we will use css style="display: none;" property on the exact image and will assign some id="tut_wait" for easy manipulating DOM object.

Next, in the beginning of our AJAX function we have to set

document.getElementById(”tut_wait”).style.display=”none”;

AJAX Progress Bar image not to be ”none”, actually to be visible.

When AJAX function get done and data is received, our progress bar have to hide. This happens by setting properties of progress bar id:

document.getElementById(”tut_wait”).style.display=”none”;

  1. <html>
  2. <head>
  3. <script language="JavaScript" type="text/javascript">
  4. function display_data(id) {
  5.  document.getElementById('tut_wait').style.display='';
  6.  document.getElementById('employ_data').innerHTML='';
  7.  xmlhttp=GetXmlHttpObject();
  8.  if (xmlhttp==null) {
  9.   alert ("Your browser does not support AJAX!");
  10.   return;
  11.  }
  12.  var date = new Date();
  13.  var timestamp = date.getTime();
  14.  var url="ajax.php";
  15.  url=url+"?employ_id="+id;
  16.  url=url+'&time='+timestamp;
  17.  xmlhttp.onreadystatechange=function() {
  18.   if (xmlhttp.readyState==4 || xmlhttp.readyState=="complete") {
  19.    document.getElementById('employ_data').innerHTML=xmlhttp.responseText;
  20.    document.getElementById('tut_wait').style.display='none';
  21.   }
  22.  }
  23.  xmlhttp.open("GET",url,true);
  24.  xmlhttp.send(null);
  25. }
  26. </script>
  27. </head>
  28. <body>
  29. <select onchange="display_data(this.value);">
  30.  <option>Select employ</option>
  31.  <?php
  32.  mysql_connect('localhost','user','pass');
  33.  mysql_select_db('employ');
  34.  $query="select id, name from employ order by name asc";
  35.  $result=mysql_query($query);
  36.  while(list($id, $name)=mysql_fetch_row($result)) {
  37.   echo "<option value=\"".$id."\">".$name."</option>";
  38.  }
  39.  ?>
  40. </select><br/>
  41. <img src="/img/loading.gif" width="100" height="100" style="display: none; margin-top: 20px;" id="tut_wait"/>
  42. <div id="employ_data"></div>
  43. </body>
  44. </html>

In this example, server-side AJAX code (ajax.php) is the same like in the original version without AJAX progress bar. You can also get this file from here:

  1. <?php
  2. if (is_numeric($_GET['employ_id'])) {
  3.  mysql_connect('localhost','user','pass');
  4.  mysql_select_db('employ');
  5.  $query="select * from employ where id=$_GET[employ_id]";
  6.  $result=mysql_query($query);
  7.  $employ=mysql_fetch_array($result);
  8.  echo "<table border=\"1\">
  9.  <tr>
  10.   <td>Name:</td>
  11.   <td>".$employ[name]."</td>
  12.  </tr>
  13.  <tr>
  14.   <td>Appoint Date:</td>
  15.   <td>".$employ[appoint_date]."</td>
  16.  </tr>
  17.  <tr>
  18.   <td>Country:</td>
  19.   <td>".$employ[country]."</td>
  20.  </tr>
  21.  <tr>
  22.   <td>City:</td>
  23.   <td>".$employ[city]."</td>
  24.  </tr>
  25.  <tr>
  26.   <td>E-mail:</td>
  27.   <td>".$employ[email]."</td>
  28.  </tr>
  29.  <tr>
  30.   <td>Phone:</td>
  31.   <td>".$employ[phone]."</td>
  32.  </tr>
  33. </table>";
  34. }
  35. ?>

If you not fully understand all of this AJAX Progress Bar Tutorial you can start with our AJAX Тutorial or to look our AJAX Tutorials section.

VN:F [1.9.18_1163]
Rating: 7.5/10 (4 votes cast)

MySQL PHP AJAX Query

We will continue with our AJAX Tutorials and make small AJAX Application using AJAX PHP MySQL Query to edit data in MySQL Database.

Lets say we have some MySQL table with employees and we have to list their names in drop-down <select> menu and when we select someone from the list, personal data will be displayed in table where we can edit the data.

First we have to make HTML page where the drop-down list will be generated from MySQL Database by PHP server side and also we have to place some <div></div> tags where will display employees data.

Lets give name index.php for this file.

  1. <select><option>Select employee</option>
  2. <?php
  3.  mysql_connect('localhost','user','pass');
  4.  mysql_select_db('employee');
  5.  $query="select id, name from employees order by name asc";
  6.  $result=mysql_query($query);
  7.  while(list($id, $name)=mysql_fetch_row($result)) {
  8.   echo "
  9. <option value=\"".$id."\">".$name."";
  10.  }
  11.  ?>
  12. </select>

Now some explanations. Between <select onchange=”display_data(this.value);”> and </select> we generate entire list with employees names by PHP MySQL query.

Now we have to put some handler which can handle change event on <select> drop down list and to call function display_data() with parameter this.value – selected value from drop down list on change event. this function return personal details for this employee and this data later will be formatted in table placed in <div id=”employee_data”></div> tags.

Now lets update our index.php file with included AJAX function – display_data().

  1. <select><option>Select employee</option>
  2.  <?php
  3.  mysql_connect('localhost','user','pass');
  4.  mysql_select_db('employee');
  5.  $query="select id, name from employee order by name asc";
  6.  $result=mysql_query($query);
  7.  while(list($id, $name)=mysql_fetch_row($result)) {
  8.   echo "
  9. <option value=\"".$id."\">".$name."";
  10.  }
  11.  ?>
  12. </select>

Like you see display_data() AJAX function uses already described method – XMLHttpRequest and server side PHP script for getting the employees data. In this PHP script we have using MySQL Query to return the data to AJAX script.

Next, when we successfully receive the data from PHP server side script we have to place this data formated in table in <div id=”employee_data”></div> tags.

Now lets update our index.php file including the new display_data() AJAX function which now will place returned data PHP script in right place:

  1. <select><option>Select employee</option>
  2.  <?php
  3.  mysql_connect('localhost','user','pass');
  4.  mysql_select_db('employee');
  5.  $query="select id, name from employee order by name asc";
  6.  $result=mysql_query($query);
  7.  while(list($id, $name)=mysql_fetch_row($result)) {
  8.   echo "
  9. <option value=\"".$id."\">".$name."";
  10.  }
  11.  ?>
  12. </select>
  13. <div id="employee_data"></div>

 

Here is PHP server side script which grab the data from MySQL database. Just copy and paste:

  1. <?php
  2. if (is_numeric($_GET['employee_id'])) {
  3.  mysql_connect('localhost','user','pass');
  4.  mysql_select_db('employee');
  5.  $query="select * from employee where id=$_GET[employee_id]";
  6.  $result=mysql_query($query);
  7.  $employee=mysql_fetch_array($result);
  8.  echo "<br/>
  9. <table border="\&quot;1\&quot;">
  10. <tbody>
  11. <tr>
  12. <td>Name:</td>
  13. <td>".$employee[name]."</td>
  14. </tr>
  15. <tr>
  16. <td>Appoint Date:</td>
  17. <td>".$employee[appoint_date]."</td>
  18. </tr>
  19. <tr>
  20. <td>Country:</td>
  21. <td>".$employee[country]."</td>
  22. </tr>
  23. <tr>
  24. <td>City:</td>
  25. <td>".$employee[city]."</td>
  26. </tr>
  27. <tr>
  28. <td>E-mail:</td>
  29. <td>".$employee[email]."</td>
  30. </tr>
  31. <tr>
  32. <td>Phone:</td>
  33. <td>".$employee[phone]."</td>
  34. </tr>
  35. </tbody>
  36. </table>
  37. ";}
  38. ?>

Now let see how our AJAX Application works. Please select some employee from drop-down list below.


VN:F [1.9.18_1163]
Rating: 7.2/10 (54 votes cast)

Prevent AJAX scripts from caching

AJAX is modern new technology which gives you an advanced way to improve the quality, speed and interactivity of internet applications. But the applications which intensively using AJAX, have one problem. To request data they make a URL post to server side script. This URL is cached by the client browser and even the server will serve new data, old data will be received by the browser. Read the rest of this entry »

VN:F [1.9.18_1163]
Rating: 0.0/10 (0 votes cast)

AJAX Tutorial

To see how AJAX works, we will develop small AJAX Web Application.

First of all we need some HTML file with forms to input data. This will be one input field where we can write some text. In our case this will be some name. This HTML file we will save under ajax.html name. The code of HTML file can taken from box bellow: (Please note that the text input handle onkeypress event and call to ajax(); function and there is no “Submit” button in HTML form) Read the rest of this entry »

VN:F [1.9.18_1163]
Rating: 7.3/10 (4 votes cast)

What is AJAX

This AJAX tutorial will teach you what is AJAX and how to use AJAX programming tools.

AJAX is coming from Asynchronous JavaScript And XML.

AJAX is programming technique combining client JavaScript code and Server-Side HTTP Requests. AJAX stands more popular in 2005 with Google Suggest. Read the rest of this entry »

VN:F [1.9.18_1163]
Rating: 0.0/10 (0 votes cast)