|
JavaScript - New To Ajax - Requesting Help
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. Similar Tutorialshi folks extreme newbie here when it comes to javascript. I have an assignment that in which ive created the html+css for the webpage (a pizza form validation basically). and Now I must do the javascript aspect of it. Unfortunately I have no idea how to even begin i dont understand how to use any of these .toUpperCase() .toLowerCase(), how to use window.open for errors instead of alert and all these other things. the way i'm coding it, is with an external file called script.js that will have all my coding and then i have my index.html file...i dont know how to 'call' (if thats the right term) the function to the index.html...or even make jscript code either lol. as an example of a requirement: Code: field01 - Client Surname- Maximum allowable length is 15 positions Must be present. Minimum of four (4) alphabetic characters lower case (a-z) or upper case (A-Z) or a mix of lower & upper case. Optional special characters Optional one (1) apostrophe if present - must have at least 1 alphabetic character before it and one alphabetic character after it. Optional one (1) hyphen if present - must have at least 1 alphabetic character before it and one alphabetic character after it. this is my assignment requirements for those need a better understanding of what's going on https://cs.senecac.on.ca/~int222/***...assignment3-2/ my request is if there is anyone who can lead me in the direction to a website or downloadable book on how to do what it's asking (in no way am i asking someone to do my assignment for me). My professor has his website that has all these predefined things (im assuming are functions) that should be used but i dont understand it nor do i understand him. Any help would be immensely appreciated, thank you. Hi, I get the following error when I try to request my PHP using Ajax : document.townsearch.townval is undefined [Break On This Error] document.townsearch.townval.value = ajaxRequest.responseText; here is my code Code: <script language="javascript" type="text/javascript">
function townlistFunction(){
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){
document.townsearch.townval.value = ajaxRequest.responseText;
}
}
ajaxRequest.open("GET", "http://www.mypubspace.com/dashtest/town-select.php", true);
ajaxRequest.send(null);
}
//-->
</script>
<form name="townsearch">
<a href="#" onClick="townlistFunction();">show towns list</a>
<select>
<option value="townval"></option>
</select>
</form>
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; 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 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>
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. 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 everyone.. i am using ajax to change the banner background while pressing on refresh Note:it must be a background image because i will display data from database... http://www.graphicano.com/isis/nile_crown2.php please look at this link... my problem is: when i press refresh button in Firefox browser it changes the background and on pressing refresh again the background will change but in internet explorer 8.0 it changes the background only for the first time and on pressing refresh again the background will not change. how i can fix this problem ?? i want the user to press refresh at any time and the background will change.. not only for the first time? at the same time it must be a background image because i will display text from database... 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? 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. 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 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");
?>
First of all sorry if i have posted in the wrong forum! Ok my problem is with an RSS ticker for my website. I am having the error req is not defined. Im hoping its something very simple is the script is much complete! THIS IS THE GRAB.PHP CODE PHP Code: <? // [email]jim-jh@webcoding.co.uk[/email] // ticker stuff - grab remote stream // begin grab.php $_receivedRemoteData = "" ; $_requestedStream = $_SERVER['QUERY_STRING']; if ( preg_match("/http/i", $_requestedStream ) ) { $fp = @fopen( $_requestedStream, "r" ) ; if ( $fp ) { while ( !feof( $fp ) ) { $_receivedRemoteData .= @fread($fp, 1024); } @fclose($fp); } } header("content-type: text/xml") ; print $_receivedRemoteData ; // end grab.php ?> THIS IS THE TICKER.PHP FILE CODE Code: <style>
.headlines {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
font-weight: bold;
color: #003366;
text-decoration: none;
}
.headlines:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
font-weight: bold;
color: #003366;
text-decoration: none;
}
.globalheader {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
color: #990000;
text-decoration: none;
}
</style>
<span align="left" width="100%" id="scroller" style="align:left;z-index:99; position:relative; display;">
<span class=globalheader>BBC NEWS RSS TICKER:</span><br/>
<span class="headlines">Loading RSS feeds....</span>
</span>
<script src="ticker.js"></script>
AND THIS IS THE JS CODE WHERE I THINK THE PROBLEM MAY BE. PHP Code: function getRequest() { var con = new Array(); var _ms_XMLHttpRequest_ActiveX = ""; var req; if (window.XMLHttpRequest) { req = new XMLHttpRequest(); } else if (window.ActiveXObject) { if (_ms_XMLHttpRequest_ActiveX) { req = new ActiveXObject(_ms_XMLHttpRequest_ActiveX); } else { var versions = ["Msxml2.XMLHTTP.7.0", "Msxml2.XMLHTTP.6.0", "Msxml2.XMLHTTP.5.0", "Msxml2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP","Microsoft.XMLHTTP"]; for (var i = 0; i < versions.length ; i++) { try { req = new ActiveXObject(versions[i]); if (req) { _ms_XMLHttpRequest_ActiveX = versions[i]; break; } } catch (objException) { // trap; try next one } } } } con[0]=req; con[1]=_ms_XMLHttpRequest_ActiveX; return con; } function loadRSS(url) { //alert("running"); try { if ( _ms_XMLHttpRequest_ActiveX1 ) { rssRequest.onreadystatechange = processRSS; rssRequest.open("GET", url, true); rssRequest.send(null); } else { if (rssRequest) { rssRequest.onreadystatechange = processRSS; rssRequest.open("GET", url, true); rssRequest.send(null); } } } catch ( rssRequestException ) {} } function getChildNode( myElement, naming ) { return myElement.getElementsByTagName(naming)[0].firstChild.nodeValue; } function processRSS() { var cycle = 0; try { if (rssRequest.readyState == 4) { if (rssRequest.status == 200) { response = rssRequest.responseXML.documentElement; if ( response ) { var items = response.getElementsByTagName("item"); for ( var i = 0 ; i < items.length; i++ ) { var title = getChildNode(items[i],"title"); var desc = getChildNode(items[i],"description"); var link = getChildNode(items[i],"link"); rssItems[cycle] = title + " - " + desc; linkItems[cycle] = link; ++cycle; } } } else { alert("There was a problem retrieving the XML data:\n" + req.statusText); } } } catch ( jsException ) {alert(jsException.message);} } var httpArc2 = getRequest(); var rssRequest = httpArc2[0]; var _ms_XMLHttpRequest_ActiveX1 = httpArc2[1]; var rssItems = new Array(); var linkItems = new Array(); function openWindow(url){ window.open(url); } var storyCount = 0; var itemLen = 0; function tickTock(){ var obj = document.getElementById("scroller"); var myTimeout = 50; var str; var st = rssItems[storyCount]; if ( itemLen > st.length ) { storyCount++; if ( storyCount >= rssItems.length ) { storyCount = 0; } itemLen = 0; myTimeout=2000; setTimeout("tickTock()", myTimeout); } else { ++itemLen; str = rssItems[storyCount].toString(); str = str.substring(0,itemLen) + "_"; obj.innerHTML = "<span class=globalheader>BBC NEWS RSS TICKER:</span><br/><a href=\"javascript:openWindow('"+linkItems[storyCount]+"')\" class=headlines>" + str + "</a>"; setTimeout("tickTock()", myTimeout); } } setTimeout("tickTock()", 3000); loadRSS("/grab.php?http://news.bbc.co.uk/rss/newsonline_world_edition/front_page/rss.xml"); IS THERE ANYONE THAT CAN HELP WITH THIS? 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. I have a formula done in PHP. Lets say it's PHP Code: $sum = $_POST['one'] + $_POST['two']; I have 2 textboxes, one named "one", the other named "two". I want the page to also display the answer under the text boxes but it updates in real time when you input a value into the textboxes. How would I do that? |
|||||||