I'm using jquery's bPopup() to open a modal window. When the user clicks a button, jquery loads an ajax page and then shows the modal windows. Due to this small delay when loading the page, the button remains active, and if the user clicks twice, it will fire twice, making two ajax requests to the server and opening two windows.
Is there a simple way to prevent this from happening? Since it's relatively a common problem, I wonder if there's a "right" way the pros handle it.
I've tried assigining the popup to a window.object, so that it would be overwritten on the second call, but it's still opening two popups.
That depends on what UX you're after, but I'd suggest you disable the button.
That way your user will:
Know the click was "registered".
Not try to click again.
Not crash / confuse you code.
EDIT
According to the comment, the "button" is actually not a <button>, but an element with an onclick handler. So:
You can disable the click handler by reversing what you did to set it (removeEventHandler, onclick=null...), but you'd then have to set it back once the pop-up is done, and that might be quite annoying.
You'd have to somehow manipulate the UI to indicate the button was clicked and is disabled. Could probably be quite simple to do with a CSS class.
But really, you're probably better off having 2 "versions" of your button element (<div>...), with only 1 visible at a time, with the other hidden via display: none. The "clicked" version should not have a click event handler set at all. Then, when the button is clicked, you immediately switch between the 2 (can be done with a single CSS class), and once the pop-up is done, switch back.
Related
Recently we implemented the GoogleTagManager (GTM), and certain Jquery UI dialogs are not showing at all (some of them always work, some of them never work, consistently). Unfortunately, I cannot provide sample codes.
When a UI button is clicked that calls .dialog("open") the dialog is not shown but the entire page goes grey (div class="ui-widget-overlay ui-front"). I see in the html that the div has "display:none" style.
If I remove the display: none, the dialog is finally shown, but the form's UI is messed up. Somehow the width of the modal is 300px instead of 1000px, etc. Also, the event listeners from the save/cancel buttons are missing. If I put autoOpen: true on the jquery UI dialog declaration, the dialog is shown, but is still messed up the same way.
I noticed that when I have an adblocker, everything works properly, but when I don't, the bug appears. I also realized that a "fbevents.js" file is in the browser when GTM is used, and if I explicitly disable only this file with an adblocker, the bug disappears.
I also see a facebook.com/tr/ call that stays "pending" forever in the network tab in Chrome, when I click on the icon that calls the dialog("open").
And of course, if there is no GTM, the site works properly.
Do you have any idea what is this bug or how should I continue the investigation? (without updating jquery/jqueryUI or without switching to bootstrap modal)?
Without additional detail is very hard to guess, what causes your problem, but there is one thing, I will try ona first place.
Check, how is your trigger made.
There are some GTM configurations, that steps into link click event processing.
So maybe, there is an event listenning on an A element, that onlky pretends to be a link and GTM is waiting for response.
If this is a true, try to change event listener into just Generic click event (Click - All Elements).
I got lucky. I found a second form that exists for a short period of time, which was facebook related (GTM). I realized that a "xy.appendTo('form')" JS code inserts data into the wrong form... By changing the code to "xy.appendTo('#form1')" the problem is gone.
So a simple appendTo('form') started the domino effect, which resulted in duplicated IDs in the DOM, and messed up everything...
The facebook.com/tr call in the network tab is still in pending state, but I believe that is somehow related to Jakub Kriz's suggestion (I will update my answer soon).
UPDATE:
Even though the GTM debugger shows no trigger has been fired, the GTM sends requests to facebook.com/tr calls every time a "a/a href" or "input type="button"" is clicked. I believe this is a default functionality, and I understand why.
In some cases our website is using these html tags in an invalid way: "a" is used instead of a "div" and "input type button" is used for an icon that opens a modal dialog. If we change these, the unnecessary facebook.com/tr calls will be gone.
But I've got still no clue about the pending state. I believe when I apply the changes I mentioned above, the problem will be gone.
I don't know if this is the effects of an update panel or what, but I basically have a drop down list that allows a user to select an item as a filter. When the item is selected it should bring back only one item into a grid view. That is this specific filter will at most bring back the record you are looking for. This works fine if the user clicks an "apply" link to apply the filter. Behind the apply link is some server-side code (C# within an ASP.NET Web Forms application).
We had a request by a user with something to the effect of:
"Why do I have to click the apply button if I make a selection in this
one drop down filter...it should simply get that one record I am
searching for. This helps me because I don't have to click the
"Apply" button."
I agreed with him and thought what is the easiest way to do this...I thought: Simple, I will have an on change event handler of the drop down such that when a selection is made I'll trigger a click event. Something to this effect:
$("#MainContent_ddlCompany").on("change", function() {
var companyId = $("#MainContent_ddlCompany").val();
$("#MainContent_hdnCompanyValue").val(companyId);
$("#<%=ddlCompany.ClientID %>").trigger("chosen:updated");
if (companyId.length > 0) {
$(".apply").click();
$(".apply").removeClass("applyButton");
$(".apply").addClass("resetButton");
} else {
//cleared selection of a company
$(".apply").removeClass("resetButton");
$(".apply").addClass("applyButton");
}
});
At first this didn't work, and I couldn't tell why, but then after some serious googling I changed this line:
$(".apply").click();
To this:
$('.apply')[0].click();
That worked great...so I decided to test it some more. As I kept selecting one filter value after another I noticed the page started to slow down. In fact by the 6th or 7th time it was pretty unusable. I don't know why it's happening, but I suspect again it has to do with the fact that this linkbutton with the class name .apply is inside an update panel.
But still I thought to myself, it was inside of an update panel before I changed my jQuery code to simulate the click event. So why does the page slow down and drag with this little piece of code? Is calling the event from jQuery code rendering something else in the HTML that could be causing this?
If I change my code back and force the user to click the apply button then we are back to a good normal speed. Why is it if I tell jQuery to simulate clicking the button my page slow down? It's doing the same thing, the simulation of the click of this link button is calling its server-side code method whether the user clicks it or I have jQuery click it.
For now I'm at a loss as to why this is happening because this button is in an update panel in either case, yet when I have jQuery click it via $('.apply')[0].click(); the page slows down after several attempts. Yet when I have the user simply click this button (without the jQuery click event) then it works fine?
What am I missing here?
Ugh, well, I found my issue. Because I was using updatepanels I had to wrap my jQuery code to include an add_endRequest. That is, you have something to the effect of:
$(document).ready(function() {
//Some initial event/triggers
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () {
//Copy of some initial event/triggers
});
});
Why do I use the endRequest you ask? Well, because updatepanels basically throw away all your events after an asynchronous postback because the HTML at that point (after an update) is rendered again and at that point all events associated with any control inside an update panel are wiped away. At this point of course document.ready() does not run, so I have to resubscribe to these events inside of endRequest. Enter my issue...
I had a huge brain fart where I basically took everything, literally everything inside document ready and copied it into endRequest. In fact, if I remember correctly, I read articles which stated
Whatever you have in document ready simply copy paste into endRequest
That's fine, but you have to be careful here. I was throwing in events that were not wrapped around inside of an updatepanel into endRequest. The result is disastrous...at least for me.
These events would be attached then multiple times..or based on the number of asynchronous postbacks made. In my case, as I was testing I mentioned after the 6th or 7th time performance starts degrading. Well, by that time my controls were being attached that many times to events. For instance, my .apply button along with my dropdownlist were both outside of my updatepanel. But my jQuery code was attaching the change event of my dropdownlist in both document ready and endRequest.
The result is initially it's pretty fast, because it's only in document ready. But as I make asynchronous postbacks these events are being attached every time. For n tests I would have n attached events...in my case the test of 7 yields 7 on change event handlers!
Case in point, do not place any event handlers such as jQuery's on() event for any controls that are NOT inside an update panel. Otherwise you will run into what I ran into which was poor performance as events are happening.
I want to display a notification for the user that will remain constantly visible in the form of a page action until the user does something. I am using this code right now:
chrome.tabs.getSelected(null, function (tab) {
chrome.pageAction.show(tab.id);
});
But that only creates a page action icon on the active tab when the extension is loaded. Instead, I want the icon to show all the time no matter what page or tab the user is on. It also needs to go away when the user does what is necessary to deal with the notification.
I was thinking of two ideas. The first was looping through and adding a page action to every tab, then hooking the new tab and navigation events and adding it to each of those. My second idea was hooking the active tab change event and adding it to the active tab then removing it from the former tab when changing tabs next.
But I thought that there's still probably a better way I didn't think of or didn't know about. So what's the best way to accomplish this?
You need to hook into the onActivated event if you want to get notified of tab changes.
However, that would not be enough, since the page action will reset on navigation. So you'll need to hook into almost every tabs API event to ensure your logic. Also, think of the cleanup required afterwards.
That really does seem like a poor job for a page action. There is also an important consideration that this UI element is not associated, by a typical user, with something that needs attention. Have you considered using notifications instead?
You could use chrome.notifications Rich Notifications together with the priority trick, or just web notifications. In either case it'll be something displayed to the user in a way that is appropriate for "something needs your attention". You can then hook into its onclick event.
If you do want a button, browserAction is totally appropriate. You can dynamically change picture, add a text badge to the icon to attract attention, or just plain disable the button (not hide, but grey out) when there's nothing to do.
According to the documentation, page actions are supposed to be used only for single pages. If you want something to show up on all pages, you should use a browserAction.
Alternatively you can try and set "<all_urls>" in the permissions, but I haven't tested if it actually works.
I have a page which contains multiple HTML select dropdowns, and requires population onclick of the element. This population is done using an AJAX call in the click event listener of the select elements.
The reason for this is that performance and load are very crucial, and therefore they cannot be populated on page load.
Also, the design must use the native HTML select element.
I have created a jsFiddle demo to show the issue. When you click on the select the items are populated, and the width of the select increases as a result.
However the select only displays the initial option (prior to AJAX population).
------ View Demo ------
Demo uses setTimeout() of 50 milliseconds to emulate an AJAX response time.
How can I get this to populate onclick, and display correctly?
Is there a way of opening the select on callback of the popualation response?
EDIT: Alternatively, is there a jQuery plugin dropdown, which uses the browser's native theme for styling?
What I've tried so far
Populating the select on hover, however a quick user can open the select before the options have loaded. Also, if a user was to scroll all the way down the page, and over every select, this would cause a lot of unnecessary AJAX calls.
Changing the event listener to focus instead of click (as #AndyPerlitch suggested). However, this wouldn't work if the AJAX request took only 50 milliseconds to respond. (See Demo)
Changing the event listener to mousedown has the same effect as focus
UPDATE: This is not an issue in FireFox. select opens, then loads new items and displays them, all while in an open state.
Change the event to listen for from click to focus
Personally I would opt for a different approach completely, but it depends on you needs. Here I am assuming that the drop down will "almost definitely" be clicked (and thus loaded) at some point by the user.
With that in mind I would be tempted to populate the select lists using ajax as soon as the page is loaded. This has the benefit of being able to load the page quick (as there is still no "page load" list collecting) but it also means the ajax will most likely be complete before the user works out that they need to use the select list. I would even go an extra step and have temporary loading icons in place of the selected while the ajax is working it's magic (or disable them!) in case the ajax is having a slow day and the user is fast like superman.
of course, this all depends on how "set in stone" your requirement is to do the ajax load upon user interaction with the drop down element
or maybe this might prove some use?
The select will always display as it was before the click event started. You will therefore see only the initial option because you do the AJAX population after the click event started.
This may be a compromise for you but try to AJAX-populate before the click event. This may be:
-on hover, as you have done already (user has to scroll for the click anyway)
-an extra click for your users on an element neighbouring the select
Hide the drop down list and have something else in its place for the user to click on to trigger loading the drop down and displaying it.
I have a custom modal dialogue that consists of a simple div and some css. There are 2 buttons (OK, CANCEL) buttons. The CANCEL button is always the same; it hides the modal dialogue via onclick="$('#div').css('display','none')" (NB: this is also how the modal is shown; ('display','')). I assign different actions to the OK button depending on the need. This is done via $('#okBTN').attr('onclick','my_function()').
It works, but only the first time ©
The first time I open the modal and walk through the steps, everything works as expected. If I close the modal, however, then re-open it, the OK button has no action on it. I mean, the onclick is assigned (correctly); it's in the source code, and it will alert correctly via .attr('onclick'), but clicking the button does nothing. I have it set that when the modal pops up, the onclick is assigned each time; but it's almost as if there is a shadow copy or something stuck in memory or the DOM. Although, I don't see anything strange in Firebug....
I've tried cloning the button, reassigning it, then replaceWith'ing. I've also tried remove'ing it and re-adding it...
Any clues?
Hate to say it my friend but you're not leveraging the benefits of jQuery.
Why set display via CSS? Just use .hide() .show() or .toggle().
Why are you setting on onclick attribute via javascript? This doesn't make much sense at all. Use $(elem).click(my_function);
The second bullet will likely fix your problem, but I'd do some serious re-evaluation.
Good luck!
Use bind or event-name binders:
$('#okBTN').click(my_function)
I'd try using .css('display','block') instead of .css('display',''), as assigning a blank display value doesn't seem like a good idea (it might work, but just to be safe).
Have you tried setting the .bind() function of the element?
$('#okBTN').bind('click', my_function);