I have an hmtl file which includes another javascript as
<script type="text/javascript" src="hello.js"></script>
<div>
something
</div>
This html file is loaded via de .load()
and it loads it in a div from the main page
This tells me that the first line is not well-formed
$(".flip").live("click", function() {
$(this).find("div.panel").slideToggle("slow")
});
$(".flip").live("mouseover", function() {
$(this).css('cursor', 'pointer');
});
If i remove this, it will tell me the next element is not well-formed and so on. If I include this javascript in a page which is not called via .load, it doesn't say any error. Is this because i'm calling this java script inside a div? and not in the head?
try to write the javascript code inde this function
$(document).ready(function(){
//Here insert your javascript code
});
Related
I have an the following element in my html:
<img id="teamshot" onload="load.hide()" src="img/images.jpeg" alt="image">
load.hide references a function in an included javascript file. The contents of this included javascript file are as follows:
var load = {
hide: function()
{
alert("pre");
$("#teamshot").hide();
alert("post");
}
}
I know the function is running because I get an alert box that says "pre" when the element loads, but it breaks on the jquery call. It doesn't hide the element, and it doesn't give me an alert box with the dialogue "post".
What is wrong?
Make sure you are loading jQuery and also the order in which you load your JavaScript files is important. You should load jQuery first, then your custom js file. For example:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="path/to/your/file/custom.js"></script>
I'm creating a widget that can be integrated by the third party with ease. What I need is to create a .js file and the user only needs to include that javascript file using <script> tags and the html tags gets rendered there.
ie.
example.com
widget.js
$(document).ready(function(){
render();
function render(){
return '<div>Html contents to be loaded</div>';
}
});
Third party file
thirdparty.html
<script src="http://example.com/widget.js"></script>
So while loading example.html how can I load all the html contents.
.append() should do the trick.
$(document).ready(function() {
$("body").append("<div>HTML here</div>");
});
Update: As there is no body tag, you could use .after().
$(document).ready(function() {
$("script").last().after("<div>HTML here</div>");
});
Remember to use .last() in case there is multiple script tags.
As my website has only one page, and the index.html was getting really long and impossible to read. So I decided to put each section in a different HTML file and use jQuery to included it.
I used jQuery's include in the way as it has been mentioned here to include a external HTML file but apparently it doesn't work for my website. I really don't know what is the problem.
Here is the link of my workspace.
Here is what I am doing in index.html file to include other sections
<script src="./js/jquery-1.11.1.min"></script>
<script>
$(function() {
$("#includedContent").load("./page1.html");
});
</script>
<script>
$(function() {
$("#includedContent").load("./page2.html");
});
</script>
<script>
$(function() {
$("#includedContent").load("./page3.html");
});
</script>
<script>
$(function() {
$("#includedContent").load("./page4.html");
});
</script>
<script>
$(function() {
$("#includedContent").load("./page5.html");
});
</script>
<script>
$(function() {
$("#includedContent").load("./page6.html");
});
</script>
<script>
$(function() {
$("#includedContent").load("./page7.html");
});
</script>
I also used this method to make sure the file is accessible and everything was fine. So the problem is not the accessibility of the files
You are overwriting the contents of #includedContent seven times (see documentation of jQuery.load). With AJAX, there is no guarantee which request will complete first so you will end up with random page content inside the container.
The solution is to create containers for each page and load each page inside its dedicated container, something like this:
<div id="includedContent">
<div class="page1"></div>
<div class="page2"></div>
<div class="page3"></div>
</div>
$(document).ready(function() {
$("#includedContent .page1").load("page1.html");
$("#includedContent .page2").load("page2.html");
$("#includedContent .page3").load("page3.html");
});
NB: Having said all that, I do not understand how AJAX solves the problem of the page being too long/impossible to read.
There are several things that look odd to me:
all your load functions run at document ready, which is weird while having all the same target. load replaces (not adds) the content of the selected element with what is being loaded, you probably are trying to add all the html contents, but your current setup would actually just load page7.html into #includedContent
the paths look strange to me, i guess ./ may cause errors, try to leave out ./ everywhere.
rather than loading an entire html page, you might just want to load a piece of that file (i dont know how pageX.html looks), for example you would not want to load the <html> node entirely, rather the content only: .load('page1.html #content')
are you including jquery correctly? there is no .js in your inclusion
I want to clear my code a little bit and I want to run my jquery code without any function call in the html file. My actual code is :
HTML:
<head>
<script src="js/colorpick.js"></script>
<script>
$(document).ready(function() {
colorpick_start();
});
</script>
</head>
JS:
function colorpick_start() {
...
}
But if I write for example an alert in the first row of the js without any function call, that works.
alert('test');
function colorpick_start() {
...
}
But this is not working for jquery selectors or something. Is there any solution to get my jquery working without code in the html file?
I want my html file to look like this, if this is possible:
<head>
<script src="js/colorpick.js"></script>
</head>
The
$(document).ready(function() {
Waits until the DOM is ready for selectors etc.
If you add the
$(document).ready(function() {
to your colorpick.js file it will wait for the DOM to be ready and then execute colorpick_start().
And believe me this catches out most people when they start using JQuery.
In order to achieve this:
<head>
<script src="js/colorpick.js"></script>
</head>
Move the document ready call to the js file you are referencing in your HTML file and make sure that the method called is present.
$(document).ready(function() {
colorpick_start();
});
This should so it.
Put your script
<script src="js/colorpick.js"></script>
before </body> tag. This will ensure that your page is loaded fully before script starts.
$(document).ready(function() {
colorpick_start();
});
this code is working because you are calling your function after document is loaded. document load is event. you can put your function on any event you want, but it wont start if you just define your function. You have to somehow call your function. example would be on click (or on document load)
<div id="example"></div>
$("#example").on('click', function () {
your function here
});
Use that code:
$(function(){
$('.colorpicker').val("colorpicker"); //or whatever you like
});
Plnkr example code
I want the html are fully loaded then execute the inline javascript because this script stops the load of the html document.
To try to solve this problem I put the inline javascript code at the end inside a div then i use the jquery .append method
$("#subhimedia").appendTo("#himedia");
This works and appends the inline js that is located inside #subhimedia and takes it inside the #himedia div.
The probblem is that duplicate the #subhimedia div and in internet explorer it freeze the browser.
The inline javascript is:
<!--JavaScript Tag // Tag for network 258: Hi-Media Portugal // Website: Lifecooler // Page: HOME // Placement: HOME_MREC_300x250 (1653713) // created at: Aug 29, 2008 1:35:27 PM-->
<script language="javascript"><!--
document.write('<scr'+'ipt language="javascript1.1" src="http://adserver.adtech.de/addyn|3.0|258|1653713|0|170|ADTECH;loc=100;target=_blank;grp=[group];misc='+new Date().getTime()+'"></scri'+'pt>');
//-->
</script><noscript><img src="http://adserver.adtech.de/adserv|3.0|258|1653713|0|170|ADTECH;loc=300;grp=[group]" border="0" width="300" height="250"></noscript>
<!-- End of JavaScript Tag -->
You could see the url here: http://www.niceoutput.com/jquery/
Thanks in advance for your help
Mário
Since you are using jQuery, wouldn't
$(document).ready(function(){
//your code to execute when HTML is fully loaded
});
work?
use
$(document).ready(function(){
// your code here
});
before writing any jquery codes..