We Keep Coding

Replicating google auto complete with jquery autocomplete

Trying to accomplish the above result with jquery.googleSuggest.js is giving me a lot of trouble as can be seen here. Some of the original CSS of jquery UI seems to be shining tough. Anyone any hints on the most elegant way to fix this? (And how to add the grey "gle", after "goo" behavior in the screenshot above?)
HTML
<div class="suggestions_box">
<ul>
<li>f<b>acebook</b></li>
<li>f<b>unda</b></li>
</ul>
</div>
JS
var div = $("<div>").appendTo("#inputs")
, input = $("<input>").appendTo(div);
input.googleSuggest({ service: "web" });

Your custom css in the linked fiddle is creating problems. Removing all the css and adding external jquery-ui.css makes the dropdown appear correctly (as seen in this fork of your fiddle).
Basically, you only need:
// html placeholder for the input
<div id="inputs"></div>
and
// js init code
var input = $("<input>").appendTo($("#inputs"));
input.googleSuggest({ service: "web" });
Also, your other question has already been answered in this thread: How to implement a google suggest-like input field? It's a neat trick accomplished by overlaying two input fields one above the other one, with the lower one disabled and set to the value of first suggested entry.

jQuery UI Dialog: Dialog Element Disappearing from the DOM

I'm working on a project and I am attempting to create a modal dialog "pop-up" to capture data in a form. I haven't worked with jQuery UI's Dialog widget previously, but I've worked with others and it seemed straight forward.
I created the following very simple code snippet to test as I went along:
<div class="app-email">
<div>
<a href="#"
class="app-email-opener">
Click to add or edit your e-mail settings.
</a>
</div>
<div class="app-email-modal">
Oh, Hai.
</div>
</div>
$('.content').on({
click: function () {
console.log('I was totes clicked.');
var parent = $(this).parents('.app-email');
console.log(parent);
var target = parent.find('.app-email-modal');
console.log(target);
$(target).dialog('open');
}
}, '.app-email-opener');
$('.app-email-modal').dialog({
autoOpen: false,
modal: true,
show: false
});
For reference: the class 'content' is a higher level block to catch delegated events without having to go all the way up the DOM.
The issue I'm running into is that the div with class="app-email-modal" seems to flash onto the page and then disappear from the DOM completely. jQuery, therefore, isn't able to find it and do anything because at that point it simply doesn't exist.
The overall project is in ASP.NET MVC 4, using Visual Studio 2013.
Any information would be greatly appreciated.

So, finally discovered what's happening via this previously answered question:
Jquery Dialog - div disappears after initialization
//EDIT
For any possible future usefuless -
What was happening was that jQuery UI will move any DOM elements specified as Dialogs to the bottom of the page, rather than keep them in the location specified in the HTML markup. So, in my case, I was looking for things by class, but only within the scope of the app-email-openers parent app-email div.
To remedy this, I used templating (in my case, Razor) to add unique ids to each app-email-modal div, and added a data- attribute to associate the link with the specific unique id. This way they jQuery UI can move the elements as it sees fit, but there still easily accessible.
//END EDIT
I feel like that functionality should be better spelled out in the documentation. Even their own example doesn't operate like this.
Corollary: I attempted to use the appendTo option to have the DOM elements not be shifted to the bottom of the page, but they're still moved to the bottom. So, there's that.

jQuery sortable with overflow: hidden; between two lists

I have two lists in which using jQuery sortable i can move the items between them.
$( '#productsList, #orderList' )
.sortable({connectWith: '.containerDiv'})
.disableSelection();
However I run into a problem when i want to use custom scroll bar and set overflow:hidden; on the two lists. I want them to be with max-height:400px.
If i set overflow hidden i cant see the items after i drag them outside of one div, If i dont set hidden the list will have default scroll bar.
Can anyone suggest a solution.
thanks

If you remove the style position:relative from your lists is seems to work as you want it to.
http://jsfiddle.net/cCDcQ/2/
Edit:
I would have thought that using the appendTo option would fix this issue and I was right. After a bit more fiddling, I got it to work. This way, you can keep the position:relative if you need it.
http://jsfiddle.net/cCDcQ/4/

