I'm a beginner at jQuery and I'm trying to insert a Facebook like button through the jQuery document.ready function.
My external Javascript file (loaded after the jQuery script) has the following code:
$(document).ready(function(){
if ($('#fb_btn').length) {
var fb_code = "";
fb_code += "<iframe src=\"http://www.facebook.com/plugins/like.php?href=" + escape(document.URL) +"&layout=standard&show_faces=false&width=450&action=like&colorscheme=light&height=80\" scrolling=\"no\" frameborder=\"0\" style=\"border:none; overflow:hidden; width:450px; height:80px;\" allowTransparency=\"true\" >";
$('#fb_btn').prepend(fb_code);
}
});
My HTML code for where I want the button is
<span id="fb_btn"></span>
Currently, nothing seems to load into the span.
I'm trying to use this instead of inserting the code directly because inserting directly slows down the page down a bit too much.
Thanks.
Brian, the errors you're getting on your page seem to be related to the absence of the $ variable. Are you sure you're running your $(document).ready() only after you load your jQuery scripts? Remember...Javascript runs from top to bottom, so if you load your jQuery script after you run anything on the $ or jQuery variables, you will get object undefined errors.
Then, to reiterate what others have said, you should probably close that html string with </iframe> and put the iframe in a block-level element.
I think I just fixed the problem by updating the jQuery on my site. It was version 1.4.2. By using Version 1.4.3, everything seems to work fine.
Either that or there was something modified incorrectly with the jQuery I had.
Thanks for your help everyone.
Related
I'm building a website to use with Cordova on mobile. I found this great javascript framework called nativedroid2. This framework generates html classes, effects and the like which are applied to html code.
Now what I am trying to do is dynamically generating html code in jQuery by using AJAX calls to a server (I want javascript to make the HTML to remove the load of the server). However when I try to use html() on some divs to load some HTML, the nativedroid javascript function does not apply to the HTML, so no styling is done and everything looks like I am not even using nativedroid2. I am not using AJAX calls yet because I was testing if the html() works with nativedroid.
var html1;
var html2;
function loadpage(id, data) {
generateContent(id, data);
$('[data-role="header"]').html(html1);
$('[role="main"]').html(html2);
}
function generateContent(id, data) {
html1 = "bunch of html for the header"
html2 = "bunch of html for the body"
Does anyone know a better alternative to html() or a fix to make this work?
Alternative for html()
You can use JavaScript function createElement()
var P_tag=$("#your_div_id").createElement('p');
This will create an element P-tag, after that, you can set text to it
P_tag.text("Text");
So I read online that I had to escape the quotation marks. I used an online tool for that. However the online tool made " into "", which is read as an empty string. Removing that fixed it.
Thank you for your time if you answered
Good day! Newbie here. I just want to know if it's possible to change the whole content of an html using javascript? I got some codes here. (not mine but whoever did this, thank you so much!) I don't know where to put/insert all the codes of the new layout like when you click a button then the whole content will change. Thank you very much for helping me.
<script language="Javascript">
<!--
var newContent='<html><head><script language="Javascript">function Hi()</script></head><body onload="Hi();"><p id="p">hello</p></body></html>';
function ReplaceContent(NC) {
document.write(NC);
document.close();
}
function Hi() {
ReplaceContent(newContent);
}
-->
</script>
The easiest way to do this is with jQuery.
function insertHtml()
{
var newHtml = '<div><span>Hello World</span></div>';
$('body').html(newHtml);
}
Something like that will replace the entire contents of body with newHtml. You can also do this with pure javascript using the .innerHtml property but jQuery has many advantages.
EDIT: If you want to add something to the DOM rather than replacing the entire thing, use
$('body').append(newHtml)
instead. This will add the content to the end of the body. This is very often used for things like adding rows to a table.
Yes it is possible but this code is not valid unless you remove the comment tags however don't use the document.write() after page load unless you want to overwrite everything in page including the script
I have a codeigniter that uses twitter bootstrap. At the end of it I have a simple fade in script using jquery:
<script src="http://localhost/b1/js/jquery.js"></script>
<script>
$(document).ready(function() {
$(".content").fadeIn(1000);
});
</script>
the HTML is here.
Now I copied the source from script code over from the page that it is working on to the one that is not working, and suspected 'content' is not declared on the non-working page.
to test this I ran $(".content").length; from the firebug console and the output is: 0 so apparently 'content' does not exist.
I want to pick another css selector to let the fade in script work, so I tried:
$(".html").fadeIn(1000); and $(".container").fadeIn(1000);
It's still not working. Can someone explain what I'm doing wrong and how to pick a selector which will fade in the entire page?
I have portions of the page generated dynamically by php ( codeigniter ) . Specifically, the header, navbar and footer
how about $("body").fadeIn(1000) for the whole page? Note no dot since it's the element name, not a class name.
You don't have a div 'content' in your html so it is never going to find it....
Try doing it on body or html e.g $(html).fadeIn(800) - nb without the full stop at the start
I have one div id=userinfo
<html>
<head></head>
<body>
<div id=userinfo></div>
</body>
</html>
And now I want to append something into this div, depending on the localStorage.
if (localStorage==0){$("#userinfo").append("<p>Test</p>");} else {$("#userinfo").append("<p>Hello</p>");}
But it failed, no matter I input this script into separate JS file or add them into the head of the html file.
I tried exclude this with Google chrome developer tool's console, it works as expected.
I've tried another way round change the script into:
if (localStorage==0){alert("Test");} else {alert("Hello");}
And add this into JS file, it works!
So, now I'm stacked why my jQuery code not work?
The jquery append function takes an object as parameter and not a string html.
So this should solve your problem, $("#userinfo").append($('<p>Test</p>'))
You might have conflicts with other javascript libraries. Try to check out http://docs.jquery.com/Using_jQuery_with_Other_Libraries
Using jquery we can do like this below
$( "<p>Test</p>" ).appendTo( "#userinfo" );
I am busy writing a simple Adobe Air app using HTML, jQuery and some jQuery plugin to load RSS feeds.
The problem I am having is that I am generating a section of HTML components (buttons) so that I can execute specific code on button click. But when the page is displayed the button never executes; I have tried using the built-in log function as well as alert, but none of them execute. The weird part is when I copy the HTML component into a part of the page that is not generated it executes fine.
I insert the following into a div using jQuery and it does not execute.
'<input type="button" onclick="LoadPage()" value="Test" />'
If I just insert it into the HTML it works fine.
I am using version 1.3.2 of jQuery; I am also using this plugin to load the data into a div, and I have modified line 82 to include the html component above.
I should note that when I inspect the page using AIR's introspector the HTML is valid.
What could be going wrong?
I don't see the problem. The following works fine for me:
$(document).ready(function() {
$('#mainDiv').html('<input type="button" onclick="LoadPage()" value="Test" />');
});
function LoadPage()
{
alert("Hello");
}
If you want to use jquery to handle the click you can use the live event.
I also had that problem some time ago, and this solved the problem.
If you give your button an id would look something like this:
$("#YourButtonId").live("click", function (){....
Got the same problem with 'onClick' instead of 'onclick' ?
Also check if the function isn't called 'Loadpage' instead of 'LoadPage'.
I sometimes have case sensitive problems in javascript, not sure if it are functions that are case sensitive.