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.

Getting started with guppy wyswyg javascript plugin

Im trying to use guppy wyswyg javascript plugin for mathematical expressions rendering. I went to its basic example at its webpage https://guppy.js.org/site/examples/basic/, but i cant deploy it at my local xampp proyect.
According to the example, i already set these dependencies (different paths in my proyect):
<link rel="stylesheet" href="localhost/lib/build/guppy-default.min.css">
<script type="text/javascript" src="../../../build/guppy.min.js"></script>
And then this:
Guppy.init(
{
"path":"http://localhost/lib/guppy",
"symbols":"http://localhost/lib/guppy/sym/symbols.json"
}
);
Finally this:
<input type="text" id="myinputtypeelementid" placeholder="Type math here" >
var g1 = new Guppy("myinputtypeelementid");
I just can see this:
Does anybody know what else i need to do?

Issue solved:
It just needed use a <div> tag with the right id instead o a <input> tag. Now it works ! I reply myself in case anybody gets benefit of this issue i faced.

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.

How can I use CKEditor without a config.js file?

I just started using CKEditor and had some questions on how to integrate this with AngularJS. The following fiddle was given to me.
http://jsfiddle.net/TheSharpieOne/fMC2p/
<div data-ng-app="app" data-ng-controller="myCtrl">
<h3>CKEditor 4.2:</h3>
<textarea data-ng-model="ckContent" data-ck-editor></textarea>
<br />
<textarea data-ng-model="ckContent" data-ck-editor></textarea>
<textarea data-ng-model="ckContent"></textarea>
<pre>{{ckContent}}</pre>
</div>
I had previously used a config.js but cannot see one used in this fiddle. Can someone explain how it's possible. I thought it was necessary to have the config.js and many other files present.

CKEditor is dynamically loading all necessary files, including config.js. In your case, a default config is loaded. You can load a different one with config.customConfig:
CKEDITOR.replace( 'myfield', {
customConfig: 'pathToYourConfig.js'
} );

TinyMCE textarea problem

I have an automatically generated text-area (by the Erlang Web framework) that looks like the following:
<span class="form_input">
<textarea id="question_text" class="tinymce" name="question_text"> </textarea>
</span>
I'm trying to apply the TinyMCE editor to it, but what happens is the following:
http://img24.imageshack.us/img24/9250/tinyt.jpg
So, my textarea is not replaced, but it's "embedded" in the RTE.
I'm initializing TinyMCE as follows:
<script type="text/javascript">
tinyMCE.init({
mode : "specific_textareas",
editor_selector : "tinymce"
});
</script>
Any hint?

try the following, cause I remember I did something similar and you have to specify the id of the textarea.
<script type="text/javascript">
tinyMCE.init({
mode : "exact",
elements : "question_text"
});
</script>

from screen shot it looks like one or many of the following might be an issue.
1) doctype and rendering of your html/css rules
2) your css rules might conflict
3) your html structure broken, DOM
4) tiny mc javascript may be having issues with dom structure, which in turn can be caused by doctype, html structure
is this issues page specific? or it happens on every page?
are your form elements inserted and created by js?

I tried to put a different #id from name attribute and it works
<textarea id="question_text" class="tinymce" name="question_text"> </textarea>
to
<textarea id="question_text_textarea" class="tinymce" name="question_text"> </textarea>
and then later...
tinymce.init({selector:'textarea'});