Identify page loads completely and enable dropdown

Hi,

I am working on ASP.net 2.0 application using C# that uses lot of javascript and jquery.

I need help in jquery/javascript

On my webpage, I have dropdown. When user selects the dropdown, based on the selected dropdown another dropdown gets filled by reading webservice.

Its a long big code written by agency long back in jquery and difficult to understand the complete flow.

Now the problem is, if the page is not loaded completely and user tries to select the value from dropdown 2, then selections goes away and it is frustrating.

dropdown 2 is only displayed when user selects the value from dropdown 1.

I found that dropdwon 2 is filled from below code and all values are filled from code
document.getElementById("ddlTour").options.add(opt);

Please advise how can I enable the dropdown once the page is completly loaded.

Also, please advise alternative solutions if anything is better.

Please advise



function GetAdventureTourName(strCity,strCateogry) 
{    
   var xhrUrl = "/IFY/Middle/WPInterim.asmx/GetTourName";
     $.ajax({
	type: "POST",
	url: xhrUrl,
	data: '{"strCity":"' + strCity + '","strCategory":"' + strCateogry + '"}',
	contentType: "application/json; charset=utf-8",
	dataType: "json",
	success: function(responseData)
	{   

	    $('#ddlTour').empty();   
	    var optdefalut = document.createElement("option"); 
	    optdefalut.text = 'Select a Tour';
	    optdefalut.value = '';
	    document.getElementById("ddlTour").options.add(optdefalut);

	    $.each(eval(responseData), function () {

	    if(this['Value'] != "ALL")
	    {
		var opt = document.createElement("option");
		opt.text = this['Text'];
		opt.value = this['Value'];
		document.getElementById("ddlTour").options.add(opt);
	    }
	jqreinitFromData($('.itemTourSubCategory .jqTransformSelectWrapper'), $('.itemTourSubCategory  .jqTransformSelectWrapper select'));    
	    });
	},
	error: function ()
	 {
	    alert("An unexpected error has occurred during processing.");
	}
	});

}

Open in new window



Also, method
GetAdventureTourName

is called from method BindTourName()

Can we call method
GetAdventureTourName($('.itemStayingIn select').val(),$('.itemTourCategory
once page is loaded completely


function BindTourName() 
    {
        if ($('#ddlCategory').val() != "")
        {
           GetAdventureTourName($('.itemStayingIn select').val(),$('.itemTourCategory select').val());
        }
    }

Open in new window


Just thinking.

Please advise the solutions.
tia_kamakshiAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
Why not hide/disable the dropdown initally and in your document.ready change its display back to block/re-enable it.
Then you'll know your jquery is firing, same method is used in many websites.
0
tia_kamakshiAuthor Commented:
As I mentioned in my original post. Dropdown is not visible until user selects the dropdown 1.
As soon as user selects the value in dropdown 1 then based on the selected value dropdown 2 set to visible and fills the value.

My problem is if other things like images, js, css etc is not loaded completely and user clicks on dropdown 2 then dropdown closes and user is not able to select the value in dropdown 2.

which is frustrating for user.

Please advise.
0
GaryCommented:
I think you misunderstood slightly, you disable the initial dropdown/elements until the page has fully loaded i.e. you disable any elements that rely on jQuery until it has been fully loaded at which point you can then enable all those elements
Using document.ready means the page has to be fully loaded, images and css are really irrelevant to this
document.ready will not fire until the whole page is fully loaded - that is the really important parts that make the page work
Do you have a link to the page?
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

tia_kamakshiAuthor Commented:
On site
https://www.arabian-adventures.com/en/tours-and-safaris/index.aspx#

select "select a tour category" dropdown and another dropdown will appear.

I am discussing on this dropdown in Book your Adventure widget

Please advise
0
GaryCommented:
Ok see what you mean now.
Can you disable the jqtransform plugin and see if that is the culprit - I suspect it is.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.