JavaScript - I Have Been Told To Try Ajax For This Page...
hey guys i have been trying for the last week to make a one of a kind login page. but i cannot figure out how to make the Slide bar initiate a Form submition
i have made a sample page on jsfiddle shown here http://jsfiddle.net/Cav3maN/ZzwQq/embedded/result/ if your not farmiliar with jsfiddle just remove the embedded/result/ to see the source http://jsfiddle.net/Cav3maN/ZzwQq/ please feel free to modify the source and get it to submit. if your slider disapeers click the "Run" tab at the top. and when you get it successfully working click "Update" tab and send the new url on here for me to see. thanks very much. aslo this is a free source feel free to embed it in your site anywhere. thanks alot and please guy i beleve in you all lol im new to web coding and i wanna be successful so if you wish to show me exactly what you done to make this work i would love you for ever. Similar TutorialsHello everyone! I'm currently doing an assignment which involves a snack machine. I'm currently working on the PacketOfCrisp class. It needs to start with 10 crisps, and have a boolean field for whether or not it's closed. This field is called open and is obviously set to false when the object is created. It also needs to give out some messages, ie if the packet is not open then a message should appear saying that the packet is closed. If the pack has no crisps left a message should appear saying as such. Other than that when selecting eatCrisp the amount of crisps in the packet should go down by one. Here is what I have so far: Code: public void eatCrisp() { if(open = false) { System.out.println("Open packet"); } else if (open = true && numOfCrisps >= 1) { numOfCrisps = numOfCrisps - 1; } else { System.out.println("No Crisps!"); } } Now for some reason when I invoke eatCrisp it takes out a crisp and changes the "open" field of the object to true and I can't figure out why. As far as I can figure it should be giving me a message of "Open packet" until I open the packet with the "openPacket" method, but instead "eatCrisp" is doing that by itself. Any ideas? We have an html page which brings in content dynmically using Ajax. So the page starts out with certain content, and when a particular link is clicked, the content is swapped out with new content. With this approach, the back button on the browser does not work, because the URL didn't actually change. How could a user bookmark the new page with the second set of content? Is this even possible?
Hey, I have 3 bits of code, 2 of which I'm pretty sure are right [i know the php works, and the ajax looks fine], but one i'm having trouble with. Basically what I'm trying to do is use a link to call php function [calls a piece of text from a database]. Which worked fine. But then I tried to incorporate AJAX into the script to make change dynamically on the page, and I'm a little confused with it all. I've got the AJAX and PHP, [and an attempted page with a link on to try and call the function with AJAX] but so far it's not doing as it should. Wondered if anyone could show me where I'm going wrong with the whole 'linking together' thing? So far everything I've tried hasn't worked. [hope this doesn't violate the forums 'don't dump your code' rule. But it's kind of all necessary] The AJAX [AJAX.js]: Code: function loadurl(generate.php) { var ajax = false; // Create the object: // Choose the objecttype, depending on what is supported: if (window.XMLHttpRequest) { // IE 7, Mozilla, Safari, Firefox, Opera, most browsers: ajax = new XMLHttpRequest(); } else if (window.ActiveXObject) { // Old IE-browsers // Make the type Msxml2.XMLHTTP, if possible: try { ajax = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e1) { // Else use the other type: try { ajax = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e2) { } } } // Retrieving the data from the page if (ajax) { alert("url:generate.php" + url); ajax.open('GET', url); // Sends request ajax.send(null); // Function that handles response ajax.onreadystatechange=function(){ // If everything is OK: if ( (ajax.readyState == 4) && (ajax.status == 200) ) { // Returns the value to the document alert(ajax.responseText); } } } else { // AJAX is not useable alert('It is not possible to connect, please update your browser.'); } } The PHP [generate.php] Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Untitled Document</title> </head> <body> <?php if($_GET['act'] == "generate_quotes") { $db = mysql_connect("*", "*", "*") or die ("Unable to connect to database."); mysql_select_db("quote") or die ("Unable to select database."); $result = mysql_query( " SELECT * FROM `quote` ORDER BY RAND() LIMIT 0,1 " ); $fetch = mysql_fetch_array($result); echo "<blockquote>".$fetch['q_quote']."</blockquote>"; mysql_close($db); } else { echo "<img src=\"1.png\">"; } ?> </body> </html> The page where I'm trying to bring them together [PULL.php] Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Untitled Document</title> <script src="ajax.js" type="text/javascript"></script> </head> <body> <a onClick="loadurl('generate.php'); return false;">Click Here</a> </body> </html> I've included the file names with extensions just in case it's something to do with those, but thanks in advance for any help. Greatly appreciated. OK, I've just been working with kwyl, trying to intergrate a like/dislike script to her site. There was an original script, and although bugged, it's almost the What works The user clicks the like/dislike icon. Ajax sends a request to PHP: Either the like/dislike gets inserted into the database. OR, if the user has already liked/disliked that post, an alert error gets returned. What doesn't work If you click to like/dislike a post, it won't appear (the current count is in brackets beside the icons) unless the page is refreshed. How would I use this along side Ajax for auto update? $data = mysql_fetch_object(mysql_query('SELECT `like`,`unlike` FROM posts WHERE id="'.$row['id'].'"')); It's used he Code: $data = mysql_fetch_object(mysql_query('SELECT `like`,`unlike` FROM posts WHERE id="'.$row['id'].'"')); ?> <br /> <div class="vote"> <a href="javascript:;" onclick="doAction('<?php echo $row['id']; ?>','unlike');"> <input type="image" name="submit" src="images/down.gif" /></a> (<span id=""><?php echo $data->unlike;?></span>) <a href="javascript:;" onclick="doAction('<?php echo $row['id']; ?>','like');"> <input type="image" name="submit" src="images/up.gif"></a> (<span id=""><?php echo $data->like;?></span>) I hate javascript and this is utterly driving me up the wall. Any help would be much appreciated. If you need more informaton/code please ask. I have been searching online for hours, but it is possible I'm just not thinking of the correct keywords. I have included a basic illustration of the current setup (which does not work). The issue lies with the page that is the desired output. I have a far deeper issue which I have narrowed down to javascript on the final .asp page not loading at all. On default.asp, I am calling a function contained in 'ajax_call-contentselection.js' Code: <a onclick="func_displaycontents('restaurants'); return false">displayajaxcontent</a> Honestly, I don't believe the following piece of code (ajax_call-contentselection.js) is relevant, as it is standard ajax code, but just in case: Code: function func_displaycontents(var_type){ var xmlHttp = GetXmlHttpObject(); var url = "../_include/ajax_display-contentselection.asp"; url += "?type="+var_type; if (!xmlHttp){ alert ("Browser does not support HTTP Request") return } xmlHttp.onreadystatechange=function(){ if(xmlHttp.readyState == 1){ document.getElementById("div_ajaxfillattractions").innerHTML = "<div style='padding-top:50px;color:white;width:930px;text-align:center;'><img src='../_images/ajax-loader.gif'/><br/>Loading...</div>"; }; if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){ document.getElementById("div_ajaxfillattractions").innerHTML=xmlHttp.responseText; } }; xmlHttp.open("GET", url, true); xmlHttp.send(null); } The other contents of "ajax_display-contentselection.asp" are displayed properly in "div_ajaxfillattractions" of "default.asp", but no javascript code on that page loads. If I use "ajax_display-contentselection.asp" as an include file on "default.asp", I get the javascript alert of 'Success', but when I initiate the AJAX it does not work, so I know there isn't a problem with the javascript. Please let me know if I sucked at explaining something, or more detail is needed. Thanks in advance, Matt I'm poking in the blind with javascript and hope that you can help with this issue. A javascript function is making a call to an external php file, which checks the compares the current time with a time stored in a mysql database. If a certain time passes, the php will send back instructions to redirect the user to a different page. The issue is that the page refreshes every time the is javascript function is executed. This resets any forms, or videos that the user is watching on the page. Here is the relevant code: Code: function checkTimer() { if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { window.location.href = xmlhttp.responseText; } } xmlhttp.open("POST","php/5minforpage10.php",true); xmlhttp.send(); } window.setInterval(checkTimer,15000); Is there a way to achieve the goal of checking the time against the server time (via the php code) without refreshing the page? Thanks kindly! I have a website that is using ajax to keep the page up to date with the database information. I call this page through a file called start.php. Once index.php is loaded it has a menu with selections. I then want it to call a page called query.php in an iframe to update the information, but not open a new window. In the iframe the query.php will run and then redirect itself to blank.php. The code is as follows and any help would be much appreciated. I have tried several methods of doing this and they have been commented out because they didn't work or didn't do what I wanted them to do. I do not want to use window.open since IE doesn't work well with it. window.open does work by pop up windows but I want to stay away from them. The main code I am looking to get help on is in red under start.php. In start.php I will include the entire file. In index.php I'm only going to include the main sections I use for this snippit. In query.php I'm not going to include query.php since I beleive this file isn't important for this snippit. start.php Code: <html> <head> <title>Countries At War!</title> <body style="background-color:#B0C4DE;"> <script language="JavaScript" type="text/javascript"> //Gets the browser specific XmlHttpRequest Object function getXmlHttpRequestObject() { if (window.XMLHttpRequest) { return new XMLHttpRequest(); //Not IE } else if(window.ActiveXObject) { return new ActiveXObject("Microsoft.XMLHTTP"); //IE } else { //Display your error message here. //and inform the user they might want to upgrade //their browser. alert("Your browser doesn't support the XmlHttpRequest object. Better upgrade to Firefox."); } } //Get our browser specific XmlHttpRequest object. var receiveReq = getXmlHttpRequestObject(); //Initiate the asyncronous request function sayHello() { //If our XmlHttpRequest object is not in the middle of a request, start the new asyncronous call. if (receiveReq.readyState == 4 || receiveReq.readyState == 0) { //Setup the connection as a GET call to SayHello.html. //True explicity sets the request to asyncronous (default). receiveReq.open("GET", 'index.php', true); //Set the function that will be called when the XmlHttpRequest objects state changes. receiveReq.onreadystatechange = handleSayHello; //Make the actual request. receiveReq.send(null); } } //Called every time our XmlHttpRequest objects state changes. function handleSayHello() { //Check to see if the XmlHttpRequests state is finished. if (receiveReq.readyState == 4) { //Set the contents of our span element to the result of the asyncronous call. document.getElementById('span_result').innerHTML = receiveReq.responseText; } } function openMenu(query) { var myString = 'query.php?' + query; // window.open(myString, 'linkname', 'title=no, height=465, width=400, left=550, top=150, location=yes, resizable=no, menubar=no, scrollbars=no') //document.getElementById('engine').src = myString; //document.getElementById('engine').setAttribute('src',myString;); //top.frames['engine'].location.href = myString; pausecomp(1000); sayHello(); } function pausecomp(millis) { var date = new Date(); var curDate = null; do { curDate = new Date(); } while(curDate-date < millis); } </script> </head> <body> <a href="javascript:sayHello();">Say Hello</a><br /> <iframe src="blank.php" MarginWidth="0" transparent="yes" width="30" height="25" frameborder="0" scrolling="no" name="engine"> UPGRADE YOUR BROWSER</iframe> <span id="span_result"></span> <body onLoad="sayHello();"> </body> </html> index.php Code: <table width="100%" border="2" bordercolor="Black"> <tr><center> <td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=1');">Home</a></td> <td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=2');">Jobs</td> <td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=3');">Travel</td> <td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=4');">Fight</td> <td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=5');">Inventory</td> <td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=6');">Properties</td> <td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=7');">Rewards<?php if($db_field['rewardpoints'] >= "1") print "(". $db_field['rewardpoints'] . ")";?></td> <td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=8');">Profile<?php if($db_field['profilepoints'] >= "1") print "(". $db_field['profilepoints'] . ")";?></td> <td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=9');">Alliances</td> <td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=10');">Options</td> </tr></center> </table> Thanks in advance for all the help. I have a problem where the page doesn't expand when more results get loaded via jquery on a facebook style wall. Once more results get loaded the footer stays static instead of moving down. What's the best way to do this? hi, When I navigate to a page with Ajax on my iphone or ipad, it doesn't show up, page is just blank, I have checked for errors and there is no errors?! here is my Ajax code Code: function datecheckFunction(){ var datecheckRequest; // The variable that makes Ajax possible! try{ // Opera 8.0+, Firefox, Safari datecheckRequest = new XMLHttpRequest(); } catch (e){ // Internet Explorer Browsers try{ datecheckRequest = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try{ datecheckRequest = 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 datecheckRequest.onreadystatechange = function(){ if(datecheckRequest.readyState == 4){ var ajaxDisplay = document.getElementById('ajaxDiv'); ajaxDisplay.innerHTML = datecheckRequest.responseText; } } var datepicker = document.getElementById('datepicker').value; var queryString = "?datepicker=" + datepicker; //Add the following line datecheckRequest.open("GET", "http://www.affordableappliancerepairs.co.uk/admin/checkdate.php" + queryString, true); datecheckRequest.send(null); } in my php page i have two text field i have to get the value by ajax/java script then by clickin radio button add or multy ply i have to show the result. how cain i do it?
he everyone please i want to know how to submit a form using ajax every 5 minutes without reloading page i have a huge form for exams and i need to submit the form without the need to wait until pressing submit because the user may wait to think about the answer a very long time.. so i want to submit the form and at the same time i cant reload the page as it is in normal submit form.. so how i can submit form in the background without letting the user knows that the form is submitted??? 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. 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 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 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> 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'); 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. |