i am having a bit of a problem here and i don't even know if it is possible at all, here's my dilema:
I have this script code:
<script id='script1' src='http://link.to.js'></script>
While using firebug, i can clearly see that the script has bee loaded between those tags, like this
<script id='script1' src='http://link.to.js'>
function something(){
alert('hi');}
</script>
What i want to do is, by means of another script, get the content between those tags, something like
var x = document.getElementById('script1').innerHtml;
document.getElementById('somedividhere').innerHtml = x;
That works perfectly WHEN the code is already part of the html, not when its loaded from src.
I have been looking for this for hours and i have not found any hint, hope someone can help me on this.
I think Firebug only shows you that for convenience sake. If you want to get the code from the script, you'll have to use AJAX.
You could do something like this:
function ajaxFunction(){
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var scriptcontent = ajaxRequest.responseText;
//Do something with the content
}
}
ajaxRequest.open("GET", document.getElementById('script1').src, true);
ajaxRequest.send(null);
}
Just a few notes:
This will only work for scripts
located on your site due to the
same origin
policy.
I took the ajax code from this
site
and modified it.
This would be a lot
easier with
jQuery
Related
I have a JSP page that refreshes every 5 seconds Using ajax.
The page i am calling having javascript that is not getting refreshed .
Please tell me how to achieve that.
Below is the code i am using to refresh that page .
refresh is the name of the div where i am displaying the data.
<script type="text/javascript">
function AutoRefresh() {
var xmlHttp;
try {
xmlHttp = new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari
} catch (e) {
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("No AJAX");
return false;
}
}
}
xmlHttp.onreadystatechange = function () {
//alert("hi");
if (xmlHttp.readyState == 4) {
document.getElementById('TotalRoutes').innerHTML = xmlHttp.responseText;
setTimeout('AutoRefresh()', 10 * 1000); // JavaScript function calls AutoRefresh() every 3 seconds
}
}
xmlHttp.open("GET", "QAGENIE.jsp", true);
xmlHttp.send(null);
}
</script>
Here js files in the QAGENIE.jsp page is not getting refreshed on the ajax call
I think you are not calling AutoRefresh function first time. so nothing will be execute. and if you are calling from outside of your code which you gave here, then please post whole web page code in question.
setTimeout(AutoRefresh,5000); for every 5 seconds
if (xmlhttp.readyState==4 && xmlhttp.status==200)
window.onload = AutoRefresh();
When you call document.getElementById('TotalRoutes').innerHTML=xmlHttp.responseText;, script tags inside the "QAGENIE.jsp" are not executed, that's why:
js files in the QAGENIE.jsp page is not getting refreshed.
Since the question is tagged with jQuery, you could try $.ajax and $.html. Like this:
function AutoRefresh(){
$.ajax({
url:"QAGENIE.jsp"
})
.done(function(response){
$("#TotalRoutes").html(response);
setTimeout(AutoRefresh,10*1000);
});
}
AutoRefresh(); //call this to trigger the first call
$.html automatically parses and executes script tags in the response HTML.
There is 1 more thing to notice is browser cache, if your js files are cacheable (as it usually does by the cache response header from server), the js files may be served from the cached. If you need to always refresh with new js files, ensure your js files are not returned with a cache header, or try to append a random string at the end of the script tags. Like this:
<script src="yourFile.js?[randomstring]"></script>
I'm trying to make my first AJAX web tool. Javascript is my kryptonite though. I'm not sure where I've gone wrong, but any help would be great!
function MyFunc() {
var xmlhttp;
var type = getElementById("type");
var agency = getElementById("agency");
var location = document.getElementById("location");
location = location.options[location.selectedIndex].value;
type = type.checked;
agency = agency.checked;
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","view.php?location=" + location + "&type=" + type + "&agency=" + agency,true);
xmlhttp.send();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("list").innerHTML = xmlhttp.responseText;
}
}
// setTimeout(refresh, 300000);
}
You can see the "live" site at tol1dc.homedns.org On the "Job Searcher" page (http://tol1dc.homedns.org/modules/navigator/navto.php?unique_ID=3)
Now I'm really clueless about Javascript. I don't know if this should be in the head of the document, or if it's ok in the body?
Also you can see the "setTimeout" I'm trying to get the page to auto reload the table every 5 minutes.
I don't really know what problem I'm getting either, just that it's not responding. I can't see a connect attempt on my server logs, I couldn't get the button to even do a document.write("hello world");
Your help would be greatly appreciated if you can get me on the right track!
Thanks
A syntax error is occurring on line 38.
Do you mean?
var type = document.getElementById("type");
var agency = document.getElementById("agency");
Noting the variable assignment and calling the getElementById function of the document object.
The location of the code in the markup is fine, but it might be cleaner to either place it at the bottom of the body (last thing before ) or in the head. Also, wrapping it in window's on load event:
window.addEventListener('load', function() {
// Grab input and AJAX.
}
I'm counting clicks on a link by calling a page with AJAX but in Firefox, apparently because the page called is never actually loaded, for some reason Firefox never calls it. It seems like the link is clicked and then Firefox makes the AJAX call but somehow because the page changes to the actual link in the href then the AJAX call is never actually sent (appears red in firebug and no sign of it in Fiddler). It works fine in IE & Chrome and if I change the link to target="_new" then it will work in Firefox. Am I making some sort of stupid mistake?
<HTML>
<HEAD>
<script type="text/javascript">
function adtrk(cde){
var ajaxRequest; // The variable that makes Ajax possible!
var r=Math.random();
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaresp = ajaxRequest.responseText;
}
}
ajaxRequest.open("GET", "/atr.php?cde=" + cde + "&r=" + r, true);
ajaxRequest.send(null);
}
</script>
</HEAD>
<BODY>
<a onclick="adtrk('zip1'); return true;" href="http://www.google.com"><img src="/images/img.jpg"></a>
</BODY>
</HTML>
When you load a new page any open AJAX requests will be cancelled (by the browser). Your server probably never sees the click count request.
Either always open links in a new window or use some other mechanism for counting clicks, like a proxy/redirect.
The page changes before the ajax request is done. You should wait for you ajax request to end before changing page by running it synchronously :
ajaxRequest.open("GET", "/atr.php?cde=" + cde + "&r=" + r, false);
I am using ajax in my web page.I want to access a variable used in java script function (in head section of html) by a jsp page.Jsp page is retrieving data from database using that variable.
How can i do that?
Please help me.
if you need the call data you will set & or have a var that's empty before hand. what I realized is that ajax localizes even declared new var's the best way i've found is to append to a existing. Now with the new string and or literal array / object
<script>
function s(e){
alert(e);
}
var a = '';
//Jquery Version
$.get('test.php',function(data){
a += data;
s(a);
});
// Javascript Version
function ajaxFunction(){
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
a += ajaxRequest.responseText;
s(a);
}
}
ajaxRequest.open("GET", "test.php" , true);
ajaxRequest.send(null);
}
$(function(){
ajaxFunction();
});
//-->
</script>
You can do it by adding new jsp file, flow will be like this :
Create new jsp file like databaseOperation.jsp which will contain your code for retrieving database record.
Through javascript function, call databaseOperation.jsp file and pass your javascript varible.
Access this variable in your jsp file and retrieve the required code from DB.
You can simply do this by making a ajax call and passing that variable with ajax request
<script>
var id=1;
$.get("yourpage?id="+id,function(){
//get this id serverside using `get`
})
</script>
You have to change your approach to get this done. We cannot set javascript variable value to the the database code which is written in the jsp file. This is because, the database code will be rendered from the serverside and only the html will be sent to the client.
You can achieve this by having a Controller(Servlet) with this database code with asynchronous support and in your jsp file, call this controller through javascript ajax and manipulate the HTML DOM for your requirement.
I'm attempting to use AJAX to insert data into a database, but am unable to connect to the .php file on the server end. I'm thinking this is due to the fact that this is all run on Wordpress, so my normal url path to the .php file might not be correct.
Here is my setup:
Template file:
$('#newsletter-register').submit(function(){
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
alert(ajaxRequest.responseText);
}
}
ajaxRequest.open("GET", "register_newsletter.php", true);
ajaxRequest.send(null);
});
'#newsletter-register' is form that the user will use to submit his/her information. The alert when the ajaxRequest is at readyState 4 is thrown correctly, but will an empty value.
My php is a simple echo returning a string to signal that the connection is correct (presently I'm just trying to see if the files are correctly calling eachother).
I'm thinking it must be the url path to register_newsletter.php as I've tried placing the code within the template file, outside, etc.
My javascript file is located in /theme/assets/js/code.js where as my template files (including the register_newsletter.php file) in /theme.
Any ideas?
I had this type of issue yesterday. In my situation the page would only be accessed from
www.site.com/aFolder/
The script was stored in my
'/wp-content/themes/themeName/processForm.php'
folder.
and the URL I used was:
../wp-content/themes/themeName/processForm.php
My JS was simply in the head of the main header.php file, but note that the URL I had to use was relative to the URL the page the script was accessed from.
Does that shed any light on things?
EDIT:
As troubleshooting steps, try ensuring you can access your php file from it's absolute URL, and have a look in firebug to see what link is being called when you fire the ajax request to see if it matches up with what you expect.