I want to use a autocomplete combobox http://jqueryui.com/demos/autocomplete/#combobox within a modal dialog. However whenever I click on the down arrow (of the combobox) it causes a refresh that results in my modal window closing.
How do I stop the refresh from occuring? (I am still new to jQuery)
I am using UI 1.8 and jQuery 1.4.1.
The problem is discussed on the jQuery forum here:
http://forum.jquery.com/topic/autocomplete-combobox-problem-when-it-is-placed-inside-a-form-tag
They suggest several different ways of adjusting the source code of the autocomplete combo to fix it. The simplest one seems to be this:
Change the line that says
$("<button> </button>")
to
$("<button type=\"button\"> </button>")
this prevents the type="submit" from being inserted into the final button.
Ok I fixed my own problem by removing the form tag from around the combobox
Related
Hei guys.
I'm trying to add additional HTML elements below search box.. like checkboxes for filtering purposes.
But the added checkbox is not functional, you can't actually check it. I'm not sure but I think that search box is taking the focus from them... I created this jsFiddle so you guys can check it out.
http://jsfiddle.net/6wz2hLh0/
$("#e1").select2();
//Inserting additional HTML elements below search... filter in my case
$(".select2-search").after("<input type='checkbox'/>");
When the dropdown is open you can't even write in jsFiddle input's.
I tried commenting out various focus calls from source code with no luck.
Can any one point me in to right direction in source code what is causing this non stop search box focussing.
One thing to try is to have the checkbox element stop the mouse events from propagating. That seems to prevent them from getting to Select2, so Select2 cannot kill them.
$("<input type='checkbox'/>")
.insertAfter(".select2-search")
.on('mousedown mouseup click', function(e) { e.stopPropagation(); });
jsfiddle
I'm not sure but I think that search box is taking the focus from them
My guess is that this is because Select2 kills (stops propagation and prevents default) most events that occur within the dropdown. This is so Select2 doesn't leak events, but it also causes problems like not being able to catch click events or embed links.
When the dropdown is open you can't even write in jsFiddle input's.
This is because Select2 uses a mask that captures all events outside of the dropdown.
Can any one point me in to right direction in source code what is causing this non stop search box focussing.
You are going to want to look through the source for killEvent, as this is the method Select2 uses that kills events. As most browsers listen for the click event for native controls, you probably want to remove this killEvent for dropdown clicks.
I have multiple sets of jQuery radio buttons on a jQuery modal dialog. Clicking one in each set hides or shows divs. Anyway, they work perfectly in Chrome, but in FF and IE, they work hide/show the divs properly... but they start disappearing as they're clicked.
I've tried adding plain radio buttons that do nothing, but they still disappear individually as they're clicked. Am I missing some sort of declaration?
I would post the code, but it can literally be a copy from the jQuery website for radio buttons and they'll still disappear.
Thanks for any help.
Have you tried the same example page from another system? If all examples you can find have this behavior, I'd start to suspect your display driver or even hardware. Give a link for a page that you see the problem with, and we can see if it happens for us.
I'm still not quite sure what the problem is, but I implemented a work around.
In Chrome, I remember I had to add an unused jQuery radio button at the top... that hides when the dialog is opened... and "unhides" when the dialog is closed (the dialog is hidden when closed, so the user doesn't ever see this radio button).
For some reason I had to add another one of these jQuery radio buttons that hides and unhides itself to prevent the disappearing jQuery radio buttons in IE9 and FF. So in my case, Chrome required one of these fake buttons... while IE and FF needed two.
Anyway, I think the root of the problem stems from my overall layout template. I think multiple divs all over the place are screwing something up somewhere.
I'm just an amateur programmer so I know this isn't the solution that I'm sure many people would be looking for, but it works for now so at least I'm able to move on.
I'm sure I'm not the only person asking this question. When you have a jQuery UI implementation, and you use the .buttonset(); command to turn a set of checkboxes into a button-set (multi selectable), I'm having trouble when a user de-selects an item after selecting it.
So let's say on hover, it turns into a certain colour (based on the settings of the jQueryUI theme I downloaded), and after clicking, it turns into the active state colour. When I click the same item again, and move the mouse away, it remains the hover colour, causing confusion as to whether the item is deselected or not.
And this only happens on Firefox only - seems to work fine on Chrome & Safari.
Here's a demo link: http://www.tylervolker.com/mls-search
I tried to force a blur() event to these items but no dice it seems.
$('.label').click(function(){
$(this).blur();
});
What am I missing? Or is this just a Firefox thing I need to live with until either jQueryUI updates their code, or Firefox appends this?
This appears to be this known jQuery UI bug - http://bugs.jqueryui.com/ticket/5518. The button widget isn't set to be addressed by the jQuery UI dev team until 1.11 so I wouldn't expect a fix for this anytime soon.
There are some suggested workarounds in the related issues on that ticket.
i try to use codemirror in a jquery ui dialog.
here you can see the result in jsfiddle.
http://jsfiddle.net/HtntY/
the problem is that the content in codemirror does not appear on first load. it only appears after you set focus on the editor and than type something, after that the preloaded content appears.
can this be fixed somehow. i tried to do it with the refresh() function without success.
thanks for you short time.
Looks like jQuery UI hasn't actually unhid the DIV when the opener runs. Putting a refresh call in a timeout (as in http://jsfiddle.net/NP9SL/ ) seems to do the trick.
I ran into the same problem and wound up running the editor.refresh() off the focus event, FWIW. I thought I'd mention another, somewhat related problem. If you try to take advantage of the CodeMirror dialog/search functionality inside of JQueryUI modal dialog, the integrated search dialog fails to get focus and you can't type into it. Interestingly I can paste text into the search field, but I cant type. Have yet to find a way around this other than setting modal to false.
I need modal dialog box in which I can open forms and other html pages. It should have on/off and min/max button. Could anybody suggest me any link for the same. I am not getting this type of widget anywhere.
The JQuery plugin SimpleModal is pretty effective. I have used it before and am quite sure it should provide the functionality you require.