I'm using the tablesorter search/filter plugin to search names from a list. so when i type in a letter corresponding to the letters in the list will display. I used this: http://mottie.github.io/tablesorter/docs/example-widget-filter-external-inputs.html as a reference.
Below is my code:
var $table = $('#table').tablesorter({
sortList: [[0,0], [1,0]],
theme: 'blue',
widgets: ["zebra", "filter"],
widgetOptions : {
filter_columnFilters: false,
filter_saveFilters : true,
}
});
$.tablesorter.filter.bindSearch( $table, $('.search-subaccounts') );
HTML:
<input class="search-subaccounts" type="search" data-column="1"/>
I'm trying to filter names based on first name.
so when i try to execute it, gives me the following error:
Uncaught TypeError: Cannot read property 'bindSearch' of undefined
I dont know why it says 'filter' is undefined whereas i tried executing exactly the way its in the demo. What did i do wrong here?
Any ideas??
It sounds like the widget file isn't being included since the bindSearch function isn't being found - it's included with the filter widget. Make sure you load the following files on your page (theme file name will vary depending on your choice):
<link rel="stylesheet" href="css/theme.blue.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.tablesorter.min.js"></script>
<script src="js/jquery.tablesorter.widgets.min.js"></script>
Related
I'm trying to get working jQuery UI and prototype libraries together and finally arrived to this:
<script type="text/javascript" src="/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="/js/scripts.js"></script>
<script type="text/javascript" src="/js/prototype.js"></script>
<script>
var jq = jQuery.noConflict();
// Code that uses other library's $ can follow here.
</script>
<script src="/js/jquery-ui.js"></script>
And call jQuery like so:
jQuery(function($){
$('#myid').[...]
});
or
jQuery('#myid').[...]
But now, I can't get rid of the following error (without calling anything):
Uncaught TypeError: proto.plugins[i].push is not a function
and comes from the jquery-ui.js file with this part:
$.ui.plugin = {
add: function( module, option, set ) {
var i,
proto = $.ui[ module ].prototype;
for ( i in set ) {
proto.plugins[ i ] = proto.plugins[ i ] || []; // Error fires here
proto.plugins[ i ].push( [ option, set[ i ] ] );
}
},
Is there a solution?
I ran into the same problem. The cause for me was my attempt to add a function to javascript's Object class.
In fact, simply extending javascript's Object is not supported at all by jQuery - and thereby its plugins.
This answer to the question of extending Object has a good solution which solved the problem with jQueryUI for me.
I'm trying to create a image upload with the kendo editor.
I'm always getting an error:
ReferenceError: uid is not defined
...==E&&(E=1),g?(b&&(A+=-b),w&&(I+=-w),e=new
Date(Date.UTC(F,D,E,A,I,H,N))):(e=new ...
kendo.web.min.js (Zeile 11)
I'm using jQuery 1.8.3 and kendoui.web.2013.1.319.open-source
My code is as follow:
<div id="example" class="k-content">
<textarea id="editor" rows="10" cols="30" name="reply-content"></textarea>
</div>
<script>
$(document).ready(function () {
$("#editor").kendoEditor({
imageBrowser: {
messages: {
dropFilesHere: "Drop files here"
},
transport: {
read: "/images/ImageBrowser/Read",
destroy: "/images/ImageBrowser/Destroy",
create: "/images/ImageBrowser/Create",
thumbnailUrl: "/images/ImageBrowser/Thumbnail",
uploadUrl: "/images/ImageBrowser/Upload",
imageUrl: "/images/ImageBrowser/Image?path={0}"
}
}
});
});
</script>
Has someone experienced the same issue?
You are probably returning a list of string, but the editor is waiting for an json result (name, type, size). You can check the demo with a sniffer to see what kind of results is expected from read/thumbnail, etc. Not very sure if you really must implement an server class for Kendo's client equivalent, but, by default, the result for Read is expected as Json for sure.
New finaly i got it to work. I used some workarounds but see your self.
You can also test the functionality on the site: http://jonas.dnsd.me/forum/topic?id=113
But stil it has some bugs like the url: /imageBrowser/?path=/image.jpg. I remove '/?path=' with a javascript function, but it works just for 3 images.
If you upload a image the window will not refreseh.
I would appreciate some ideas about the issues.
Now it is working like a charm ... see at http://jonas.dnsd.me/forum/topic?id=113
I updated to new source code
First, sorry about the title of this question. I thought about it for a long time and could do no better.
My question is: can jQueryUI's autocomplete feature provide suggestions from multiple database fields under one autocomplete field. For instance, I'd want to be able to type in "br" in the field and have both "briman057" and "Brian Johnson" appear as suggestions even though they are stored in separate database fields and are returned as two separate key value pairs of the same JSON item (ie. [{username : briman057, name : 'Brian Johnson']}). I'd then want the username value to be the one that populates the field when either it or the full name are selected. I know that one of the keys needs to be named "value" or "label" and that the key by that name is the one that is used to provide suggestions, but can I essentially have two "value" keys for one JSON item?
Yes, it can, because you provide your own custom callback as a datasource. That callback can implement the behaviour you desire.
Here's a demo of what I think you want.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
<script type="text/javascript">
$(function() {
$('#myautocomplete').autocomplete({
source: function(request, response) {
// TODO: make suggestions actually depend on what the user types into the search box.
// You want two suggestions, one with 'briman57' and one with 'Brian Johnson', so we need two suggestions with different labels, but with the same value.
var suggestions = [
{ label: 'briman057' , value: 'briman057', username : 'briman057', name : 'Brian Johnson'},
{ label: 'Brian Johnson', value: 'briman057', username : 'briman057', name : 'Brian Johnson'}
];
response(suggestions);
},
select: function( event, ui ) {
alert('You have selected ' + ui.item.name + ' (' + ui.item.username + ')');
}
});
});
</script>
<input id="myautocomplete" title="Enter anything here."></input>
Take a look at the source code of the Remote JSONP datasource example for more inspiration.
I am trying to use tinyMCE in a ruby on rails application. This is my initialization code.
<script type="text/javascript" src="/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
// General options
// script_url: '/tiny_mce/tiny_mce.js',
mode : "textareas",
theme : "advanced",
plugins : "layer,inlinepopups",
relative_urls : false,
theme_advanced_buttons3_add : "tablecontrols",
table_styles : "Header 1=header1;Header 2=header2;Header 3=header3",
table_cell_styles : "Header 1=header1;Header 2=header2;Header 3=header3;Table Cell=tableCel1",
table_row_styles : "Header 1=header1;Header 2=header2;Header 3=header3;Table Row=tableRow1",
table_cell_limit : 100,
table_row_limit : 5,
table_col_limit : 5,
The initialization is working fine. Now, I am not using the tinyMCE toolbar, and instead have my own links, which when clicked, the tinyMCE functions for formatting text, inserting image, etc. should be invoked.
For instance, I have used tinyMCE table plugin, and need to insert table into the textarea when my page loads. This is what I tried:
editor = tinyMCE.get('editor');
editor.mceInsertTable();
But its not working. Please help.
Thanks.
mceInsertTable is an execCommand. You will need to call the following
tinymce.activeEditor.execCommand('mceInsertTable');
Sure, you just use the TinyMCE JavaScript API:
http://tinymce.moxiecode.com/js/tinymce/docs/api/index.html#
For example:
tinymce.activeEditor.hide();
I am trying to use quickSearch from http://lomalogue.com/jquery/quicksearch/ website. I don't know how to hook to the table so I hoping someone could be kind enough to help me here. I am using VS 2010 MVC 3, in C#, ADO.NET. Thanks in advance. I had a look at related question on the website, if there is a technical gitch? Is there alternative solution? Thanks in advance.
View file Index.cshtml looks like this...
Edited
<script type="text/javascript">
$(function () {
$("table.tablesorter").tablesorter({ widthFixed: true, widgets: ['zebra'],
sortList: [[0, 0]] })
.tablesorterPager({ container: $("#pager"), size: $(".pagesize
option:selected").val() });
});
</script>
<script type="text/javascript">
$(function ()
{
$('input#search').quicksearch('table tbody tr', {selector:'th'});
}
);
</script>
</p>
<table class="tablesorter">
Also it could solve any code organisation problems if you are to wrap the JQuery statement in this
$(document).ready(function() {
$('input#search').quicksearch('table tbody tr', { selector: 'th' });
});
Also the table quick search plugin i use is JQuery table search plugin, it works well and if you just take a quick look at the demo it is rather easy to implement and does not clash with most other JQuery table plugins.
While I haven't used QuickSearch before, and I'm not sure if it'll solve all of your problems, but as a start it appears that you've put your first script element too early in your document.
You need to put it after the other script elements.
this:
<script type="text/javascript">
$('input#search').quicksearch('table tbody tr', { selector: 'th' });
</script>
should appear after the the jquery script, and the quicksearch script elements. If you include it before, the browser doesn't know what $ and $(selector).quicksearch is.
btw: this:'input#search' selector is not needed.
you can use the #search selector to same effect, becuase searching by id is a one command in JS.