|
JavaScript - Ajax->ad Script->div
Hello,
I am using javascript/ajax to get an adsense script from my server. The script is returned from the server inside <script> tags so it isn't quite as easy as throwing the script into the div after an eval(). I could parse out the <script> tags but it seems to me that there is an easier way to place this code into the DIV without having to do this. Any suggestions? Similar TutorialsI am new to Java/AJAX and I am trying to create a script that will change content of a div. My scenario I am using is an index page with the list.php script included in the div I want content changed in. The list.php script will pull 8 newest titles from mysql and list them in the div. When you click one of the titles it will redirect you to a new page created by story.php. I would like this to be contained inside the div I have currently have the list.php script in. I have looked at several tutorials on AJAX to do this, but they always call a static html page. Since I am not using a static html page I do not think this solution would work for me. How my list.php script works is as follows: PHP Code: // generate and execute query $query = "SELECT id, title, timestamp FROM news ORDER BY timestamp DESC LIMIT 0, 8"; $result = mysql_query($query) or die ("Error in query: $query. " . mysql_error()); // if records present if (mysql_num_rows($result) > 0) { // iterate through resultset // print news titles while($row = mysql_fetch_object($result)) { ?> <b><font size="+2"><a href="story.php?id=<? echo $row->id; ?>"><? echo $row->title; ?></a></b></font> <br> <font size="-2"><center><? echo formatDate($row->timestamp); ?></center></font> <p> <? } } // if no records present // display message else { ?> <font size="-1">No news is bad news</font> <? } How my story.php script works is as follows: PHP Code: // generate and execute query $query = "SELECT title, content, contact, timestamp FROM news WHERE id = '$id'"; $result = mysql_query($query) or die ("Error in query: $query. " . mysql_error()); // get resultset as object $row = mysql_fetch_object($result); // Show me the news if ($row) { ?> <p> <b><? echo $row->title; ?></b> <p> <font size="-1"><? echo nl2br($row->content); ?></font> <p> <font size="-2">Posted on <? echo formatDate($row->timestamp); ?>. By <? echo $row->contact; ?></font> <? } else { ?> <p> <font size="-1">That news post could is not found.</font> <? } If you need more information for this I will provide whatever you need. Hi, I am hoping I just need to be pointed in the right direction with this. I have Page1. When Page1 body onloads it uses Ajax to call PartA Within PartA I have a message board so members can write messages which will be sent to my database in PartA[1] and immediately posted for view on to PartA[2]. As I want to have my request to the server updating regularly I want to have PartA[2] on a timed loop to refresh - I do not need the content of PartA[1] to refresh. So the order of events would look like this: Page1 | onload call | v PartA / \ V V PartA[1] PartA[2] (loads once) (constantly refreshes) What I am not sure about is that I have <body> and <head> attributes in Page1 only. I have already used my body onload to call PartA (and can't use it to call PartA[2] before PartA has loaded anyway). I do not want the user to have to click a button or do anything to call up PartA[2]. So my question is how would I get PartA[2] to automatically load within PartA? I hope I have made this clear, but if I haven't let me know and I will try again. Hi All, I have two scripts which I want to try and integrate. I am using a nice gallery script to show thumbnails which are appended to a an image wrapper which on click of the thumbnail shows the larger image in the image wrapper, I am trying to implement cloud zoom which is a plugin which uses image srcs to then point to an anchor href to show another larger zoom image either in the same place.. which is what I am trying to do or in another div beside. I have had to set me img srcs up in a certain way to easily enter some product details. and I need to try an manipulate the code to make it work to suit my file layout. I am using a var= images [ with a series of file locations and info such as below { src: 'romanticabride/thumbs/tn_Shauna.jpg', srcBig: 'romanticabride/images/Shauna.jpg', title: 'Shauna', longDescription: '<b><H1>Shauna</H1></b><br><b>Romantica Of Devon <br><br><h2>Sizes Available:</h2><br> 6 - 32.<b><br><b><br><b><b><b><H2>Colours Available:</h2><b><br>Various<br>Please Enquire Below<br><br><br><br><a href="mailto:tracy@cherishbridal.co.uk?subject=Web Enquiry Regarding Romantica Shauna Bridal Gown"class="enquiry rose glow" >Click To Enquire About This Item </a>' }, what I need is for cloud zoom to work when the main image wrapper is hovered over which means it will need to add a class or when the whichever srcBig: is hovered over it gets wrapped by href to make the script work . one of my pages is http://www.cherishbridal.co.uk/romaticabride.html the cloud zoom script is at http://www.professorcloud.com/mainsite/cloud-zoom.htm.. I am happy to share a jsfiddle with someone or explain further or post some code. Thank you in advance Hello everyone. I was working on a ajax function and I can't seem to figure out what I'm doing wrong here. I'm kinda new with the prototype method I was wondering if I could get some help figuring out what I'm doing wrong here exactly and how I can fix this. Any help on this would be wonderful. Thanks, Jon W Code: function createAjax() {
if(!this.http && window.ActiveXObject) {
try {
this.http = new ActiveXObject("Msxml2.XMLHTTP" || "Microsoft.XMLHTTP");
}
catch(e1) {
this.http = false;
}
}
if(!this.http && window.XMLHttpRequest) {
try {
this.http = new XMLHttpRequest();
}
catch(e2) {
alert("Sorry we was unable to make a request between your browser.");
}
}
}
createAjax.prototype.request = function(url) {
var rmd = Math.random();
this.http.open('get', url+"&rmd="+rmd, true);
this.http.send(null);
this.http.onreadystatechange = this.responseHandler;
}
createAjax.prototype.responseHandler = function(obj) {
if(this.http.readyState == 4) {
document.getElementById(obj).innerHTML = this.responseText;
}
}
function ajax(url, obj) {
a = new createAjax();
a.request(url);
a.responseHandler(obj);
}
var doAjax = new ajax('ajax.php?name=jon','content');
I need some help with some javascript I am trying to put on an IF forum. http://s7.invisionfree.com/AJAXTEST/index.php At the very top, you will see a link called "on this link". It is an ajax code. If you click on it, a blank alert box comes up. However, if you go he http://commx.info/will/test.html and click on the same link, the alert box has the text I am looking for. It uses the exact same code, so I can't figure out why it works on a plain page and not on an IF forum. Does anyone have any ideas? The code is Code: <html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"><script>
function callback(serverData, serverStatus) {
alert(serverData);
}
function ajaxRequest() {
var AJAX = null;
if (window.XMLHttpRequest) {
AJAX=new XMLHttpRequest();
} else {
AJAX=new ActiveXObject("Microsoft.XMLHTTP");
}
if (AJAX==null) {
alert("Your browser doesn't support AJAX.");
return false
}
AJAX.onreadystatechange = function() {
if (AJAX.readyState==4 || AJAX.readyState=="complete") {
callback(AJAX.responseText, AJAX.status);
}
}
AJAX.open("GET",'http://commx.info/accounts/codes/shout/ipb13/getChatData.php?lastID=0', true);
AJAX.send(null);
}
</script>
</head><body><a href="javascript:ajaxRequest()">on this link</a></body></html>
hi; This is my first post and am abit stuck. I used JQuery AJAX to get data from a different page and show it in my div. This all works fine but now i want the page collected by AJAX to execute a Javascript function which is in the page which request the AJAX page. I have this so far but its not working. This is in the AJAX-ed page. Code: <a href="#" onClick="change_postcode(prompt('Please Enter Your Postcode', 'SW10')");
)">SW10</a>
And the page which requested the AJAX page. Code: <script type="text/javascript">
function change_postcode(postcode){
$('#view8').html('<p><img src="http://www.MySite.com/images/loading.gif"/><br />Loading! Please Wait...</p>');
$('#view8').load("http://www.mywebsite.com/include.php?inc=Events&when=&postcode="+postcode);
}</script>
I though about using top but that didn't work. Code: <a href="#" onClick="top.change_postcode(prompt('Please Enter Your Postcode', 'SW10')");
)">SW10</a>
How can i get my AJAX page to execute a Javascript function which is in the page which contains the the AJAX page. Thankyou all for reading my post Paul P.S Am very sorry for my way with words. i have a html wich i am working on .. Code: <html>
<head>
<script language="Javascript">
function xmlhttpPost(strURL) {
var xmlHttpReq = false;
var self = this;
// Mozilla/Safari
if (window.XMLHttpRequest) {
self.xmlHttpReq = new XMLHttpRequest();
}
// IE
else if (window.ActiveXObject) {
self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
self.xmlHttpReq.open('POST', strURL, true);
self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
self.xmlHttpReq.onreadystatechange = function() {
if (self.xmlHttpReq.readyState == 4) {
updatepage(self.xmlHttpReq.responseText);
}
}
self.xmlHttpReq.send(getquerystring());
}
function getquerystring() {
var form = document.forms['f1'];
var username = form.username.value;
qstr = 'u=' + escape(username);
return qstr;
}
function updatepage(str){
var s = str;
var a = s.split(',');
var a1 = a[0];
var a1_1 = a[1];
var a2 = a[2];
var a2_1 = a[3];
var a3 = a[4];
var a3_1 = a[5];
var a4 = a[6];
var a4_1 = a[7];
var a5 = a[8];
var a5_1 = a[9];
var a6 = a[10];
var a6_1 = a[11];
var a7 = a[12];
var a7_1 = a[13];
var a8 = a[14];
var a8_1 = a[15];
var a9 = a[16];
var a9_1 = a[17];
var a0 = a[18];
var a0_1 = a[19];
var form = document.forms['f1'];
form.result1.value = a1;
form.result1_1.value = a1_1;
form.result2.value = a2;
form.result2_1.value = a2_1;
form.result3.value = a3;
form.result3_1.value = a3_1;
form.result4.value = a4;
form.result4_1.value = a4_1;
form.result5.value = a5;
form.result5_1.value = a5_1;
form.result6.value = a6;
form.result6_1.value = a6_1;
form.result7.value = a7;
form.result7_1.value = a7_1;
form.result8.value = a8;
form.result8_1.value = a8_1;
form.result9.value = a9;
form.result9_1.value = a9_1;
form.result0.value = a0;
form.result0_1.value = a0_1;
}
</script>
</head>
<body>
<form name="f1">
<p>Username: <input name="username" type="text" id="username">
<p>Password: <input name="password" type="text" id="password">
<input value="Go" type="button" onclick='JavaScript:xmlhttpPost("/cgi-bin/3sms/smscontacts.pl")'></p>
<input name="result1" type="text" id="result1" size="18" maxlength="25">
<input name="result1_1" type="text" id="result1_1" size="11" maxlength="11"><p>
<input name="result2" type="text" id="result2" size="18" maxlength="25">
<input name="result2_1" type="text" id="result2_1" size="11" maxlength="11"><p>
<input name="result3" type="text" id="result3" size="18" maxlength="25">
<input name="result3_1" type="text" id="result3_1" size="11" maxlength="11"><p>
<input name="result4" type="text" id="result4" size="18" maxlength="25">
<input name="result4_1" type="text" id="result4_1" size="11" maxlength="11"><p>
<input name="result5" type="text" id="result5" size="18" maxlength="25">
<input name="result5_1" type="text" id="result5_1" size="11" maxlength="11"><p>
<input name="result6" type="text" id="result6" size="18" maxlength="25">
<input name="result6_1" type="text" id="result6_1" size="11" maxlength="11"><p>
<input name="result7" type="text" id="result7" size="18" maxlength="25">
<input name="result7_1" type="text" id="result7_1" size="11" maxlength="11"><p>
<input name="result8" type="text" id="result8" size="18" maxlength="25">
<input name="result8_1" type="text" id="result8_1" size="11" maxlength="11"><p>
<input name="result9" type="text" id="result9" size="18" maxlength="25">
<input name="result9_1" type="text" id="result9_1" size="11" maxlength="11"><p>
<input name="result0" type="text" id="result0" size="18" maxlength="25">
<input name="result0_1" type="text" id="result0_1" size="11" maxlength="11"><p>
</div>
</form>
</body>
</html>
now my problem is the password is not sent to the perl script i basicly modified an ajax from another form to do this form. when the "go" is pressed the username is sent and a string is recived and devided into the form inputs.. all i need to do now is send the password along with the username the username variable is "u" i would like the password variable to be "p" any ideas I was wondering if someone would have the time to talk and help explain some Ajax things to me... slowly. I'm trying to make my web sites more dynamic. Like I just need someone I can bounce ideas off and they can walk me through step by step on how to do them. Thanks Shelby does any expert know how to pass parameters in the <script ..> tag? for instance; Code: <script type="text/javascript" src="script.js ?param1=val1¶m2=val2&etc "> in the javascript script.js, how would we read the params after the question mark? for example, google this; google shopping cart /v2_2/cart.js I have a script that works in seamonkey(my html editor) but when I use it in IE8 it says errors happen. Here's the code (the first line is on line 7 of the html file): Code: <script type="text/javascript">
function enlarge(imageNum)
{
var numToString = "";
if(parseInt(imageNum) < 10){
numToString = "0" + imageNum;
}
else
{
numToString = imageNum + "";
}
window.open("images/LgScreenshot"+numToString+".jpg","Screenshot "+imageNum,"status=0,height=675,width=900,resizable=0");
}
</script>
And the errors: Webpage error details User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; GTB0.0; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.5.30729; InfoPath.3; .NET CLR 3.0.30729) Timestamp: Wed, 10 Feb 2010 14:58:16 UTC Message: Object expected Line: 150 Char: 1 Code: 0 URI: http://samssc2site.co.cc/Features.html Message: Invalid argument. Line: 18 Char: 1 Code: 0 URI: http://samssc2site.co.cc/Features.html Hello, I am looking to created a login system where a user will take his/her photo via webcam in browser and that picture taken should be related to that user; under a specific timestamp, for example, if my user name is username and I logged In, the system will note my time and by taking a photo (either auto or by clicking a button in browser) and will store that picture in a folder under a unique name related to that customer and the time he logged in, I am stuck how to connect web cam to browser (desirable ajax etc not flash) and then photo taken and stored in a folder with unique name etc anybody did something like this before? help appreciated. I have been successfully using the following "myAjax" function to load text file information from the server. Code: // ajax.js
// From: http://www.webdeveloper.com/forum/showthread.php?t=245681
// and: http://www.webdeveloper.com/forum/showthread.php?t=245694
// From: http://codingforums.com/showthread.php?t=143412&highlight=file
var myAjax = {
TextInformation : '',
myAjaxIO : function (U, V) { //LA MOD String Version. A tiny ajax library. by, DanDavis
var X = !window.XMLHttpRequest
? new ActiveXObject('Microsoft.XMLHTTP')
: new XMLHttpRequest();
X.open(V ? 'PUT' : 'GET', U, false );
X.setRequestHeader('Content-Type', 'text/html');
X.send(V ? V : '');
return X.responseText;
},
doLoad : function (filename) { this.TextInformation = this.myAjaxIO(filename); },
getTextInfo : function () { // alert(this.TextInformation); // for testing purposes
return this.TextInformation }
}
/* example
function Load_and_Show(filename) {
myAjax.doLoad(filename);
document.getElementById('TArea').value=myAjax.getTextInfo();
}
*/
After I load the text file, I store the text "records" into an array by doing something like this: Code: var Recs = myAjax.getTextInfo().split('}');
Where the '}' character is my record delimiter. It could just as easily be '\n' or '\r' or the like. Again, I am not having any problems doing it this way as it suits my current needs. Now the question(s) 1. Does the call to read the text data from the external file always read in the entire contents or can I read one line or delimited record at a time and store it to the array directly without the text storage? 2. If the text is always read completely (my suspicion), can I safely delete the "TextInformation" after I convert to the array format? Is there any memory penalty for doing it this way as the text information can be somewhat lengthly and I don't like the idea of having doubled memory usage when I only need the information in array format anyway? This is the idea I am considering, but I don't know if there are drawback to this method of if there is a better way to accomplish the task. Code: // ajax.js
// From: http://www.webdeveloper.com/forum/showthread.php?t=245681
// and: http://www.webdeveloper.com/forum/showthread.php?t=245694
// From: http://codingforums.com/showthread.php?t=143412&highlight=file
var myAjax = {
TextInformation : '',
TextArrayInfo : [],
myAjaxIO : function (U, V) { //LA MOD String Version. A tiny ajax library. by, DanDavis
var X = !window.XMLHttpRequest
? new ActiveXObject('Microsoft.XMLHTTP')
: new XMLHttpRequest();
X.open(V ? 'PUT' : 'GET', U, false );
X.setRequestHeader('Content-Type', 'text/html');
X.send(V ? V : '');
return X.responseText;
},
doLoad : function (filename) { this.TextInformation = this.myAjaxIO(filename); },
getTextInfo : function () { // alert(this.TextInformation); // for testing purposes
return this.TextInformation },
doArrayConvert : function() {
TextArrayInfo = this.TextInformation.split('}'); // assumes '}' is separator character
this.TextInformation = '';
},
getTextArrayLength : function() {
return this.TextArrayInfo.length;
},
getTextArrayAt : function(ptr) {
return this.TextArrayInfo[ptr];
}
}
/* example
function Load_and_Show(filename) {
myAjax.doLoad(filename);
document.getElementById('TArea').value=myAjax.getTextInfo();
}
function Convert_to_Array() {
myAjax.doArrayConvert();
}
var rec = myAjax.getTextArrayAt(0); // gets record element '0'
// or
rec = myAjax.getTextArrayAt(myAjax.getTextArrayLength()-1); // get last element
*/
hello all, I am trying to see if the w3schools example works on my site with a collapsible panel. here is what I have: Code: <script type="text/javascript">
function getXMLcontent() {
if (window.XMLHttpRequest)
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
document.getElementById('CollapsiblePanel1').style.visibility = 'visible';
document.getElementById("CollapsiblePanelContent").innerHTML=xmlhttp.responseText;
xmlhttp.open("GET","showfunction.php?fname=" + document.getElementById('functions').value, true);
xmlhttp.send();
alert("showfunction.php?fname=" + document.getElementById('functions').value);
}
</script>
the panel shows up as a thin grey line because no text is being thrown into it from the 'responsetext' property. I don't really know anything about what I'm doing. Just trying to copy and paste what the website example is. is there anything else I should know about what I'm doing, that would at least tell me why I'm not getting the data back out of the server like I should be? the 'functions' element on the page is a dropdown box, but it is not inside of a form tag. does that make a difference since I am using 'GET'?? thanks! Hi, I have an ajax script that I would like to use to retrieve a password hint from a database. Both the ajax script and the php retrieval script are stored on the same domain (we'll call it domain1.com), but the ajax script runs on another domain (domain2.com). All the scripts are working fine, individually, but when I try to integrate them, I'm getting a ready state of 4, but an HTTP status of 0. I've traced the code flow and the retrieval script is being called by the ajax script OK and it's echoing all the right stuff, but it's just not getting back to calling ajax routine. I've read that an ajax routine can only call a script that resides on the same domain that it runs on. Is this correct and, if so, does anyone know of a work around, because I really need to be able to store the ajax script on domain1 and run it on domain2? If not, then can anyone suggest why I'm getting an HTTP status of 0, when all the individual components are working fine? Debbie Dear Forum Guys, I have a problem regarding how to recieve multiple response texts from an Ajax code. That is: I want to recieve multiple "responseText"s from the ajax code so that i can populate my form in an asp page. I would also like to know how i can send multiple asp or javascipt Variables inside the responseText of an Ajax code, so that when ajax does responseText i could use the variables just sent from another page (i.e the variables are recieved by the same ajax code after doing responseText) to do some specific tasks. Thank you. Code: var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""
function ThinkHabbo(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}
function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}
function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}
Is there any chance i can add a refresh timer to this? Hi all, I am using ajax to retreive the content of an xml file on my server. I am using the xmlhttp.responseXML.documentElement to validate that the data is correct. The problem starts when I want to copy this data into a different variable and to access it later. I defined a global variable, and in the response function (which is called after the ajax was served) I am duplicating this node into a different one. the problem is that when I try later to access this variable from functions within the same file it allways null. why is it happenning? is it a scope issue or something else? Code:
var xml_config_dom;
function loadXMLDoc(url)
{
xmlhttp=null;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE5, IE6
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=onResponse;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
function onResponse()
{
if(xmlhttp.readyState!=4) return;
if(xmlhttp.status!=200)
{
alert("Problem retrieving XML data");
return;
}
xml_config_dom=xmlhttp.responseXML.documentElement.cloneNode(true)
}
http://sorgalla.com/projects/jcarousel/ I would like to use this jcarousel. I dont use AJAX, I just want to set it up with script in my head and html on my website. Is this possible or do I have ot use AJAX? I am not familiar with it at all.. I completed the steps it said. I put the folder in my directory. I added the script to my head code, as well as the other one. I then also added the other two scripts in my html where I would like them to be. It's not showing up so I know I am missing steps or not doing it correctly Help anyone? THANK YOU!!! i have found a very simple ajaxexample on the internet, when this works i can adept it to my site, but it doesn't work :-( anybody sees why? Code: <div align="center" id="timeval">--:--:--</div>
<button id="stop">Stop</button>
<script src="jquery.js"></script>
<script>
$(document).ready(function()
{
//ajaxTime.php is called every second to get time from server
var refreshId = setInterval(function()
{
$('#timeval').load('ajaxTime.php?randval='+ Math.random());
}, 1000);
//stop the clock when this button is clicked
$("#stop").click(function()
{
clearInterval(refreshId);
});
});
</script>
and the phpscript:
ajaxtime.php
<?php
echo date("g:i:s A");
?>
|
|||||||