I am having problem with autocomplete mode with dhtmlx combo.
The includes files are as follows:
// Images
<script>
window.dhx_globalImgPath="combo/dhtmlxCombo/codebase/imgs/";
</script>
// CSS
<link rel="stylesheet" type="text/css" href="combo/dhtmlxCombo/codebase/dhtmlxcombo.css">
// Required JS files
<script src="combo/dhtmlxCombo/codebase/dhtmlxcommon.js"></script>
<script src="combo/dhtmlxCombo/codebase/dhtmlxcombo.js"></script>
<script src="combo/dhtmlxCombo/codebase/ext/dhtmlxcombo_extra.js"></script>
I have no issues with the code above and works well.
The following code I have on the page I have the combo itself is as follows:
<!-- HTML Combo -->
<div id="pickup" style="width:260px;"></div>
<!-- Initialisation of combo -->
<script>
var x = new dhtmlXCombo("pickup",260,"image");
// this works
x.loadXML("list.xml");
x.enableFilteringMode(true);
</script>
My problem is i want to use autocomplete mode by using the following line of code:
x.enableFilteringMode(true, "list.xml", true, true)
When i try the above line, it doesnt give error but it doesnt filter either. However im told to use a php file but i don't know what I need to put in the list.php file itself. I can code just dont know what to put in. Can anyone shed some light, the docs arent that helpful.
enableFilteringMode enables server-side filtering. It means that when you type something in the combo header, this text is sent to the script that is defined the second parameter of the method. The script generates XML with options that correspond the mask.
Therefore, you can't use static XML in this case.
You can find a demo of the dynamic loading in the dhtmlxCombo package:
dhtmlxCombo/samples/04_filtering/01_combo_big_db.html
Also, you can use dhtmlxConnector that provides a ready solutions for the server side (PHP, ASP.NET, etc.). The dhtmlxConnector package includes a demo with dhtmlxCombo, e.g.:
dhtmlxConnector_php_v10_110725/php/samples/combo/02_sql.html
Related
In my project I'm using AdminLTE from https://cdnjs.cloudflare.com/ajax/libs/admin-lte/3.0.5/js/adminlte.min.js but it doesn't load SidebarSearch.js on it.
How do I use this plugin in my project? Does anyone have a simple example to show me, because in the documentation itself it is not clear how to use this plugin.
mainly at this point:
$('[data-widget="sidebar-search"]').SidebarSearch('toggle')
Where in HTML / JS should I put this line of code?
To answer your question, simply add it in a script tag before the closing body tag of your page, example:
<html>
<head>
...
</head>
<body>
...
<script>
$(document).ready(function()
{
// Example to toggle dropdown list of the search bar
$('[data-widget="sidebar-search"]').SidebarSearch('toggle');
// Example to initialize the plugin with options
let options = {
arrowSign: '/',
minLength: 2,
highlightClass: 'text-yellow',
notFoundText: 'No results'
...
};
("[data-widget="sidebar-search"]").SidebarSearch(options);
});
</script>
</body>
</html>
However this method seems to return duplicate results.
Preferred method
Just add the options as attributes beside data-widget="sidebar-search".
It should look like this data-not-found-text='No results' data-highlight-class='text-yellow' data-min-length='2'
adminLTE documentation
Thanks for the help. I'm trying to use a jQuery selector to watch for a click on a group of elements, that start with particular characters. I have come up with the following code, but I must be missing something. If I hard code the ID (ie. $("#test_1")...), the code works:
<body>
<div id="content">
<div id="parentcontainer">
<div id="test_1"></div>
</div>
</div>
</body>
<script>
$(window).load(function(){
$("#statusbar").text("Ready");
$("#parentcontainer").click(function(){alert("parent clicked");});
$("#btnaddelement").click(function(){alert("Add Button Clicked");});
$("[name^='test_']").click(function(e){e.stopPropagation();
alert("Child Clicked");});
});
</script>
You are selecting on $("[name^='test_']") which will give you elements who have a name attribute that start with test_. You need to select on $("[id^='test_']") for elements with an id that start with test_. That is one example of what you are getting with your hard-coded success of $('#test_1') -- an element whose id attribute is test_1.
Also, be aware if you are not already that xpath is the language used for selectors, so you can do all kinds of incredible selection if you become familiar with it.
Yes, you missed something. Change the div's attribute id to name will work
<div name="test_1"></div>
Actually, class was used more frequently.
And there are an opinion I want to improve the code.
Try to use the jquery's $(document).ready instead of DOM's load. Because load will wait for all the sources to be loaded compeletely before the js code can be executed, for example, all the photos are downloading ok.
I hope this help!
Suppose I have files vendor/lib.js and index.html in my PWD. I am adding a script tag to index.html (cursor position denoted by |):
....
<script src="vendor/|"></script>
....
Then I hit C-TAB and the string "vendor/" gets completed to "vendor/lib.js" (or suggestions are shown if there is ambiguity).
More formally, I want this functionality to be available for several attributes of the specific set of tags. For example, <script src=""/>, <a href=""/>, <link href=""/>, <img src=""/>, and so on.
Is there a minor mode for that? If there is no, I will appreciate any insights on how it can be implemented.
I have a jQuery template, and I would like to use a KnockOutJS template within this.
I cannot make this work as this example illustrates: http://jsfiddle.net/maate/bwmcR/1/.
However, it DOES work when the KnockOutJS template itself is placed outside the scope of the jQuery template as in this example: http://jsfiddle.net/maate/bwmcR/2/.
It seems that the problem is related to the scope of the template data variables (for instance, I can access the ${test} variable within the subTemplate).
Does anyone know how to make this work?
Br. Morten
The first example you have is just not valid. Although you want to create a sub-template it has to be in a separate script tag. You just can't embed templates within each other, you have to create them one after the other.
WRONG:
<script id="superTemplate" type="text/html">
...
<script id="subTemplate" type="text/html">
...
</script>
</script>
RIGHT:
<script id="superTemplate" type="text/html">
...
</script>
<script id="subTemplate" type="text/html">
...
</script>
When you applied the subtemplate on the ul, you defined what data it should be using with the foreach, so you won't be able to read the test as it is not a property on an item.
If you want you can pass it as a templateOption so it will be available on the subtemplate too.
<ul data-bind="template: { name: 'subTemplate', foreach: items, templateOptions: { testValue: 'Value' } }"></ul>
This way it will be available on the subtemplate.
<span data-bind="text: $item.testValue"></span>
Also, I wouldn't use the default jQuery template tags, it is much nicer with data-binding.
<div id="body" data-bind="template:{name: 'superTemplate'}"></div>
It will do the same, more or less, in the end. You can take a look here : http://jsfiddle.net/bwmcR/18/
How do you integrate CKFinder with the new CKEditor.
It is very underdocumented on the website, and i am literally getting nowhere.
A step by step guide would be greatly appreciate as, as far as i am aware.. this is the only free/good image upload solution for a wysiwyg editor that is any good. Can someone confirm?
Thanks
You can find a tutorial on integrating CKFinder with CKEditor here:
http://www.webshaolin.com/index.php?page=article&articleid=40
Try doing following steps.
1. Download CKEditor and CKFinder. Integrated code may be available on http://dwij.co.in/ckeditor-ckfinder-integration-using-php/
2. Put extracted code of both in one folder inside xampp as below.
3. Create index file (index.html) which will be containing the editor as below code.
<html>
<head>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="ckfinder/ckfinder.js"></script>
</head>
<body>
<h1>CKEditor CKFinder Integration using PHP</h1>
<textarea id="editor1" name="editor1" rows="10" cols="80"></textarea>
<script type="text/javascript">
var editor = CKEDITOR.replace( 'editor1', {
filebrowserBrowseUrl : 'ckfinder/ckfinder.html',
filebrowserImageBrowseUrl : 'ckfinder/ckfinder.html?type=Images',
filebrowserFlashBrowseUrl : 'ckfinder/ckfinder.html?type=Flash',
filebrowserUploadUrl : 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
filebrowserImageUploadUrl : 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',
filebrowserFlashUploadUrl : 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash'
});
CKFinder.setupCKEditor( editor, '../' );
</script>
</body>
</html>
so your folder structure will be something like this:
htdocs
|_integrated
|_ckeditor
| |_config.js
| |_...
|_ckfinder
| |_config.php
| |_...
|_uploads
|_index.html
Now open file config.php inside ckfinder & make following changes:
function CheckAuthentication() {
// WARNING : DO NOT simply return "true". By doing so, you are allowing
// "anyone" to upload and list the files in your server. You must implement
// some kind of session validation here. Even something very simple as...
// return isset($_SESSION['IsAuthorized']) && $_SESSION['IsAuthorized'];
return true; // not good option though; go for sessions
}
$baseUrl = 'http://localhost/integrated/uploads/';
$enabled = true;
$config['SecureImageUploads'] = false;
$config['ChmodFolders'] = 0777 ;
Now open url http://localhost/integrated/ and try uploading image.
Check the documentation site for your server language: http://docs.cksource.com/CKFinder_2.x
For example this part of the PHP docs: http://docs.cksource.com/CKFinder_2.x/Developers_Guide/PHP/CKEditor_Integration
And btw, CKFinder is not free, you must get a license in order to use it.
First you must have a textbox to convert to CKEditor:
<textarea id="newTextArea">Some text</textarea>
Then all you need is some javascript code for the conversion of this texteditor to a CKEditor instance and the integration of this editor with CKFinder.
<script type="text/javascript">
var newCKEdit = CKEDITOR.replace('newTextArea');
CKFinder.setupCKEditor(newCKEdit, '/ckfinder/');
</script>
The second parameter of the setupCKEditor function must be the folder in your website where you uploaded ckfinder.
http://docs.cksource.com/CKFinder_2.x/Developers_Guide/PHP/CKEditor_Integration