[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();
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 a div with a plus and a minus button:
<div class="col">
<i class="minus"></i>
<i class="qt">1</i>
<i class="plus"></i>
</div>
On a click of the plus button, I want to increase the quantity and similarly decrease the quantity, when the minus button is clicked.
In order to realize this I have written two events:
$( document ).on( "click", ".minus", function() {
var quantity = $(this).closest("ul").find("i.qt").text();
var a = parseInt(quantity);
a-=1;
$(this).closest("ul").find("i.qt").text-a;
});
$( document ).on( "click", ".plus", function() {
var quantity = $(this).closest("ul").find("i.qt").text();
var a = parseInt(quantity);
a+=1;
$(this).closest("ul").find("i.qt").text+a;
});
However, unimportant of what button is pressed, nothing happens.
Could you please help?
A fiddle showing my problem: http://jsfiddle.net/LESn3/2/
You can use .next() and prev() to target the quantity text:
$( document ).on( "click", ".minus", function() {
var quantity = $(this).next().text(parseInt($(this).next().text())-1);
});
$( document ).on( "click", ".plus", function() {
var quantity = $(this).prev().text(parseInt($(this).prev().text())+1);
});
Demo
You aren't assigning the text value back correctly.
You need to call .text as a function:
$(this).closest("ul").find("i.qt").text(a);
Fixed example - http://jsfiddle.net/LESn3/1/
You're not actually updating the text
It'll work if you replace the lines:
$(this).closest("ul").find("i.qt").text-a;
// ...
$(this).closest("ul").find("i.qt").text+a;
with:
$(this).closest("ul").find("i.qt").text(a);
Based on my understanding of the OP, here is the solution you should be looking at.
$(document).on( "click", ".minus,.plus", function() {
var quantity = $(this).siblings('.qt').text();
var a = parseInt(quantity);
if($(this).hasClass('minus'))
a-=1;
else
a+=1;
$(this).siblings('.qt').text(a);
});
Let me know if you have any questions.
FIDDLE
Proper abstraction aside, how can I grab the 'title' option of a jQuery dialog amongst multiple scripts?
For example, below I have 2 scripts where the first returns a var as a string, where the other does not return the variable as a string:
<script>
$(function() {
$( ".scheduleDiv" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
Cancel: function() {
$( this ).dialog( "close" );
}
});
$( ".device-modal" )
.click(function() {
$( ".scheduleDiv" ).dialog({"title": $(this).attr('title')});
alert($( ".scheduleDiv" ).dialog('option', 'title'));
var single = $(this).dialog('option', 'title'); //works as expected
$( ".scheduleDiv" ).dialog( "open" );
return false;
});
});
</script>
<script>
$(document).ready(function() {
$('.locks').hide();
$('.device_groups').hide();
var single = $(this).dialog('option', 'title'); //is undefined...
if (single == "Add Single Lock") {
$('.locks').show();
//$('.locks select').removeAttr('disabled');
}
else {
$('.device_groups').show();
//$('.device_groups select').removeAttr('disabled');
}
});
</script>
So, how can I set 'single' to return the title as a string in the second script?
Many Thanks
Your context of this is likely not correct. When you handle the $(document).ready() event, this is the document. You need to manually grab your dialog window, and then get the title:
$('.scheduleDiv').dialog('option', 'title');
The code you are using to get the title is firing ondocumentready, but your initialization doesn't actually set a title. You are not setting the title until you click the 'deviceModal'. At that point, the code to log the title will not get re-fired, as the document only loads once.
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.
I am getting a variable of the id of a div like this:
var value = $(this).attr('id').replace("-", "");
My html looks like this:
<li id="item-1">1</li>
<li id="item-2">2</li>
<li id="item-3">3</li>
So I get item1, item2 and item3 accordingly.
Now when I press the click and set the value to the ID, a dialog opens. Inside the dialog theres an input and an okay button. When the okay is pressed I want to get that variable again.
So how can I pass the variable OR how can I let know the dialog that I'm talking for that id.
Here is an example:
$("#bxs li").click(function() {
var value = $(this).attr('id').replace("-", "");
$( "#dialog" ).dialog( "open" );
return false;
});
// Okay button from the dialog.
$(".okaybtn").click(function() {
// value is the variable from the previous function
localStorage.setItem( value , "test");
$( "#dialog" ).dialog( "close" );return false;
});
jQuery data:
$("#bxs li").click(function () {
var value = $(this).attr('id').replace("-", "");
$("#dialog").data("clickedfrom", value ).dialog("open");
return false;
});
// Okay button from the dialog.
$(".okaybtn").click(function () {
var $dialog = $("#dialog");
// value is the variable from the previous function
localStorage.setItem( $dialog.data( "clickedfrom" ), "test");
$dialog.dialog("close");
return false;
});
Scoped variable:
(function(){
var value;
$("#bxs li").click(function () {
value = $(this).attr('id').replace("-", "");
$("#dialog").dialog("open");
return false;
});
// Okay button from the dialog.
$(".okaybtn").click(function () {
// value is the variable from the previous function
localStorage.setItem( value, "test");
$("#dialog").dialog("close");
return false;
});
})()
Declare value outside the scope of the click handler so that you can access it from other code blocks.
var value;
$("#bxs li").click(function() {
value = $(this).attr('id').replace("-", "");
$( "#dialog" ).dialog( "open" );
return false;
});
$(".okaybtn").click(function() {
// value is the variable from the previous function
localStorage.setItem( value , "test");
$( "#dialog" ).dialog( "close" );
return false;
});
1.You can store it as global variable - not recommended
2.You can store chosen variable value in hidden input
3.You can sent id value as argument to dialog function.
I'm not exactly sure what you're after, but it should work if you declare value outside of the two functions as it will give the variable a global scope that is accessible to both functions.
var value;
$("#bxs li").click(function() {
value = $(this).attr('id').replace("-", "");
$( "#dialog" ).dialog( "open" );
return false;
});
// Okay button from the dialog.
$(".okaybtn").click(function() {
// value is the variable from the previous function
localStorage.setItem( value , "test");
$( "#dialog" ).dialog( "close" );return false;
});
For handling the form input in jQuery UI dialog, you can use the buttons option.
$( "#dialog" ).dialog({
buttons: {
"Ok": function() {
value = $('#dialoginputfield').val();
$(this).dialog("close");
}
}
});