I have the following jQuery-tmpl template:
<script id="month-template" type="text/x-jquery-tmpl">
<div style="width:${width};">
<div>Hello</div>
</div>
</script>
It is used by the following script:
$("#month-template").tmpl({"width":30}).appendTo($("#containerId"));
I expect to see this output:
<div style="width:30;">
<div>Hello</div>
</div>
But I get this:
<div style="">
<div>Hello</div>
</div>
Is there some special way to embed attribute values in a template?
I am new to tmpl - maybe I have missed something obvious.
Use 30px instead of 30.
jQuery automatically converts integers to the correct CSS units when using .css() but since it's a template (not CSS-specific) you need to specify the units yourself.
Related
I have the following code
<div id="ad">
<div id="adsensebanner">
<iframe id="google_ad_randomnumber">
</iframe>
</div>
</div>
and I'm searching of a way to make it like this, using jQuery and CSS attributes matching:
<div id="ad">
<div id="adsensebanner" class="addedclass">
<iframe id="google_ad_randomnumber">
</iframe>
</div>
</div>
Any ideas for searching for div that has another parent div and appending a class to the child one?
Your comments on various answers suggest your HTML is invalid and has more than one id="adsensebanner" in it, but just one id="ad" in it.
Your best bet is to make the HTML valid. There can be only one element with id="adsensebanner" in it.
However, if for some reason you want to only target that one element when it's inside id="ad":
document.querySelector("#ad #adsensebanner").classList.add("addedclass");
or with jQuery:
$("#ad #adsensebanner").addClass("addedclass");
That says "Add 'addedclass' to #adsensebanner only if it's inside #ad." There can be valid use-cases (if the one element with id="adsensebanner" may or may not be within #ad and you don't want to add the class if not), but they're rare.
If you correct the HTML to only have one id="adsensebanner", and you always want to add the class, then:
document.getElementById("adsensebanner").classList.add("addedclass");
or with jQuery:
$("#adsensebanner").addClass("addedclass");
In a comment you've said:
The double division check will definately work, however, my second div's ID name varies, so I would like to have it selected via an attr, like div[id*='adsensebanner']. Is there any workaround for this?
Yes, you can use any of the attribute substring selectors. For instance, if the id will always start with adsensebanner (id="adsensebanner1", id="adsensebanner2", etc.), then the selector to use with querySelector or jQuery would be "#ad div[id^=adsensebanner]". (Or you can use the contains one you mentioned, *=, or $= if it always ends with something.)
Try below:
$('#adsensebanner', window.parent.document).addClass("addedclass");
Simple JS can do the trick. And I can't see this div is inside the iFrame.
var p = document.getElementById("ad");
p.querySelector("[id='adsensebanner']").classList.add("addedClass");
<div id="ad">
<div id="adsensebanner">
<iframe id="google_ad_randomnumber">
</iframe>
</div>
</div>
This is only by JavaScript:
document.getElementById("ad").getElementsByTagName("div")[0].classList.add("addedClass");
$( "#ad div:nth-last-child(1)" ).addClass("addedClass");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ad">
<div id="adsensebanner">
<iframe id="google_ad_randomnumber">
</iframe>
</div>
</div>
<div id="ad1">
<div id="adsensebanner">
<iframe id="google_ad_randomnumber">
</iframe>
</div>
</div>
This will add a class only to div which have parent div id="ad"
I am trying to get div value using jquery in chrome console from this:
<div class="col-md-3">
<div class="vou-col" style="cursor: pointer">
<h4>Free Large Bucket</h4>
<span class="sku-info">Voucher123</span>
</div>
</div>
I am getting the following error:
$('.sku-info').val()
VM783:1
Uncaught TypeError: $(...).val is not a function
at :1:21
The Problems
.val() is used to get the value of an input element - i.e. what the user has typed into a text box. It won't work for this purpose.
However, it should still be defined, even if called on an HTML element (it would still return null, though, so you would still have a problem). The only reason for .val() to be not a function would be if you had not included jQuery - insure that you have a line like
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
in the <head> section of your webpage to include jQuery, otherwise none of the solutions below will work either.
The Solution
You want to get the internal HTML value of a <div>. So, you should use .text() or .html() instead of .val().
.text() will return the text in the <div>, without any HTML tags;
.html() will return all of the content of the <div>, including any HTML tags inside it.
Example
console.log($(".sku-info").text())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3">
<div class="vou-col" style="cursor: pointer">
<h4>Free Large Bucket</h4>
<span class="sku-info">Voucher123</span>
</div>
</div>
$(".sku-info").attr('value')
should do the trick since this control is not an input
You can use .text()/.html() instead of .val() for this.. check updated snippet below.
console.log($('.sku-info').html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3">
<div class="vou-col" style="cursor: pointer">
<h4>Free Large Bucket</h4>
<span class="sku-info">Voucher123</span>
</div>
</div>
include jquery
var spanval = $('.sku-info').html();
alert(spanval);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3">
<div class="vou-col" style="cursor: pointer">
<h4>Free Large Bucket</h4>
<span class="sku-info">Voucher123</span>
</div>
</div>
Problem
It seems that your jQuery is running in no conflict mode - so $ is the browser console's native function. This is often the case if using a version of jQuery which comes bundled with a CMS such as WordPress or Drupal.
Solution
You can use the full version:
jQuery(".sku-value").text();
We can infer this is the case because the error is ".val(...) is not a function" - if it were jQuery then .val would be a function.
Useful debugging tip
You can check to see if $ is jQuery by seeing if it has a version number
console.log($.fn.jquery)
If $ is jQuery then this will log a version number - something like "2.1.1". If $ jQuery is not jQuery, it'll log undefined.
I am currently trying to set up a template that I can fill out in a for loop and clone each time. This is what I have so far which works fine for cloning the templates HTML but I am stuck trying to manipulate my template before cloning it.
Trying to do something like a find() on a clone does not work, I think it has something to do with the template being a #document-fragment?
Could somebody give me an example with jQuery on how to do this? Maybe something as simple as manipulating the h1 title before cloning the template?
<div class="template-holder"></div>
<template class="my-custom-template">
<div class="example">
<h1>Example</h1>
<h2>Example 2</h2>
<div class="customDiv">Testing</div>
</div>
</template>
Javascript:
var template = $('.my-custom-template');
var clone = template.clone();
$('.template-holder').append(clone.html());
JSFiddle example:
https://jsfiddle.net/Lmyyyb4k/2/
Edit:
It looks like jQuery itself does not have any support for document fragments: http://james.padolsey.com/stuff/jQueryBookThing/#doc-fragments
So I guess I will have to combine some vanilla JS with jQuery.
If you use a different element than template, it works:
<div class="template-holder"></div>
<div class="my-custom-template" style="display:none">
<div class="example">
<h1>Example</h1>
<h2>Example 2</h2>
<div class="customDiv">Testing</div>
</div>
</div>
This would manipulate the h1 title in the template before cloning the template:
var template = $('.my-custom-template');
template.find("h1").text("Changed H1 Title!");
var clone = template.clone();
$('.template-holder').append(clone);
clone.show();
I have a html template that is being used for multiple projects. In that template I have two places where I can set the content.
The layout is something similar to this:
<body>
<div>Navbar from TEMPLATE</div>
<div>
<div>other TEMPLATE stuff</div>
<div id="content1">CONTENT can be set here</div>
</div>
<div id="content2">CONTENT can also be set here</div>
</body>
My question is is it possible to use the same angular app in both #content1 and #content2? Can the ng-app="main" be used twice?
If something like this isn't possible to do I can add an ng-app attribute to the template but would rather not have to do this as, as I said, the template is used for multiple projects a lot of which won't be using angular.
Edit:
Just to clarify, I'm using a tal template from zope. In that template I have two fill slots, I would like to use the same angular app in both fill slots without having to change the original tal template if possible.
I have this strange issue with _.template (or jQuery (or my knowlege of both)). I use Underscore to render templates and jQuery to append elements to DOM (and lots of other things).
Like this:
var $section = $(this.tmpl.section(data));
Everything works great, however when I add a html comment inside template html, like
<script id="section-template" type="text/template">
<!-- Section panel -->
<div class="panel section-panel panel-info section-<%= type %>" data-type="<%= type %>" data-layout="<%= layout %>">
<div class="panel-heading section-handle">
<h3 class="panel-title"><%= title %></h3>
</div>
<div class="panel-body"></div>
</div>
</script>
I receive an array of objects. I am probably missing some basic stuff here, but is this the way jQuery supposed to work given this html on input? I thought it's supposed to ignore comments.
I dont know if this can work for you, but I use the same tools on this way:
In my frontpage (a index.html page usually) I make a reference to my template
<script type="text/html" id="desktop" src="partials/desktop.html"></script>
<script src="js/app.min.js"></script>
Then in my main script (a app.min.js) I load the template this way:
$.get($("#desktop").attr("src"), function (res)
{
var template = res;
$("body").html(_.template(template));
}