JavaScript - Is It Possible (ajax, Php, Html)
First post here and its a "is this possible to do question?"
html code: Move a div into an other div. Same thing as u move a file on the desktop into an other file. Im going to try to do this in this way html <- heres the divs, file divs and folder divs, all of them got uniqe ids java <- making it possible to move the divs, and handling what div i move where ajax <- calling a php script with the divid i moved and to what div i moved it to I know nothing about ajax and im kinda bad at javascript to, know how to move a div, and how to see what div i moved it to but nothing more. My questions is as follows, is it possible to do this? anyone know where to start? or got any good links i can watch, learn ajax from scratch or try with some Opensourceproject and learn from them? Thanks all for ur time. Similar TutorialsHi, I have what is probably a stupid issue. I have a select box that is being filled by an an ajax request to a SQL DB and returns the results in a select box. That part works fine. The second part of the request is that i also want my inline html to change results if i change my selection. that part is not working. I tried to put my onchange event into the option in php, but that doesn't return anything either. $display_string .= "<option onchange=\"getSoftwareUpdate();\"> $row[Software] </option>"; clear as mud? Any help would be much appreciated! //this section gets the results from the php script and returns back the values in the db. <script language="javascript" type="text/javascript"> <!-- //Browser Support Code function getSoftwareFunction() { 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("Please contact Trinity Help Desk at ext. 88817"); return false; } } } // Create a function that will receive data sent from the server ajaxRequest.onreadystatechange = function(){ if(ajaxRequest.readyState == 4){ var ajaxDisplay = document.getElementById('ajaxDiv'); ajaxDisplay.innerHTML = ajaxRequest.responseText; } } var SoftwareName = document.getElementById('results').value; var ManufacturerName = document.getElementById('results').value; var VersionName = document.getElementById('results').value; var InstallLocationName = document.getElementById('results').value; var queryString = "?Software=" + SoftwareName + "&Manufacturer=" + ManufacturerName + "&Version=" + VersionName; + "&InstallLocation=" + InstallLocationName ajaxRequest.open("POST", "getSoftwareName.php" + queryString, true); ajaxRequest.send(null); } </script> //this next part i want to return the results based on an onchange event in the select option <script language="javascript" type="text/javascript"> <!-- //Browser Support Code function getSoftwareUpdate() { var ajaxRequest1; // added try{ // Opera 8.0+, Firefox, Safari ajaxRequest1 = new XMLHttpRequest(); } catch (e){ // Internet Explorer Browsers try{ ajaxRequest1 = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try{ ajaxRequest1 = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e){ // Something went wrong alert("Please contact Trinity Help Desk at ext. 88817"); return false; } } } //added // Create a function that will receive data sent from the server ajaxRequest1.onreadystatechange = function(){ if(ajaxRequest1.readyState == 4){ var ajaxDisplay1 = document.getElementById('ajaxDiv1'); ajaxDisplay1.innerHTML = ajaxRequest1.responseText; } } //end add var Software = document.getElementById('results').value; var SoftwareName = document.getElementById('results').value; ajaxRequest1.open("POST", "getSoftwareName1.php" + SoftwareName, true); ajaxRequest1.send(null); } </script> <html> <div id='ajaxDiv1'></div> <div id='ajaxDiv'> <select id='results' onchange="getSoftwareUpdate();" name="Software"> </select> </div> </html> </td> I'm make a ajax call to a processing PHP file that echos either "success" or an "error message". When the success is returning, i want Jquery to recognize this and then redirect the browsers instead of displaying the success message. Here are some snippets. I can only seem to parse to a blank or null. Jquery code: Code: $.ajax({ type: "POST", url: "process.php", data: wfLoginPost(), success: function(msg){ alert(msg); // both below are either null or blank //var res = $(msg).find("span.response").text(); //var res = $(msg).find("span.response").html(); if(res == 'Success'){ window.location = 'http://www.google.com'; } } }); process.php PHP Code: if($qry[0]['pwd'] == $password){ echo "<span class='response'>Success</span>"; }else{ echo "<span class='response'>Username or password did not match</span>"; } Here is the contents of the msg response from the ajax post: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" type="text/css" href="css/reset.css"/> <link rel="stylesheet" type="text/css" href="css/960grid.css"/> <link rel="stylesheet" type="text/css" href="css/style.css"/> <link rel="stylesheet" type="text/css" href="css/statusmessageQ.css"/> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.statusmessageQ-0.5.js"></script> </head> <span class='response'>Success</span> 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. 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 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"); ?> 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? 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 so i have this "class" defined in a javascript file, "a.cross-link". This enables the ability for users to navigate the webpage in a slider format. it works fine if I directly place the required html code: Code: <a class="cross-link" href="#3" title="Go to Page 2">View Results</a> but if i have php print out that line for me, it doesn't work: PHP Code: echo "<a class= \"cross-link\" href=\"#3\" title=\"Go to Page 3\">$name</a>";( Where $name is some variable) Note: the php code is just your average sql stuff. here is an interesting observation i've made: if i "hardcode" this this into the html: <a class="cross-link" href="#3" title="Go to Page 3">View Results</a> and then i go to generate the sourcecode, this is what appears (this works): <A class=cross-link title="Go to Page 3" href="#3" jQuery1283131847233="30">View Results</A> but if i have the html made by a php echo statement, it just stays the same - i dont get a jQuery1283131847233="30" generated in the sourcecode. i'm sorry i'm having difficulty describing the problem. i'm new to jquery and ajax stuff. to me, it seems like the "cross-link" class i have defined in the javascript isn't being applied to correctly. i have no idea. can you invoke javascript from a php echo statement that is formatted to produce html code? here is another thing i believe is true: when the page loads, the javascript loads. the users, through the use of ajax, submitts a sql querey and navigates, using a jquery slider, to another div (where i want the user to go after selecting a resulting link from the sql query). so the javascript is going to execute before the list of results is produced. do I need to rerun the javascript each time new php produced sql data is populated in a div? if so, how? i dont know what more information you may need, so please ask. Thanks. Right, I've been searching for a few days now and i'm looking for a AJAX/JQuery script where i can load external content in to a div. I've seen a few site's that have it, and im after it so when i click the page link it loads it in the address bar like this http://www.google.co.uk/#content/index.php or what ever. Thanks. 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!!! Hello all, I'm trying to use AJAX for password validation. I've used AJAX before successfully to read and write data back and forth from Javascript and php, but not at the same time. I seem to be coming to the conclusion that the XMLHTTPRequest object is not letting me send data to my php file with the open method and receive data from it with the responseText attribute at the same time. Am I correct? What can I do to get around this? Here's the Javascript function: Code: function pwTest() { var pwInput = document.getElementById("removalPassword").value; var ajaxRequest; 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) { pwGood = ajaxRequest.responseText; } ajaxRequest.open("GET", "pwtest.php?pw=" + pwInput, true); ajaxRequest.send(null); } } And here's the php code: Code: <?php $string = "blam!"; $input = $_GET["pw"]; if ($string == $input) { echo "1"; } else { echo "0"; } ?> Thank you. Also, I realize that this isn't very secure, but it's only going to be on a local server and I'll encrypt the password once I have it working. I was wondering if there's a quick and simple way to notify a user if an ajax connection is broken, for example you're calling a file, but due to your internet connection, the file cannot be relayed back to you, so the existed javascript code on the initial page you're on, notifys you of the problem. Any ideas? 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? |