I've a simple page that requires 2 date input and I would use a datepicker to get them.
I've found glDatePicker http://glad.github.io/glDatePicker (thanks a lot!) that is simple, light and works very well.
My problem is use it in modal with bootstrap 3.
I can call function to display the datepicker, for example
$(window).load(function() {
$('#date').glDatePicker();
});
and it works perfectly anywhere, except in modal where it look likes to appear behind the modal and/or it's not entirely shown (malformed).
I've alredy tried to put it in a specific div (like the author suggest), but the result is the same.
I think that it can't be attached correctly to the input field because of modal, but I'm not sure and anyway I don't know how to solve it :)
Thanks!
I had the same problem with another library. The fact is that the calendar that is shown is attached to "body" element and for this reason it cannot be seen in the modal popup. For this reason you can try if changing z-index property or positioning for you is enough. Otherwise (like in my case) was hacking the library in order to accept one additional optional parameter that was meant to store the dom element to attach the calendar to.
Related
I am using the Bootstrap Popover Extended - https://github.com/kartik-v/bootstrap-popover-x - as I need modal behaviour in the popup.
I am not able to get its methods and events working.
Also, I cannot find a working demos which utilizes it with jQuery.
Perhaps someone who has already used it could provide me with some examples ?
Specifically, I need show, shown, hide, hidden events.
[added]
The demo I am looking is http://plugins.krajee.com/popover-x/demo
You can find the description of events and methods following the link to github that you provided. Also those are listed on the official page: events and methods
To show the popover manually you need:
1) initialize that, say, on a page load
$('you-popover-selector').popoverX({
$target: $('target-selector')
});
(I've noticed that you need provide $target in options, otherwise there is an error; target is a DOM element near which you want to show the popover)
2) invoke show method
$('you-popover-selector').popoverX('show');
Is there a tool (or something in firebug) that will tell me what events just fired and more importantly on what elements they were bound to?
I have a number of javascript "includes", some minified, some not. I am experiencing some odd behaviour that I want to turn off, but I cannot find what is causing it.
I have a form showing in a "popup" and when I try to click on one of the input boxes, the "popup" closes, so some event bind somewhere is causing this.
The problem is, I don't know what element has this spurious event bound to it. The problem also occurs if I click anywhere inside the popup (and on the background mask that is covering the rest of the page, but that's acceptable)
I am using firefox, so anything I can type in the console is also an option. The eventys in the multiple javascript files are done in various ways, some through jquery, some using inline attributes (eg. onclick="..."), some using just javascript.
I certainly don't want to go and add some line of code to every possible event in every javascript file.
I have spent over an hour trying to hunt down this dom element and have already eliminated the obvious ones like the divs containing the popup and the body tag.
DOM modifications can be tracked down using the Break On Mutate option within Firebug. It can be activated by clicking the related button ( ) within the HTML panel. Note that the Script panel has to be enabled for this to work.
There are also several other Break On ... features, which may help you finding the right position within the code for a specific event.
Furthermore Firebug 2.0 introduced an Events side panel, which displays all events bound to the element selected within the HTML panel. If libraries like jQuery are used, it will even allow you to investigate the user-defined function wrapped by the library function in case you enable the option Show Wrapped Listeners as described in the answer to a related question.
I have a searchbox on which I initialize typeahead when I click on it, to some data from the server. Depending on the current page, I need to show/hide a footer in the search dropdown.
I went for the approach to destroy the typeahead and then recreate it, according to my needs. In this way, I also refresh the data from server, in case there's something changed.
For destroy I use this this.$("#searchQuery").typeahead('destroy'); right at the top of the function that needs to initialize the typeahead, but the problem is that the menu is not destroyed. If I look at the dom, there are 4-5 or even more typeahead menu created.
So my question is, how can I properly 'reinitialize' a typeahead menu?
I forgot to mention I am using twitter typeahead
You don't need to reference jQuery via this like you showed here
this.$("#searchQuery")
You should just do
$("#searchQuery").typeahead("destroy");
Without seeing more of an example I would say your problem might be because this inside your function is being bound to a different object than the one you were expecting.
See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this
Your line is inside your function so you can not guarantee that this will be Window and you have no need to use it in this case.
If this is not the problem then please provide a full html and javascript example, preferably on JsFiddle.
I have a series of select dropboxes setup, with content that dynamically updates depending upon the preceeding selection. It works fine selecting in series.
When I try to go back to the top and start again, even though I have attempted to reset all children using
my_select.selectedIndex = 0;
The child select boxes remain unchanged. I had thought it was a Javascript error, but found the JSFiddle example actually worked, but my code within JQuery mobile does not work - leading me to believe it is a JQuery Mobile related issue
You can see a JSFiddle example at http://jsfiddle.net/vinomarky/xfcdF/
Steps to replicate:
Select 'Casing' from Type
Select 5 from OD
Change Type to Tubing
The JSFiddle example behaves as it should - resetting children to "-", while my 'live' JQuery Mobile example does not
Any ideas as to why?
You're manipulating the DOM behind jQuery Mobile's back but never telling jQuery Mobile that anything has changed.
You need to call the refresh method after you change the underlying <select>:
refresh update the custom select
This is used to update the custom select to reflect the native select element's value.If the number of options in the select are different than the number of items in the custom menu, it'll rebuild the custom menu.
So you need to add things like this:
$('#od').selectmenu('refresh');
at the bottom of your change handlers. The element to refresh does, of course, depend on which change handler you're in.
Demo: http://jsfiddle.net/ambiguous/n3VXe/
Your fiddle worked fine because it didn't use jQuery Mobile at all.
Also, you shouldn't be using onchange attributes in 2012, you're loading jQuery so you should use it to bind handlers to the events you're interested in. You might want to replace all your direct DOM manipulation with jQuery as well.
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);