Reload before response and uncheck radio button - javascript

I am getting response without a refresh! When the user clicks on the button, I want it to reload and then display the response!How can I do that?
And What should I do to uncheck the radio box after the response?
<script>
function sendid(attack) {
var att;
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("result").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("POST", "battleuser2.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("att=" + attack);
}
</script>
This is my radio form:
<input type="radio" value="10" id="radioButtonId" onClick="sendid(this.value)"/> Attack 1
<input type="radio" value="20" id="radioButtonId" onClick="sendid(this.value)"/> Attack 2

No, you can't reload and display the response unless you are making the ajax call on page load again.
else you need to store the previous response in localstorage and access it from it when the page reloads again.
Regarding unchecking the radio button after the response, Insert the following code inside the if condition:
document.getElementById("radioButtonId").checked = false;
example:
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("result").innerHTML = xmlhttp.responseText;
document.getElementById("radioButtonId").checked = false;
}

Related

Cannot click on the content which is loaded through ajax function

Currently, I cannot load the second content using ajax. Actually, I have loaded the first content using ajax. In order to go to the second content, i need to call the ajax function but after i click to load the second content using ajax it does not work. I have checked my code, its working fine if i directly call the second ajax function, unless i call the first ajax function after that the ajax is not working again. Are there any ways to solve this problem.
This is the first ajax code:
function showMusic(str) {
if (str == "") {
document.getElementById("albums").innerHTML = "";
return;
} else {
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("albums").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET","getAlbums.php?q="+str,true);
xmlhttp.send();
}
}
The above function works. The above function is at another php file
This is the second ajax code:
$(document).ready(function(){
function showArtistDetails(str) {
if (str == "") {
alert("hi");
document.getElementById("artist").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
alert("hi1");
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
alert("hi2");
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("artist").innerHTML = xmlhttp.responseText;
alert("hi3");
}
};
xmlhttp.open("GET","getArtist.php?title="+str,true);
alert("hi4");
xmlhttp.send();
alert("hi5");
}
}
$("#clickme").click(showArtistDetails);
});
This is the php code which is at another php file:
echo "<td id=\"clickme\">" . $row['CDTitle'] . "</td>";
I have been trying to solve this for the past 2 days but i am unable to solve it. Some are saying its a bug. But i really i dont know what causes this problem. Thanks in advance.

How to show results with AJAX

I have problem with AJAX and database. I don't know what I have now to do.
So, I have this AJAX code:
<script>
function showCity(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
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","rozpiski.php?q="+str,true);
xmlhttp.send();
}
}
</script>
I want:
When user select some option, the second select list shows value (after gets this values from database).
This is my code HTML:
<select name="country3" onchange="showCity(this.value)"> <option>Anglia</option><option selected='selected'>Austria</option><option>Belgia</option><option>Czechy</option><option>Dania</option><option>Estonia</option><option>Finlandia</option><option>Francja</option><option>Holandia</option><option>Islandia</option><option>Lichtenstein</option><option>Luxembourg</option><option>Niemcy</option><option>Norwegia</option><option>Polska</option><option>Szwajcaria</option><option>Szwecja</option><option>Słowacja</option><option>Słowenia</option><option>Wyspy Owcze</option><option>Węgry</option><option>Włochy</option><option>Łotwa</option><option>Anglia</option><option>Austria</option><option>Belgia</option><option>Czechy</option><option>Dania</option><option>Estonia</option><option>Finlandia</option><option>Francja</option><option>Holandia</option><option>Islandia</option><option>Lichtenstein</option><option>Luxembourg</option><option>Niemcy</option><option>Norwegia</option><option>Polska</option><option>Szwajcaria</option><option>Szwecja</option><option>Słowacja</option><option>Słowenia</option><option selected='selected'>Wyspy Owcze</option><option>Węgry</option><option>Włochy</option><option>Łotwa</option><option>Anglia</option><option>Austria</option><option>Belgia</option><option>Czechy</option><option>Dania</option><option>Estonia</option><option>Finlandia</option><option>Francja</option><option>Holandia</option><option>Islandia</option><option>Lichtenstein</option><option>Luxembourg</option><option>Niemcy</option><option>Norwegia</option><option>Polska</option><option>Szwajcaria</option><option>Szwecja</option><option>Słowacja</option><option>Słowenia</option><option>Wyspy Owcze</option><option>Węgry</option><option>Włochy</option><option>Łotwa</option></select></td>
<td><select name="city" id="3"></select>
When the user in country3 select for example Polska, he gets in 2nd select cities from Polska. This cities are in database. How to do it?
Your html select-option tags should be:
<select name="country3" onchange="showCity(this.value)">
<option value="city">City</option>
</select>

Run getElementById bound to success of AJAX call

