Category Archives: Ajax

Debug javascript.

Guide to Debug your java script files in google Chrome.


Ways to find debug console in chrome.
2. press F12 or inspect element
Below window will open up which contains various tabs.
 
Tab Details:
Elements: it shows HTML part of your page.
console : in case you want to run some statements.
sources : all your JavaScript files.
Network : shows all your Ajax and load requests.
Performance: you can monitor your page performance
How to debug:
To debug any javascript file just search your file by using ctrl+O or select your file from the left panel of your browser window.
To add debug point just click on row number as shown in the image below.
Now perform any operations on you webpage. Here I’m selecting value from the dropdown.

As soon as you select any value from the drop down. your request goes for processing and your request stop on debug point.
For this request in network tab there is an entry for it. which shows data retrieve from the request for more information you can select request header,response and preview tab.
After successful hit of the request your request will enter in the success part of your ajax request.
If you want to change and explore more values you can go to console tab.
if you want to change values of HTML element then go to element tab where you can change style of the page and can see change in real time.

68 total views, 1 views today

Struts 2 action called up twice.

Problem :

If you are using JSON plugin with struts2 then you might end up with this problem. your action get called up twice even when you have define it only once and you are firing ajax only at once.


Solution:

This is happening because JSON plugin is calling all your methods that start with “get” in an attempt to serialize them for output.Try to rename the method name other then “getxxxxx()”.



method name start with getXX:
public String getName() {
return "Rakesh";
}


method name changed to fetchXX:

public String fetchName() {
return "Rakesh";
}


Hopefully this will work.

78 total views, no views today

IE 8 issue :Downloading pop up comes out when firing ajax for uploading file


Downloading pop up comes out when firing ajax for uploading file
This pop up comes out because ajax call after success need a response type in IE-8. So we can set the response by any of these way.

If you are using Struts2 you can simply set the content type in the parameter.

Struts.Xml:

<result name="success" type="json">
<param name="contentType">text/html</param>
</result>


you can achive this using java you just need to set the result response in the JSON
return Json(result, "text/html");

77 total views, 1 views today

Call ajax after completion of another ajax ,Wait for ajax to return.

Lets suppose you are trying to set loggedIn username to the header of your web page and you have 2 ajax which get fired

1st Ajax : Which is decorating the header

2nd Ajax : Which gets the username

So if 2nd AJAX become first in the race then username is not visible to you as 1st ajax is responsible for decorating the header and if there is no header there is no place where you can set header.

so to be very sure that our username is visible on the screen, we should wait for the header(1st ajax)to complete


document ready function:

$(document).ready(function () {

//calling this method to get the fetch logged in user

fetchloggeInUser();

});




1st Ajax request : run in parallel with 2nd ajax 

this is building our header part
(function ($) {
$.pageDecorate = {
//declare a global variable so that it can be used.
decorateDeferred : null,
//set response of the ajax in a variable
var decoratorDeferred = $.ajax({
url : 'setHeader',
type : 'get',
data : decorateHeaderData,
dataType : 'json',
success : function (data) {
//response of testAjax sets in decorateDeferred
decorateDeferred = $.pageDecorate.testAjax();
}
});


Global declaration :

  //set value of global variable decorateDeferred so
  // that it can be use as a reference

$.pageDecorate.decorateDeferred = decorateDeferred;


},


Method to call :
 testAjax : function () {

  var navHtml = '<ul>';
navHtml += '<div class="divHeader" title="login">';
navHtml += '<div class="role">';
navHtml += '</div>';
navHtml += '</div>';
navHtml += '</ul>';
//append this to header of your page
$('.header').append(navHtml);
}
});


2nd Ajax:

fetchloggeInUser : function () {

$.ajax({

url : "loggedInUser",

type : "POST",

success : function (data) {

//although this success block call when ajax get
   //fired but this code runs when it get response
//after the success response of $.pageDecorate.decorateDeferred
   this below success get called

$.pageDecorate.decorateDeferred.success(function () {

$('.divHeader').find('.role').text(userName);

});

}

});

}



That ‘s it you are done.

74 total views, no views today

Simple ajax call Jquery

This is plain Ajax call with success and error function.

you can write this ajax in any of your method and perform actions.



Code:
/* get some values from elements on the page: */

var username= $('#username').val();
var pass=$('#pass').val();
//parameters to pass
var data = {
username : username,
pass:pass
};
//authenticateUser is the action which you need to call
var testUrl = "authenticateUser";
$.ajax({
url : testUrl,
type : 'post',
data : data,
dataType : 'json',
success : function(data) {
//success action Block
alert("Login success");
},
error:function(){
//Error action block
alert("Login failed");
}
});

62 total views, no views today