One dropdown list taking longer to load than another - javascript

I have a web page loading with javascript populating drop down lists.
The problem is that one dropdownlist is taking longer to load than the other, i.e. one is able to be clicked on straight away but the other takes a little longer to load and can't be clicked on until it has loaded.
Does anyone know why this might be happening?
Thanks!

Related

Best way to display a popup container with lots of data

So I am developing a website (ASP.Net Core MVC) and I am trying to display a container, with potentially lots of data inside, as soon as I click on a Button see the image.
Each row has its add button. There will be only around 10-30 buttons on a page at once. As soon as you click on such a button the showed pop up should display next to the clicked button. As you can see in the picture the pop up may contain a lot of data itself. And this data might differ from each row.
What is the best approach?
Placing each these pop ups already in the HTML and on click display: block and display: none when hovering away.
With jQuery and using the append method and summon the popup next to it and remove it after hovering away.
Or is there even a different approach to this?
Why am I asking?
I am concerned in terms of performance and loading time.
In my opinion there are downsides and upsides to both approaches.
For approach 1:
This will cause a slower initial load time but will be faster to use than approach 2 when it's loaded.
Approach 2:
A downside to this is jQuery needs to be loaded for this. I don't know if you use it throughout your project. But just for this, it would be a little bit overkill.
However initial loadtime can be fast and you could use AJAX to load each data when it's clicked.
I'm not a programmer with 10 years of experience, so this answer is pure my opinion and what I think about it.
Hope this opens a discussion!

Have only part of php document load

I have created a PHP/HTML document which uses jQuery to create a sliding page effect. I would like to have what the user selected on the first page correspond to what they see on the second page. I know how to do this if I was to use two separate pages however I would like to keep the sliding page effect.
The problem is that PHP is loaded first so for the second page nothing is displayed because on initially loading the page nothing is selected on the first page.
The only solution I have is to have the second page only load when the first is completed, but I have no idea how to do this. Does anyone know if its possible to have the document load at separate times?
UPDATE
On second thoughts could I use a XMLHttpRequest to achieve this? And if so how can I do this

Chosen Java script plug in behavior - Shows items in list prematurely

We are using Chosen Javascript plugin http://harvesthq.github.io/chosen/ . It works great except one issue. When it loads on the page, it shows the "list box" kind of view for few split seconds in place of the Chosen plug in. It loads to the chosen plug in "view" finally. But for that few moments it looks bad with all the data showing as items in list box. For example, if we have a Chosen Plug in control linked to a list of States in US. When this page loads, for a split second, it shows a list box (not the chosen plug in) and it shows all the items in the list (list of states etc) .. then after the page loads completely, it will render the Chosen Plug in with blank items as its supposed to.
Is there any setting I can make use of to fix this? Any work arounds? Causes? Any one encounter this before? Thanks for the help.
You could potentially set the style display:none; on the element and then display it once chosen loads.

ASP.NET content display

I am building a profile page in asp.net and it has two tabs(Horizontally), one for profile and one for settings. If a user navigates between tabs, he will see the settings page and the profile page. I know two ways to implement this.
Code the page contents in the page and use javascript to hide them, while navigating through them.
This type of method is inefficient as it will lead to performance issues and increase load time.
Use onclick event handler and build the page using codebehind file. This is more efficient way, I can use javascript to rotate something to show that something is being processed and then call a last method in codebehind to hide the rotating Image.
Besides these methods, Are there some other efficient ways to accomplish this?
The answer depends on many factors. Do you want the user to be able to switch back and forth without page refreshes? If so, then you have to load both tabs.
If you're ok with partial refreshes, then you can use Ajax to populate the tabs when you click on them. This has some performance consequences, since it needs to round trip to get the data.
If you're ok with complete refreshes, then simply have each be a different page, when you click on the other tab, it just loads the other tab page.
I'm really not sure what you mean by "build the page with code-behind". Perhaps you mean only include the html for the selected tab when the page is loaded. In my opinion, it's easier to simply make them different pages than to write complex code that changes the structure of the page.

Triggering Javascript on cached page?

I'm pretty sure I can't do what I'm actually asking, but am wondering if there is some sort of workaround for the issue.
I have a page that has a drop down SELECT form element with several options. If one particular option (in this case, the first item) is selected, we show additional content (via jQuery). This works fine.
What happens, though, is that if I select item 2, the additional content disappears, as it should. I then go to a different page and then hit BACK. A that point, the page properly has kept that additional content hidden (as it was the last state) but the SELECT menu has been reset to the first item. I then have to click the SELECT, pick a different option, then select it again picking the first option, which finally brings the additional content back.
I can't trigger Javascript from what I can tell on a cached page (or is there a way?) Any other clever options?
One option I've come up with is to apply some sort of mouseover action to the area that houses the SELECT menu that does a quick 'reset elements' check. This seems a bit hacky and, of course, will produce an odd screen redraw unexpectedly for people.
You can record that the user action has taken place and re-execute it using JavaScript. You can store it in a cookie, then check for it on page load and reset the elements you want.

Categories

Resources