I know this ticket is somewhat dated, but I had ran into the same issue while using my custom scrollbar solution and attempting to drag between Sortable's with overflow hidden. After adding code to fix-up Sortable to work with my Scrollpane, I noticed what appeared to be an omission for the appendTo functionality.
The code for appendTo only appends the helper to the target if it doesn't exist in the DOM. That's why the clone options works for some (but not for all and I won't go into that here). The key to fixing it was to add this code toward the end of the _mouseStart function of the widget:
if (!this.helper.parent().is(this.appendTo)) {
this.helper.detach().appendTo(this.appendTo);
// update position
this.offset.parent = this._getParentOffset();
}
Note that this.appendTo is set-up earlier in the function:
this.appendTo = $( o.appendTo !== "parent" ?
o.appendTo :
this.currentItem.parent() );
With this fix in place, I specified an appendTo that targeted the div that contained both Sortable's and ceased to have the overflow issue.
The complete fix-up, including other flow fixes, is available in the scrollsortable JS file for the jQuery-UI-ScrollPane available here: https://github.com/borgboyone/jQuery-UI-ScrollPane.
Cheers!

Adding jqGrid Custom Navigation to Top Toolbar

Is it possible to add navigation items to the "top pager" in a jqGrid? And if so, what's the syntax for doing so?
I have an HTML snippet on my page that looks like this
<table id="mygrid">
</table>
<div id="mygrid_pager"></div>
And then an jqGrid initialization that looks something like this
$('#mygrid').jqGrid({
..., //full config string removed for brevity,
pager:jQuery('#mygrid'),
toppager:true
});
$('#mygrid').jqGrid('navGrid', '#mygrid_pager'),{
'add':false,
'del':false,
'edit':false,
'search':false,
'refresh':false,
'cloneToTop':true,
}).navButtonAdd('',{...}); //config navbutton string for button removed for brevity
A "top pager" with the id of #mygrid_toppager is automatically inserted into the page, but its custom buttons (which appear on the bottom pager) don't come along for the ride.
I see that there's a "cloneToTop" option included for the navGrid, but its description seems confusing, and I can only assume I'm using it wrong.
Clones all the actions from the bottom pager to the top pager
if defined. Note that the navGrid can be applied to the top
pager only. The id of the top pager is a combination of grid id and
"_toppager"
My understanding of the option is it will take buttons added to the bottom pager, and clone them to the top. However, the description then goes on to say "the navGrid can be applied to the top pager only, which doesn't make any sense since you're cloning it. The pont being, I clearly have a deep misunderstanding of how the API is supposed to be used.
If anyone can point me in the right direction (even just to a working example somewhere) I'd appreciate it. I'd prefer to do this through official APIs, as opposed to clever DOM manipulation, as seen elsewhere on StackOverflow.

OK, it seems that I found a way which looks like better. The idea is to use navButtonAdd with the "#list_toppager_left" instead of "#pager".
I modified the old answer so, that one custom button are added on the top of the navigation toolbar together with one standard button. Other elements from the top navigation toolbar will be removed. The results will looks like
You can see the corresponding demo live here.

ExtJS accordion setActiveItem

I am developing an application using ExtJS.
I have an Accordion and need to select an active item(so it expands).
Accordion.setActiveItem outputs the following:
"setActiveItem" is not a function in a browser's error window.
Second issue is that hideCollapseTool property, when set to true in the initialisation, doesn't do anything. Collapse tools still are being displayed.
I am using ExtJS 3.1.1.
I would be very thankful for any tips and answers.

I have had little luck with setActiveItem myself. Examining it in Firebug, the accordion panel doesn't even have that method.
What I did to get around it was to call expand() on the item I want to have focus,
e.g. :
accordion.items.itemAt(2).expand();

You can also expand some item in an accordion panel by it's component id like this:
Ext.getCmp('myAccordion').expand();
Ext.getCmp('myAccordion').items.key('myAccordionPanel').expand();

I fixed it in a controller with a ref called userview
this.getUserview().items.items[1].expand();

Ext.getCmp('myAccordion').getLayout().setActiveItem(0); // First Child
Ext.getCmp('myAccordion').getLayout().setActiveItem(1); // 2nd Child and so on

I spent a good 6 hours wrestling with this. collapse() and expand() didn't seem to be working. I'd expand a panel under the accordion and other panels would break.
Finally figured out there is some issue that happens if your accordion is hidden and then you show() it right before collapse() and expand() operations on the sub-panels.
My workaround was to never set the accordion to "hidden=true" and never show() it. Instead, I used style={opacity:0} to begin and then set opacity:100 when I needed to see it. This fixed everything, but isn't the most graceful solution.