I have some AJAX code that is redirecting when button is pressed.
It is redirecting to members.php
This is the AJAX code:
<script language="javascript" type="text/javascript">
function ajaxFunction(){
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("Please update your browser.");
return false;
}
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
// We still need to write some code here
if(ajaxRequest.readyState == 4){
// Get the data from the server's response
response = ajaxRequest.responseText;
}
}
ajaxRequest.open("GET", "accept.php?id=<?php echo $articleid; ?>&state=accept$p=a9dafdd0fe68c6f64841e265e1c8832a", true);
ajaxRequest.send(null);
}
</script>
And this is the button:
<input type="submit" onChange="ajaxFunction();" />
And this is the contents of accept.php:
<?php
echo "ACCEPTED";
?>
Ideas?
<input type="submit" onChange="ajaxFunction();" />
should be
<input type="submit" onclick="ajaxFunction();" />
and use return false; at the end of your function
or you can use simple jquery
$("#submit").click(function(){
// or $("#form").submit(function(){
$.get("accept.php?id=<?php echo $articleid;
?>&state=accept&p=a9dafdd0fe68c6f64841e265e1c8832a",function(data){
rasponce=data;
})
return false;
})
what is this?
"&state=accept$p=a9dafdd0fe68c6f64841e265e1c8832a",
... should it be something like
"&state=accept&p=a9dafdd0fe68c6f64841e265e1c8832a",
members.php is the action on your form? If so I'd remove the action and try it again, to see what happens.
Related
How can I load html in a div when I click a button?
I have function but it does not work:
function ajaxFunction(id, url){
document.getElementById("sh").style.visibility = 'hidden';
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;
}
}
}
xmlHttp.onreadystatechange = function(){
if (xmlHttp.readyState == 4) {
//Get the response from the server and extract the section that comes in the body section of the second html page avoid inserting the header part of the second page in your first page's element
var respText = xmlHttp.responseText.split('<body>');
elem.innerHTML = respText[1].split('</body>')[0];
}
}
var elem = document.getElementById(id);
if (!elem) {
alert('The element with the passed ID doesn\'t exists in your page');
return;
}
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
And I have button to click it.
<button type="button" name="new metere" value="" class="button" onclick="ajaxFunction('test','newmetere.html');">new metere</button>
when I put newmetere.php Function does not work and get garbage value.
Try jQuery's load () : it's a fast and simple way to load content from another page asynchronously in a web page using Ajax!
I am using AJAX function. I am passing 3 variables to the next page using AJAX. When I add the 4th variable the function doesn't get called.
Code:
<script language="javascript" type="text/javascript">
//Browser Support Code
function ajaxFunction(){
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){
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
var count = document.getElementById('count').value;
var type = document.getElementById('type').value;
var sem = document.getElementById('sem').value;
var rid = document.getElementById('room').value;
ajaxRequest.open("GET", "add_requi_ajax.php?count=" + count+"&type="+ type+"&sem="+sem+"&rid="+rid, true);
ajaxRequest.send(null);
};
</script>
Your code is syntactically and logically correct, which means that the problem is likely one of your input IDs is wrong (typo? Should room be rid?), or you call the function before the inputs are rendered on the page (use window.onload).
Verify each of your input IDs. If they all look correct, then comment them out and hard code the values to rule out your inputs as a problem. Watch the error console for any error messages. If an uncaught error is encountered, it can appear that the function isn't being called.
You probably need to urlencode your values.
<html><head><title>Loses</title></head><body>
<script language="javascript" type="text/javascript">
function ajaxFunction() {
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;
}
}
}
// Receive data from the server to update div
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.value = ajaxRequest.responseText;
}
}
// Get the value from user.
if (!target) target = document.getElementById("name");
var queryString = "?name=" + escape(target.value);
var url = "db.php" + queryString;
ajaxRequest.open("GET", url, true);
ajaxRequest.send(null);
}
</script>
<form name="myForm">
Victim: <input type="text" id="name" name="name"/> <br/>
<br/>
<input type="button" onclick="getLoses()" value="Show Loses"/>
</form>
<div id="ajaxDiv">Results:</div>
<br>
</body></html>
Why doesn't this do anything?
I've tried it under apache and lightpd. I'm getting no complaints or errors, but it's just not doing anything.
If I call the backend manually, db.php?name=Player1 it works. So it can't be anything in db.php. Something is wrong with the code above and I just don't know what's missing. Can anyone help me?
You call a function getLoses() on button-click, but there is no such function(the name is ajaxFunction)
if (!target) target = document.getElementById("name");
there is no variable target, so the check for !target will result in a script-error.
Remove the if(!target) from that line or change the condition to :
if (typeof target=='undefined' || !target)
I have a php function in which some pdf is being created. I have a button and I want to call that function on button click and then redirecting to a url. What can be the simplest method of doing that?
If you need to call a PHP method, I'd use AJAX. Something like this:
var btn = document.getElementById("button_id");
btn.onclick = function () {
// Make AJAX request
// On success, do this:
window.location.href = "url to redirect to";
};
The code for "Make AJAX request" can be Googled easily, and I will provide it in a minute :)
UPDATE:
function ajaxFunction() {
var ajaxRequest; // The variable that makes Ajax possible!
try {
// Firefox, Chrome, Opera 8.0+, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e) {
// Internet Explorer Browsers
try {
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
try {
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP.6.0");
} catch (e) {
try {
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP.3.0");
} catch (e) {
throw new Error("This browser does not support XMLHttpRequest.");
}
}
}
}
}
return ajaxRequest;
}
The AJAX code -
var req = ajaxFunction();
req.onreadystatechange = function (response) {
if (response.status == 200 && response.readyState == 4) {
window.location.href = "url to redirect to";
}
}
req.open("POST", "your PHP file's URL", true);
req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
req.send(null); // Or send any `key=value&` pairs as a string
There are various ways to accomplish this. I would call the PHP function in ajax and redirect based on the functions return value. The following example uses jQuery:
jQuery:
$.ajax({
url: 'createpdf.php',
success: function(data) {
if (data) window.location = 'link/to/new/path';
}
});
PHP:
function create_pdf(){
//Create PDF
//If PDF was created successfully, return true
return true;
}
<form name="input" action="whatever.php" method="get">
...
<input type="submit" value="Submit">
</form>
<script language="javascript" type="text/javascript">
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){
var result = ajaxRequest.responseText;
}
}
ajaxRequest.open("GET", "vartest.php", true);
document.getElementById('span').innerHTML = result;
ajaxRequest.send(null);
}
This is because Ajax is asynchronous, and result isn't set yet when you do this (plus the var makes it local to the function anyway, you'd have to remove that).
The best thing to do would be to move the innerHTML line into the readystatechange callback.
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
document.getElementById('span').innerHTML = ajaxRequest.responseText;;
}
<script language="javascript" type="text/javascript">
//this is in the global scope
//so it's available anywhere
**var result;**
function ajaxFunction(){
var path = 'http://localhost/php/';
var fileName = 'yourCode.php';
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){
**result = ajaxRequest.responseText;**
}
}
ajaxRequest.open("GET", path+fileName, true);
ajaxRequest.send(null);
}
</script>
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
result = ajaxRequest.responseText;
}
}
ajaxRequest.open("GET", "vartest.php", true);
document.getElementById('span').innerHTML = result;
ajaxRequest.send(null);
}