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");
}
}
});
Related
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/
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.
[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 have got two functions :
function startgame() {
"some code"
}
function return() {
"some other code"
}
1) how to run functions here :
$( "#start" ).on('click', function() {
/*I need my startgame function to run when the button is clicked*/
});
$( "#clear" ).on('click', function(){
/*I need my return function to run in here*/
});
2) Second question is what is the best way to call my functions in this code :
$( "#check" ).on('click', function() {
if ( $.inArray ( newword, words ) > -1 ) {
/*here I need to run my return function*/;
} else {
g = g+6;//adds points
/*and here I need to run my startgame function*/;
}
});
Thanks !
return is a reserved keyword. So i changed function name to return_val
JSFiddle Demo
function startgame() {
alert("startgame");
}
function return_val() {
alert("return");
}
$("#start").on('click', startgame);
$("#clear").on('click',return_val);
$( "#start" ).on('click', function() {
startgame();
});
$( "#clear" ).on('click', function(){
return_function()
});
you can't call a retun as a function name , the simple answer for your question is just to call the function whenever you want using Function_Name();
If you know how to create a function, you must know how to use or call them unless you had copied them elsewhere. In JQUERY you can call function with the function name followed by () and if that function accept params then put them inside () like
$( "#start" ).on('click', function() {
startgame();
});
$( "#clear" ).on('click', function(){
return_function()
});
You can also do
$( "#start" ).on('click', startgame());
$( "#clear" ).on('click', return_function());
It depends on how you need them.
Hope it helps!
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;
});
});