rails-knowledge: Ajax

Showing posts with label Ajax. Show all posts

Thursday, 16 May 2013

Synchronous and Asynchronous difference

Hi,

Many of the folks are quite confused about the Synchronous and Asynchronous request in web application. May of us know that AJAX is an asynchronous request. But what does asynchronous mean?

Asynchronous request will not wait for response for an request. Let me explain with an example.

function Namecheck(){
var avilability = 1;
avilability = get_status("/user/check_name");
if avilability == 1
{
alert('avilable');
}
else{
alert('Not avilable');
}
}

In the above case 'get_status' will send an ajax request to "user/check_name" and it will not wait for the response for that request as it is an asynchronous, there by we always get the javascript alert as "avilable". So the function will execute without ant wait for response. This is how asynchronous request will work.

Synchronous request is the one which will wait until the complete response was received.

Note: to over come the response issue with AJAX we will use callback to trigger a function once the complete request was done with receiving a response.

Thank You,
Uma Mahesh

Wednesday, 1 August 2012

diplay data in webpage on page load

Hi,

In the webworld, displaying webpage in less time plays an important role. So in many satuations you may required to load the page parts separately i.e through ajax call in the page load.

You can see in many webpage page will be loaded first and parts of the webpage is loaded after that.

This can be done using jquery ".load()" method.

This method will load data from server and place the returned html in the element.

.load( url [, data] [, complete(responseText, textStatus, XMLHttpRequest)] )

url => url of the request to be send.
data => data that is sent to server.
complete => its an call back that will inoke after the load was done.

ex : $('#content').load('umamahesh/sample.html');

here 'content' => div id
url => umamahesh/sample.html

sample code:

<! DOCUMENT HTML>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
</head>
<body>
<h1>Response block</h1>
<div id="success"> </div>
<b>Error block:</b>
<div id="error"></div>
<script>
$("#success").load("success.html", function(response, status, xhr) {

if (status == "error") {
var msg = "Sorry but there was an error: ";
$("#error").html(msg + xhr.status + " " + xhr.statusText);
}
});
</script>
</body>
</html>

success.html

<! DOCUMENT HTML>
<html>
<head>
</head>
<body>
<div>
Hi my name is uma mahesh
</div>
</body>
</html>

You can load part of data from the url page as below

$('#content').load('umamahesh/sample.html #data');

When this method executes, it retrieves the content of umamahesh/sample.html, but then jQuery parses the returned document to find the element with an ID of data. This element, along with its contents, is inserted into the element with an ID of result, and the rest of the retrieved document is discarded.

Thank You,
Uma Mahesh.

Wednesday, 6 June 2012

Jquery ajax call - jQuery.ajax()

Jquery ajax call - jQuery.ajax()

Here is the JQuery asynchronous HTTP (Ajax) request.

$(function () {
$.ajax({
url: url,
data: data,
success: success,
dataType: dataType

});

});

url : A string containing the URL to which the request is sent.

date: Data to be sent to the server. It is converted to a query string.

success: success(data)
A function to be called if the request succeeds.

dataType: The type of data that you're expecting back from the server.

Here is the example code in mu view file. I am uisng HAML

:javascript
    $(function () {

    $('#party-schedule').on('show', function () {

      $.ajax({
      url: "#{party_schedules_parties_path}",
      data:'section=party',
       success:function(data){
        $('#party-schedule').html(data);
       },
      dataType:'html'
      });

    })

---------------------------------

The above ajax call will send a request to server as below:

Started GET "/parties/party_schedules?section=party" for 127.0.0.1 at 2012-06-07 11:43:19 +0530
Processing by PartiesController#party_schedules as HTML
Parameters: {"section"=>"event"}

------------------------------------

So you need to have party_schedules method inside the parties controler to respond for this request.
When request comes to controller, it responds to respective view file.

Note: You should use render :layout => false inside the method.

Thank You,
Uma Mahesh