Copy DIV content to another DIV - javascript

How do i copy the contents of DIV1 to DIV2 on load of the page using jquery? I've tried
$('.buffer').html($("#beskeder_vis").html());
However i wasn't able to make it work out

Assuming your selectors are correct, you should put your code in the .ready() Event.
http://api.jquery.com/ready/
So something like:
jQuery(document).ready(function() {
jQuery('.buffer').html(jQuery("#beskeder_vis").html());
}
Otherwise jQuery won't be able to find your elements, since the DOM isn't loaded, when your function is executed.

You should bind event handler on ready event. See documentation: ready funciton
$(document).ready(function () {
$('.buffer').html($("#beskeder_vis").html());
});

$('#two').html($('#one').html());
See this live example

It works for me. It may have something to do with the jquery version your using
Proof jsfiddle

Related

How to trigger "ready" only once in JQuery?

My way like below does not work. Is there other way to trigger ready event only once? Thanks
$("#id").one("ready", function (){
// do somthing
});
I really recommend you read the jQuery documentation because I'm sure that you will find other way to solve your issue. document ready is not for this purpose.
http://learn.jquery.com/using-jquery-core/document-ready/
I will summarize those concepts:
The js file must have just one $( document ).ready() function, because this function is only for make sure that the code inside it will only run after the "document is ready" (Document Object Model (DOM) is ready for JavaScript code to execute - jQuery documentation). It means that, once all of the HTML as loaded, then your js wil run.
Ok, after know that you can write your focus function inside the document ready to make sure it will work correctly.
See this example that I did: https://jsfiddle.net/hf60asgo/1/
We have the HTML (DOM):
<input id="inputTest" placeholder="Test"/>
<span id="spanTest">Write something</span>
And the JavaScript (jQuery):
$(document).ready(function(){
$("#inputTest").focus(function() {
$("#spanTest").fadeOut(1000);
});
});
After the document is ready (the input and the span was loaded) the jQuery code will run, but only if you focus (click) in the input.
I hope I could give some light to you.
If you want to do something with #id when the document is ready, here is what you have to do:
$(function() {
// do something
$('#id').css('background', 'red);
// do other things
});
There should be only one ready function in your code and it should brace all you jQuery code.
As said above, read the documentation, you won't lose your time.

Why does $(this) works with .hover() but not with .ready()?

So, I am trying to get backstretch.js to work with multiple divs that is loaded from the db.
but I can't get a separate image for each div.
This works perfectly, when I hover the boxes, the background shows up, but I wan't it to be loaded as soon as the page loads.
$(".tournament-thumb").hover(
function(){
$(this).backstretch($(this).data("url"));
}
);
I have tried this with .ready() without any result this it doesn't seem to register "$(this)" ? :
$(".tournament-thumb").ready(
function(){
$(this).backstretch($(this).data("url"));
}
);
Here is the HTML:
<div class="tournament-thumb" data-url="images/image.jpg"></div>
Please help me... If there is any better way than this, please respond with that then :)
From the docs:
The .ready() method can only be called on a jQuery object matching the current document, so the selector can be omitted
So you can only use $(document) for the ready() method.
possibly best solution is to bind the delegation to the document object like
$(document).on('hover','.tournament-thumb',function(){
$(this).backstretch($(this).data("url"));
});
Okay, I solved it with jQuery.each
$.each($(".tournament-thumb"), function() {
$(this).backstretch($(this).data("url"));
});

Run a script when div is inserted

I have a script that does graphing, using jqplot. It works fine when the document is loaded rendering each graph using jquery's .each method. However, the problem lies when I replace the div with another one when a bar is clicked. It is suppose to render another graph in the position of the old graph. It changes the graph but does not execute the script.
The script that loads the items has this function to change all divs to graphs:
$("div.barchart").each(function(){
barChart($(this).attr("id"),$(this).attr("data-xmlurl"));
});
is there another way to do this so that it would work when a div is changed too?
Update:
Rails generates a script that is ran. However, it doesn't seem to work when I have this:
chart$=$("#<%=params[:chart_id]%>");
chart$.replaceWith("<%=escape_javascript(render :partial=>"chart_partial"}%>");
barChart(chart$.get(0).attr("id"),chart$.get(0).attr("data-xmlurl"));
Note:
For reference, the actual source code can be found in the jquery_cheats project
Perhaps you could add a listener on the parent element? Is it OK if the barChart() function gets called more than once?
Maybe something like this:
$("div.barchart").parent().on("DOMSubtreeModified", function(e) {
// (or maybe use DOMNodeInserted event instead)
$("div.barchart[id][data-xmlurl]").each(function() {
barChart($(this).attr("id"),$(this).attr("data-xmlurl"));
});
});
You can check out my jsFiddle for this here.
On the current application I'm working on, I'm stuck with version 1.5.2. To get around this, I would unbind and rebind my event and load the initialization in both "ajaxComplete" and "ready". I wasn't able to get the DOM to automatically rebind the event. Delegate is suppose to work like "on", but in my instance I still had to use the below logic.
In short, it would look something like this.
$(document).ready(function () {
InitSomethingCool();
});
$(document).ajaxComplete(function() {
InitSomethingCool();
});
function InitSomethingCool(){
$(".something").unbind('click').click(function(e) {
//Unbind and rebind click event.
alert('You clicked me!');
});
}
Reference:
http://api.jquery.com/on/
http://api.jquery.com/delegate/

why are variables declared outside a function null?

i made this using mootools:
$("fox").addEvent("click", function(){
alert("clicked");
});
and the html:
<p id="fox">A</p>
now if i try it here http://jsfiddle.net/5uJ54/3/ , it works but if i try it in a browser and thats all the code it doesnt, i get this in firebug:
$("fox") is null
and it doesnt work in chrome either.
why is this happening? i have also tried putting everything inside a function but it still doesnt work.
If you try to select your element before the document is ready then you will get null.
The JSFiddle sandbox you have is setup to run after the document has been loaded.
To get the code to work in your document you can listen for this MooTools event which will be triggered after the document is ready:
http://mootools.net/docs/core/Utilities/DOMReady
Your example would end up looking something like this:
window.addEvent('domready', function() {
$("fox").addEvent("click", function(){
alert("clicked");
});
});
Are you sure mootools is being loaded and you are putting the javascript within some sort of domready event? (Not sure what mootools's version of it is).
Because you didn't include the mootools javascript library anywhere?

How can I make ALL links load pages dynamically? (Even links in dynamically loaded pages)

So I have a script like this
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("a[href*='http://']:not([href*='"+location.hostname+"'])").attr("target","_blank");
$("a[target!='_blank'][target!='_top']").click(function(){
var url=$(this).attr("href")+'?jquery=1';
ajaxpage(url,'actualcontent');
window.location.hash=$(this).attr("href");
return false;
});
});
</script>
and it works great. It means all my links load dynamically within the DIV - awesome. But, the links loaded in those div, don't load dynamically when clicked. and if I include this script in it, it still doesn't work. And on a similar note, is there a way of making javascript in pages, which have been loaded dynamically, work? Without including it in the original header?
Thanks.
Disclaimer: To use this solution, you'll need to upgrade to jQuery 1.3 or jQuery 1.4+
(But you should, there are many performance improvements and bug fixes since 1.2.6)
Instead of .click() you can use .live() here, like this:
$("a[target!='_blank'][target!='_top']").live('click', function(){
.live() works on dynamically added elements as well, since it's listening for the bubbling click event at document, rather than being a handler on the element itself.
Not sure what your problem is. You are saying that the links that are added after this function rn do not use this function? hint, you need to rescan the page to update the links in that div OR you can avoid that and use live().
Use .delegate()
// Don't need to put this in a $(document).ready() callback.
$(document).delegate("a[target!='_blank'][target!='_top']", "click", function(e){
var url=$(this).attr("href")+'?jquery=1';
ajaxpage(url,'actualcontent');
window.location.hash=$(this).attr("href");
e.preventDefault();
return false;
});
$(document).delegate("a[href*='http://']:not([href*='"+location.hostname+"'])", "click", function(){
// lazy attr setting, reduces query cost
$(this).attr("target", "_blank")
});

Categories