i'm trying to add some html code with javascript and jQuery into a div without an id, but with a class
i'm trying to have it done like this, but without success...
flie.js :
$(".myClassName").ready(function(){
$(this).innerHTML = "<img src=\"http://mywebsite.com/img.png\" /> <span>some text</span>";
});
i'm loading the .js file with this html code
.html file :
<div class="myClassName">
</div>
<script>
(function()
{
if (window['ImportFlag'] == undefined || window['ImportFlag'] == void 0) {
var myScript = document.createElement('script');
myScript.type = 'text/javascript';
myScript.src = 'file.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(myScript, s);}
window['ImportFlag'] = 1;
})();
</script>
$(document).ready(function(){
$(".myClassName").html("<img src=\"http://mywebsite.com/img.png\" /> <span>some text</span>");
});
You may try like this
<div class="myClassName">
</div>
<script type="text/javascript" src="file.js">
</script>
file.js
$(document).ready(function(){
$('.myClassName').html("<img src=\"http://mywebsite.com/img.png\" /> <span>some text</span>");
});
You should firs ensure that jQuery is loaded BEFORE loading file.js. Then you should use jQuery's functions to set the div inner HTML.
This is a minimalist example :
<html>
<head></head>
<body>
<div class="myClassName">
</div>
<script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script>
<script>
(function()
{
if (window['ImportFlag'] == undefined || window['ImportFlag'] == void 0) {
var myScript = document.createElement('script');
myScript.type = 'text/javascript';
myScript.src = 'file.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(myScript, s);}
window['ImportFlag'] = 1;
})();
</script>
</body>
</html>
Then, file.js :
$(document).ready(function(){
$(".myClassName").html("... <span>some text</span>");
});
The jQuery ready() function should be called on the document object, not on an element. It evokes a DOM-ready handler, and can be called using the following syntax (from the official documentation):
$(document).ready(handler)
$().ready(handler) (this is not recommended)
$(handler)
Matei Mihai and muthu's answers here show you how this works for your example.
Related
HTML
<div>
<label>City：<input id="aqi-city-input" class="122" type="text" ></label><br>
<label>Point：<input id="aqi-value-input" type="text"></label><br>
<button id="add-btn">OK</button>
</div>
JavaScript
var CityName = document.getElementById('aqi-city-input');
var CityMore = document.getElementsByClassName('122');
var Quality = document.getElementById('aqi-value-input');
var Button = document.getElementById('add-btn');
console.log(document.getElementById('aqi-city-input')); //null
console.log(CityName); //null
console.log(CityMore); //html object
console.log(Quality); //null
console.log(Button); //null
There return null except the getElementsByClassName, do I have something wrong ?
You have to include your JavaScript after the HTML document like the following. If you are using a JavaScript file you have to include this after the HTML document too.
<div>
<label>City：<input id="aqi-city-input" class="122" type="text" ></label><br>
<label>Point：<input id="aqi-value-input" type="text"></label><br>
<button id="add-btn">OK</button>
</div>
<script src="path/to/your/script.js"></script>
<script>
var CityName = document.getElementById('aqi-city-input');
var CityMore = document.getElementsByClassName('122');
var Quality = document.getElementById('aqi-value-input');
var Button = document.getElementById('add-btn');
console.log(document.getElementById('aqi-city-input'));
console.log(CityName);
console.log(CityMore);
console.log(Quality);
console.log(Button);
</script>
You can also use the JavaScript before your HTML document, but in this case you have to wrap your code in a event listener DOMContentLoaded so the JavaScript executes if the HTML content is loaded (and JavaScript can see the HTML elements).
In case of a JavaScript file you should wrap your code into the event listener.
<script src="path/to/your/script.js"></script> <!-- content is wrapped in event listener -->
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var CityName = document.getElementById('aqi-city-input');
var CityMore = document.getElementsByClassName('122');
var Quality = document.getElementById('aqi-value-input');
var Button = document.getElementById('add-btn');
console.log(document.getElementById('aqi-city-input'));
console.log(CityName);
console.log(CityMore);
console.log(Quality);
console.log(Button);
});
</script>
<div>
<label>City：<input id="aqi-city-input" class="122" type="text" ></label><br>
<label>Point：<input id="aqi-value-input" type="text"></label><br>
<button id="add-btn">OK</button>
</div>
Move your javascript code below your HTML.Or execute it after the page has finished loading.In JQuery you can do like below:
<script>
$(document).ready(function() {
//... your code ...//
});
</script>
I want to log comments in script tags in an html document. How can i do that ?
<!DOCTYPE html>
<html>
<body>
<script>
//my comment
var test = "some js";
/* start of comment
...
end of comment*/
</script>
<!-- This is a comment -->
<p>This is a paragraph.</p>
</body>
</html>
For now, I have this snippet of code to get all html comments
var jq = document.createElement('script');
jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);
jQuery.noConflict();
$(function() {
$("*").contents().filter(function(){
return this.nodeType == 8;
}).each(function(i, e){
console.log(e.nodeValue);
});
});
will return : This is a comment
I need to place an entire javascript function in a div and show it for testing purposes, how can I accomplish this? I am doing this from code behind in asp.net
EDIT
<!-- Facebook Conversion Code for Website Purchase -->
<script type='text/javascript'>
(function() {
var _fbq = window._fbq || (window._fbq = []);
if (!_fbq.loaded) {
var fbds = document.createElement('script');
fbds.async = true;
fbds.src = '//connect.facebook.net/en_US/fbds.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(fbds, s);
_fbq.loaded = true;
}
})();
window._fbq = window._fbq || [];
</script>
Edit: You need to do some trickery: How to show <div> tag literally in <code>/<pre> tag? Which says that you need to escape your < and > characters in your tag to < and > for them to show in the <pre>. The example below has been modified to show this.
You should try using the html <pre> tag, it's commonly supported and does exactly what you're asking for:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre
<pre>
<script type="text/javascript">
console.log('hi');
</script>
</pre>
should show something like
<script type="text/javascript">
console.log('hi');
</script>
I have some script tag like this:
<script src="cordova-2.5.0.js"></script>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery.mobile-1.1.1.min.js"></script>
<script src="js/jquery.xdomainajax.js"></script>
<script src="js/xml2json.js"></script>
<script src="js/ZipPlugin.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.ui.touch-punch.min.js"></script>
<script src="js/prefixfree.min.js"></script>
This is my app i wrote using phonegap for android but i want to use code in web. And i dont use all for web page.
Have any way to do it like using if else like this in html:
if(anything) {
<script src="cordova-2.5.0.js"></script>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery.mobile-1.1.1.min.js"></script>
<script src="js/jquery.xdomainajax.js"></script>
<script src="js/xml2json.js"></script>
<script src="js/prefixfree.min.js"></script>
} else {
<script src="js/ZipPlugin.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.ui.touch-punch.min.js"></script>
}
I am a dumper, please help me.
Thanks for reading!!!
Edit:
if i want to change my script tag:
<script src="js/prefixfree.min.js"></script>
Become like this:
<script src="http://smartphone.thnt.vn/VietGames/GhepTranhTu/Web/js/prefixfree.min.js"></script>
Have anyway to make a variable like:
var key ="http://smartphone.thnt.vn/VietGames/GhepTranhTu/Web/"
And then use in tag like this:
<script src = "key + 'js/prefixfree.min.js'"></script>
How about this,
function registerScript(scriptPath) {
var scriptTag = document.createElement('script');
scriptTag.type = 'text/javascript';
scriptTag.async = true;
scriptTag.src = scriptPath;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(scriptTag, s);
}
if (anything) {
registerScript("cordova-2.5.0.js");
}
For the first part. you can do this:
if (anything) {
$('head').append('<script src="cordova-2.5.0.js"></script>')
.append('<script src="js/jquery-1.7.2.min.js"></script>')
.append('<script src="js/jquery.mobile-1.1.1.min.js"></script>')
.append('<script src="js/jquery.xdomainajax.js"></script>')
.append('<script src="js/xml2json.js"></script>')
.append('<script src="js/prefixfree.min.js"></script>')
} else {
$('head').append('<script src="js/ZipPlugin.js"></script>')
.append('<script src="js/jquery-ui.min.js"></script>')
.append('<script src="js/jquery.ui.touch-punch.min.js"></script>')
}
To change the script tag, do this:
var key ="http://smartphone.thnt.vn/VietGames/GhepTranhTu/Web/"
$('script[src="js/prefixfree.min.js"]').attr('src', key + 'js/prefixfree.min.js');
Using jquery template :
DEMO : http://jsfiddle.net/abdennour/R36Qc/3/
Your template :
<script id="myscripts" type="text/x-jquery-tmpl">
<script src="${myurl}" type="text/javascript">
{{html "</sc"+"ript>"}}
</script>
Your javascript code :
$('#myscripts').tmpl(myarray).prependTo('head')
The branching (if) is done on array of String (src of js) :
var myarray=[]
if (anything) {
myarray=[{myurl:"cordova-2.5.0.js"},
{myurl:"js/jquery-1.7.2.min.js"},
{myurl:"js/jquery.mobile-1.1.1.min.js"},
{myurl:"js/jquery.xdomainajax.js"},
{myurl:"js/xml2json.js"},
{myurl:"js/prefixfree.min.js"},
{myurl:"js/jquery.mobile-1.1.1.min.js"}
]
} else {
myarray=[{myurl:"js/ZipPlugin.js"},
{myurl:"js/jquery-ui.min.js"},
{myurl:"js/jquery.ui.touch-punch.min.js"} ]
}
See : https://stackoverflow.com/a/5462679/747579
To check result , open browser inspector :
You could make a script to create all the scripts node like:
<script>
var head= document.getElementsByTagName('head')[0];
var key = '';
if(anything) key = 'http://smartphone.thnt.vn/VietGames/GhepTranhTu/Web/';
var scripts = new Array()
scripts[0] = 'js/prefixfree.min.js';
scripts[1] = 'js/foo.js';
for(var s in scripts) {
var script= document.createElement('script');
script.type= 'text/javascript';
script.src= key + s;
head.appendChild(script);
}
</script>
You could use pure javascript like that:
<script>
var key ="http://smartphone.thnt.vn/VietGames/GhepTranhTu/Web/",
file=document.createElement('script');
file.type = "text/javascript";
file.src = key + 'js/prefixfree.min.js';
document.getElementsByTagName("head")[0].appendChild(file);
</script>
<script>
if(foo) {
document.write('<script src="a.js"><\/script>');
} else {
document.write('<script src="b.js"><\/script>');
}
</script>
In this case document.write is a valid option. The script tags are blocking anyway.
You can include script files dynamically using JavaScript. See an example here:
Load jQuery with Javascript and use jQuery
Please check out this jsfiddle:
http://jsfiddle.net/xNEZH/2/
It works fine in my jsfiddle
[BOX APPEARS WHEN TEXT IS INPUTTED IN INPUT]
but doesn't work on my browsers BUT I am using the latest versions of safari, firefox and chrome.
What is the matter?
HTML / JAVASCRIPT CODE:
<html>
<head>
<script type="text/javascript" src="jquery-1.7.js"></script>
<script>
$(document).ready(function () {
(function watchInputForChanges(){
var hasInput = $('.input1').val() != "";
$('.box')[hasInput ? 'show' : 'hide']();
setTimeout(watchInputForChanges, 100);
})();
});
</script>
<link href="cloud.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="center1">
<form>
<input type="text" class="input1" autofocus="focus" />
</form>
</div>
<br><br>
<div class="center1">
<div class="box">f</div>
</div>
</body>
</html>
I believe that you need to add this:
$(document).ready(function () {
//function name does not exist outside this scope
(function watchInputForChanges(){
var hasInput = $('.input1').val() != "";
$('.box')[hasInput ? 'show' : 'hide']();
setTimeout(watchInputForChanges, 100);
})();
});
Drav Sloan pointed out that you are missing the jQuery include as well
Apologies for not answering the direct question (simply "why doesn't this work outside of fiddle?") but I can't resist: not sure why you're polling for changes; you can bind a listener to the element. For example (in the document ready function...)
In the HTML itself:
<script src="/scripts/jquery.js"></script> <!--or wherever your script source is!!-->
Then if you're putting your scripts into tags on the same page (instead of external):
<script>
$(document).ready(function () {
(function() {
$input = $('.input1');
$box = $('.box');
$input.on('keypress input paste', function() {
if ($box.not(':visible') && $input.val() != "") {
$box.show();
} else {
$box.hide();
}
});
})();
});
</script>
Catches manual entry or pasted entry.
http://jsfiddle.net/xNEZH/12/