I have a javascript code :
<html>
<head>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
function datacheck(content){
var content = "<script>for(var i = 0 ; i< 10 ; i++) alert('hello')</script>";
var text = $(content).text();
alert(text);
}
</script>
<body>
<div>
Click <input type="button" name="button1" onclick="datacheck()" />
</div>
</body>
</html>
$(content).text(); is working in all browsers striping out html content but not working in IE-8 , if I use
var content = "<p>for(var i = 0 ; i< 10 ; i++) alert('hello')</p>";
then it is working fine in IE-8 too.
Can anyone help me how can I make $(content).text(); working in IE8 too.
Every help is appreciated.
The problem is that the browser is seeing the <script> tags in the string and deciding that this means the end of the script.
Lesson 1: Never include a <script> tag inside your javascript code, even if it's within a string. There is a chance that browsers might mis-interpret it.
Ways around it:
Include comments or CDATA tags around your script code. eg
<script>
<!--
...... js code here ........
-->
</script>
Break the <script> tags in your string up into substrings. eg
var content = "<sc"+"ript>for(var i = 0 ; i< 10 ; i++) alert('hello')</scr"+"ipt>";
Just don't use <script> tags in this way -- if you're using it to inject JS code into your page, there are almost certainly better ways of doing so. Perhaps you should use a library like require.js?
You probably need a CDATA tag.
<script>
<![CDATA[
function datacheck(content){
var content = "<script>for(var i = 0 ; i< 10 ; i++) alert('hello')</script>";
var text = $(content).text();
alert(text);
}
]]>
</script>
<script>
function datacheck(content){
var content = "<script>for(var i = 0 ; i< 10 ; i++) alert('hello')</script>";
content = '<![CDATA[' + content + ']]>';
var text = ($(content).text()).replace(']]>', '');
alert(text);
}
</script>
This will work correctly.
Thanks tea2code for your answer.
Related
Please help as this is doing my head in. My scripting skills are basic but I learn quickly.
I have HTML code that runs a java script on an external website and displays a table.
In my case it is a football leagues upcoming fixtures. I want to display this table using the code on our clubs website but I only want it to show certain lines of the table, ie only the matches that include the 2 teams from our club which is Watford Ladies FC.
Is there a way to either modify this script to hide certain lines or another script to extract certain lines and populate into another table?
The code I have to work with is:
<div id="lrep509554198" style="width: 350px;">Data loading....click here for Under 15's Division Two<br/><br/>FULL-TIME Home</div>
<script language="javascript" type="text/javascript">
var lrcode = '509554198'
</script>
<script language="Javascript" type="text/javascript" src="http://full-time.thefa.com/client/api/cs1.js"></script>
Unfortunately it requires you to allow unsafe script so it wont generate properly here.
If you copy the code into a HTML file and load into IE, allow scripts, youll see the table.
Many Thanks
Mark
Try adding this script to your html,
<div id="lrep509554198" style="width: 350px;">Data loading....click here for Under 15's Division Two<br/><br/>FULL-TIME Home</div>
<script language="javascript" type="text/javascript">
var lrcode = '509554198'
</script>
<script language="Javascript" type="text/javascript" src="http://full-time.thefa.com/client/api/cs1.js"></script>
<script type="text/javascript">
function load() {
var trElements = document.getElementsByTagName('tr');
var trsWithMatch = new Array();
for (i = 0; i < trElements.length; i++) {
var innerChildr = trElements[i].innerHTML;
if(innerChildr.indexOf('Watford Ladies Wasps') == -1) {
trsWithMatch.push(i);
}
}
if(trsWithMatch.length != 0) {
for (i = 0; i < trsWithMatch.length; i++) {
var indexFor = trsWithMatch[i];
var trMatched = trElements[indexFor];
trMatched.style.display = "none";
}
}
}
window.onload = load;
</script>
Can someone please help me how to loop my function ?
here is my code i just want that my will execute more times than only one.
I have already tried to create my own for loop, but it doesnt work.
Hope someone is so friendly to help me out with my problem and can give little bit explain about how to get rid of my problem with loops.
<html>
<head>
<script type="text/javascript">
for (var i = 1; i<=4; i++){
windows.open(i);
}
function MultiplyLinks(){
window.open("#")
window.open("#")
window.open("#")
}
</script>
<title>Javascript MultiplyLinks Opener</title>
</head>
<body>
<a h ref ="javascript:MultiplyLinks()">Open More links</a>
</body>
</html>
Well guys thanks . I 've got the problem.
i have used windows.open(i);
but it has to be MultiplyLinks(i);
otherwise it will never recognize my function.
i just wanted that my 3 links will executed more times and that works for now.
Thanks for all the replies.
Few issues:
1) you've got a typos
change
windows.open(i)
to
window.open(i)
2) Why are you trying to open i rather than use a url?
suggest you change i to something more meaningful like:
window.open('http://someusr');
3) you have a space in the anchor tag :
change
<a h ref=
to
<a href=
so the final code:
<html>
<head>
<script type="text/javascript">
for (var i = 1; i<=4; i++){
window.open('http://www.stackoverflow.com');
}
function MultiplyLinks(){
window.open("#")
window.open("#")
window.open("#")
}
</script>
<title>Javascript MultiplyLinks Opener</title>
</head>
<body>
Open More links
</body>
</html>
var links = [
'http://jquery.com',
'http://stackoverflow.com/',
'https://bitbucket.org',
'https://github.com'
];
for (var i = 0; i < links.length; i++){
window.open( links[i] );
}
I wrote a code in jquery. I was not running initially, then i checked online jslint for syntax errors. I caught some errors. Now still the code was not working as expected. So i went for firebug. I haven't done a lot of debugging. I am new to it. Here is my code
var j = 2;
var friends = [];
var distance =[];
$(document).ready(function () {
$('#button').click(function () {
if (j < 11) {
$('#friends').append('Friend' + j + ':<input type="text" id="friend' + j + '"/><br/><br/>');
j++;
}
else {
alert("Limit reached");
}
});
$('button').click(function(){
console.log("button clicked");
var a =[];
for(i=1;i<=j;i++)
{
a[i] = $("#friend" + i).val();
}
var gurl = "http://maps.googleapis.com/maps/api/distancematrix/json?"+
"origins=" +
a.join('|').replace(/ /g,'+') +
"&destinations=" +
a.join('|').replace(/ /g,'+') +
"&sensor=false";
jQuery.ajax(
{
type: "GET",
url: gurl,
dataType: 'jsonp'
}).done(function (response)
{
var rows = response.rows;
alert("hello there");
for (var i = 0; i < rows.length; i++)
{
for(var j=0;j<elements.length;j++)
{
distance[i][j] = rows[i].elements[j].distance;
}
}
alert(distance[1][3]);
});
});
});
Now, what it should do is Go to this link and get the data from json file and store it inside the 2 dimensional array distance[][]. Finally after storing all the data, it should display the result of "distance[1][2]" as an alert.
Now i dont know whats wrong in this code and how to find the logical errors using firebug. What should make my work easy ?
ps: heres the HTML file
<!doctype html>
<html>
<head>
<title>TakeMeHome</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/jquery-1.9.0.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.0.custom.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.0.custom.min.js"></script>
</head>
<body>
<center>
<form id="locations">
Your Place:<input id="source" type="text"><br/>
<br/>
<div id="friends">
Friend1:<input id="friend1" type="text"><br/>
<br/>
</div>
<div id="button">
Add!</div>
<br/>
<br/>
<button>GO!</button>
<br/><br/>
<div id="map" style = "width: 500px; height: 500px"><br/>
</form>
</center>
</body>
</html>
Hey here is a working fiddle with your code, and some examples of ways to debug your js :
http://jsfiddle.net/QxP7p/3/
As you see you can do nice stuff like :
console.log("distance : ");
console.log(distance);
Hope it helps
They were a few mistakes as well, couldn't help fixing them
The easiest way to debug is to use firebug and console.log() variables or messages at certain points in your script, so that you can better understand what is going on at various steps of your script. You can see the output in the Console tab of firebug.
You can also add breakpoints and watches from some of the other tabs. For example in the DOM tab you can rightclick on a variable and add a watch, or from the Script tab you can click on a position in your script to set a breakpoint or watch, and it will stop the script at that point and/or show a dump of vars at that point.
i have xml file which contains lots of data. now i want to pick a price with some condition. i set a parameteres in javascript function but it is not giving desire result. i think it can be done through childnode but i didnot aware about that
XML file
<flights updated="2012-03-09T04:38:00.437" type="flights" ob_id="45792117" lastedit="2012-03-09T15:10:01" partner_id="63" activate_date="2012-02-15T00:00:00" page_id="9646" page_pk_id="12597" pos_pk_id="51565" pos="1" module_id="3" pos_name="Flights" product_type_id="4" product_type="flight" headline="Bali" destination="Bali" localised_destination="Denpasar" headline_no_html="Bali" price="199" deals_space_limited="0" deals_sold_out="0" qa_approved="1" tp_available="0" tp_weight="10" partner_eapid="0-25" partner_pid="25" publish_path="\\dubvappdaily01\daily_aus\data\psf\" partner_lang_id="3081" FrTLAs="PER" ToTLAs="DPS" FrDate="2012-04-27T00:00:00" ToDate="2012-05-04T00:00:00" Airline="QZ"/>
<flights updated="2012-03-09T04:38:00.437" type="flights" ob_id="45792117" lastedit="2012-03-09T15:10:01" partner_id="63" activate_date="2012-02-15T00:00:00" page_id="9646" page_pk_id="12597" pos_pk_id="51565" pos="1" module_id="3" pos_name="Flights" product_type_id="4" product_type="flight" headline="Bali" destination="Bali" localised_destination="Denpasar" headline_no_html="Bali" price="199" deals_space_limited="0" deals_sold_out="0" qa_approved="1" tp_available="0" tp_weight="10" partner_eapid="0-25" partner_pid="25" publish_path="\\dubvappdaily01\daily_aus\data\psf\" partner_lang_id="3081" FrTLAs="SYD" ToTLAs="DPS" FrDate="2012-04-27T00:00:00" ToDate="2012-05-04T00:00:00" Airline="QZ"/>
HTML page
<head>
<script type="text/javascript">
function myXml(origin, destination ) {
var x = xmlDoc.getElementsByTagName("flights");
for(i=0; i<x.length; i++) {
if (x[i].getAttribute('FrTLAs') == origin
&& x[i].getAttribute('destination') == destination) {
alert(x[i].getAttribute('price'))
}
}
}
</script>
</head>
<body>
click me
</body>
did u miss this??
xmlDoc=loadXMLDoc("flights.xml");
chk this page
http://www.w3schools.com/dom/prop_element_attributes.asp
the example2 is very clear how to use this
x=xmlDoc.getElementsByTagName("book")[0].attributes;
//here its would be getElementsByTagName("flights") in the loop
//then .attributes on it
// and then this
frtlas=x.getNamedItem("FrTLAs");
desti=x.getNamedItem("destination");
//and your code here
hope this helps
Here is my code that is not working - thanks guys - first question!
<html>
<head>
<script type="text/javascript">
var x =document.getElementById("myElementId").innerHTML;
</script>
</head>
<body>
<div id="myElementId">24</div>
<div>
<script type="text/javascript">
if (x < 25) {
document.write("worked")
}
else {
document.write("didn't work")
}
</script>
Also sorry for the update but do you guys have an idea of how to do this when the div is in an iframe thats not on the same domain? Thanks
This line
var x = document.getElementById("myElementId").innerHTML;
is executed before the element with ID myElementId exists, so JavaScript cannot find it (getElementById returns null).
Put it after the element:
<div id="myElementId">24</div>
<script>
var x = document.getElementById("myElementId").innerHTML;
</script>
The HTML document is processed from top to bottom.
You're running this line:
var x =document.getElementById("myElementId").innerHTML;
before the element exists. Remove the script from the head an put that line right before:
if(x < 25) {
Instead.
In addition to the creating the element first,
I believe innerHtml returns a string value
Try parsing it first;
var value = document.getElementById("myElementId").innerHTML;
var x = parseInt(value,10)
change it to:
<html>
<head>
</head>
<body>
<div id="myElementId">24</div>
<div>
<script type="text/javascript">
var x =document.getElementById("myElementId").innerHTML;
if (x < 25) {
document.write("worked")
}
else {
document.write("didn't work")
}
</script>
the element that you are trying to look for does not even exist on the page when you run the script that is why you have run into this issue..
document.getElementById("myElementId").innerHTML;
You have to use a # with Id and . with class in it
document.getElementById("#myElementId").innerHTML;