I have a div in jquery template and I want to call a javascript function from template. e.g.
My div in jquery template is as follows:
<div class="div1" ${makeContainer(this)}>
</div>
'makeContainer' is a function in javascript. I am unable to pass the reference of current element i.e. 'div1' in 'this' parameter.
Please help
You can select all div with class div1 and call function for each element.
$('.div1').each(function(){
makeContainer($(this));
});
So in html you can just use
<div class="div1"></div>
Not sure about your requirement. Do you mean to pass the reference of div?
Anyway I have created a demo which may be useful to you
HTML
<div id = "div_1" onclick="myDemoFunc(this)">Hello
</div>
JS
function myDemoFunc(elem){
var getElem = elem;
var id= getElem.id;
alert(id);
}
WORKING COPY
Try this:
<div class="div1"></div>
And JS Code:
<script type="text/javascript">
$(document).ready(function(){
$('.div1').each(function(){
makeContainer($(this));
});
});
function makeContainer(value)
{
console.log(value);
}
</script>
Related
I have the following code:
function openCanviewer() {
var cid = $(this).data('cid');
alert(cid);
}
And the HTML:
<div onclick="openCanviewer();" data-cid="ID OF CAN FROM DATABASE"></div>
My problem is that when I click the element with the onclick function, which I have many of because they get inserted from the database, the alert is just showing "undefined" instead of the contents of the data-cid attribute. Does someone have any idea what I have done wrong, or what I am missing here?
To capture the exact element, pass this from the element's click event handler
function openCanviewer(element) {
var cid = $(element).data('cid');
alert(cid);
}
<div onclick="openCanviewer(this);" data-cid="ID OF CAN FROM DATABASE"></div>
^^^ you have a typo here
Snippet
function openCanviewer(element) {
var cid = $(element).data('cid');
alert(cid);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div onclick="openCanviewer(this);" data-cid="ID OF CAN FROM DATABASE">Click</div>
$('#mi').click(function() {
var cid = $(this).data('cid');
alert(cid);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mi" data-cid="ID OF CAN FROM DATABASE">hello</div>
In general you shouldn't use inline events like onclick="openCanviewer();", you should always keep js, css and html separate.
For your problem you could use delegate event listening:
function openCanviewer() {
var cid = $(this).data('cid');
alert(cid);
}
$(document).on('click', '[data-cid]', openCanviewer)
I'm new to Javascript and am attempting to write a function that changes the color of some text, however "this" keeps returning as undefine, and not changing the text color.
Here's the code, I would greatly appreciate some help.
<h1>
<ul><div class="info" id="info" onclick="this.style.color= '#9DC8BA'">INFO
</div></ul>
<ul><div class="menu" id="menu" onclick="test1()"<!--this is where the problem is-->MENU</div></ul>
Here's the Javascript
function test1() {
this.style.color= '#9DC8BA';
}
you have to pass the reference of the DOM element to the function
<div class="menu" id="menu" onclick="test1(this)">/div>
in the above html, this refers the current DOM element which is a DIV of id menu.
and then refer and modify the DOM inside the function
function test1(obj) {
obj.style.color= '#9DC8BA';
}
Side note: You seem to be having a same name for class and id for the div, which is not a good practice.
Always remember Class corresponds to a group of elements and ID corresponds to unique elements.
test1 function is executed not on the div element as context but on window.
do this:
onclick="test1(this)"
in function:
function test1(div) {
div.style.color = '#9DC8BA';
}
Html Code
<h1>
<ul><div class="info" id="info" onclick="this.style.color= '#9DC8BA'">INFO
</div></ul>
<ul><div class="menu" id="menu" onclick="test1(this)">MENU</div></ul>
</h1>
JavaScript Code:
function test1(obj)
{
obj.style.color= '#9DC8BA';
}
When you are writing onclick inside the html, it makes new function itself.
In your case it is something like function(){test1()}. this inside this function is what you need, but this inside the test1 is undefined.
You can use this as argument of test1
... onclick="test1(this)" ...
and JS
function test1(obj) {
And use obj instead of this in test1
Or set function onclick attribute from javascript like:
var menu = document.getElementById('menu');
menu.onclick = test1;
In this case this inside the test1 will be exactly what you need.
I need to change the text of '#foo #three' using 'this' to get the text of the div#one
The output I need is:
cat
dog
cat
Html:
<div id="foo">
<div id="one">cat</div>
<div id="two">dog</div>
<div id="three">mouse</div>
</div>
JS:
$("#foo #three").text($(this).parent().children().first().text());
I need this code dynamically
http://jsfiddle.net/Kodam/s466a31q/
Unless you are trying to do this dynamically, this is as simple as:
$('#three').text($('#one').text());
$("#three").text($('#foo').children().first().text());
Update: If you really want to use this to reference the match, would recommend to use each:
$("#foo #three").each(function(){ // this only matches #three
$(this).text($(this).parent().children().first().text());
})
Though this approach uses a kind of workaround, it works:
$jSelect = $("#foo #three");
$jSelect.text( function(){
var jParts = $jSelect.selector.split(" ");
return $(jParts[0]).find("div:first").text();
});
Fiddle
But I wouldn't recommend it as .selector is deprecated as of jQuery 1.7 and only maintained for supporting live() in the jQuery Migrate plugin.
For Reference: http://api.jquery.com/selector/
Update: And a similar approach without using .selector:
jSelect = ("#foo #three");
$(jSelect).text( function(){
var jParts = jSelect.split(" ");
return $(jParts[0]).find("div:first").text();
});
Fiddle
if you insist on using this, you can do it this way:
Fiddle Example
basically, since this only works inside a function context, you create a function that returns a string and put it inside the .text().
$(function () {
$("#foo #three").text(function () {
return $(this).parent().children().first().text();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
<div id="one">cat</div>
<div id="two">dog</div>
<div id="three">mouse</div>
</div>
I'm trying to achieve something inside a function, to actually access the parent selector.
Here is a small snippet of my HTML code:
<div class="module-row module-tab pull-right" id="modtab-sql_net">
<img src="images/icons/icon-orangebox-plus.png" class="modtab-toggle">
</div>
<div id="tab-module-row-1">
</div>
<div class="module-row module-tab pull-right" id="modtab-sql_dss">
<img src="images/icons/icon-orangebox-plus.png" class="modtab-toggle">
</div>
<div id="tab-module-row-2">
</div>
Here is the jQuery script I tried:
$('div[id^="modtab-"]').click(function(){
$(this).next('div[id^="tab-module-row"]').toggle(function(){
$(this).next('.modtab-toggle').toggle_switch.attr("src").replace("plus", "minus");
// The above line is incorrect. I need to change img attr for the class which is inside the div being clicked
});
});
Now, I want to actually change the image icon from a "plus" to a "minus" (the filenames are kept such).
I need to change $(this).next('.modtab-toggle') in the code to something that can work.
Please do NOT suggest to simply access the class using $('.modtab-toggle') as I have multiple such div tags in the code. It won't work out that way.
Thanks for any help.
Try this:
$('div[id^="modtab-"]').click(function(){
$(this).find('.modtab-toggle').attr("src", function(i, attr){
var o = this.src.indexOf('plus') > -1 ? this.src.replace('plus', 'minus') : this.src.replace('minus', 'plus');
return o;
});
});
See the Demo # Fiddle
try something like this
$('div[id^="modtab-"]').click(function(){
var $this = $(this);// clicked div
$this.next('.tab-module-row').toggle(function(){
$this.find('.modtab-toggle').toggle_switch.attr("src").replace("plus", "minus");
});
});
Note: you should use class instead of id because it should be unique
#tab-module-row ->.tab-module-row
EDITED ANSWER
$('div[id^="modtab-"]').click(function(){
var $this = $(this);// clicked div
$this.next('div[id^="tab-module-row"]').toggle(function(){
var img = $this.find('.modtab-toggle'); // your image object
// your condition to check which image to display will goes here.
});
});
change $(this).next('.modtab-toggle') to $(this).find('.modtab-toggle') to make it work.
See find() docs here
I have to pass innerHTML to a div using my JavaScript function.The innerHTML that I am passing also has a div for which I have to attach a click event so that on click of it, the element responds to the click event.
I have a fiddle here to explain the problem:
http://jsfiddle.net/K2aQT/2/
HTML
<body>
<div id="containerFrame">
</div>
</body>
JavaScript
window.onload = function(){usersFunction();};
function usersFunction(){
var someHtml = '<div> <div class ="btnSettings"> </div> <span></span> </div>';
changeSource(someHtml);
}
function changeSource(newSource){
document.getElementById("containerFrame").innerHTML = newSource;
}
While passing the source, how do I tell JavaScript function that this HTML being passed also has some element which has to be bound to a click event?
If you have to do it this way, you could consider adding the click handler inside the HTML string itself:
var someHtml = '<div> <div class ="btnSettings" onclick="return myFunction()"> </div> <span></span> </div>';
Alternatively, after modifying the .innerHTML, find the right <div>:
var frame = document.getElementById('containerFrame');
frame.innerHTML = newSource;
var settings = frame.getElementsByClassName('btnSettings')[0];
// depends on the browser, some IE versions use attachEvent()
settings.addEventListener('click', function(event) {
}, false);
i think you need something like that:
document.getElementById("containerFrame").onclick = function() {
// put your function here
};