This little script to take values from select
<script>
jQuery(document).ready(function()
{
var clv1=jQuery("#tr_val").val();
});
</script>
When click over this div and execute function open_win, i need send value of select inside function jQuery("#tr_val").val();
<div onclick="open_win(""+clv1,'test');">Test</div>
The problem it´s i don´t know how writte right syntax for insert value "clv1" inside function open_win when click over div Test
I have only this problem, i try different combinations but no works me never
Thank´s in advanced
You can add a global variable, and on change of your select you can modified that variable.
While on div element you can add id, and write event handler into script tag(here you can access that global variable).
Note: However global variable are not the correct way, but you can do it for learning/testing.
I think this is what you are asking for, I've re-organised things a little. There is now a custom function that you call from the inline onclick of the div. Rather than trying to grab the value on document ready you can do it with the click, I think this simplifies the process.
Let me know if this isn't what you were hoping for.
Demo
// Add a function which you call from the inline onclick
function open_win() {
// Gather the value of the input
console.log( $("#tr_val").val() );
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="tr_val" value="one">
<div onclick="open_win()">Test</div>
You may try something like this, store the value on the div's data attribute and then access it inside the function.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
function open_win(){
$(this).data("val", $("#tr_val").val());
console.log($(this).data('val'));
}
</script>
<div onclick="open_win()">Test</div>
<select id="tr_val">
<option value="value1">Value 1</option>
<option value="value2">Value 2</option>
<option value="value3">Value 3</option>
</select>
Note: your open_win function must be defined before calling it.
if you want to get the value of the element with the id tr_val when you click on the div try something like this. put the click event in the javascript as well. Also if you want to run a function like you're trying to do inline you need to have that function defined, but can also use it in the script tags/js file
function open_win(someArg) {
// do something
}
<div class="test-class">Test</div>
<script>
$(document).ready(function() {
var clv1 = $("#tr_val").val();
// anonymous function
$('.test-class').on('click', function(e) {
console.log(clv1);
})
// named function with a parameter
$('.test-class').on('click', function(e) {
open_win(clv1);
})
// if you wanted named function with parameter to look a bit cleaner
// using es6 arrow function
$('.test-class').on('click', (e) => open_win(clv1))
// name function no param (event is the first argument passed in by default but you can't pass params in like this)
$('.test-class').on('click', open_win)
});
</script>
You can use ES6 ways
<h1>Hello World!</h1>
<input id="tr_val" value="element value" hidden>
<div class="open-div" data-text='test'>Test</div>
(function ($) {
$(function () {
let tr_val = $('#tr_val').val();
$('.open-div').on('click', function (e) {
let $this = $(this);
let text = $this.data("text");
console.log(tr_val);
console.log(text);
});
});
})(jQuery);
https://codepen.io/nsivanoly/pen/OemWNM
Related
I have an onclick function
$('.modal-trigger').on('click', function() {
$('#'+$(this).data('modal')).show();
calc();
})
<a class="modal-trigger" data-modal="ft-modal">Link</a>
<div id="ft-modal"></div>
I want to add calc() function inside
function calc() {
var tt = document.getElementById('#'+this.getAttribute('data-modal')).document.getElementsByClassName("name-line")[0];
}
The second function is outside (above) the onclick one, and my problem is that I can't figure it out how to perform a search inside the <div> by class name and get the first one that matches the class on plain JS.
And I think that I don't know how to use this properly for this particular case.
You can pass this to the calc function with .call:
calc.call(this);
The calc function needs no change then.
You have to pass this object to the function so that you can refer that inside the function. You can simplify your code by using jQuery:
$('.modal-trigger').on('click', function() {
$('#'+$(this).data('modal')).show();
calc(this); // pass this here
})
function calc(el) {
var tt = $('#'+$(el).data('modal')).find('.name-line')[0];
console.log(tt);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="modal-trigger" data-modal="ft-modal">Link</a>
<div id="ft-modal">
<span class="name-line"></span>
</div>
as suggested in the comments...
$('.modal-trigger').on('click', function() {
...
calc(this);
});
function calc(ele) {
...
}
using document.getElementById in a jQuery script is questionable;
better use $(ele).data('modal') to obtain the data attribute.
of couse both ways would work, nevertheless the readability would be improved
... that's why it is called "write less, do more".
I have seen other questions similar to this one, but I cant seem to find the answer i'm looking for.
Is there any way of passing parameters into a named function in a JQuery event listener?
For example, I know I can do this
$('#myelement').on("change", function(){
var value = $(this).val();
myFunction(value);
});
But is there any way to just pass the function name into the event listener instead?
Something like this
$('#myelement').on("change", myFunction($(this).val()));
I thought it would be straight forward to be honest, but I can't seem to find a way to do it.
You can pass parameters to the handler function using jQuery .on() method.
Its format is .on( events [, selector ] [, data ], handler ), where data is any object you need to pass. Later it can be accessed via event.data property in the handler.
Check this example. Note that if you just want to access $(this).val() then you don't need any parameters: myFunction is already bound to the target element, so you can use $(this).val() inside of it.
$("#i").on("change", null, "My parameter", myFunction);
function myFunction(event) {
console.log("Parameter: " + event.data);
console.log("$(this).val() = " + $(this).val());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="i"> Enter something and press Enter
You can use the jQuery "on" method, then invoke the click event listener and last but not least call the function that you created.
$('button').on('click', clicked);
function clicked() {
var val = $('#one').val();
$('.response').html('<p>Value is ' + val + '</p>');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="text" id="one">
<button>Click Me</button>
<p class="response"></p>
Assuming I understand what you want, one workaround I've used is to refer to functions in an array like follows
list_of_functions = [function_1,function_2];
function function_1(){
alert("function 1 running");
}
function function_2(){
console.dir("function 2 running");
}
function run_function(function_index){
return list_of_functions[function_index]();
}
$("#function_select").on("change",function(){
run_function(this.value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="function_select">
<option disabled selected>Please select a function</option>
<option value="0">function 1</option>
<option value="1">function 2</option>
</select>
I have a dropdown and its populating with dynamic data. Here I have used a function to call ajax and get the dynamic data.
This is how I create this function:
function Banks($selecter, selected) {
// my stuff ----
}
I am using it like this when the document ready:
Banks($('#DropDownEdit'));
HTML look like this:
<select id="DropDownEdit" name="bank_one" data-id="4"></select>
Now I need to get data-id value to the function when document is ready.
I tried it something like this:
$(document).on('change', '#DropDownEdit', function(){
var ID = $(this).data('id');
Banks($('#DropDownEdit'), ID);
});
But It doesn't work for me. Can anybody tell me how I do this rightly?
Your HTML markup seems to be all wrong. An empty select tag is not a valid markup and onchage never triggers for an empty select. The select tag must have at least one option inside.
<select id="DropDownEdit" name="bank_one" data-id="4">
<option value="one">1</option>
<option value="two">2</option>
<option value="three">3</option>
</select>
Try this.
$(document).ready(function(){
var ID = $('#DropDownEdit').data('id');
})
Try the FIDDLE
I have updated the event delegation assignment as following and it works
function Banks($selecter, selected) {
//alert(selected);
$selecter.append('<option>1</option><option>2</option><option>3</option><option>4</option>')
// my stuff ----
}
$(function () {
Banks($('#DropDownEdit'), $('#DropDownEdit').data('id'));
$('#DropDownEdit').on('change', function () {
var ID = $(this).data('id');
alert(ID);
Banks($('#DropDownEdit'), ID);
});
});
Hope it works for you
You need to get data-id value to the function when document is ready.
try to use $(document).ready();
$(document).**ready**(function(){
var ID = $('#DropDownEdit').data('id');
Banks($('#DropDownEdit'), ID);
});
hope this help.
I don't understand why the "this-reference" in function foo
is not set with #searchval, when called by load event ?
The function call of foo at the keyup event works but the call does not work at the load event cause this-reference is not set.
Example:
<body>
<form action="" method="post">
<input type="text" name="test" value="<?=$_POST['test']?>" id="searchval">
<select id="names" size="3">
<option value="1">WTF1</option>
<option value="2">WTF2</option>
<option value="3">WTF3</option>
</select>
<input type="submit">
</form>
</body>
<script type="text/javascript">
$(document).ready(function() {
var names = $('#names option').clone();
function foo() {
//Change the code to $('$searchval').val(); make it work
var val = $(this).val();
$('#names').empty();
names.filter(function(idx, el) {
return val === '' || $(el).text().indexOf(val) >= 0;
}).appendTo('#names');
}
$('#searchval').bind('keyup', foo);
$('#searchval').load(foo());
});
</script>
</html>
You're setting up the handler with the return value from "foo", not the function itself.
It should be:
$('#searchval').load( foo );
When you pass foo(), you're first invoking the function — that's what ( ) does. By passing just the function reference you get the effect you want.
edit — on top of that issue, as noted in a comment you're trying to set up a "load" handler for an element that'll never get such an event. What is it that you expect to cause that event? Perhaps "change" is what you want instead of "load".
edit again — if you just want to simulate having "foo" called as it is when a "keyup" event happens, you can do two things:
You can use "triggerHandler":
$('#searchval').triggerHandler('keyup');
You can use "call":
foo.call($('#searchval')[0]);
In both cases, of course, you won't get an "event" object that's like the one you get on a real event, but "foo" doesn't care about that anyway.
Hi. I am new to jQuery.. I want to know how to call custom jQuery function by onClick attribute of HTML. This was the basic I was trying.Further I want to make parametrised function and want to call that function onClick attribute.
my jQuery function is:
jQuery.fn.myFadeIn=function() {
return $('#fadeInDiv').fadeIn();
};
and the HTML is:
<input type="radio" name="contentCalls" class="radioButton" id="Calls" onclick="myFadeIn();">
<div id="fadeInDiv">
div to open
</div>
Thanks!
This plugin alert()s the ID of each matched element:
jQuery.fn.alertElementId = function()
{
return this.each(function()
{
alert(this.id);
});
};
And to use it:
// alert() each a-element's ID
$("a").click(function ()
{
$(this).alertElementId();
});
Replace:
jQuery.fn.myFadeIn=function() { return $('#fadeInDiv').fadeIn(); };
With:
var myFadeIn=function() { return $('#fadeInDiv').fadeIn(); };
(Assuming you are running this in the global scope)
You need to assign this custom function to some element's click handler, as in:
$("#Calls").click($.myFadeIn);
What is important to note is that the function you have added to jQuery through its jQuery.fn syntax should be available as part of the $ or jQuery JavaScript objects.