|
JavaScript - Ajax Question? I Think?
Hi, I was just wondering is it possible to have an onclick() JavaScript function that would use PHP to INSERT a new row into a MySQL table?
Like is it possible to put some php into a javascript function that runs when I click the button on my page? Something like that? The PHP updates the MySQL database and the JavaScript tells the PHP when to happen? Just wondering what's the best way to go about that. Similar TutorialsI have Code: var myresult;
var myresult2;
var vresult;
function validateusername(username) {
var validusername = true;
// alert(mobilenumber);
http.abort();
http.open("GET", "checkusername.asp?username=" + username, true);
//alert("here");
http.onreadystatechange = function() {
if (http.readyState == 4) {
myresult = http.responseText;
// alert(myresult);
if (myresult == "True") {
validusername = true;
}
else {
alert("username exists ");
validusername = false;
}
}
}
http.send(null);
return validusername;
}
function validatemessage(message) {
var validmessage = true;
http.abort();
http.open("GET", "checktext.asp?message=" + message, true);
http.onreadystatechange = function() {
if (http.readyState == 4) {
myresult2 = http.responseText;
// alert(myresult);
if (myresult2 == "True") {
validmessage = true;
// alert("valid message is true")
}
else {
alert("You cannot put emails or telephone numbers in any of the details fields");
validmessage = false;
}
}
}
http.send(null);
alert(validmessage);
return validmessage;
}
and then within my validation if (!validateusername(document.getElementById("x_Username").value)) { return false; } and if (!validatemessage(document.getElementById("x_On_Self").value)) { return false; } Now if I just validate one (like just the uername or must the message field then it works but if I leave the validation to both then if one returns false - it causes both to - what am I doing wrong? Hi, 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> What would be the best way to get data for a mobile site. I've tried using Jquery $.ajax to bring in the data from a php file. It seems to work however it takes some time to load without a way to really give a progress meter. I was wondering what the fastest way to do this would be. For instance it loads and loads then after a long while the alert(); pops up and the data loads into the page. Ultimately i was thinking i could use the ajax request to read in the data from the mysql database server, then transfer it to localstorage, im using HTML5 primarily for the development also just for reference. Somewhat new to mobile development i was just wondering if anyone had a starting point for me to look at and go from there. Code: $(document).ready(function($){
var dataret = 0;
$.ajax({
type: 'POST',
url: 'mobile.php',
beforeSend: function(){
$('#status').show();
},
success: function(data){
//initialize localstorage here
alert('success');
// if it takes as long as it does, a few minutes, at least show a loading bar...
$('#progress').progressbar({
});
},
dataType: 'json'
});
});
Thanks in advance! 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 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 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 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 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, 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 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");
?>
I am very new to web development and I need a push in the right direction here. This is my problem; I am making a web page that will be used privately by two people. I need to find a way to go to an FTP site that can only be accessed by web browser (that is what IT told me) and download a file that has a constant name "prevhour.log" and save this file to a directory so that it can be read (not sure how, my boss is doing that end) and the data will be dumped, and this data will be extrapolated into a gas gauge style dashboard. I need some way of this to be done as automated as possible. Thank you for your time. Rick What in the world is wrong with this? I have been looking at it for hours. Code: $.ajax({
url: "wifitos.html",
type: "GET",
dataType: "html",
error: function(){ $("#loading").html("Error Loading Site. Try again later.");},
beforeSend: function(){ $("#loading").show("fast");},
complete: function(){ $("#loading").hide("fast");},
success: function(html){
$("#panel_content").show("slow");
$("#panel_content").html(html);
}
});
All the HTML tags are right. It shows the loading properly, but does not return an error and just says loading forever without loading wifitos.html. Help appreciated! FIXED! DON'T REPLY TO THIS THREAD: After hours of trying to figure this out, I find it 10 sec after I post this thread. Go figure. It was because I had a return false before the ajax. 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! 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? 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
*/
Right for day's i've searching for a jQuery/js/ajax script that opens like facebooks box where you can delete things update posts and so on... But i don't want that facebox thing i want a tut where i can buy things that will insert into the database and delete things and sooo on... I've made the box i just want the script for it.... I'm not good with js/jQuery/ajax.... Thanks. I'm writing a web app and so far: - the user enters some information on the web page - user data is submitted to a PHP script (using AJAX, so w/o a page refresh) which processes the data and generates a list of items that need to be returned to the user Now, I need to return the data -- preferably in the form of a list, where each returned item has a check box (so the user can choose which items in this list the subsequent operations will affect). However, can a PHP script effectively add/remove contents from such a checklist, or would this be something done better through Javascript only? For example: this, I think, or something similar. Luckily the PHP script that processes the data is short at this point, so I'd like to know whether I should rewrite it in Javascript (assuming Javascript can deal with REST well) to avoid a hassle. |
|||||||