jQuery - Library use in id selector in generated content - javascript

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();
});

Related

Javascript - load template in html of element

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");
});

How to bind event Jquery to page?

I have Jquery function that executes AJAX query to server.
How can I call this after load page in the specified url page? May I bind this to element HTML, I mean:
<div id="graph" onload="function()"></div>
jQuery handles the HTML file with a variable called document.
Document has two popular event states
load when the page has been loaded
ready when the page has been loaded and all other decorations to the HTML have been applied.
jQuery provides hooks for these states.
To run javascript code after each of the events listed above, you have to put the function within the appropriate event scope.
For loading, this would be…
$(document).load(function() {
// javascript code you want to execute
})
After the page has been ready, but not yet rendered, you can apply some other javascript code using
$(document).ready(function() {
// javascript code you want to execute
})
One way using jQuery:
$(document).ready( function() {
//do whatever you need, you can check if some element exists and then, call your function
if($("#graph").length > 0)
callfunction();
});
No jQuery, only vanilla js:
window.onload = function() {
if(document.getElementById("graph"))
callfunction();
}

Javascript trigger for load of all elements

I have 2 external html pages loaded by this code:
<div id="header-div"></div>
<div id="footer-div"></div>
my js file contains this:
$(function () {
$("#header-div").load("/AfekDent/header.html");
$("#footer-div").load("/AfekDent/footer.html");
});
I want to run a function when specific element in the header file is created -
what trigger can i use for it?
It's ok the trigger will occur when all elements will be loaded.
thanks!
Add a callback to your load() call.
$(function () {
$("#header-div").load("/AfekDent/header.html", function() {
console.log('My header was loaded!');
});
});
You can use a callback on the #header-div, which will execute the code after the entire header has loaded.
$("#header-div").load("AfekDent/header.html", function() {
someFunction();
});
However, if you want to execute code after a specific element in the header loads, try something like:
$("#specific-element").on("load", function() {
someOtherFunction();
});
If you want to learn more about the difference between load and on("load"), look at this question or read the jQuery documentation for load and on().
For simplicity, I'd recommend executing code with $(document).ready(function() {yetAnotherFunction();});, but it depends on your specific case.

document.ready and ExecuteOrDelayScriptLoaded

I have a dilemma - my javascript code needs to be executed when the DOM is ready. However, at the same time I need to be able to hook up to the load event of another script. So hypothetically speaking I need something like this:
ExecuteOrDelayUntilScriptLoaded(getData, "sp.js");
function getData() {
(document.ready(function() {
//my code to get data from sharepoint list.
}));
}
Only the latter does not seem to work.
Please suggest!
Why not to do it like this?
$(document).ready(function() {
ExecuteOrDelayUntilScriptLoaded(function getData(){
//your code to get data from sharepoint list.
}, "sp.js");
});
Try
$(document).ready(function() {
$.getScript('sp.js', function() {
//your code to get data from sharepoint list.
});
});
For even more control over script loading, try a script loader like the simple and lightweight yepnope.js or the more complex LABjs.
If you are using jQuery, MooTools, or any other library - there is a standard function you can hook into, which checks if the DOM and your assets are loaded.
For example, in jQuery:
http://api.jquery.com/ready/

Transferring Onclick Function to jQuery

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
});
});

Categories

Resources