Develop Reference

Jquery autocomplete with response, as filter function

Below i have some code, which works strange, i mean, it does nothing, i think that :contains function has some issue
$(".search").autocomplete({
source: availableTags,
appendTo: ".autocomplete",
minLength:3,
response: function(event, ui) {
var content = ui.content[0].label;
$.each($('.auto-sort'), function() {
var t = $(this);
if (("t:contains(content)")) {
return;
} else {
$(this).parent().parent().parent().hide();
}
});
},
});
Mainly, nothing happens when i type something in input field. I want to have items, that have part of content var in text.
If i reverse some lines of code, this code filters all items:
$(".search").autocomplete({
source: availableTags,
appendTo: ".autocomplete",
minLength:3,
response: function(event, ui) {
var content = ui.content[0].label;
$.each($('.auto-sort'), function() {
var t = $(this);
if (("t:contains(content)")) {
$(this).parent().parent().parent().hide();
} else {
return;
}
});
},
});
Now this above works, but it selects all items, for example if i type "tes" to input fields, all .auto-sort items are hidden, but those which don't contain content text, shoudl be visible.
Where is the problem?
Thanks for help.

The key to sorting, is to change filter logic to:
if($(this).is(':contains('+content+')')) {
Also, to make :containes case insensitive:
$.expr[":"].contains = $.expr.createPseudo(function(arg) {
return function( elem ) {
return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
};
});

Hide/show checkboxes based on user input in text field

You can see my current html/css/js here https://jsfiddle.net/cu0cvem2/. The 'groups' (checkbox list) will be much, much longer when I have actual content. I need the user to be able to begin typing in the input field and narrow down the checkboxes they have available. For example, if they began typing 'grou', all checkboxes would still be there because they all contain 'group'. If the began typing 'cool', than they would be left with one checkbox 'Cool Group' to select.
I would like to be able to add this code to the current object that i am using to hide and show the checkboxes which looks like this:
StoryGroup = {
groupInput: '.story-group-container input[type="text"]',
container: '.checkbox-container',
submit: '.checkbox-container .filter',
body: 'body',
init: function() {
$(this.groupInput).click(this.showForm.bind(this));
$(this.body).click(this.hideForm.bind(this));
},
showForm: function(e) {
e.stopPropagation();
$(this.container).show();
},
hideForm: function(e) {
if (!($(e.target).is(this.groupInput) || $(e.target).is(this.container + "," + this.container + " *"))) {
$(this.container).hide();
}
}
}

I think you need to filter the results using the keyup event..
Check this jsfiddle
StoryGroup = {
groupInput: '.story-group-container input[type="text"]',
container: '.checkbox-container',
submit: '.checkbox-container .filter',
body: 'body',
init: function() {
$(this.groupInput)
.click(this.showForm.bind(this))
.keyup(this.onKeyup.bind(this));
$(this.body).click(this.hideForm.bind(this));
},
showForm: function(e) {
e.stopPropagation();
$(this.container).show();
},
hideForm: function(e) {
if (!($(e.target).is(this.groupInput) || $(e.target).is(this.container + "," + this.container + " *"))) {
$(this.container).hide();
}
},
onKeyup: function(e) {
var text = $(this.groupInput).val().toLowerCase();
$(this.container)
.find(".checkbox")
.hide()
.filter(function() {
return this.innerText.toLowerCase().indexOf(text) > -1;
}).show();
}
}
StoryGroup.init();

How to reset progressbar in Jquery

When I add a card to the inbox list, it is possible to double click on the card to open a modal dialog. In the dialog it is possible to add some checkboxes dynamically. When the checkboxes are checked the progress bar changes value.
The issue is, lets say, I create 2 checkboxes and then check one of them, the progress bar will show 50% done. After that, I save the data and press the save button. The dialog closes.
Then, when I add a new one card to the inbox list and double click on it to open dialog, the progress bar still shows the value of 50%. You can see the problem in the image below:
I have tried to fix it by my self using the code below: But it doesn't seem to work.
$('#modalDialog,#progressbar').val($currentTarget.children('#progressbar').val());
Live Demo
How can I reset the progress bar after adding a new card?
HTML:
<!--Modal Dialog-->
<div id="modalDialog">
<form>
<input type="button" id="Save" value="Save Data" />
<hr/>
<br/>
<label>Add checkBox</label>
<br />
<div id="progressbar"></div>
<br />
<input type="text" id="checkBoxName" />
<input type="button" id="btnSaveCheckBox" value="_Ok" />
</form>
</div>
Jquery:
$(function () {
// Click function to add a card
var $div = $('<div />').addClass('sortable-div');
var cnt = 0,
$currentTarget;
$('#AddCardBtn').click(function () {
var $newDiv = $div.clone(true);
cnt++;
$newDiv.prop("id", "div" + cnt);
$newDiv.data('checkboxes', []);
$('#userAddedCard').append($newDiv);
// alert($('#userAddedCard').find("div.sortable-div").length);
});
// Double click to open Modal Dialog Window
$('#userAddedCard').dblclick(function (e) {
$currentTarget = $(e.target);
$('#modalDialog,#progressbar').val($currentTarget.children('#progressbar').val());
$('.allcheckbox').remove(); // Remove checkboxes
$('#modalDialog').data('checkboxes', []); /* Reset dialog checkbox data */
/* Add checkboxes from card data */
$.each($currentTarget.data('checkboxes'), function (i, checkbox) {
addCheckbox(checkbox.name, checkbox.status);
});
$('#modalDialog').dialog({
modal: true,
height: 600,
width: 500,
position: 'center'
});
return false;
});
$("#datepicker").datepicker({
showWeek: true,
firstDay: 1
});
$("#Save").on("click", function () {
/* Copy checkbox data to card */
$currentTarget.data('checkboxes', $('#modalDialog').data('checkboxes'));
$('#modalDialog').dialog("close");
});
// Add a new checkBox
$('#btnSaveCheckBox').click(function () {
addCheckbox($('#checkBoxName').val());
$('#checkBoxName').val("");
});
function addCheckbox(name, status) {
status = status || false;
var container = $('#modalDialog');
var inputs = container.find('input');
var id = inputs.length + 1;
var data = {
status: status,
name: name
};
var div = $('<div />', { class: 'allcheckbox' });
$('<input />', {
type: 'checkbox',
id: 'cb' + id,
value: name
}).prop('checked', status).on('change', function () {
data.status = $(this).prop('checked');
}).appendTo(div); /* set checkbox status and monitor changes */
$('<label />', {
'for': 'cb' + id,
text: name
}).appendTo(div);
div.appendTo(container);
container.data('checkboxes').push(data);
updateProgress();
}
$(document).on('change', 'input[type="checkbox"]', updateProgress);
$("#progressbar").progressbar({
value: 0,
max: 100
});
function updateProgress() {
var numAll = $('input[type="checkbox"]').length;
var numChecked = $('input[type="checkbox"]:checked').length;
if (numAll > 0) {
var perc = (numChecked / numAll) * 100;
$("#progressbar").progressbar("value", perc)
.children('.ui-progressbar-value')
.html(perc.toPrecision(3) + '%')
.css("display", "block");
}
}
});

When you click Save button just reset #progressbar value like this:
$('#progressbar').progressbar('option', 'value', 0);
You can see documentation at http://api.jqueryui.com/progressbar/#option-value

Onclick of Radio button listbox cant be Clear in Jquery

Here i am trying to do is on on-click of radio button list-box had to display with auto-complete but its not clear on-click ..so how to change according to radio button and display it..with auto complete properly
<script>
(function ($) {
$.widget("custom.combobox", {
_create: function () {
this.wrapper = $("<span>")
.addClass("custom-combobox")
.insertAfter(this.element);
this.element.hide();
this._createAutocomplete();
this._createShowAllButton();
},
_createAutocomplete: function () {
var selected = this.element.children(":selected"),
value = selected.val() ? selected.text() : "";
this.input = $("<input>")
.appendTo(this.wrapper)
.val(value)
.attr("title", "")
.attr("id", "sss")
.addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left")
.autocomplete({
delay: 0,
minLength: 0,
source: $.proxy(this, "_source")
})
.tooltip({
tooltipClass: "ui-state-highlight"
});
this._on(this.input, {
autocompleteselect: function (event, ui) {
ui.item.option.selected = true;
this._trigger("select", event, {
item: ui.item.option
});
},
autocompletechange: "_removeIfInvalid"
});
},
Look at this link

For starters, it never actually alerts "maingroup", when you select that radio button.
This means that there's something wrong with:
if($('input:radio[name=A]:checked').val()=="maingroup"){...}
and that problem is that input:radio is not a valid jquery selector.
Use this instead:
if($('input[name=A]:checked').val()=="maingroup"){...}
(you do it a couple of times throughout your code)
Check out what happens with that. If you're still having trouble, it means there's more errors... Keep your fiddle updated in that case.

Dialog pop up doesn't close

I'm trying to create a dialog box that adds an item to a dropdownlist;
here's the code.
$(function () {
$('#applicantDialog').dialog({
autoOpen: false,
width: 600,
height: 500,
modal: true,
title: 'Add Applicant',
buttons: {
'Save': function () {
var createApplicantForm = $('#createApplicantForm');
if (createApplicantForm.valid()) {
$.post(createApplicantForm.attr('action'), createApplicantForm.serialize(), function (data) {
if (data.Error != '') {
alert(data.Error);
}
else {
// Add the new Applicant to the dropdown list and select it
$('#Applicant').append(
$('<option></option>')
.val(data.id_applicant)
.html(data.Applicant.Applicant_name)
.prop('selected', true) // Selects the new Applicant in the DropDown LB
);
$('#applicantDialog').dialog('close');
}
});
}
},
'Cancel': function () {
$(this).dialog('close');
}
}
});
$('#applicantAddLink').click(function () {
var createFormUrl = $(this).attr('href');
$('#applicantDialog').html('')
.load(createFormUrl, function () {
// The createGenreForm is loaded on the fly using jQuery load.
// In order to have client validation working it is necessary to tell the
// jQuery.validator to parse the newly added content
jQuery.validator.unobtrusive.parse('#createApplicantForm');
$('#applicantDialog').dialog('open');
});
return false;
});
});
My problem is that when the form is saved and the item is added, it never closes the dialog box. When I click on cancel, the list is not updated until I refresh the page.
Is it a problem with postback and how can I deal with that?
Thanks