I'm building a small quiz. The score is stored in a variable quizScore - each question on the quiz is output using AJAX. The single AJAX call grabs the ID of the button pressed (so, on question 2, the button ID is 2a which takes you to the next AJAX refresh of question2a.php)
On the last AJAX call, which calls up a file called questionendQuiz.php, I want to have the output of the variable quizScore. I need to bind this output to an event, so success of loading that through AJAX makes sense.
/* Output score */
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("quizWrapper").innerHTML=xmlhttp.responseText;
if (buttonID == "question_endQuiz") {
document.getElementById("scoreOut").innerHTML = quizScore;
}
}
So this should output quizScore into div id="scoreOut" when the successful AJAX content loads.
I've double checked the score is actually working by using console logs. It is building the score correctly (see here it outputs the score in the console http://francesca-designed.me/quiz/quiz.php
I can't work out what is wrong with the success if statement to cause it to not output the score?
AJAX request, I've omitted some things that aren't useful to this question like the correct answer scoring and the start of the quiz:
/* Quiz Score */
var quizScore = 0; /* Takes you to each next question, based on ButtonID */
function nextQuestion(buttonID) {
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("quizWrapper").innerHTML = xmlhttp.responseText;
}
}
var splitID = buttonID.split('_');
var questionID = splitID.pop();
xmlhttp.open("GET", "question" + questionID + ".php", true);
xmlhttp.send(); /* Output score */
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("quizWrapper").innerHTML = xmlhttp.responseText;
if (buttonID == "question_endQuiz") {
document.getElementById("scoreOut").innerHTML = quizScore;
}
}
}
The button that marks the end of the quiz is:
<button id="question_endQuiz" onClick="nextQuestion(this.id)">See your score</button>
The score recording part should go into onreadystatechange as well. It is the callback for the request, and gets executed after the response is received, rather than before as in the code you provided.
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("quizWrapper").innerHTML = xmlhttp.responseText;
if (buttonID == "question_endQuiz") {
document.getElementById("scoreOut").innerHTML = quizScore;
}
}
}

Using Ajax to change the inner content of a div

I am a beginner at Ajax, and I have this html code that is meant to change the inner content of a div by using xmlhttprequest to request different html addresses and put their contents in a div. What am I doing wrong? Here is the code:
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<script type="text/javascript">
var xmlhttp= null;
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}else{
alert("You must be using a different browser.");
}
function makeRequest(serverPage,objID){
var obj = document.getElementById(objID);
xmlhttp.open("GET",serverPage);
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 100){
obj.innerHTML = xmlhttp.responseText;
}
}
xmlhttp.send(null);
}
</script>
</head>
<body onload="makeRequest ('content1.html','hw')">
<div align="center">
<h1>My Webpage</h1>
Page1 | Page2 | Page3 | Page4
<div id = "hw"></div>
</body>
Generally, this looks OK to me.
However the xmlhttp.status == 100 check looks suspicious.
100 is an unusual HTTP status code. Typically web servers return 200 ("OK") on a successful request.
Try replacing the status == 100 check with status == 200.
For reference,please see: http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html
change xmlhttp.status == 100 to xmlhttp.status == 200 check if this resolves your issue
and if you are try to run the page in IE try to add this line
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
Test for xmlhttp.status == 200 instead of 100.
http://www.w3schools.com/ajax/ajax_xmlhttprequest_onreadystatechange.asp
I guess it should be:
function makeRequest(serverPage,objID){
xmlhttp.open("GET",serverPage);
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
document.getElementById(objID).innerHTML = xmlhttp.responseText;
}
}
xmlhttp.send(null);
}
function AjaxGet(url,helm)
{
if (xmlhttp == null)
{ 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)
{ if ( (xmlhttp.status==200) || (xmlhttp.status==304) )
{ document.getElementById(helm).innerHTML = xmlhttp.responseText; }
else { document.getElementById(helm).innerHTML = xmlhttp.status + " " +xmlhttp.statusText; }
}
}
xmlhttp.open("GET",url,true);
xmlhttp.send();
}

Javascript and AJAX trough outside function

function ajax_request(destination_full_url) {
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) {
alert("response: \n" + xmlhttp.responseText);
return xmlhttp.responseText;
}
}
xmlhttp.open("GET", destination_full_url, true);
xmlhttp.send();
}
function third_party_function(obj) {
var response
response = ajax_request("info.php?keyword=obj.value");
alert(response);
}
<textarea onkeypress="third_party_function(this);"></textarea>
First comes off message box "underfined" one second after comes off message box with ajax request.
Question is why it runs alert(response); before finishing the previous step and how i make it wait untill ajax_request() function finished before going to next line?
because ajax is asynchronous and runs in background by default, you can make it synchronous by changing from
xmlhttp.open("GET", destination_full_url, true);
to
xmlhttp.open("GET", destination_full_url, false);
=== update ===
function ajax_request(destination_full_url, callback){
.....
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
alert("response: \n" + xmlhttp.responseText);
callback(xmlhttp.responseText);
}
}
...
}
....
function third_party_function(obj) {
ajax_request("info.php?keyword=obj.value", function(response){alert(response) });
}

Categories

Resources