I often seen websites with a search function and when they search for something, the web page often changes the url to something along the lines of
search.php?q="searchquery"& etc , i have a search page on my site and i use ajax to submit a form that has a search input and sends to a php page which searches through my database and returns data to a specific div on the original page via echo.
function getdata() {
var str = document.getElementById("searcb");
document.getElementById("demo").innerHTML = "You are searching for: " + str.value;
document.getElementById("searchresults").style.display="block";
if (str == "") {
document.getElementById("demo").innerHTML = "";
return;
}
else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("searchresults").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "getuser.php?q=" + str.value, true);
xmlhttp.send();
return false;
}
}
HTML
<form onsubmit="return getdata()">
<input type="search" id="searcb" name="searchBar"></br></br>
</form>
My question is what am i doing differently that causes my url to remain the same compared to a common search engine
In general the url change because a post that reload the page is performed. Your url will not change because you call make an ajax call that will not reload your corrent page .
Related
I am creating an AJAX+PHP submit form, for example purposes. For this, I will need Ajax, PHP and index.html file to write into the inputs. The problem is that, when I submit I have no way of redirecting a page, so I created this hack. (since page redirect get permission from the PHP script first) otherwise show error.
AJAX
function submit_form(){
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
if(xmlhttp.responseText.trim() == 'success'){
location.href = '/success';
}
//
var e = doc.querySelector('.form-error').innerHTML = xmlhttp.responseText;
}
}
And this is my PHP.
<?php
echo "/success";
if($_GET){
}else{
echo "error, no value found";
}
as you can see, this allows me to redirect the page, as the javascript will read the "/success" and redirect the document, but one problem with this is that, I don't like using echo, because the page actually shows "success" before redirect. I don't want it to show anything to the page.
Change your echo statement to return json_encode(), then in your JS code, you can parse it using JSON.parse();
In your PHP removes the slash of this line: echo "/success";
And in your java script code, add a else sentence before print error:
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
if(xmlhttp.responseText.trim() == 'success') {
location.href = '/success';
}
else {
var e = doc.querySelector('.form-error').innerHTML = xmlhttp.responseText;
}
}
}
I'm getting really confused with php,ajax and javascript.
I'm using some ajax code I got from w3 schools to handle a form and display it below the form input. However, I can't seem to get my php and Javascript right. I'm using JavaScript in php tags where I then Get my variable in the same php tags and echo it. I then try to get that variable in ajax. I don't think I'm correctly getting the variable with ajax and inside my php. Does anyone have some advice.
Thanks
Heres my javascript in my html doc
<script>
function showHint(str) {
if (str.length == 0) {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "hackacronymphp.php?phpAnswer=" + str, true);
xmlhttp.send();
}
}
</script>
Here's the last part of my script with my php afterward all inside one php tag
var stringe = vari.join("");
console.log(stringe);
var answer = dataarray[stringe];
console.log(answer);
</script>
$phpanswer = $_GET['answer']
echo $phpanswer ;
?>
function submitLogin(){
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
var testlabel = document.getElementById('testlabel').value;
var postStr = "username=" + username + "&password=" + password + "&testlabel=" + testlabel;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById('mainPage').innerHTML = xmlhttp.responseText;//ATTENTION1
} else {
document.getElementById('mainPage').innerHTML = "Logining......";//ATTENTION2
}
}
xmlhttp.open("POST", "loginto.php", true);
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlhttp.send(postStr);
}
These are my codes.
If I change the "mainPage" into something else in the //ATTENTION2, the page will auto send a "GET" method, but if I still use the "mainPage" in there, there will be no problem.
However, if I change the "mainPage" into something else in the //ATTENTION1, there will have no problem with the post method, the response things can be shown in the correctly.
So, is there any solution? Thanks!
What does "something else" mean ? You need to have an id of an element in your page, where the content from the ajax response will be rendered.
For example, if you have a
<div id="myID"></div>
somewhere in the page, and change 'mainPage' in //ATTENTION1 to 'myID', then the response from the ajax request will be placed in that div.
The change you make in //ATTENTION2 is for intermediary states because it is on "else", so will not impact what happens when the ajax request is complete.
Okay, I've been struggling with this for a few hours now. I'm using ajax to update a div in my site with a php code however, i'm trying to send parameters in the function from the external javascript file to update the correct link(there are multiple drop down boxes)
for example: this is my select box
<script type='text/javascript' src='ajax.js'></script>//include ajax file
<select onchange='MakeRequest(raceupdate);
this.options[this.selectedIndex].value;'> //so no use of a button is needed to auto link to anchor tag
<option>Deathmateched</option>
<?php
dmList()
?>
</select>
Then next my external ajax function MakeRequest().
function MakeRequest(value)
{
var linkInfo = "teleport.php?call=" + value;//create appropriate link depending on function parameters
var xmlHttp = getXMLHttp();
xmlHttp.onreadystatechange = function()
{
if(xmlHttp.readyState == 4)
{
HandleResponse(xmlHttp.responseText);
}
}
xmlHttp.open("GET", linkInfo, true); //update page using link info variable created above
xmlHttp.send(null);
}
So as you can see I'm trying to pass a sting of text into this function, but I seem to be failing somewhere.
You probably want to setup your tag to pass "this". I don't see where your raceupdate variable is declared, unless it's global... in which case you should show us what you're doing with that variable.
<select onchange='MakeRequest(this);'>
<option>Deathmateched</option>
<?php
dmList();
?>
If you did it that way, you'd have to change this function as such:
function MakeRequest(element)
{
var linkInfo = "teleport.php?call=" + element.value;//create appropriate link depending on function parameters
var xmlHttp = getXMLHttp();
xmlHttp.onreadystatechange = function()
{
if(xmlHttp.readyState == 4)
{
HandleResponse(xmlHttp.responseText);
}
}
xmlHttp.open("GET", linkInfo, true); //update page using link info variable created above
xmlHttp.send(null);
}
And what are you trying to do here?
this.options[this.selectedIndex].value;
In your comments, it looks like you're saying you want to jump to an anchor tag? If so, then you would want to do something like
var anchorTag = document.getElementID("YOUR_ANCHOR_TAG_ID");
anchorTag.focus();
How can I refresh a particular part of a web page with a time interval (not entire page)?
You can use Ajax for your purpose.
suppose you want to check username availability before registering a user to your site.
create a request object asynchronously
function createRequest()
{
try{
request=new XMLHttpRequest();
} catch(tryMS){
try{
request=new ActiveXObject("Msxml2.XMLHTTP");
} catch(otherMS){
try{
request=new ActiveXObject("Microsoft.XMLHTTP");
} catch(failed) {
request=null;
}
}
}
return request;
}
Next is the code to send a asynchronous request
function checkAvailability (username) {
request=createRequest();
if(request==null){
alert("Ajax request not possible on your browser");
return;
}
var url="checkAvailability?username="+username;
request.open("GET", url, true);
request.onreadystatechange = showStatus;
request.send(null);
}
Track the response
function showStatus () {
if(request.readyState == 4) {
if(request.status == 200) {
var response = request.responseText;
if(response == 1){
//username available
} else{
//username not available
}
}
}
}
Suppose you have a DIV in your your Web Page that you want to refresh :
<div id="myDiv"> </div>
To refresh it using javascript you just have to select it and change the html code :
document.getElementById("myDiv").innerHtml = "Your new html code to display"
If you want to deal with forms, database queries ...
You have to use AJAX to call some php scripts for example without reloading the current page ...
You are talking about AJAX
Look at http://api.jquery.com/jQuery.ajax/ for jQuery
But please consider learning the underlying javascript language - you will be better for it in the long run
here is a simple example
http://www.degraeve.com/reference/simple-ajax-example.php
The history behind ajax can be found here http://www.adaptivepath.com/ideas/ajax-new-approach-web-applications