I've implemented a simple JQuery.GetJSON method on the click of an <img> tag. The problem is that Internet explorer is throwing exception that methodname is undefined.
Can anybody guide me on this.
HTML:
<div class="itemgenerate">
<img src="/images/generate.png" onclick="sendJSONRequest()" style="cursor: pointer;" />
</div>
<div id="divTarget" class="itemtext">
<p id="pStuff"></p>
</div>
Java Script:
<script language="javascript" type="text/javascript" src="/Scripts/jquery-1.4.1.js" />
<script language="javascript" type="text/javascript">
function sendJSONRequest() {
$.getJSON("/Home/Generate", $('#text1').val(), function (data) {
$('#pStuff').text(data.Stuff);
});
}
</script>
Please if anybody can explain me what is wrong here:
script tags can't be self-closing. You need a closing script tag:
<script language="javascript" type="text/javascript" src="/Scripts/jquery-1.4.1.js"></script>
Your current syntax means the first script tag won't be closed and its content will be treated as part of the first. Since the first tag has a src attribute, its content will be ignored, so your function won't be defined.
It's not the JQuery way to use onclick= in the tag; one of the main points of using JQuery is to allow you to abstract the script code away from the HTML markup. So you would use something like this instead:
$(document).ready() {
$('#myimage').click(sendJSONRequest);
}
Related
I included four .js libraries in my html file as below:
<script type="text/javascript" src="js/three.min.js" />
<script type="text/javascript" src="js/stats.min.js" />
<script type="text/javascript" src="js/TrackballControls.js" />
<script type="text/javascript" src="js/TubeGeometry.js" />
But when I executed it on Safari, it messaged that:
'can't find Variable THREE'
which is in three.min.js.
Then I noticed that actually only stats.min.js has been loaded. Can anybody tell me why please? Many thanks in advance!
You can't close <script> tags with single tag <script />. For the <script> tag is mandatory the open and close tag:
<script src="....."></script>
Why? Because your code:
<script src="...."/>
<script src="...."/>
Is saying that the first script is empty and it doesn't, it has the remote content.
You can see more :
https://www.w3.org/TR/xhtml1/#C_3
Element Minimization and Empty Element Content
Given an empty instance of an element whose content model is not EMPTY (for example, an empty title or paragraph) do not use the minimized form (e.g. use <p> </p> and not <p />).
Here is the code:
<span class='maincaptionsmall'>
Test
</span>
For some reasons of ajax and jquery codes in my page, I can't use HREF as Link, I mean, I can't use something like this following code:
<span class='maincaptionsmall'>Test</span>
So, How can i use jquery to get this css element maincaptionsmall and it will set it to href link ?
Even I can't use <div> too, I should use everything as <span> Please give me an example that how to use jquery to set css element as href link.
Thanks in advance
For getting .maincaptionsmall this DOM using jQuery use below code,
$('.maincaptionsmall')
and for wrapping innerText you can use wrapInner
$('.maincaptionsmall').wrapInner('');
Live Demo
Edit
You need to wrap code inside document.ready and also your document is not properly structured.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() // you are missing this
{
$('.maincaptionsmall').wrapInner('');
});
</script>
</head>
<body>
<span class='maincaptionsmall'>Test</span>
</body>
</html>
I have a script in an HTML page of the following:
<script id="scriptid" type="text/html">
<div id="insidedivid">
... html code ...
</div>
</script>
I am able to get the HTMLScriptElement using $("#scriptid") but I am not able to get the underlying div object with the id "insidedivid". Whats the way to do it?
It's not possible; the browser does not treat HTML content inside of <script> tags as part of the DOM. When you retrieve the content of the <script> tag with $('#idhere').html(), you're getting a string result.
To answer Troy's question, he's most likely including templates in the <head> of his document so he can ultimately render content dynamically on the browser-side. However, if that is the case, the OP should use a different MIME type than text/html. You should use an unknown MIME type such as text/templates--using text/html confuses what the purpose of the content is.
I'm guessing the reason you're trying to reach into the <script> tag and grab a div is because you've built smaller sub-templates within the single <script> tag. Those smaller templates should rather be placed into their own <script></script> tags rather than contained in one large <script></script> tag pair.
So, instead of:
<script type="text/template" id="big_template">
<div id="sub_template_1">
<span>hello world 1!</span>
</div>
<div id="sub_template_2">
<span>hello world 2!</span>
</div>
</script>
Do this:
<script type="text/template" id="template_1">
<span>hello world 1!</span>
</script>
<script type="text/template" id="template_2">
<span>hello world 2!</span>
</script>
I think it's perfectly valid to have a div inside a script tag (or at
least useful), if a div makes sense to the TYPE you defined for the
script. For example, John Resig uses a script tag with type "text/
html" in his micro-templating solution:
http://ejohn.org/blog/javascript-micro-templating/
In this instance though (and in reply to the original author) you add
an ID to the SCRIPT tag, and refer to that (I don't see why it
wouldn't work with that facebook type instead of html - but you'd
probably want to test it in a few different browsers ;). For the
example you gave, you can get a reference to the DIV by doing:
<script id="scriptid" type="text/html">
<div id="insidedivid">
... html code ...
</div>
</script>
$(function(){
alert($( $( '#scriptid' ).html() ).text() ); //alerts " ... html code ..."
});
The "trick" is to get the HTML of the script tag and turn in into DOM
elements with jQuery - but remember, because you are passing all the
HTML into the jQUery function then you are immediately selecting ALL
of the top level elements. In this case, there is just one DIV - so
you are just selecting that.
Your HTML is invalid. HTML Validator.
If you want to have HTML you can get just like that, use something like this:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<script type="text/javascript" src="//code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var msg1 = $('message1');
// Execute code here
});
</script>
</head>
<body>
<div id="content">Content</div>
<div id="hidden" style="display: none">
<div id="message1">Message 1</div>
<div id="message2">Message 2</div>
</div>
</body>
</html>
If you are making a templating system, you may want to use AJAX instead.
The relevant side of the code has been included. The problems is my script wont call its child script.
<script language="javascript" type="text/javascript">
if (document.documentElement.clientwidth < 640) {
document.getElementById('other').innerHTML = '<script type="text/javascript" src="http://shoutcast.mixstream.net/js/external/flash/metalradio.mcast.com:44536:1:000000:f fffff:ffffff:::1"> <\/scr' + 'ipt>';
};
</script>
<body>
<div id = "other">
<!--Nothing happens using above script-->
</div>
<div id ="another">
<!--displays flash player -->
<script type="text/javascript" src="http://shoutcast.mixstream.net/js/external/flash/metalradio.mcast.com:44536:1:000000:f fffff:ffffff:::1"></script>
</div>
<body>
Am I missing some escape character or something? I have everything.
im not sure that is the proper way to add elements to the DOM in javascript, you will have to use something like createElement
http://www.w3schools.com/dom/met_document_createelement.asp
in jQuery it is a bit more simple since .html() will make the element for you
edit:
here is pretty much what you are trying to do i believe
http://javascript.about.com/library/bladdjs.htm
Disregard this question: I've simply confused <script src="..."></script> tag and <script> [some functions] </scipt> tags.
I have this function
function OnLoad()
{
ShowHideConfirmAnswers();
return true;
}
triggered by onload event:
<body onload=OnLoad()>
It works fine until I add src="jquery-1.4.2.js" to the script element. From this moment I get "OnLoad is not defined" error, and the same happens to every other javascript function.
It works fine until I add src="jquery-1.4.2.js" to the script element.
This line makes me think you're using a script element like this:
<script type="text/javascript">
//... all code here
</script>
And then you're adding the src attribute to the element:
<script type="text/javascript" src="jquery-1.4.2.js">
//... all code here
</script>
Which won't work. Once you add the src attribute to a <script> element, all data contained within the script element will be completely ignored by the browser. You have to use separate script tags for external and inline javascript:
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
//... all code here
</script>
What happens if you change the OnLoad call to this script block ?
$(document).ready(function(){
ShowHideConfirmAnswers();
}
And just remove the OnLoad="" block from the Html.