jQuery for Cascading dropdown extremly slow down the performance

Mar 5, 2010 at 7:43 PM

I tried implementing the cascading drop down using the given jQuery function but it has tremondously slow down the page, any solution

Coordinator
Mar 5, 2010 at 7:46 PM
The function uses the Web Services to read the list values. Obviously,
there's a performance penalty for this.

M.
>
Mar 5, 2010 at 8:40 PM

I am also facing the same issue. But try to understand that the list is within the same site. Moreover, there are not many items in the list. Please suggest some good solution to get around this performance issue.

Coordinator
Mar 5, 2010 at 8:42 PM
Edited Mar 6, 2010 at 4:01 AM

It doesn't matter where the list is, really.  The function needs to read from it.  When you guys are talking about the page being slow, can you be more specific?  What version of the library? How are you using the function on the page? How many times? etc.

M.

Mar 5, 2010 at 8:52 PM

The following is the code I am using in PlaceHolderMain, only once and I am calling the following function on the OnChange event of the first dropdown.

function CascadeDropDowns()

{

$(document).ready(function() {

$().SPServices.SPCascadeDropdowns({

relationshipList: "States",

relationshipListParentColumn: "Country",

relationshipListChildColumn: "Title",

parentColumn: "Country",

childColumn: "State" 

}); 

});

Coordinator
Mar 5, 2010 at 8:56 PM

Well, you're wrapping the (document).ready fucntion inside another function, which doesn't make much sense.  You might want to review the docs again.

M

Mar 5, 2010 at 9:01 PM

Could you kindly let me know how can I use it without wrapping. I have given the entire script below, which I am using. Please guide me.

 

<script type="text/javascript" language="javascript" src="scripts/jquery-1.3.2.min.js"></script>

<script type="text/javascript" language="javascript" src="scripts/jquery.SPServices-0.4.5.min.js"></script>

<script type="text/javascript" language="javascript">

function CascadeDropDowns()

{

$(document).ready(function() {

$().SPServices.SPCascadeDropdowns({

relationshipList: "States",

relationshipListParentColumn: "Country",

relationshipListChildColumn: "Title",

parentColumn: "Country",

childColumn: "State"

 

});

 

});

}

function getField(fieldType,fieldTitle)

{

var docTags = document.getElementsByTagName(fieldType);

for (var i=0; i < docTags.length; i++)

{

if (docTags[i].title == fieldTitle)

{

return docTags[i]

}

}

}

function Test()

{

getField('select','Country').onchange = function() {CascadeDropDowns()};

}

_spBodyOnLoadFunctionNames.push("Test");

</script>

Coordinator
Mar 5, 2010 at 9:21 PM

Look at the bottom of the documentation page for an example.  BTW, you should upgrade to the latest version of my library.  I've done some efficiency things since v0.4.5.

M.

Mar 5, 2010 at 9:37 PM

Marc,

         I updated the latest version of the libraries. I also removed the wrapping. Please find the code below. Please suggest if any more changes need to be made. It still runs very slow. Also, I have tried to optimize it as far as possible. This was my requirement. Also every time, when an item is selected from the first dropdown, I get a message. The message is "Stop Running this script? A script on this page is causing Internet Explorer to run slowly. If it continues to run, your computer may become unresponsive." Please let me know how to get around this also. Please guide me. I really appreciate your patience and response.

 

<script type="text/javascript" language="javascript" src="scripts/jquery-1.4.2.min.js"></script>

<script type="text/javascript" language="javascript" src="scripts/jquery.SPServices-0.5.1.min.js"></script>

<script type="text/javascript" language="javascript">

function getField(fieldType,fieldTitle)

{

var docTags = document.getElementsByTagName(fieldType);

for (var i=0; i < docTags.length; i++)

{

if (docTags[i].title == fieldTitle)

{

return docTags[i]

}

}

}

function Test()

{

getField('select','Country').onchange = function() {$(document).ready(function() {

$().SPServices.SPCascadeDropdowns({

relationshipList: "States",

relationshipListParentColumn: "Country",

relationshipListChildColumn: "Title",

parentColumn: "Country",

childColumn: "State"

 

});

 

});

};

}

_spBodyOnLoadFunctionNames.push("Test");

</script>

Coordinator
Mar 5, 2010 at 9:41 PM
Look at the example again. You still have too much code.

M.
>
Mar 5, 2010 at 9:58 PM

Marc,

       Excellent.... It worked wonders. Thanks a lot. Cool... Thanks a ton. Your patience, response and support is highly appreciated. Hats-off to you. Cool stuff.

Coordinator
Mar 5, 2010 at 10:19 PM
Great! Glad you got it working.

M.
Mar 8, 2010 at 3:00 PM

Marc,

        If I add one more level to that ( means if I want cascading from 2nd to 3rd drop down), it slows down the second one. Is there a way out for this also?

Coordinator
Mar 8, 2010 at 8:49 PM

The same rules apply.  Can you post the code you're using again?

M.

Mar 8, 2010 at 9:08 PM

<script type="text/javascript" language="javascript" src="../scripts/jquery-1.4.2.min.js"></script>

<script type="text/javascript" language="javascript" src="../scripts/jquery.SPServices-0.5.1.min.js"></script>

<script type="text/javascript" language="javascript">

function Test()

{

$(document).ready(function() {

$().SPServices.SPCascadeDropdowns({

relationshipList: "Tech Tax SubLevel1",

relationshipListParentColumn: "Tech_x0020_Tax_x0020_Level1",

relationshipListChildColumn: "Title",

parentColumn: "Tech Tax Level1",

childColumn: "Tech_Tax_SubLevel1",

promptText:"None",

debug: false

}); 

$().SPServices.SPCascadeDropdowns({

relationshipList: "Tech Tax Sublevel2",

relationshipListParentColumn: "Tech_x0020_Tax_x0020_SubLevel1",

relationshipListChildColumn: "Title",

parentColumn: "Tech_Tax_SubLevel1",

childColumn: "Tech_Tax_SubLevel2",

promptText:"None",

debug: false

}); 

}); 

}

Coordinator
Mar 8, 2010 at 9:15 PM
You still have things wrapped in the test function, which is unnecessary.  What I've paster below ought to work.
As I said above, the function uses the Web Services to determine what values are allowed, and there is a performance penalty for this.  Can you define "slows down"?  Is igt on page load, on value change? When? How much "slow down"?
M.
<script type="text/javascript" language="javascript" src="../scripts/jquery-1.4.2.min.js"></script>
<script type="text/javascript" language="javascript" src="../scripts/jquery.SPServices-0.5.1.min.js"></script>
<script type="text/javascript" language="javascript">
 $(document).ready(function() {
  $().SPServices.SPCascadeDropdowns({
   relationshipList: "Tech Tax SubLevel1",
   relationshipListParentColumn: "Tech_x0020_Tax_x0020_Level1",
   relationshipListChildColumn: "Title",
   parentColumn: "Tech Tax Level1",
   childColumn: "Tech_Tax_SubLevel1",
   promptText:"None",
   debug: false
  }); 
  $().SPServices.SPCascadeDropdowns({
   relationshipList: "Tech Tax Sublevel2",
   relationshipListParentColumn: "Tech_x0020_Tax_x0020_SubLevel1",
   relationshipListChildColumn: "Title",
   parentColumn: "Tech_Tax_SubLevel1",
   childColumn: "Tech_Tax_SubLevel2",
   promptText:"None",
   debug: false
  }); 
});
</script>
Mar 8, 2010 at 9:22 PM

Thanks. I updated the code. But still it is slow. Now slowness happens during on change of dropdown selection. It takes around 10 to 15 seconds to complete loading the third dropdown.

Coordinator
Mar 8, 2010 at 9:24 PM

How many values are there in each dropdown?

M.

Mar 8, 2010 at 9:28 PM

Dropdown 1  has around 6 items

Dropdown 2 has around 32 items

Dropdown 3 has around 12 items.

But these numebrs will increase in the future.

Coordinator
Mar 8, 2010 at 9:32 PM
Edited Mar 8, 2010 at 9:33 PM

Ok, those numbers shouldn't cause much of a problem. 10-15 seconds is way too long, I agree.  Is it consistently that long?  I've got much longer lists that don't take anywhere near that long.

How many items are the in the Tech Tax SubLevel1 and Tech Tax Sublevel2 lists?

BTW, you can remove the promptText and debug options, as you are just passing in the same values as the defaults.

M.

Mar 8, 2010 at 9:40 PM

Tech Tax SubLevel1 has 32 items and Tech Tax SubLevel2 has around 12 items.  The thing is that the 2nd dropdown which is associated with the Tech Tax SubLevel1 list has around 32 items (>20 items) and as you know, lookup column renders differently when there are more than 20 items. Because of this, when we make a selection in the 2nd dropdown, the dropdown stays pulled down for a long time. It doesn't go away, unless we click elsewhere on the screen. This is a concern. Well, I have removed the promptText and the Debug attributes. Please advise.

 

 

Coordinator
Mar 8, 2010 at 9:53 PM

As in the case where you don't use my library, with 20+ items you need to double click (or click elsewhere) to make the selection in that control.

If you test without my stuff, you'll see what I mean.

M.

Apr 27, 2010 at 11:03 AM

I also seem to be having issues with large lookup lists....

DropDown1 : about 30 items

DropDown2: 1000+ items

Is there anything that can be done through your methods that can prevent the items loading initially.....page seems to take 10-15 seconds to load for me, and roughly the same for saving the page.

Apr 27, 2010 at 11:18 AM

SPServices can make asynchronous calls to webservices, but...

I don't think any improvement can be made other than:

1. reduce the number of items in dropdown2

2. solicit development of a custom web service that only hands ot the ID and Title of the items for dropdown2 and use that with the ajax dropdowns. 

Otherwise you will be dragging megabytes of XML back and forth every time you load the page with dropdown2. that's why you have to wait that long. 

Coordinator
Apr 27, 2010 at 11:51 AM
Edited Apr 27, 2010 at 12:17 PM

The Web Services calls are as lean as I can make them, as I'm only requesting the columns and items we actually need to make the functionality work.  You can call this the penalty for improved data consistency, I suppose.  If you look at it that the 15 seconds spent up front saves X minutes down the road, it's probably acceptable.

The only other thing you might be able to do to improve things is to add an additional CAMLQuery. In most cases, this isn't going to help, though.  I added that functionality to allow filtering for something like an active flag or screening for a date.

On the saving side, that's pure SharePoint. SPCascadeDropdowns has zero effect on the commit end of things.

M.

Sep 30, 2010 at 9:33 PM

Had a performance issue with only 2 items in the dropdown using SPServices. The issue was that when selecting one of the 2 options from the first drop down, the drop down remained open for a while or until I clicked the next dropdown. I did not have this issue using the javascript based solution at spcd.codeplex.com. I did have to tweek it to display only the default's corresponding child options when the page is first opened. Hope this helps someone. If this issue has been resolved or there is a workaround for the SPServices, I'd appreciate anyone's feedback. Thanks.

Oct 1, 2010 at 1:29 AM

I am testing the SPCascadeDrops function for a new internal training site.  I too am having performance issues, but only in IE browsers.

In IE8, my test users receive the "Stop running this script?" dialog on the page where I have included the SPServices reference.  In firefox the same page renders and performs just fine.

I used the IE8 Developer Tools profiler and it shows that there is a filter operation/function that takes nearly 5 seconds to complete.  This is a link to a screenshot showing the call stack.

The relationship list only had 3 entries in it for testing.

I am using jQuery 1.3 from the SmartTools package and SPServices 0.5.6.  This is the code that I have included in my page to create the cascaded drop downs:

<script language="javascript" type="text/javascript" src="/_layouts/SmartTools.jQuery/jquery-1.3.min.js"></script>
<script language="javascript" type="text/javascript" src="/_layouts/jquery.spservices/jquery.SPServices-0.5.6.min.js"></script>
<script language="javascript" type="text/javascript">
    $(document).ready(function() {
		$().SPServices.SPCascadeDropdowns({
			relationshipList: "Topics",
			relationshipListParentColumn: "FunctionalArea",
			relationshipListChildColumn: "Title",
			parentColumn: "Functional Area",
			childColumn: "Topic",
			promptText: "Choose Business Function"
		});
    });
</script>

Coordinator
Oct 1, 2010 at 1:42 AM

I've never tested with jQuery 1.3, as it was obsolete before I even started this library, so I can't say anything about whether these functions will even work with that version. I highly recommend 1.4.2 at this point, and 1.4.3 is right around the corner.

If you check the System Requirements, which are listed on the right side of every documentation page, you'll see that it says:

System Requirements

For Use

  • v1.3.2 or 1.4 of the jQuery Library (SPServices v0.5.0 or newer)
  • v1.3.2 of the jQuery Library (SPServices v0.4.8 or older)

(Actually, I just updated it to 1.4.2 rather than 1.4, but still...)

M.

Oct 1, 2010 at 5:52 PM

Thanks for the feedback, I hadn't caught the minimum requirements and figured that the SmartTools JQuery install was relatively recent.

Now that I know how to make a WSP I'll package up a newer release and try installing that today and see if that resolves the performance issue.

Coordinator
Oct 1, 2010 at 6:02 PM

If you're loading both versions, you may have conflicts, and you'll certainly be sending too much down the wire. It doesn't look like the SmartTools have been updated since Jan 2009, so I doubt Jan has tested them with more recent versions of jQuery.

M.

Oct 1, 2010 at 11:35 PM

To update everybody on my progress...

I removed the SmartTools jQuery solution and repackaged my own version of jQuery 1.4.2.

After deploying the updated jQuery solution to the site and updating my script reference to point to the new location I no longer am having the performance issues that caused the browser script warning.  So the issue seemed to be related to the older version of jQuery I had incorrectly installed

Coordinator
Oct 2, 2010 at 12:15 AM

Excellent! Glad that was the problem and that there wasn't something horrid in my code to debug. ;+)

M.