I want to use this code as a function () to be run only when I click a button and not automatically when dropdown is changed. When click on <button onclick="CalendarFilter">Cercar</button> it runs the function. I tried putting the code into this but not working.
function myFunction()
{
CODE HERE
}
$(document).ready(function () {
$('.filter').change(function () {
var values = [];
$('.filter').each(function () {
var colIdx = $(this).data('col');
$(this).find('option:selected').each(function () {
if ($(this).val() != "") values.push( {
text: $(this).text(),
colId : colIdx
});
});
});
filter('table > tbody > tr', values);
});
function filter(selector, values) {console.log(values);
$(selector).each(function () {
var sel = $(this);
var tokens = sel.text().trim().split('\n');
var toknesObj = [], i;
for(i=0;i<tokens.length;i++){
toknesObj[i] = {
text:tokens[i].trim(),
found:false
};
}
var show = false;
//console.log(toknesObj);
$.each(values, function (i, val) {
if (toknesObj[val.colId].text.search(new RegExp("\\b"+val.text+"\\b")) >= 0) {
toknesObj[val.colId].found = true;
}
});
console.log(toknesObj);
var count = 0;
$.each(toknesObj, function (i, val) {
if (val.found){
count+=1;
}
});
show = (count === values.length);
show ? sel.show() : sel.hide();
});
}
});
When click on Cercar it runs the CalendarFilter
Thanks.
I need a way to run this like this:
function myFunction()
{
$(document).ready(function () {
$('.filter').change(function () {
var values = [];
$('.filter').each(function () {
var colIdx = $(this).data('col');
$(this).find('option:selected').each(function () {
if ($(this).val() != "") values.push( {
text: $(this).text(),
colId : colIdx
});
});
});
filter('table > tbody > tr', values);
});
function filter(selector, values) {console.log(values);
$(selector).each(function () {
var sel = $(this);
var tokens = sel.text().trim().split('\n');
var toknesObj = [], i;
for(i=0;i<tokens.length;i++){
toknesObj[i] = {
text:tokens[i].trim(),
found:false
};
}
var show = false;
//console.log(toknesObj);
$.each(values, function (i, val) {
if (toknesObj[val.colId].text.search(new RegExp("\\b"+val.text+"\\b")) >= 0) {
toknesObj[val.colId].found = true;
}
});
console.log(toknesObj);
var count = 0;
$.each(toknesObj, function (i, val) {
if (val.found){
count+=1;
}
});
show = (count === values.length);
show ? sel.show() : sel.hide();
});
}
});
}
To call that function using a button.
<button onclick="myFunction()">Cercar</button>
The problem is that this way is not working.
Thanks.
Related
I have this code working for any table.
$(document).ready(function () {
$('.CalendarFilter').click(function () {
var values = [];
$('.filter').each(function () {
var colIdx = $(this).data('col');
$(this).find('option:selected').each(function () {
if ($(this).val() != "") values.push( {
text: $(this).text(),
colId : colIdx
});
});
});
filter('table > tbody > tr', values);
});
function filter(selector, values) {console.log(values);
$(selector).each(function () {
var sel = $(this);
var tokens = sel.text().trim().split('\n');
var toknesObj = [], i;
for(i=0;i<tokens.length;i++){
toknesObj[i] = {
text:tokens[i].trim(),
found:false
};
}
var show = false;
//console.log(toknesObj);
$.each(values, function (i, val) {
if (toknesObj[val.colId].text.search(new RegExp("\\b"+val.text+"\\b")) >= 0) {
toknesObj[val.colId].found = true;
}
});
console.log(toknesObj);
var count = 0;
$.each(toknesObj, function (i, val) {
if (val.found){
count+=1;
}
});
show = (count === values.length);
show ? sel.show() : sel.hide();
});
}
});
It filters good, the problem I have is with an special table that is not working. I have the ID of the table but I don't know how to implement the code for work exclusively for this table ID. I tried modifying this part filter('#TABLEID > tbody > tr', values); but is nor working.
Goal: modify the code to work only with an specific table (specifically one with ID posts-table-1, see jsfiddle below), because the code, which supposedly works for any table, doesn't work
Here is an example: https://jsfiddle.net/mdomfu/gzLktpmw/3/
$.starRating = function(options) {
var defaults = {
onClickCallBack: null,
};
var settings = $.extend({}, defaults, options);
var onClickCallBack = settings.onClickCallBack;
$(".rating-star span").hover(function() {
var hoverValue = parseInt($(this).attr('data-val'));
highlightStars(hoverValue, 'hover');
});
$(".rating-star span").mouseout(function() {
$(".rating-star span").each(function() {
$(this).removeClass("hover");
});
});
$(".rating-star span").click(function() {
if (onClickCallBack != null) {
var rate = parseInt($(this).attr('data-val'));
var id = parseInt($(this).attr('data-id'));
highlightStars(rate, 'clicked');
onClickCallBack(rate, id);
}
});
function highlightStars(count, cssClass) {
var itemValue = 0;
$(".rating-star span").each(function() {
itemValue = parseInt($(this).attr('data-val'));
if (itemValue <= count) {
$(this).addClass(cssClass);
} else {
$(this).removeClass(cssClass);
}
});
}
function highlightRating(rate) {
var roundedRate = Math.round(rate);
highlightStars(roundedRate, 'clicked');
}
return {
highlightRatingStars: function(rate) {
highlightRating(rate);
}
}
}
$(function() {
var starRatingFunction = $.starRating({
onClickCallBack: onRatingStar
});
function onRatingStar(rate, id) {
$("#1_star_input").val(rate);
$("#2_star_input").val(rate);
$("#3_star_input").val(rate);
loadData();
}
});
Hi guys, I have some star rating jquery code, right now I can use one set of stars and retrieve the values but, I want to be able to get values for three different sets of stars. i'm only getting values for #1_star_input and it does the same for the other two.
How to use variable "hotel" after load step-02.php file?
$(function () {
var hotel = [];
$('#forPrice').on('click', function() {
$('select').each(function() {
if($(this).val() > 0 && $(this).val() < 10) {
var room = {};
room["room"] = $(this).attr('room');
room["price"] = $(this).attr('price');
room["val"] = $(this).val();
room["html"] = $(this).parents(".selectRowRoom").html();
hotel.push(room);
}
});
console.log(hotel);
});
$('#forPrice').click(function () {
$('#Step-01').hide();
$('#Step-02').show();
$('.hiddenAndShow').hide();
$( "#Step-02" ).load( 'step_02.php' );
});
})
I need
room["html"] = $(this).parents(".selectRowRoom").html();
to show after loading step-02.php.
step-02.php:
<div class="thisRoom">
// Insert room["html"] = $(this).parents(".selectRowRoom").html();
</div>
jQuery load() is a shortcut for $.ajax, which is asynchronous, you have to wait for the result to be able to access it.
Luckily load() has a callback that fires when the content is inserted and ready for accessing
$(function() {
var hotel = [];
$('#forPrice').on('click', function() {
$('select').each(function() {
if ($(this).val() > 0 && $(this).val() < 10) {
var room = {};
room["room"] = $(this).attr('room');
room["price"] = $(this).attr('price');
room["val"] = $(this).val();
room["html"] = $(this).parents(".selectRowRoom").html();
hotel.push(room);
}
});
console.log(hotel);
});
$('#forPrice').click(function() {
$('#Step-01').hide();
$('#Step-02').show();
$('.hiddenAndShow').hide();
$("#Step-02").load('step_02.php', function() { // callback here
$("#Step-02").find('.thisRoom').html(JSON.stringify(hotel));
});
});
});
Make hotel global and save key number of room in data attr. Like this :
$(function () {
window.hotel = []; // new
$('#forPrice').on('click', function() {
$('select').each(function() {
if($(this).val() > 0 && $(this).val() < 10) {
var room = {};
room["room"] = $(this).attr('room');
room["price"] = $(this).attr('price');
room["val"] = $(this).val();
room["html"] = $(this).parents(".selectRowRoom").html();
$(this).data("numRoom", hotel.length); // new
hotel.push(room);
}
});
console.log(hotel);
});
$('#forPrice').click(function () {
$('#Step-01').hide();
$('#Step-02').show();
$('.hiddenAndShow').hide();
$( "#Step-02" ).load( 'step_02' );
});
})
//After :
hotel[$(this).data("numRoom")]["html"] = $(this).parents(".selectRowRoom").html();
I have the following jquery which has been created with the help of a SO member in a previous question...
var filters = [];
function filterList () {
var classes = '.' + filters.join('.');
$('.test').removeClass('main');
if (classes.length > 1) {
$(classes).addClass('main');
}
}
function removeFilter(ele) {
var len = filters.length,
idx;
for (var i = 0; i < len; i++) {
if (filters[i] === ele) {
idx = i;
break;
}
}
filters.splice(idx, 1);
}
function addFilter(ele) {
if (ele) {
filters.push(ele);
}
}
var selectIt = (function () {
var lastSelect;
return (function (ele) {
if (lastSelect) {
removeFilter(lastSelect);
}
addFilter(ele);
lastSelect = ele;
});
}());
$('.selector').on('change', function (e) {
var val = $(this).val();
selectIt(val);
filterList();
});
$('.mybuttons a').on('click', function (e) {
e.preventDefault();
var el = $(this),
col = el.data('col');
if (el.hasClass('active')) {
removeFilter(col);
} else {
addFilter(col);
}
el.toggleClass('active');
filterList();
});
http://jsfiddle.net/fprL03e5/
I am now trying to modify the code so that when an option is selected, all of the non-matching terms have reduced opacity.
When the page is initially loaded all items should have full opacity until one of the items is selected.
I have tried adding an extra class but can't work out how to have it removed when items are de-selected.
Is this what you're looking to do?
http://jsfiddle.net/fprL03e5/3/
function filterList () {
var classes = '.' + filters.join('.');
$('.test').removeClass('main');
$('.test').css('opacity', '.5');
if (classes.length > 1) {
$(classes).addClass('main').css('opacity', '1');
} else {
$('.test').css('opacity', '1');
}
}
The question is very simple but also a bit theoretical.
Let's imagine you have a long JQuery script which modifies and animate the graphics of the web site. It's objective is to handle the UI. The UI has to be responsive so the real need for this JQuery is to mix some state of visualization (sportlist visible / not visible) with some need due to Responsive UI.
Thinking from an MVC / AngularJS point of view. How should a programmer handle that?
How to refactor JS / JQuery code to implement separation of concerns described by MVC / AngularJS?
I provide an example of JQuery code to speak over something concrete.
$.noConflict();
jQuery(document).ready(function ($) {
/*variables*/
var sliderMenuVisible = false;
/*dom object variables*/
var $document = $(document);
var $window = $(window);
var $pageHost = $(".page-host");
var $sportsList = $("#sports-list");
var $mainBody = $("#mainBody");
var $toTopButtonContainer = $('#to-top-button-container');
/*eventHandlers*/
var displayError = function (form, error) {
$("#error").html(error).removeClass("hidden");
};
var calculatePageLayout = function () {
$pageHost.height($(window).height());
if ($window.width() > 697) {
$sportsList.removeAttr("style");
$mainBody
.removeAttr("style")
.unbind('touchmove')
.removeClass('stop-scroll');
if ($(".betslip-access-button")[0]) {
$(".betslip-access-button").fadeIn(500);
}
sliderMenuVisible = false;
} else {
$(".betslip-access-button").fadeOut(500);
}
};
var formSubmitHandler = function (e) {
var $form = $(this);
// We check if jQuery.validator exists on the form
if (!$form.valid || $form.valid()) {
$.post($form.attr("action"), $form.serializeArray())
.done(function (json) {
json = json || {};
// In case of success, we redirect to the provided URL or the same page.
if (json.success) {
window.location = json.redirect || location.href;
} else if (json.error) {
displayError($form, json.error);
}
})
.error(function () {
displayError($form, "Login service not available, please try again later.");
});
}
// Prevent the normal behavior since we opened the dialog
e.preventDefault();
};
//preliminary functions//
$window.on("load", calculatePageLayout);
$window.on("resize", calculatePageLayout);
//$(document).on("click","a",function (event) {
// event.preventDefault();
// window.location = $(this).attr("href");
//});
/*evet listeners*/
$("#login-form").submit(formSubmitHandler);
$("section.navigation").on("shown hidden", ".collapse", function (e) {
var $icon = $(this).parent().children("button").children("i").first();
if (!$icon.hasClass("icon-spin")) {
if (e.type === "shown") {
$icon.removeClass("icon-caret-right").addClass("icon-caret-down");
} else {
$icon.removeClass("icon-caret-down").addClass("icon-caret-right");
}
}
toggleBackToTopButton();
e.stopPropagation();
});
$(".collapse[data-src]").on("show", function () {
var $this = $(this);
if (!$this.data("loaded")) {
var $icon = $this.parent().children("button").children("i").first();
$icon.removeClass("icon-caret-right icon-caret-down").addClass("icon-refresh icon-spin");
console.log("added class - " + $icon.parent().html());
$this.load($this.data("src"), function () {
$this.data("loaded", true);
$icon.removeClass("icon-refresh icon-spin icon-caret-right").addClass("icon-caret-down");
console.log("removed class - " + $icon.parent().html());
});
}
toggleBackToTopButton();
});
$("#sports-list-button").on("click", function (e)
{
if (!sliderMenuVisible)
{
$sportsList.animate({ left: "0" }, 500);
$mainBody.animate({ left: "85%" }, 500)
.bind('touchmove', function (e2) { e2.preventDefault(); })
.addClass('stop-scroll');
$(".betslip-access-button").fadeOut(500);
sliderMenuVisible = true;
}
else
{
$sportsList.animate({ left: "-85%" }, 500).removeAttr("style");
$mainBody.animate({ left: "0" }, 500).removeAttr("style")
.unbind('touchmove').removeClass('stop-scroll');
$(".betslip-access-button").fadeIn(500);
sliderMenuVisible = false;
}
e.preventDefault();
});
$mainBody.on("click", function (e) {
if (sliderMenuVisible) {
$sportsList.animate({ left: "-85%" }, 500).removeAttr("style");
$mainBody.animate({ left: "0" }, 500)
.removeAttr("style")
.unbind('touchmove')
.removeClass('stop-scroll');
$(".betslip-access-button").fadeIn(500);
sliderMenuVisible = false;
e.stopPropagation();
e.preventDefault();
}
});
$document.on("click", "div.event-info", function () {
if (!sliderMenuVisible) {
var url = $(this).data("url");
if (url) {
window.location = url;
}
}
});
function whatDecimalSeparator() {
var n = 1.1;
n = n.toLocaleString().substring(1, 2);
return n;
}
function getValue(textBox) {
var value = textBox.val();
var separator = whatDecimalSeparator();
var old = separator == "," ? "." : ",";
var converted = parseFloat(value.replace(old, separator));
return converted;
}
$(document).on("click", "a.selection", function (e) {
if (sliderMenuVisible) {
return;
}
var $this = $(this);
var isLive = $this.data("live");
var url = "/" + _language + "/BetSlip/Add/" + $this.data("selection") + "?odds=" + $this.data("odds") + "&live=" + isLive;
var urlHoveringBtn = "/" + _language + '/BetSlip/AddHoveringButton/' + $this.data("selection") + "?odds=" + $this.data("odds") + "&live=" + isLive;
$.ajax(urlHoveringBtn).done(function (dataBtn) {
if ($(".betslip-access-button").length == 0 && dataBtn.length > 0) {
$("body").append(dataBtn);
}
});
$.ajax(url).done(function (data) {
if ($(".betslip-access").length == 0 && data.length > 0) {
$(".navbar").append(data);
$pageHost.addClass("betslipLinkInHeader");
var placeBetText = $("#live-betslip-popup").data("placebettext");
var continueText = $("#live-betslip-popup").data("continuetext");
var useQuickBetLive = $("#live-betslip-popup").data("usequickbetlive").toLowerCase() == "true";
var useQuickBetPrematch = $("#live-betslip-popup").data("usequickbetprematch").toLowerCase() == "true";
if ((isLive && useQuickBetLive) || (!isLive && useQuickBetPrematch)) {
var dialog = $("#live-betslip-popup").dialog({
modal: true,
dialogClass: "fixed-dialog"
});
dialog.dialog("option", "buttons", [
{
text: placeBetText,
click: function () {
var placeBetUrl = "/" + _language + "/BetSlip/QuickBet?amount=" + getValue($("#live-betslip-popup-amount")) + "&live=" + $this.data("live");
window.location = placeBetUrl;
}
},
{
text: continueText,
click: function () {
dialog.dialog("close");
}
}
]);
}
}
if (data.length > 0) {
$this.addClass("in-betslip");
}
});
e.preventDefault();
});
$(document).on("click", "a.selection.in-betslip", function (e) {
if (sliderMenuVisible) {
return;
}
var $this = $(this);
var isLive = $this.data("live");
var url = "/" + _language + "/BetSlip/RemoveAjax/" + $this.data("selection") + "?odds=" + $this.data("odds") + "&live=" + isLive;
$.ajax(url).done(function (data) {
if (data.success) {
$this.removeClass("in-betslip");
if (data.selections == 0) {
$(".betslip-access").remove();
$(".betslip-access-button").remove();
$(".page-host").removeClass("betslipLinkInHeader");
}
}
});
e.preventDefault();
});
$("section.betslip .total-stake button.live-betslip-popup-plusminus").click(function (e) {
if (sliderMenuVisible) {
return;
}
e.preventDefault();
var action = $(this).data("action");
var amount = parseFloat($(this).data("amount"));
if (!isNumeric(amount)) amount = 1;
var totalStake = $("#live-betslip-popup-amount").val();
if (isNumeric(totalStake)) {
totalStake = parseFloat(totalStake);
} else {
totalStake = 0;
}
if (action == "decrease") {
if (totalStake < 1.21) {
totalStake = 1.21;
}
totalStake -= amount;
} else if (action == "increase") {
totalStake += amount;
}
$("#live-betslip-popup-amount").val(totalStake);
});
toggleBackToTopButton();
function toggleBackToTopButton() {
isScrollable() ? $toTopButtonContainer.show() : $toTopButtonContainer.hide();
}
$("#to-top-button").on("click", function () { $("#mainBody").animate({ scrollTop: 0 }); });
function isScrollable() {
return $("section.navigation").height() > $(window).height() + 93;
}
var isNumeric = function (string) {
return !isNaN(string) && isFinite(string) && string != "";
};
function enableQuickBet() {
}
});
My steps in such cases are:
First of all write (at least) one controller
Replace all eventhandler with ng-directives (ng-click most of all)
Pull the view state out of the controller with ng-style and ng-class. In most of all cases ng-show and ng-hide will be sufficed
If there is code that will be used more than once, consider writing a directive.
And code that has nothing todo with the view state - put the code in a service
write unit tests (i guess there is no one until now:) )