JQuery Ajax call is taking much time

Question

5.00/5 (1 vote)

See more:

Hi friends,

I have following Javascript using Jquery

<script>
var userData = JSON.parse(localStorage.userData);

 $(document).ready(function () {
//HERE I AM CALLING THE BIND CONTROL ON RADIO AND DROPDOWN CHANGE
$('#ddlConvention,#rbtnWeek :radio').change(function () {

                userData.UserSet = new Array();
                userData.UserSet[0] = new Object({ week: $('#rbtnWeek :radio:checked').val(), conventionid: $('#ddlConvention').val() });
                //alert(JSON.stringify(userData));
                bindControls(userData);
            });

bindControls(userData);

});

function bindControls(userData) 
{
//HERE IS THE CODE THAT CALLS THE WEBAPI USING JQUERY AND BIND CONTROL USING THE RESULT
}

</script>

In the above code, I trying to achiving
1. bindControls method is called first.
2. On every change event of the radio button and dropdown, get the data and fill the controls.

Problem:

<br />
If I remove #ddlConvention from <br />
<br />
$('#ddlConvention,#rbtnWeek :radio').change(function () { ... }<br />
<br />
The code works fine, but when #ddlConvention is added the code takes longer time.<br />
<br />

May I know what is the problem??

It looks simple but it is really confusing me.

Thanks in advance

Posted 12-Nov-13 0:47am

dhage.prashant01

Add a Solution

Comments

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 12-Nov-13 7:24am

That means web API is taking time to process the request.
You can check the NET tab of FireBug in FireFox to know which request exactly taking how much time.

dhage.prashant01 12-Nov-13 7:43am

I have checked the Fiddler, the request goes in loop.
But I'm only trying to bind the event to the controls which will call the bindControl method.

Only for dropdown it is goin in loop.

Any idea?

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 12-Nov-13 9:00am

Why it is going in loop? Is there any infinite condition?

dhage.prashant01 12-Nov-13 23:54pm

bindControls(userData) only contains ajax call which fetch the data from WebApi, but when I bind bindControls(userData) fo onchange event of dropdown it goes in loop.

Any idea whats going wrong??

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 13-Nov-13 0:06am

Okay. I am guessing something. Inside bindControl method you may be selecting/adding/binding some value in DropDown ddlConvention. If that is the case, it will again fire the onChange event and it will go in a loop.

Is that the case?

dhage.prashant01 13-Nov-13 2:17am

TQ..
Inside the bind function, I'm setting the dropdown and calling the change event.

//BIND CONVENTION
$('#ddlConvention').empty();
$.each(data.obj.lstConvention, function (i, obj) {
var option = '<option value = "' + obj.ConventionId + '">' + obj.ConventionName + '</option>';
$('#ddlConvention').append(option);
$('#ddlConvention option:first').attr("selected", true).change();
});

dhage.prashant01 13-Nov-13 2:20am

Actually I'm using Jquery Mobile, so if I want to select the first index of the dropdown I need set and call change event as below

$('#ddlConvention option:first').attr("selected", true).change();

Any idea how I can achive this without calling change event??

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 13-Nov-13 2:44am

Why are you calling the change event? Don't call it. Only select the first option like below.

$('#ddlConvention option:first').attr("selected", true);

And this line should be outside the each loop I guess.

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 13-Nov-13 2:29am

My guess was right. Please see my answer for more details.

2 solutions

Solution 2

Try below for drop down list:

C#

$('#ddlConvention').on('change', function (e) {
alert('Hello');
        });
});

Posted 12-Nov-13 1:58am

Sampath Lokuge

Comments

dhage.prashant01 12-Nov-13 23:52pm

When I call bindControls(userData) instead of alert it goes in loop.
Above code is not working..

Sampath Lokuge 13-Nov-13 1:06am

Can you show the 'bindControls' code snippet also ?

dhage.prashant01 13-Nov-13 4:53am

TQ Sampath, for your time.. :)

Sampath Lokuge 13-Nov-13 5:17am

No problem.If you put the code snippet for binding,you may have solution much earlier.

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) · Accepted Answer · 2013-11-12T20:28:00

Solution 3

Problem

My guess was right.

The below code...

JavaScript

//BIND CONVENTION
$('#ddlConvention').empty();
$.each(data.obj.lstConvention, function (i, obj) {
    var option = '<option value = "' + obj.ConventionId + '">' + obj.ConventionName + '</option>';
    $('#ddlConvention').append(option);
    $('#ddlConvention option:first').attr("selected", true).change();
});

appends options and then finally selects the first option and fires the change event with the help of below code.

JavaScript

$('#ddlConvention option:first').attr("selected", true).change();

So, clearly it will follow a loop as you are firing the change event inside this function.

So correct your code accordingly.

Posted 12-Nov-13 20:28pm

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)

Comments

dhage.prashant01 13-Nov-13 4:04am

TQ Tadit for taking out problem into picture.
I have made following change in my code
$('#ddlConvention option:first').attr("selected", true);
$('#ddlConvention').siblings('.ui-btn-inner').find('.ui-btn-text').find('span').text($('#ddlConvention option:selected').text());

Instead of
$('#ddlConvention option:first').attr("selected", true).change();

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 13-Nov-13 8:07am

Good. :)

Sampath Lokuge 13-Nov-13 4:58am

+5,for nice guess. :)

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 13-Nov-13 8:07am

Thanks a lot Sampath... :)