|
JavaScript - Ajax Mysql Search
I am currently trying to put together a AJAX search that searches a MySQL database using PHP. I have created the below scripts. I cannot get it to function properly. Essentially I want someone to type in a partial search term and click submit and see the results. The purpose of this is for it to become part of a mobile app. Any help would be appreciated. Thank you!
HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> body{font-family:'Lucida Grande', Verdana, sans-serif;; font-size:14px; color:#666666;} h2{color:#000000; margin-bottom:20px;} h3{color:#000000; font-size:14px;} input{font-size:16px; color:#444444;} a:link, a:visited, a:hover{color:#0033CC;} a:hover{text-decoration:none;} div.searchInput{padding:8px; background:#DEDEDE; clear:both;} div.footer{padding:6px; border-top:solid 1px #DEDEDE; font-size:10px;} #msg{background:#FFFFCC; margin-bottom:10px; padding:4px; display:none;} </style> <script type="text/javascript"> function showProducts(str) { if (str=="") * { * document.getElementById("search-result").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("search-result").innerHTML=xmlhttp.responseText; *** } * } xmlhttp.open("GET","search.php?q="+str,true); xmlhttp.send(); } </script> </head> <body> <form id="searchForm" name="searchForm" method="post" action="javascript:searchNameq();"> <div class="searchInput"> <input name="searchq" type="text" id="searchq" size="30" onkeyup="javascript:showProducts()"/> <input type="button" name="submitSearch" id="submitSearch" value="Search" onclick="javascript:showProducts()"/> </div> </form> <h3>Search Results</h3> <div id="msg">Type something into the input field</div> <div id="search-result"></div> </body> </html> PHP: <?php $q=$_GET["q"]; //connect to the database mysql_connect("christianbrogers.db.5646816.hostedresource.com","christianbrogers","GHbn123"); mysql_select_db("christianbrogers"); //explode our search term into separate words $search_exploded = explode(" ",$search); foreach($search_exploded as $search_each) { //construct the query $x++; if ($x==1) $construct .= "name LIKE '%$search_each%'"; else $construct .= " OR name LIKE '%$search_each%'"; } //echo out the constructed query $construct = "SELECT * FROM products WHERE $construct"; $run = mysql_query($construct); $foundnum = mysql_num_rows($run); if ($foundnum==0) echo "No results found."; else { while ($runrows = mysql_fetch_assoc($run)) { //get data $name = $runrows['name']; echo $name; ?> Similar TutorialsHi; I am implementing a Ajax auto suggestion search from database. I find an example from http://www.roscripts.com/Ajax_autosu...abase-154.html . I have not problem with the php part about search from database, but i got a problem from the search from, i added a listerner to input tag, but it still not auto suggest anyword when i type any of word, Could any one help me, Thanks. PHP Code: <html> <head> <title>roScripts - Ajax auto-suggest</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script src="lib/prototype.js" type="text/javascript"></script> <script src="src/scriptaculous.js" type="text/javascript"></script> <script src="src/unittest.js" type="text/javascript"></script> <script src="lib/builder.js" type="text/javascript"></script> <script src="src/controls.js" type="text/javascript"></script> <script src="src/effects.js" type="text/javascript"></script> <link rel="stylesheet" href="css/style.css" type="text/css" /> </head> <body> <div id="container"> <form method="post" action="response.php"> <label for="testinput">Search</label><br /> <input type="text" id="search" name="search" autocomplete="off" class="input" value="" onkeyup="autoSuggest();" /><br /> <div id="update" style="display:none;position:relative;"></div> <input type="image" name="register" class="submit-btn" src="http://www.roscripts.com/images/btn.gif" alt="submit" title="submit" /> </form> <script type="text/javascript" language="javascript" charset="utf-8"> function autoSuggest(){ new Ajax.Autocompleter('search','update','response.php', { tokens: ','} ); Autocompleter.show(); } </script> </div> </body> </html> Hello everyone, I wonder if you can help a noob. I have an AJAX query that loads results from a mysql query into a div on my page. It all renders well with echoed results from a php query file. However I cannot get echoed links with a tag to open it up in light/slim/media box to work. Any ideas? Here is the part of the queried php that returns the results. Code: echo "<table width='100%'>";
echo "<tr><td><strong>Title</strong></td><td><strong>Location</strong></td><td><strong>Preview</strong></td></tr>";
while($row = mysql_fetch_array($result))
{
$danum = "000000".strval($row['id']) ;
echo "<tr><td width='410px;margin:5px'>".$row['title'] . "</td><td width='410px;margin:5px'>" . $row['place'] . "</td><td width='120px;margin:5px'><a href='archive/800/da".substr($danum,strlen($danum)-6,6).".jpg' rel='lightbox'><img src='archive/100/da".substr($danum,strlen($danum)-6,6).".jpg' class='lbThumb'></a></td></tr>";
}
echo "</table>";
I have all of the required scripts in the head of the main page. Hi all!, I'm having a few challenges trying to create a link to a "new" search from a database search results page. This maybe a better example: My goal is: To allow website visitors to searches site for i.e. "Dog Collars", the results page lists every "dog collar" and store that carries "dog collars" (in database). At that point I would like to have links (on the results page) to all brands of "dog collars" and stores that carry "dog collars". I would like to then be able to click on a "brand" (text link) of "dog collars" and then generate a new results page that lists all store and vendor information. thank you in advance! Erick p.s. this is a link to a site that has a similar featu http://69.0.211.58/~pubexpress/ami/html/index.html 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. In this case, Let's take Google Search as example: The code is JScript .NET, which is basically a .NET version of Javascript. Regardless of language, Anyone with appending type of skill can answer my question. This code is used in Fiddler(It's a Man-in-the-middle proxy) Code: if (oSession.uriContains("&q=")) // oSession is a Fiddler object session // uriContains() function, checks for case-insensitive string from the URI
{
var str = oSession.fullUrl;
var sAppend = "test1+test2+test3";
if (!oSession.uriContains(sAppend))
{
oSession.fullUrl = str.replace( "&q=","&q="+sAppend);
}
}
For those who are confused, It says, If &q= is present in the URI, replace/append &q= with &q=test1+test2+test3 Problem: It appends test1+test2+test3 instantly, when it sees &q= in the URL. Basically, how do I make it wait until I click the submit/search button Thank you. Update: I heard about Onsubmit() event, but not really familiar with it. How do I use it? like, should I go to google source page and edit the form id? Also, Any other methods besides Onsubmit()? Hi experts, is it possible via Javascript to search certain websites with certain keywords without having to use specific search engines? example search only the following: 1. www.yyy.com 2. www.aaa.com 3. www.zzz.com for the keyword "Laminat" and open the sites accordingly. thx Hi Everyone! I have a website that I'm designing where I have the need to search multiple sites at specific times. By this I mean that In some cases, we would want to search only the internet using google, or only search the site that I've created (which currently uses the jse_search.js solution), or only our company's website. I currently have four different search boxes that will search either the internet, the internal site, a separate internal site, or a third-party website, which all working fine. The problem is that the search boxes take up quite a bit of space, and the layout is becoming cumbersome. Is there a way in Javascript I could use a single search box and a drop-down list to select which method to use? The code I'm currently using is below. With the exception of the Google search function, I've modified some of the site names to general site names and paths to preserve the company's anonymity: Code in the <head> tag: Code: <script language="JavaScript1.3" type="text/javascript" src="jse_form.js"> </script> Code in the <body> tag: Code: <!--Begin Internal Site Search 1!-->
<div>
<p style="text-align: center;">
<table border="0" cellpadding="0">
<tr><td><form name="jse_Form" onsubmit="search_form(jse_Form);return false">
<input type="text" name="d" size="30">
</tr></td>
<tr><td>
<input type="button" value="Internal Site Search 1" onclick="search_form(jse_Form)">
</form>
</tr></td>
</table>
<!--End Internal Site Search 1!-->
<!--Begin Internal Site Search 2!-->
<div>
<p style="text-align: center;">
<table border="0" cellpadding="0">
<tr><td>
<!--webbot bot="Search" S-Index="all" S-Fields S-Text="Search for:" I-Size="20" S-Submit="Start Search" S-Clear="Reset" S-TimestampFormat="%m/%d/%Y" TAG="BODY" b-useindexserver="1" startspan -->
<form action="http://sitesearch2.idq" method="POST"><input type="text" name="UserRestriction" size="30" value>
</tr></td>
<tr><td style="text-align: center;">
<input type="submit" value="Internal Site Search 2"></form>
</form>
<!--webbot bot="Search" i-checksum="4210" endspan -->
</td></tr>
</table>
</div>
<!--End Internal Site Search!-->
<!--Begin Google Search!-->
<form method="get" action="http://www.google.com/search">
<div>
<p style="text-align: center;">
<table border="0" cellpadding="0">
<tr><td>
<input type="text" name="q" size="30" maxlength="233" value="" />
</tr></td>
<tr><td align="center">
<input type="submit" value="Google Search" /></td></tr>
</table>
</div>
</form>
<!--End Google Search!-->
<!--Begin Third Party Search!-->
<form id="keywordSearchForm" method="get" action="http://www.site3.html">
<div>
<p style="text-align: center;">
<table border="0" cellpadding="0">
<tr><td>
<input class="input" type="text" name="keyword" size="30" />
</tr></td>
<tr><td align="center">
<input type="hidden" name="origin" value="keywordsearch" /><input id="go" class="button" tabindex="0" type="submit" value="Third Party Search" />
</td></tr>
</table>
</div>
</form>
<!--End Third Party Site Search!-->
Hello people. I'm looking to create a simple search engine capable of searching multiple search engines simultaneously together (e.g. Google, Bing, Yahoo, etc.) and then displaying the results below for all sites on the same page. I don't want each search engine results page opening up in individual windows or anything, nor do I want people to have to manually select the search engine to search with. Just a single page where a user types in something, pressed [Enter] and then presented with all results from multiple sites on one page (without duplicates). I'm also looking to do this with image and torrent sites, etc. How would I go about doing this? Thanks a million guys. You have bigger brains than me. 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 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; 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. hello all, I am trying to see if the w3schools example works on my site with a collapsible panel. here is what I have: Code: <script type="text/javascript">
function getXMLcontent() {
if (window.XMLHttpRequest)
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
document.getElementById('CollapsiblePanel1').style.visibility = 'visible';
document.getElementById("CollapsiblePanelContent").innerHTML=xmlhttp.responseText;
xmlhttp.open("GET","showfunction.php?fname=" + document.getElementById('functions').value, true);
xmlhttp.send();
alert("showfunction.php?fname=" + document.getElementById('functions').value);
}
</script>
the panel shows up as a thin grey line because no text is being thrown into it from the 'responsetext' property. I don't really know anything about what I'm doing. Just trying to copy and paste what the website example is. is there anything else I should know about what I'm doing, that would at least tell me why I'm not getting the data back out of the server like I should be? the 'functions' element on the page is a dropdown box, but it is not inside of a form tag. does that make a difference since I am using 'GET'?? thanks! Hi, I have an ajax script that I would like to use to retrieve a password hint from a database. Both the ajax script and the php retrieval script are stored on the same domain (we'll call it domain1.com), but the ajax script runs on another domain (domain2.com). All the scripts are working fine, individually, but when I try to integrate them, I'm getting a ready state of 4, but an HTTP status of 0. I've traced the code flow and the retrieval script is being called by the ajax script OK and it's echoing all the right stuff, but it's just not getting back to calling ajax routine. I've read that an ajax routine can only call a script that resides on the same domain that it runs on. Is this correct and, if so, does anyone know of a work around, because I really need to be able to store the ajax script on domain1 and run it on domain2? If not, then can anyone suggest why I'm getting an HTTP status of 0, when all the individual components are working fine? Debbie 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. 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. 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. |
|||||||