I have a template that I want to render inside html element on click of element. I want to do something like ( I am using jquery):
$(".btn")on("click", function(){
$("#element").html(partial_template.html)
});
Buto this of course wont work. How can I achieve this?
EDIT: I am using Django, if this matters!
Use .load() function , make sur to set the right path to your html tpl .
$(".btn").on("click", function(){
$("#element").load("path_to_your_html_folder/partial_template.html");
});
Related
I am developing a website with many html files and just recently i started using seperated header and footer html files in order to save time by implementing them using javascript to my pages. The problem is now all the header and footer looks the same, while before using this handy technique i had the pages highlighted depending on the page you were on(this was done by manually adding class to different <a> tags depending on what the page(html file) it is), but now i can't find a way to target a specific <a>that would be targeted only on specific html to change it's css. The code looks something like this:
HTML home.html:
<div id="header"></div>
HTML header.html:
<ul>
<li id="LI_56">
Home
</li>
</ul>
Javascript looks like this:
$(function(){
$("#header").load("header.html");
$("#footer").load("footer.html");
});
css looks like this:
.home{
background-color:red;
}
and what I tried to do is:
<script>
$( document ).ready(function() {
document.getElementById('A_57').className = 'home';
});
</script>
But i get error:"TypeError: document.getElementById(...) is null" . When the header is already in my home.html and not implemented by javascript everything works fine, but that's no an option. Hoping anyone knows a solution. Using diffrent css files for each html is also clearly not an option - it should be as straight forward and developer friendly(smart & lazy) as possible! :) Thanks in advance!
Set the class name in a "complete" callback, this callback is executed after post-processing and HTML insertion has been performed:
$(function(){
$("#header").load("header.html", function() {
document.getElementById('A_57').className = 'home';
});
$("#footer").load("footer.html");
});
This is because the element doesn't yet exist. Add the class after the html has been loaded.
$(function(){
$("#header").load("header.html", function() {
var $homeLink = $('#header').find('a').filter(function() {
return $.trim($(this).text()) === 'Home'
});
$homeLink.addClass('home');
});
$("#footer").load("footer.html");
});
In standard generated content, we use function like this:
$(document).on('click', "date_picker", function(){
alert("hello");
});
But how do we use in a function in generated content, for example the datepicker library from jQuery UI?
Example of what i am trying to say
$(document).on('click', 'date_picker').datepicker();
Once your dynamic content has been loaded, call the plugin like you normally would, ex:
$("#myDiv").load(somePath, function(data) {
$("#myLoadedContentID").datepicker();
});
So I'm trying to use ajax to put content into a div, and trying to have it change all internal links before it adds the content so that they will use the funciton and load with ajax instead of navigating to another page. My function is supposed to get the data with ajax, change the href and onclick attributes of the link, then put it into the div... However, all it's doing is changing the href and not adding an onclick attribute at all. Here's what I was using so far:
function loadHTML(url, destination) {
$.get(url, function(data){
html = $(data);
$('a', html).each(function(){
if ( $.isUrlInternal( this.href )){
this.onclick = loadHTML(this.href,"forum_frame"); // I've tried using both a string and just putting the function here, neither seem to work.
this.href = "javascript:void(0)";
}
});
$(destination).html(html);
});
};
Also, I'm using jquery-urlinternal. Just thought that was relevant.
You can get the effect you want with less effort by doing this on your destination element ahead of time:
$(destination).on("click", "A", function(e) {
if ($.isUrlInternal(this.href)) {
e.preventDefault();
loadHTML(this.href, "forum_frame");
}
});
Now any <a> that ends up inside the destination container will be handled automatically, even content added in the future by DOM manipulations.
When setting a function to onclick through js it will not show on the markup as an attribute. However in this case it is not working because the function is not being set correctly. Easy approach to make it work,
....
var theHref=this.href;
this.onclick = function(){loadHTML(theHref,"forum_frame");}
....
simple demo http://jsbin.com/culoviro/1/edit
I wonder why my resizable() jQuery UI function doesn't work on my img.
http://impress-builder.herokuapp.com/home
here is the code: https://github.com/lipenco/impress.js-app
function setResizable(){
$( ".resizable" ).resizable();
}
$(document).on('click', 'img', function(event){
$(this).addClass('resizable');
$(this).css("position" ,"absolute")
setResizable();
return false;
});
Are you sure that you can resize an image directly ? I suggest wrapping it in a div.
http://jsfiddle.net/8VY52/
You can create a div on the fly. Ho, also, you must set the div style="display:inline-block"
I cannot be able to find error in it. but if you can provide me the exact reference as to where is the exact code written on to the page as I cannot be able to explore code on the webpage you referenced. Please elaborate more for help.
Example : $(document).find('.resizable').resizable();
Or directly on to the page through browser Console.
Here's a jsfiddle code with static element : http://jsfiddle.net/coolshivster/eUKhA/
Try Resolving it by placing your jQuery-ui file on to the head or before img.js
I have a jQuery function that replaces thumbnails with the main image.
This is the code that I use for replacing the main image:
$(document).ready(function(){
$(".wheelFinishThumbs a").click(function() {
var mainImage = $(this).attr("href");
var mainTemp = mainImage.replace(/-mid/,'');
var mainTemp = mainTemp.replace(/png/,'jpg');
$("#main_view img").attr('src', mainImage );
$("#main_view a").attr('href',mainTemp);
return false;
});
I use a PHP function to download (save) images by changing their header values. This is the HTML code that I use to download images
Click to download
but since "image.jpg" has to be my dynamic variable some how I've got to call this argument in the jQuery image replacement function and replace "image.jpg" dynamically each time I change the main image. I want to replace image.jpg with var mainImage from my image swapping function.
My jQuery knowledge is really limited, so If somebody can help me to do it, would be great.
This should work, assuming you are using jQuery 1.7+
Assuming your a tag markup is like this after you dynamically set the href to new image
Download Image
JavasScript
$(function(){
$(document).on("click","#main_view",function(e){
e.preventDefault();
var self=$(this);
alert("replace this with awesome code")
window.open('download.php?file='+self.attr("href")+,'_self', 'download', 'status=0');
});
});
Note that this function will work only of a single a element because we are targeting binding the functionality to the element with id main_view. Since ID's should be unique in the DOM, If you want to have the functionality to many a tags, i would add a common class selector to the a tag like this
<a class="aDownloadble" href="urltoSomeImage2.jpg" id="main_view">Download Image2</a>
<a class="aDownloadble" href="urltoSomeImage4.jpg" id="main_view">Download Image4</a>
And Update my script like this
$(function(){
$(document).on("click",".aDownloadble",function(e){
e.preventDefault();
var self=$(this);
alert("replace this with awesome code")
window.open('download.php?file='+self.attr("href"),'_self', 'download', 'status=0');
});
});
jQuery on is nnot necessary. you can simply use the click event binding directly. But if you are loading the markup of those links via ajax / injecting to the DOM dynamically, you should use on or live.
$(document).ready(){
$("#main_view a").click(function() {
// Code to run when user clicks on link
});
});