i am using jquery autocomplete plugin.i defined autocomplete on a text input element.i defined many methods also on autocomplete.i can't share whole code.but giving brief idea about my scenario.here is small code snippet
j$(".quick-text-search").autocomplete({
source: function(request,response){},
search: function(){console.log('coming to search');},
});
i defined source and search method.when i type in .quick-text-search element everything is working fine and its showing list items also. but when any other element is generating search event then no list is showing.for example from element checkbox when checkbox value is changed .here is code snippet of that
$('input:checkbox').change(function(){
// j$(this).parent().addClass('active');
var catList = getSelectedValues('category-selected');
console.log("catlist");
console.log(catList);
j$(".quick-text-search").autocomplete("search", "");
});
i think it should call search method .so there should something in browser console.but there is no 'coming to search' in browser console. can anyone guideline why and how to generate search event in jquery for autocomplete??
No search will happen if the text length is less than the min options
If you go to the jQuery UI sample page: http://jqueryui.com/resources/demos/autocomplete/default.html
and you run the following into the console, nothing happens since the min length is 1.
$("#tags")
.autocomplete("search", "");
If you change it to search for "a", it will show the results
$("#tags")
.autocomplete("search", "a");
Now if we change the min length to zero and run the same code again the options open up
$("#tags")
.autocomplete("option","minLength", 0)
.autocomplete("search", "");
Related
I have a while loop in my php page which sets a different id for every button and form through a counter variable. Every button has to open a different form (they each have different default information preselected, this is for a prescription renewal ability). I can get this to work by having in my javascript a click function for every id which calls a show on the right form. But, obviously this is not scalable, and so it cannot adapt to the amount of prescriptions I have. Looking through the web, I saw people using classes and the id starts with solutions to this problem. However, when I use this solution, the buttons open all the forms... not the desired behavior. Currently my javascript function is the following:
$('[id^="add-renew-link"]').click(function () {
$('[id^="add-renew-form"]').show();
});
Like mentioned above, the function does get called by all different IDs button. That code however opens all the forms every time one of the buttons get click. IDs are actually of the form add-renew-form0, add-renew-form1, add-renew-form2... (same pattern for add-renew-link). Forms and links with the same number at the end are meant to be linked. Does anybody know how I can achieve this? Thanks a lot!!
You can't have multiple DOM elements with the same ID. What you can do here is to assign classes for the elements:
<div class="add-renew-link"></div> <div class="add-renew-form"></div>
And then use .each
$('.add-renew-link').each( function(x){
$(this).click(function(){
$(".add-renew-form:eq("+x+")").show();
});
});
You can check out the JSFiddle here.
You're close. The $('[id^="add-renew-form"]').show(); is going to match ALL ELEMENTS that start w/ "add-renew-form" as the id, so that's why you're experiencing all forms being shown when clicking any link/button.
You can use a regex to pull the number from the end of the id to find a match on the associated form as below:
$('a[id^="add-renew-link"]').click(function() {
var idx = $(this).attr("id").match(/\d+$/)[0]; // Pull index number from id
$("#add-renew-form" + idx).show();
});
This jsbin has a full working example.
http://jsbin.com/xicuwi/1/edit
Try, using the .each() method:
$('[id^="add-renew-link"]').each(function(i){
var ths = $(this);
(function(i){
ths.click(function(){
$('#add-renew-form'+i).show();
}
})(i);
});
I am using jquery to gather data from a dynamically created table via Jquery. I am able to get the data, but now I want to sum up the fields and put the result inside a text field or label etc dynamically when I press enter. I am using the following code:
$("#iq").keypress(function(e)
{
if(e.which==13)
{
var tot=0;
$('#tab .itemtotal').each(function()
{
tot = tot + parseInt($(this).html());
});
$("#totalamount").val(tot);
}
});
My problem is that the value showing in the textfield is zero or NaN for the first time and after that its calculating correctly. I used the same code and associating it with a button and checking its click event and its working properly and showing first item also.
Any suggestions? If need some more clarification let me know. Thanks in advance.
So I am writing a plugin for ckeditor (#mentions).
When you type some characters (example "#John") a drop down will appear of a list of Johns that the user can select . When the users selects the drop down they want, it needs to remove the the "#John" text and insert an element that was retrieved from the dropdown. The problem occurs when trying to insert text, remove some text and setting the currsor position.
The Code
var html = '<span>InsertedElement</span> ';
// Create the Element to insert
var newElement = CKEDITOR.dom.element.createFromHtml(html, mentions.editor.document);
//Insert the element
mentions.editor.insertElement(newElement);
//Get a new bookmark
var tempBookMark = mentions.editor.getSelection().createBookmarks(true);
// get the data
var edata = mentions.editor.getData();
// set it with the exact same info so not changes (just for the test)
mentions.editor.setData(edata);
//set the bookmark
mentions.editor.getSelection().selectBookmarks(tempBookMark);
//focas on that position
mentions.editor.focus();
The issue
This works just fine on chrome however on IE11 after the text has been removed, when I try to access the mentions.editor.getSelection() I get "permission denied" error. I cannot set the bookmark and the focus is moved to the start of the ckeditor.
[Update]
A further test I performed narrowed down the issue. Commenting out the mentions.editor.setData(edata); line it stops erroring. If I use the setData function on the editor instance and then try to to run the GetSelection() on the Editor instance it errors (permission denied) in IE11 but works in Chrome. Its seems the setData function locks the editor in some way in IE11? I have simplified the code to allow it to be more easily replicated.
the Editor#setData is an asynchronous function. You cannot use selection right after setting data - you have to wait until everything is ready. Therefore setData accepts callback.
mentions.editor.setData( edata, function() {
//set the bookmark
mentions.editor.getSelection().selectBookmarks(tempBookMark);
//focas on that position
mentions.editor.focus();
} );
I am trying to use jQuery to show section if a user selects a certain checkbox in a sharepoint form. I have had success doing this with a button and with a simple checkbox with one value to show all from this blog post http://akanoongo.blogspot.com/2008/04/how-to-hide-fields-in-sharepoint-list.html, but am struggling with if they select multiple values.
<script type="text/javascript" src="/SiteAssets/Libraries/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(){
$("nobr:contains('Desk Calendars')").parent('h3').parent('td').parent('tr').hide();
$("nobr:contains('Calendar Refills')").parent('h3').parent('td').parent('tr').hide();
$("nobr:contains('Spiral Bound')").parent('h3').parent('td').parent('tr').hide();
$("nobr:contains('Wall Calendars')").parent('h3').parent('td').parent('tr').hide();
$("nobr:contains('Misc. Calendars')").parent('h3').parent('td').parent('tr').hide();
$("nobr:contains('Franklin Covey')").parent('h3').parent('td').parent('tr').hide();
$("nobr:contains('Comments')").parent('h3').parent('td').parent('tr').hide();
$("nobr:contains('Retention Policy')").parent('h3').parent('td').parent('tr').hide();
});
</script>
It would appear the value needs to be an if statement for contains VALUE not a click function. I am not sure what to do with this though.
$("input[title$='ShowFields']").click(function()
Basically if they select Wall Calendars it should show jsut wall calendar but if they do Wall and desk, it should toggle them both.
Any guidance would be fantastic. Thank you!
EDIT: I change my answer based on your comment below
To do what you want I'll use the library I created that is called SharepointPlus (please load jQuery and SharepointPlus in your page). Then the JavaScript code would be something like:
// hide all the rows by default
$SP().formfields("Desk Calendars,Calendar Refills,Spiral Bound,Wall Calendars,Misc. Calendars,Franklin Covey,Comments,Retention Policy").row().hide();
// add a trigger for when you click a checkbox
$SP().formfields("Calendar Type").elem().on('click', function(event) {
// the value of the checkbox is found with the "title" attribute from the parent
// if it's checked, then we show the row, if it's not then we hide it
$SP().formfields($(this).parent().attr("title")).row().toggle(this.checked)
})
I have implemented a phone gap app for android using jQuery Mobile and java script.
in my app
I have added a list view dynamically and used search filter attribute (true).
Now i want to popup an alert for every search.
That alert sh'd shows the count of the visible list items for entering of every character.
how?
Thnaks in advance
Following should give you the count of currently visible lis in a listview with id=myList
$('#myList li').size() - $('#myList li.ui-screen-hidden').size()
http://jsfiddle.net/nirmaljpatel/Vy7Vu/
I have made you an example on that does what you want:
http://jsfiddle.net/Calavoow/ddTX9/3/
It uses the css selector from this topic for quick counting of elements.
The javascript code uses a listview with id="filterlist".
$(document).on("pageshow", function() {
$("#filterlist").prev().on("keyup",function(){
count();
});
});
function count(){
var elements = $("#filterlist li:visible").length;
alert(elements);
}