Develop Reference

Autocomplete doesn't work on Prestashop 1.6 custom module

I want to add the jquery ui module autocomplete on a input text.
In my controller I add this line :
$this->context->controller->addJqueryUi('ui.autocomplete');
In my template, a test textbox :
test auto complete <input type="text" id="testautocomplete">
In my JS called by my template :
var dataSrc = ["australia", "austria", "antartica", "argentina", "algeria"];
$("#testautocomplete").autocomplete({
source:dataSrc
});
But that don't work.
I see in my source page this :
<input type="text" id="testautocomplete" autocomplete="off" class="ac_input">
I tried to add this in my JS
$('#testautocomplete').attr("autocomplete", "on");
But still doesn't work.
Please help ! ;)

I could explain, but I think could be more useful for you take an idea from the module ps_searchbar in PS 1.7, check the file ps_searchbar.js which will serve as a guide to apply in your module.
If you have troubles loading the library, you can check the hookHeader of the file ps_searchbar.php.

add plugin in ng-ckeditor

I'm using ng-ckeditor to work on ckeditor with angularJS. I have to add code snippet plugin in ckeditor. As per words of ng-ckeditor, I have passed plugin data into editorOptions. But still it is not getting loaded into ckeditor. I can't get that waht is issue. ng-ckeditor accepts uiColor value from editorOptions. But it doesn't work for plugin data. If anyone can help, it will be appreciated.
Here is my code
HTML
<textarea id="taDescription" name="taDescription" placeholder="Enter Description" rows="10" cols="80" ng-model="topic.description" ckeditor="editorOptions" required></textarea>
JS
$scope.editorOptions = {
extraPlugins: 'codesnippet',
uiColor: '#000000'
};
Note: I have included all the files related to ckeditor. So I'm sure that there is not any problem related to missing file etc.

I think this angular directive does not support the functionality of adding extra plugins. I also faced the same problem when adding code snippet plugin to CKEditor in angular js and ended by implementing in following way:
Add following script on your main page:
<script src="http://cdn.ckeditor.com/4.7.1/standard-all/ckeditor.js"></script>
Also, define config for CKEditor of code snippet plugin in following way:
<script>
var config = {
extraPlugins: 'codesnippet',
codeSnippet_theme: 'monokai_sublime',
autoUpdateElement : true,
height: '30%'
};</script>
You can also define this config in your page or in your main page(if yu need to add it to multiple pages).
Then go to your page and use CKEditor as following:
<textarea ng-model="yourmodel" placeholder="Enter Description" id="description" name="description"></textarea>
At the end of the page you need to use following script:
<script>var editor = CKEDITOR.replace( 'description' , config);</script>
This script should be only added after your element otherwise it will give you the error of undefined element.
Hope this will help someone.

uib-tooltip custom trigger do not work?

I have this tooltip on a input field:
<input id="test" uib-tooltip="my tootip" tooltip-trigger="customEvent" ng-model="test" />
and i want to show it by using jquery:
$('#test').trigger('customEvent');
but i can't get it to work, my versions of ui-bootstrap-tpls is 0.14.3
i've also configured the provider like this:
app.config(['$uibTooltipProvider', function ($uibTooltipProvider) {
$uibTooltipProvider.setTriggers({
'customEvent': 'customEvent'
});
}]);
Anyone could explain why?

AngularJS jquery does not support trigger() method

Jquery-UI disabling input fields

Using Foundation Framework and PHP
I have a couple of simple input type=text form fields which appear to get focus (cursor blinks inside them) but they refuse to accept any keyboard input. After some trial and error, I discovered that if I disable the Jquery-ui.js script, the inputs work ok.
It appears that Jquery-ui is somehow disabling the fields. Does anyone have any idea why this might be and what a workaround might be? I need to keep Jquery-ui as I have some draggable/droppable items.
<form action="#" method="post">`
<input id="formLength" type="text" >`
<input id="formWidth" type="text">`
</form>`

I'm guessing here, but i've seen errors like these when i had conflicting jquery mask plugins in the project. I needed to use both, so i had to deactivate the duplicated selectors from one of the libs so it doesn't activated for the same input.

Not enough information to answer the direct question. However, as a side note, you can use the jQuery UI interactions--mouse, position, draggable, droppable, position, resizable, selectable, sortable--without having to use the widgets. The only dependencies are core.js and widget.js(the widget factory).

I've got a potential workaround for you.
First create two instances of jQuery
<script type="text/javascript">
var $jOriginal = jQuery.noConflict();
</script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript">
var $jNew = jQuery.noConflict();
</script>
Now, use new jQuery instance in place of the old one
<script type="text/javascript">
$jNew('#selector).doSomething(); //Will use new jquery library
$jOriginal('#selector).doSomethingElse(); //Will use original jquery library
</script>

How to apply style from jQuery autocomplete CSS using Django?

I am trying to implement JQuery Autocomplete plugin using Django.
I've been able to wire the thing together and I can actually see the result back in the HTML template.
My problem is that the JQuery Autocomplete CSS doesn't seem to work.
The results I get are not well-formatted/styled, have no background and you cannot even select them.
What is it that I am missing?
I have these three files in my media folder the same folder:
autocomplete.js
dimensions.js
autocomplete.css
In my html template I have the following function:
$(function(){
setAutoComplete("tags", "tagResults", "/taglookup/?query=");
});
My textfield looks like this;
<input type="text" name="tags" value="">
Where do I put the tagResults in my HTML template document? Every time I try to introduce a DIV with id="tagResults", JQuery throws an error.
Any ideas?