I'm trying to keep var values and add several more to it each time I pick a li but the var values resets itself each time.
I'm pretty sure I'm doing something wrong but I can't figure it out.
$( '#drop-down > ul > li' ).on( "click", function() {
if (values === undefined)
{
var values = $( this ).text();
}
else
{
values = values + $( this ).text();
console.log(values);
}
console.log('test' + values);
});
if you define the values var in the function itself, it is only present in the scope of the function. Try to init the "var values" beforehand.
Related
So I am trying to apply a JS function on two events: window.resize and document.ready. The second one just won't work.
When I load the website I want this function to execute and apply the CSS. This is the last JS code before the
I've tried many JS events, but no success.
window.addEventListener("resize", footerMargin);
$( document ).ready(function() { footerMargin(); });
function footerMargin() {
var offset = $( ".section-item--coming-soon").offset();
var novaVar = Math.round(offset.top);
var leftVar = Math.round($( ".footer--section").offset.left);
var heightComingSoon = $( ".section-item--coming-soon").height();
var overall = novaVar + heightComingSoon + 75;
$( ".footer--section").offset({ top: overall, left: leftVar });
}
Upon setting value to leftVar you are using $( ".footer--section").offset.left instead of $( ".footer--section").offset().left.
This Math.round($( ".footer--section").offset.left) will return NaN.
Change that to:
var leftVar = Math.round($( ".footer--section").offset().left);
I have simple jQuery function:
$(document).ready(function() {
$( "#faqsearch" ).keyup(function() {
var xyz = $( '#faqsearch' ).val();
$(".faqtitle:contains(xyz)").css("background","yellow");
});
});
Why I cannot get variable (in contains) from xyz?
you are passing the literal string of "xyz" instead of the variable xyz...
try changing it to:
$(document).ready(function() {
$( "#faqsearch" ).keyup(function() {
var xyz = $( '#faqsearch' ).val();
$(".faqtitle:contains(" + xyz + ")").css("background","yellow");
});
});
You can take advantage of the .filter() function:
$(document).ready(function() {
$( "#faqsearch" ).keyup(function() {
// If empty, clear backgrounds and stop
if(!$(this).val()) {
$(".faqtitle").css("background","none");
return false;
}
// Get string
var xyz = $(this).val();
$(".faqtitle")
.css("background","none") // Clear backgrounds
.filter(function() { // Filter for elements that contain xyz
return $(this).text().toLowerCase().indexOf(xyz) >= 0
}).css("background","yellow"); // Set background
});
});
See fiddle here: http://jsfiddle.net/teddyrised/9v8y7nvf/1/
[Solved]
This script work good during first run. During run second, third etc. script first display old values var wartosc and late display new value var wartosc (uwaga('notice',wartosc);).
I think that I should somehow close function, but I don't think as :D.
$(function() {
$("#player").on('click', 'img', function() {
var zadanie = $( "input[name^='act']:checked:enabled" ).val();
var wartosc = $(this).attr('value');
var kupka = $('.kupka').attr('value');
switch(zadanie){
case '2':
$( "#dialog" ).dialog( "open" );
$('.wybor').click(function (){
$( "#dialog" ).dialog( "close" );
var ukryta = $(this).attr('value');
uwaga('notice',wartosc); // my own function like alert :D
})
break;
}
});
});
Since the click handle is bound in another handle, it may be bound more than once. You should unbind click event before you bind the new click handle.
$('.wybor').unbind('click').click(function (){...
When you use .attr('value') you're getting the value from the HTML, not the current value of the input if it has changed. Use .val() for that:
var wartosc = $(this).val();
var kupka = $('.kupka').val();
I am populating values into a data table by using a check box group. You check the box and a value shows up in the table. However, I cannot get multiple check boxes to hold their value of 'checked' and not get multiple values to display in the table. Below is my code for the check box. Thanks for the help
<script type="text/javascript">
// - jQuery SHOW/HIDE functions
$(document).ready(function() {
$('#showJobtitles :checkbox').live('click', function() {
var checkboxVal = $('#showJobtitles :checkbox:checked').val();
$('.jobTitleCol_' + checkboxVal).toggle();
$('.jobTitleTD_' + checkboxVal).toggle();
//$( "p" ).toggle( "slow" );
//alert(checkboxVal);
//return this.filter('#showJobtitles, #jobTitleCol_'+checkboxVal+':checkbox').attr("checked", true);
//$('#showJobtitles :checkbox:checked',true).val();
//$('.jobTitleTD').toggle();
return false;
});
});
</script>
first use on
$(document).ready(function() {
$('#showJobtitles').on('click',':checkbox', function() {
// see from here---------------------------------------------------
var chkval=[];
var checkboxVal = $('#showJobtitles :checkbox:checked').find(
function(){
chkval.push($(this).val());
});
alert(chkval.join(","));
//------------------------------------------------
$('.jobTitleCol_' + checkboxVal).toggle();
$('.jobTitleTD_' + checkboxVal).toggle();
//$( "p" ).toggle( "slow" );
//alert(checkboxVal);
//return this.filter('#showJobtitles, #jobTitleCol_'+checkboxVal+':checkbox').attr("checked", true);
//$('#showJobtitles :checkbox:checked',true).val();
//$('.jobTitleTD').toggle();
return false;
});
});
I have an issue here.
I've been using Tabs (widget jqueryUi).
All seems to work fine, but sometimes when I submit a form (inside the tab), the result comes in the window and not in the tabdiv.
I don't want that, the client has to keep in the websystem.
I already tried putting target="_self" in the form, but keep doing the issue sometimes.
var $tabs = $("#main").tabs({
tabTemplate: "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close notext inline'>Remove Tab</span></li>",
idPrefix: "tab_",
add:function(e, ui){
$tabs.tabs('select', '#' + ui.panel.id).show("blind");
$j( "#list_tabs .ui-icon-close:last" ).on( "click", function(e, elemento) {
var index = $( "li", $("#main").tabs() ).index( $( this ).parent() );
$("#main").tabs( "remove", index );
desativarItemSubmenu($('#' + $(this).parent()[0].id.replace('tab_', '')));
});
},
select: function(event, ui){
var id = $(ui.tab).parent()[0].id;
if(id)
ativarItemSubmenu($('#' + id.replace('tab_', '')));
},
cache:true,
ajaxOptions: {async: false,cache: false}
})
$(".anchor").live("click", function(){
if("<?php echo $this->session->userdata("cod_usuario") ?>" == ""){
window.location.reload;
}
var url = this.rel;
var tab_title = this.text;
var tab_id = "tab_"+this.id;
if(!$('#' + tab_id).length){
if($('#main').tabs('length') > 3)
$("#main").tabs("remove", 3);
$("#main").tabs("add", url, tab_title);
$("#list_tabs li:last").attr("id", tab_id);
$("#list_tabs li:last").addClass("active");
}
else{
$('#main').tabs('option', 'selected', $('#' + tab_id).index());
}
})
// Remove a tab clicando no "x" (remove tab by click on "x")
$( "#main span.ui-icon-close" ).live( "click", function() {
var index = $( "li", $("#main").tabs() ).index( $( this ).parent() );
$("#main").tabs( "remove", index );
});
I am not fully confident about this answer, but if not the solution then perhaps it will give you ideas that could lead to the solution.
It appears that you are changing the ID attribute of tabs on the fly. When you change an element's ID, you remove it from the DOM -- or rather, you re-inject it as a new element into the DOM. Therefore, any javascript that was previously bound to that element is no longer bound. Since you are using jQuery UI tabs, the changed element may stop being a tab.
This could cause the type of problem that you are describing.
Solution: instead of changing the tab ID, refactor your code to use classes that you add/remove.
As a general rule, use great caution when changing IDs on the fly.