Search the Community
Showing results for tags 'ajax'.
-
I'd like to access a database that is on the client side via Javascript and was wondering how to best go about this. I was thinking it may work to use Ajax to call a C# data application, but wondered if that would be most efficient. I suppose PHP would be another alternative, but I prefer working in C# if I can. Thanks!
-
Does anyone know what event is fired when a Dropdown entry is selected for an input of type Textbox? I am using the AutoComplete Widget of the jQuery UI and I am attempting to perform some functions on the style of the Textbox when a user selects one of the entries. P.S. I'm also wondering is there a way a can track which events are being triggered as I use controls on the page perhaps maybe Google Chrome Developer Tools or FireFox Develpor Tools have this functionality? -
I'm pretty new to javascript/ajax/php/html so bear with me.I am Trying to use ajax to connect to a database. The reason I am using ajax is so I can dynamically update the webpage as information is gathered about the database. So far I have is setup so that when a button is clicked: <input type="button" value="Login" onclick="sqllogincheck(this.form)"> a function is ran that will connect up to the database server side: <html><head><title>High Plains Regional Climate Center</title><link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"><?php wp_head(); ?></head><!--All functions for pages--><script>//login and get mysql tables, update table status viewfunction sqllogincheck(frm) {var xmlhttp; //All fields must be fullif (frm.sqlusr.value == "" || frm.sqlhost.value == "" || frm.sqlpwd.value == "") { alert("Missing Fields!");}//use AJAX to setup a query to the serverelse { xmlhttp=new XMLHttpRequest(); xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("dbstatus").innerHTML=xmlhttp.responseText; } } //send POST request to server xmlhttp=open("POST","citools/login.php",true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send("sqlusr=" + frm.sqlusr.value + "&sqlhost=" + frm.sqlhost.value + "&sqlpwd=" + frm.sqlpwd.value); //alert("Username: " + frm.sqlusr.value + "\nHost: " + frm.sqlhost.value + "\nPassword: " + frm.sqlpwd.value)}}</script><body><div id="wrapper"> <div id="header"> <img src="<?php bloginfo('template_directory'); ?>/images/headers/top_logo.jpg" alt="HPRCC"> <!--<div id="menu"> <?php wp_nav_menu( array( 'theme_location' => 'header-menu', 'container_class' => '') ); ?> </div>--> <?php shailan_dropdown_menu(); ?> <h1 id="pagetitle"><?php wp_title(); ?></h1> </div> When I test this code out I get the error "Uncaught TypeError: Object [object Window] has no method 'setRequestHeader'". I have the vague idea that this means there is no 'setRequestHeader' method in the xmlhttp object, but im not sure how to correct it.Just a bit more info here. I'm testing this page using localhost and am not sure if that has anything to do with the error. Also, I'm using Wordpress for my CMS and this is why I only posted the header here.Thanks for the help.
-
Hello, regarding to this example in your website: this example display data from mysql database\table with parameter (dropdown list),and i do input the choices to this list,what if i want same this but the choices in the (dropdown list) come from database\table as well ? anyone can help me plz? this example containing two files as the following: 1. HTML File: <html><head><script type="text/javascript">function showUser(str){if (str=="") { document.getElementById("txtHint").innerHTML=""; return; }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) { document.getElementById("txtHint").innerHTML=xmlhttp.responseText; } }xmlhttp.open("GET","getuser.php?q="+str,true);xmlhttp.send();}</script></head><body><form><select name="users" onchange="showUser(this.value)"><option value="">Select a person:</option><option value="1">Peter Griffin</option><option value="2">Lois Griffin</option><option value="3">Glenn Quagmire</option><option value="4">Joseph Swanson</option></select></form><br /><div id="txtHint"><b>Person info will be listed here.</b></div></body></html> 2. PHP File: <?php$q=$_GET["q"];$con = mysql_connect('localhost', 'peter', 'abc123');if (!$con) { die('Could not connect: ' . mysql_error()); }mysql_select_db("ajax_demo", $con);$sql="SELECT * FROM user WHERE id = '".$q."'";$result = mysql_query($sql);echo "<table border='1'><tr><th>Firstname</th><th>Lastname</th><th>Age</th><th>Hometown</th><th>Job</th></tr>";while($row = mysql_fetch_array($result)) { echo "<tr>"; echo "<td>" . $row['FirstName'] . "</td>"; echo "<td>" . $row['LastName'] . "</td>"; echo "<td>" . $row['Age'] . "</td>"; echo "<td>" . $row['Hometown'] . "</td>"; echo "<td>" . $row['Job'] . "</td>"; echo "</tr>"; }echo "</table>";mysql_close($con);?> Thank you very much... Regards,
-
Hello I've got a question about "AJAX Database Example" from w3schools page (linked here -> http://www.w3schools...ax_database.asp ) All works perfectly fine, but I want to adjust it to TWO select dropdowns and show the results only after the second one is selected (I pick the first select, then second one and after that results are shown). The problem is, I don't know exactly what I need to change in showUser function. Of course it needs to take 2 parameters and I have to create second select dropdown outside the function, but my knowledge about AJAX is too poor to make it work ; / Will somebody help me ? ; ) If already there is a topic about the same issue I'm really sorry, but I've got some problems with search module on this forum. Kinda doesn't show any results ;x
-
I have an xml blog and a javascript file i am trying to use to publish this blog to a website with. I am just testing to see if AJAX is working at all because i have been having issues with this for a day now. Here is the Javascript code: function blog(){var xhr = new XMLHttpRequest(); xhr.onReadyStateChange = function(){if(xhr.readyState == 4 && xhr.status == 200){var xmldom = xhr.responseXML;alert(xmldom.documentElement);}} xhr.open("GET","blog.xml",true);xhr.send();} Here is the xml code: <?xml version="1.0" encoding="UTF-8"?><rss version="2.0"><channel><item><title>hello</title> <link>www.google.com</link> <description>world</description></item><item><title>hello</title> <link>www.google.com</link> <description>world</description></item><item><title>hello</title> <link>www.google.com</link> <description>world</description></item></channel> </rss> Finally, here is the HTML code: <div id="blog"><h4>News Updates</h4><script type="text/javascript" src="blog.js" async></script><button type="button" onclick="blog()">click me</button></div> I have it set up to where the button in the HTML code has the onclick event listener that calls the javascript "blog()" function. the problem is that i never does anything NO MATTER WHAT I DO. it is always unresponsive. I never get a single alert box no matter what i make the script do inside the onreadystate function.
-
I have this code that does some AJAX to go back into my database and extract an array of bars. I have developed the code to change one of my div's to display all the data for each bar. In addition to displaying the data I also need to modify the contents of #latestFromDSGbuffer to contain a twitter feed of 5 tweets each per bar that was queried. I have tried a number of samples but for some reason I am able to get the twitter samples working in a sandbox but when I try to integrate that code things don't seem to be working out. I don't know if maybe that is because I was trying to call $.ajax(); inside of the callback function from another $.ajax(). Maybe the design needs to be modified? Maybe I should use some DOM storage to store barLocations? I'm wondering what to do with it. All of the data is located in "barLocations". Although I have attempted to make "barLocations" "global" I am not able to access it from within button.onclick where it is showing as "undefined". $.ajax({ url: 'ajax.php', data: { lat: results[0].geometry.location.lat(), lng: results[0].geometry.location.lng(), radius: radius }, type: 'post', success: function(output) { barLocations = $.parseJSON(output); //alert(obj[0].lat); /* So now that we have the JSON encoded array it has to be displayed into one of the div's probably below the map someplace */ var newInnerHTML = ""; for(var i = 0; i < barLocations.length; i++) { newInnerHTML = newInnerHTML + "<strong>" + barLocations[i].company + "</strong></br>"; newInnerHTML = newInnerHTML + barLocations[i].first_name + " " + barLocations[i].last_name + "</br>"; newInnerHTML = newInnerHTML + barLocations[i].street_address1 + "</br>" + barLocations[i].street_address2 + "</br>" + barLocations[i].city + "</br>"; newInnerHTML = newInnerHTML + "Phone: " + barLocations[i].phone_number + "</br>"; newInnerHTML = newInnerHTML + "Email: " + barLocations[i].email + "</br>"; newInnerHTML = newInnerHTML + "Website: " + barLocations[i].website + "</br>"; newInnerHTML = newInnerHTML + "<a href=\"standardprofile.php\" target=\"_blank\">Profile page >>>></a>"; newInnerHTML = newInnerHTML + "</br></br>"; } for (i = 0; i < barLocations.length; i++) { var markerImage = 'image/baricon.png'; marker = new google.maps.Marker({ position: new google.maps.LatLng(barLocations[i].lat,barLocations[i].lng), map: map, icon: markerImage, title: barLocations[i].company }); } if(barLocations.length > 0) { document.getElementById('divBarLocations').innerHTML = newInnerHTML; } } }); Thanks in advance for any help comments or commentary. Your input is most welcome... The whole code looks more like this: (function() { var map, geocoder, marker, infowindow, barLocations; window.onload = function() { $('#hdivBarLocations').hide(); // Creating a reference to the mapDiv var mapDiv = document.getElementById('map'); // Creating a latLng for the center of the map var latlng = new google.maps.LatLng(37.09, -95.71); // Creating an object literal containing the properties // we want to pass to the map var options = { center: latlng, zoom: 4, mapTypeId: google.maps.MapTypeId.ROADMAP }; // Creating the map map = new google.maps.Map(mapDiv, options); // Getting a reference to the HTML form var button = document.getElementById('addressButton'); // Catching the forms submit event button.onclick = function() { button.disabled = true; // Getting the address from the text input var address = document.getElementById('addressBox').value; var radius = document.getElementById('radialDistance').value; // Making the Geocoder call getCoordinates(address, radius); // Preventing the form from doing a page submit //return false; $('#hdivBarLocations').show(); } } // Create a function the will return the coordinates for the address function getCoordinates(address, radius) { // Check to see if we already have a geocoded object. If not we create one if(!geocoder) { geocoder = new google.maps.Geocoder(); } // Creating a GeocoderRequest object var geocoderRequest = { address: address } // Making the Geocode request geocoder.geocode(geocoderRequest, function(results, status) { // Check if status is OK before proceeding if (status == google.maps.GeocoderStatus.OK) { //Go back in for some data. document.getElementById('divBarLocations').innerHTML = "No bars found in your area..."; $.ajax({ url: 'ajax.php', data: { lat: results[0].geometry.location.lat(), lng: results[0].geometry.location.lng(), radius: radius }, type: 'post', success: function(output) { barLocations = $.parseJSON(output); //alert(obj[0].lat); /* So now that we have the JSON encoded array it has to be displayed into one of the div's probably below the map someplace */ var newInnerHTML = ""; for(var i = 0; i < barLocations.length; i++) { newInnerHTML = newInnerHTML + "<strong>" + barLocations[i].company + "</strong></br>"; newInnerHTML = newInnerHTML + barLocations[i].first_name + " " + barLocations[i].last_name + "</br>"; newInnerHTML = newInnerHTML + barLocations[i].street_address1 + "</br>" + barLocations[i].street_address2 + "</br>" + barLocations[i].city + "</br>"; newInnerHTML = newInnerHTML + "Phone: " + barLocations[i].phone_number + "</br>"; newInnerHTML = newInnerHTML + "Email: " + barLocations[i].email + "</br>"; newInnerHTML = newInnerHTML + "Website: " + barLocations[i].website + "</br>"; newInnerHTML = newInnerHTML + "<a href=\"standardprofile.php\" target=\"_blank\">Profile page >>>></a>"; newInnerHTML = newInnerHTML + "</br></br>"; } for (i = 0; i < barLocations.length; i++) { var markerImage = 'image/baricon.png'; marker = new google.maps.Marker({ position: new google.maps.LatLng(barLocations[i].lat,barLocations[i].lng), map: map, icon: markerImage, title: barLocations[i].company }); } if(barLocations.length > 0) { document.getElementById('divBarLocations').innerHTML = newInnerHTML; } } }); circ = null; var circ = new google.maps.Circle({ map: map, radius: radius * 1609.344 }); circ.setCenter(results[0].geometry.location); // Center the map on the returned location map.setCenter(results[0].geometry.location); map.fitBounds(circ.getBounds()); google.maps.event.trigger(map,'dragend'); var markerImage = 'image/home.png'; // Check to see if we've already got a Marker object if (!marker) { // Creating a new marker and adding it to the map marker = new google.maps.Marker({ map: map, icon: markerImage }); } // Setting the position of the marker to the returned location marker.setPosition(results[0].geometry.location); // Check to see if we've already got an InfoWindow object if (!infowindow) { // Creating a new InfoWindow infowindow = new google.maps.InfoWindow(); } // Creating the content of the InfoWindow to the address // and the returned position var content = '<span style="color: black;">Your location.</span>'; // Adding the content to the InfoWindow infowindow.setContent(content); // Opening the InfoWindow infowindow.open(map, marker); } }); }})();
-
So I have been studying this code and I have read a bit about the callback function: xmlHttp.onreadystatechange = function() { if(xmlHttp.readyState == 4) { HandleResponse(xmlHttp.responseText); } } is asynchronous although I'm not fully sure exactly what that means to me at this point. Essentially I am starting with a page bars.php: <!DOCTYPE html><html><head><title>Daily Sports Guide Bars</title><link type="text/css" rel="stylesheet" href="style/style.css"><link type="text/css" rel="stylesheet" href="style/suckerfish.css"><style>#map { width: 80%; height: 500px; border: 1px solid #000; margin-left: 10%; }</style><script type="text/javascript" src="js/ajax.js"></script><script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script><script>(function() { window.onload = function() { var responseText = MakeRequest(); alert(responseText); // Creating a reference to the mapDiv var mapDiv = document.getElementById('map'); // Creating a latLng for the center of the map var latlng = new google.maps.LatLng(37.09, -95.71); // Creating an object literal containing the properties // we want to pass to the map var options = { center: latlng, zoom: 4, mapTypeId: google.maps.MapTypeId.ROADMAP }; // Creating the map var map = new google.maps.Map(mapDiv, options); }})();</script></head><body><div id="wrapper"><?php require('includes/i_header.php'); ?><div style='margin: 0px; padding: 0px; text-align: center;'><img height="100" width="413" src="image/underconstruction.gif"></div><div id="map"></div><?php require('includes/i_footer.php'); ?></div></body></html> So I guess the first thing would be to also list the contents of my ajax.js: function getXMLHttp(){ var xmlHttp try { //Firefox, Opera 8.0+, Safari xmlHttp = new XMLHttpRequest(); } catch(e) { //Internet Explorer try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) { alert("Your browser does not support AJAX!") return false; } } } return xmlHttp;} function MakeRequest(){ var xmlHttp = getXMLHttp(); xmlHttp.onreadystatechange = function() { if(xmlHttp.readyState == 4) { HandleResponse(xmlHttp.responseText); } } xmlHttp.open("GET", "ajax.php", true); xmlHttp.send(null); return xmlHttp.responseText;} function HandleResponse(response){ alert(response);} I am not sure at all of my design here but my intent would be (in bars.php that is): var responseText = MakeRequest();alert(responseText); in this case to get MakeRequest to return into 'responseText' the value in ajax.php which is: <?phpecho "This is a php response to your request!!!!!!";?> So maybe it just is not the right design or maybe I just can't make this work because I don't really understand the internals of it all yet. I do get the first alert from HandleResponse however what I can't figure out is how to get that data back into my mapping area. How should this be done? Thanks so much. As always any help from the forums is most welcome.
-
hey guys Basically i am trying to create a validation for the form. I want it to check if it can connect to the DB and if true to proceed to another page and if false to return an error. I am inputting the wrong details to make it just display the error but somehow it always returns "TRUE" on page load... and everytime i click the submit it doesnt do anything regardless of my entry... Can anyone tell me why? <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){var u = $('#username');var s = $('#server');var p = $('#password'); $('#iValForm').submit($.post("connect.php", {u: u.val(),p: p.val(),s: s.val()}, function(fd){ if (fd == "true"){ alert("Is: " + fd); return false; } // if1 if (fd == "false"){ alert("Is2: " + fd); return false; } // if2} //post function) //Post) //submit }) //document </script></head> <body> <form class="iValForm" id="iValForm" method="post" action=""><fieldset><legend id="error"> </legend><p><label for="username">Username </label><input id="username" name="username" class="required" /> </input></p><p><label for="password">Password</label> <input id="password" name="password" class="required"/> </input></p><p><label for="server">Server</label> <input id="server" name="server" class="required"/> </input></p><p> <input class="submit" id ='submit' type="submit" value="Submit"/></p></fieldset></form> connect.php <?php$user = $_POST['u'];$password = $_POST['p'];$server = $_POST['s'];@$con = mysql_connect ($server, $user, $password); if (!$con) {$response = 'false';echo $response;} else { $response = 'true'; echo $response;}?>
-
<html><!--php_json.php--><head><script src="json2.js"></script><script src="php.js"></script><script>ajax("php_json.json",function(){oJSON = JSON.parse(xmlhttp.responseText);sJSON = JSON.stringify(oJSON);/*put it hereokay*/});// here, the variable sJSON is undefinedajax("php.php?json="+sJSON,function(){ alert(xmlhttp.responseText); });//</script></head><body></body></html> // php.jsfunction ajax(source,func){xmlhttp = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP") ? new ActiveXObject("Msxml2.XMLHTTP") : null ;xmlhttp.onreadystatechange = function(){ (xmlhttp.readyState == 4 && xmlhttp.status == 200) ? func() : null ; }xmlhttp.open("GET",source,true);xmlhttp.send();} wanna ask how to extend the scope of the variable sJSON to be global?
-
var ajax = function(query){xmlhttp = (window.XMLHttpRequest) ? xmlhttp=new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP") ? new ActiveXObject("Msxml2.XMLHTTP") : null ;xmlhttp.onreadystatechange = function(){ jsonData = JSON.parse(xmlhttp.responseText); (xmlhttp.readyState==4 && xmlhttp.status==200) ? func(query) : null ; }xmlhttp.open("GET","lib.json",true);xmlhttp.send();} function func(query){ // fail to check an undefined AJAX responseTextif(typeof(xmlhttp.responseText)=="undefined" && xmlhttp.responseText != null){ alert(0); }else { document.getElementById("result").innerHTML = jsonData[1][query]; }} This is the testing page:http://lifelearning.xtreemhost.com/lib.html Just wanna ask how to check an undefined AJAX responseText.Many thanks.
-
<script>function ajax(){xmlhttp = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP") ? new ActiveXObject("Msxml2.XMLHTTP") : null ;xmlhttp.onreadystatechange = function(){ var jsonData = eval("("+xmlhttp.responseText+")"); return (this.readyState == 4 && this.status == 200) ? jsonData[1][1] : null ;}xmlhttp.open("GET","json.json",true);xmlhttp.send(null);} window.onload function func(){document.getElementById(elem).innerHTML = ajax(); // return undefined}</script> Is there a syntax mistake that produces the undefined result?
-
I have this php script stop.php <?phpinclude('ssh_con.php');$stop = 'screen -S testapplication -X quit';ssh2_exec($con, $stop);mysql_query("UPDATE servers SET Online=0 WHERE Owner='".$_SESSION['Username']."'");echo "<meta http-equiv='refresh' content='0;index.php'>";?> now i want to execute/call/get this page/script using javascript onclick to execute the code and the page refreshes itself. Can anyone guide me to do this? Thanks before hand.
-
I'm building this web site for a CS major career for a college. I'm working on the login part now, but I thought it would be really cool and efficient (I assume) if instead of redirecting the user to another html page to do all the login information, to just do like most websites do now, dim the background to a dark color and pop-up a form with the username and password.. I know that has something to do with ajax and some javascript.. But the problem is that I've been looking for resources or tutorials on how to do it, but I haven't found one yet. If someone has any tutorial link, or any information on how to do this I would be really grateful!
-
Hi, I need some help please on this ajax,and i am still beginner on this.I created a simple page as my practice using ajax enabled.my problem is that it will not insert into my table.can you help me please what is the problem of my code. testajax.php <html><head> <script type="text/javascript"> function InsertDoc() { var xmlhttp; 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) { document.getElementById('display').innerHTML=xmlhttp.responseText; } } var name = encodeURI(document.getElementById('name').value); var email = encodeURI(document.getElementById('email').value); var address = encodeURI(document.getElementById('address').value); xmlhttp.open("GET","dbconn.php?name="+name+"&email="+email+"&address="+address,true); xmlhttp.send(); }</script></head> <body> <form > Name : <input type="text" id="name"> <br/> Email : <input type="text" id="email" > <br/> Address: <input type="text" id="address" > <br/><input type="submit" value="submit" onclick ="lnsertDoc();"> </form> <div id="display"></div> </body> </html> "dbconn.php" <?php $conn = mysql_connect('localhost','root',''); if(!$conn) { die("could not connect to localhost" .mysql_error());} mysql_select_db('dbajax',$conn); if (isset($_GET['name']) && isset($_GET['email']) && isset($_GET['address'])) { $name = $_GET['name']; $email = $_GET['email']; $address = $_GET['address']; $sql = "insert into ajaxTBl values('default', '$name', '$email', '$address')"; mysql_query($sql); echo "Successfully inserted"; } ?> Thank you in advance.
