Edit event does not fire at the right time - javascript

We have an app with nested grids which contain popup editors.
I've also played with a sample from Kendo which has nested grids with inline editing, and in both cases, when the details view is hidden to start with, the edit event fires when I click the 'expand', but it does not fire when we click 'edit'.
We want to disable radio buttons based on data in the parent object, but, the template gets build by the grid one on load ( which is sensible ), and the window gets constructed when needed, so even if we add our own click event to the button, it fires BEFORE the window exists, so it fails. We need to run javascript AFTER the edit window is visible.
This does not appear to be possible, and every answer we see, references the 'edit' event. Is it just broken in the current release? Or does it just not work for nested grids?

Related

Do something when div is created without knowing the event that creates it (javascript)

I'm wanting to create an overlay when a popup is created, but I don't know what event is triggering the popup. Is 'listening' for a specific div to be created possible?
Just in case that wasn't clear, here's another way of asking my question:
When #popup is created, I want to insert a div with after(), but again, I don't know what triggers the #popup
In my specific situation, the html for the popup is being created (i.e. the popup isn't just being displayed with CSS)
MutationObserver
I attempted using MutationObserver but that didn't work. In my situation, when the input for the date is clicked (see fiddle), the popup is created. With MutationObserver, I tried to fire an alert that went off when that popup was created. But it fires as soon as the page loads.
Fiddle
you can use Mutation observer to detect the event when div is created

jQueryUI 2 tabs inside another tab - height isn't set when hidden

The app I'm developing has a number of main pages which I'm implementing using jQueryUI tabs with heightStyle:"fill" so they all extend to the full height of the container on the web page. One of these pages contains two more tabs elements, again created with heightStyle:"fill". I want them to appear side-by-side so I've wrapped each one in a <div> with height:100% width:50% position:absolute top:0, then one has left:0 and the other has right:0 to make them stick to the right edges of the container. JSfiddle is here.
The problem I'm seeing is that if tab "1" is selected when the page loads, and I then click on tab "2", the two inner tabs element display with the wrong height.
I only get the problem if "1" is the default tab. If I make it "2" by changing the active option in the tabs() call to 1 then the elements are visible when the page loads and their height is set correctly.
The problem goes away if you run the "refresh" method on the inner tabs because this causes them to recalculate their height, so one way of solving this is to run "refresh" from a "tabsactivate" event handler on the outer-tabs element. The problem is that this event handler is triggered for ALL tabs, not just the one we're interested in. So how do I use callbacks to handle this efficiently.
Another way of fixing it is to change the CSS, as I suspect the problem is being caused by wrapping the inner tabs in a div with "position:absolute".
Suggestions gratefully received!!
Cracked it! First bind a custom my-activate event handler to the panel that contains the inner 'tabs' elements, and from there send them a refresh event. Second, add an activate event handler to the outer 'tabs' element and from there pass the my-activate event to the activated child panel. http://jsfiddle.net/kmbro/a92rg8cy/. The neat thing with this approach is that you can bind a different handler to each child panel.
Another possibility is that you can send a custom my-deactivate event to the panel that's being deselected (using ui.oldPanel) so it can switch off any background update processing that it had put in place when it was activated.
Take care because the activate event isn't sent to the 'tabs' element when it first appears on the screen - you only get it when the selected panel changes. If you need to do something first time, handle the create event instead - http://api.jqueryui.com/tabs/#event-create. Enjoy!

Prevent same function from firing twice

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.

JQuery FullCalendar freezing after removing an event

I am using FullCalendar with an array of events to populate it. To remove events from the calendar, the user clicks an event box and a dialog box pops up. There is an x in this box that triggers the removeEvent method.
In this method I filter out the event matching this id of the removed element, then remove and re-add the source like this
calendar.fullCalendar('removeEvents');
calendar.fullCalendar('removeEventSource', addedEvents);
calendar.fullCalendar('addEventSource', addedEvents);
calendar.fullCalendar('refetchEvents');
calendar.fullCalendar('rerenderEvents');
All of this works fine (the event gets removed), but after that, I can no longer interact with the events. Clicking an event does not open the dialog box. It's almost as if the elements are no longer there, but I can still see them.
Any help troubleshooting this would be appreciated. Thank you.

Populate HTML dropdown onclick

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.

Categories

Resources