the following javascript function only seems to work when i have the final confirm() statement which I had originally in there for debugging purposes. when i take it out, delete_row.php doesn't seem to run. also, and perhaps as a hint/side-note, when i do have the confirm statement in there, it works on all browsers except for safari...
function deleterow(form) {
if (!confirm("Are you sure you want to delete?")) return false;
var queryString = "?ID=";
for (var i = 0; i < document.myForm.rows.length; i++) {
if (document.myForm.rows[i].checked) {
ID = document.myForm.rows[i].value;
ID = ID.slice(0, -1);
queryString += ID;
queryString += "-";
}
}
queryString = queryString.slice(0, -1);
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;
}
}
}
var ajaxRequest; // The variable that makes Ajax possible!
// 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;
}
}
ajaxRequest.open("GET", "delete_row.php" + queryString, true);
ajaxRequest.send(null);
confirm('Delete successful!');
}
UPDATE SOLVED
i was checking the status of the ajaxRequest through the following js script change
ajaxRequest.onreadystatechange = function(){ // Create a function that will receive data sent from the server
if(ajaxRequest.readyState == 4 && ajaxRequest.status == 200){
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
else{
alert('An error has occurred making the request');
return false;
}
}
and noticed i was getting a status of 0 back from the server. some googling around helped me realize that the error lied in how i was defining the buttons which were calling these functions.
original code was:
<div style='float:left; margin-right:10px;'><input type="submit" onClick="deleterow(document.myForm)" VALUE="Delete ROWs"></div>
fix is:
<div style='float:left; margin-right:10px;'><input type="button" onClick="deleterow(document.myForm)" VALUE="Delete ROWs"></div>
(submit type has to be changed to button type)
delete_row.php doesn't seem to run have you verified this, can you add an alert to if(ajaxRequest.readyState == 4){ I tried your JS though without the form stuff and it seems to work fine, http://jsfiddle.net/6gjy6/ Do you get any JS errors in Google Chromes console? Have you tried doing a basic "GET" request on the browser with the appripriate url ie delete_row.php" + queryString, and seeing how the server responds instead of the AJAX call.
try this:
var queryString = "?ID=";
for (var i = 0; i < document.myForm.rows.length; i++) {
if (document.myForm.rows[i].checked) {
ID = document.myForm.rows[i].value;
ID = ID.slice(0, -1);
queryString += ID;
queryString += "-";
}
}
queryString = queryString.slice(0, -1);
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;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
alert("received: " + ajaxRequest.responseText);
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
ajaxRequest.open("GET", "delete_row.php" + queryString, true);
ajaxRequest.send(null);
I'm fairly sure you're supposed to set the onreadystatechange event after calling open, otherwise the handler is cleared.
keep your confirm() statement there while at the top of your js put
window.alert = null ;
and try
k let me check
Related
I have a Sharepoint 2013 site set up. I added a web part to the home page that makes an ajax call to an outside API, and returns JSON data, showing an image and a link. When you visit the site in Chrome, it works perfectly, however in Internet Explorer (11), it doesn't work. The odd part is I know that it is running the JS, because it is showing the "No Current News" p tag from the second line. This is my code:
<h1 style="text-align: center">PQA In The News</h1>
<div id="myNewsFeed"><p>No Current News</p></div>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script><script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script><script type="text/javascript">
$(document).ready(function() {
document.getElementById("myNewsFeed").innerHTML = "<p>No Current News</p>";
var d = new Date();
var n = d.getTime();
var mo = 86400000 * 30;
n = n - mo;
var queryString = "https://webhose.io/search?token=xxxx&format=json&q=Company%20Name&ts=" + n;
loadJSON(queryString);
function loadJSON(newsURI){
var data_file = newsURI;
var http_request = new XMLHttpRequest();
try{
// Opera 8.0+, Firefox, Chrome, Safari
http_request = new XMLHttpRequest();
}catch (e){
// Internet Explorer Browsers
try{
http_request = new ActiveXObject("Msxml2.XMLHTTP");
}catch (e) {
try{
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
http_request.onreadystatechange = function(){
if (http_request.readyState == 4 ){
var jsonObj = JSON.parse(http_request.responseText);
DisplayData(jsonObj);
}
}
http_request.open("GET", data_file, true);
http_request.send();
}
function DisplayData(data) {
var htmlSource = "<ul>";
for(var i=0; i < data.posts.length; i++) {
htmlSource += "<li><img src=\"" + data.posts[i].thread.main_image + "\" height=\"150px\" width=\"150px\">" + data.posts[i].title + "</li>";
}
htmlSource += "</ul>"
document.getElementById("myNewsFeed").innerHTML = htmlSource;
}
});</script>
I changed the Query String, because it has my company's key, but I can assure you it works. On Chrome, this shows everything fine, but in IE it just shows "No Current News".
Did I do anything wrong, or does Internet Explorer have something against Ajax?
As suggested by Kalamarico best way is to use jquery ajax call and also add fail handler to check exact error. In the above code your javascript call is working but it might not be going to ready state 4 and hence not setting the value. Can you check for other states and also should not be the http request call inside readystatechange event inside else otherwise after hitting ready state 4 also it will fire again.
I have a problem with my ajax call, ive been searching here and cant find a answer to.
here is what happened the script worked great one second then when i logged in to use it again it just shows me my main index page any time i put http:// inside the text area here is the code.
function is_valid_url()
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;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('output');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
var text = document.getElementById("text").value;
var queryString = "?text=" + text;
ajaxRequest.open("GET", "textscraper.php" + queryString, true);
ajaxRequest.send(null);
}
here is the html
<textarea id="text" onkeyup="is_valid_url()" placeholder="What do you think?" class="posttext">
</textarea>
any help is appreciated.
please see the code below:
function createXMLHttpRequestObject() {
// will store the reference to the XMLHttpRequest object
var ajaxRequest;
// create the XMLHttpRequest object
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;
}
}
}
// return the created object or display an error message
if (!ajaxRequest) alert("Error creating the XMLHttpRequest object.");
else return ajaxRequest;
}
function ajax_update() {
var ajaxRequest = createXMLHttpRequestObject();
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState != 4){
...
}
if(ajaxRequest.readyState == 4){
//process JSON data
}
}
}
I am trying to monitor/listen for ajaxRequest.readyState value from outside ajax_update() function.
ajax_update() is triggered on button onlick.
MY aim is being outside of function ajax_update() to fire another JS function only when all Ajax calls are completed, that means ajaxRequest.readyState==4.
for ex:
<input type='button' value='SEND QUOTE' onclick=\"ajax_update(some params); function_that_fires_when_readystate_is_completed();\">
Any ideas?
Thank you in advance!
Use a callback.
JS
function ajax_update(callback) {
var ajaxRequest = createXMLHttpRequestObject();
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
callback();
}
};
xmlhttp.open(...);
xmlhttp.send(null);
}
HTML
<input onclick="ajax_update(function_that_listens_to_readyState);">
ajaxRequest1.onreadystatechange = function(){
if(ajaxRequest.readyState != 4){
...
}
if(ajaxRequest.readyState == 4){
//process JSON data
firstIsReady = true;
check();
}
}
ajaxRequest2.onreadystatechange = function(){
if(ajaxRequest.readyState != 4){
...
}
if(ajaxRequest.readyState == 4){
//process JSON data
secondIsReady = true;
check();
}
}
function check() {
if (firstIsReady && secondIsReady) {
//both ajax calls completed
}
}
Something like that. It's really ugly, but without knowing exactly what you want to do, I can't give you a better way to do it.
define this globaly
var requestCounter = 0;
and then
function ajax_update() {
var ajaxRequest = createXMLHttpRequestObject();
//after calling request.open();
requestCounter++;
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState != 4){
requestCounter--;
//error code here
}
if(ajaxRequest.readyState == 4){
//process JSON data
requestCounter--;
}
if (requestCounter == 0)
onAllRequestComplete();
}
}
function onAllRequestComplete(){
// code that have to run when all requests have been completed
}
hope that help.
I am very new to this
I have this link:
<a onclick = sendRequest('GET','room_chart.jsp') href=#>Show Chart</a>
but I need to generate dynamic address inside that link.
I created javascript:
<script language="javascript">
var selectedOption;
var ROOM;
var BUILDING;
function GetLink(){
selectedOption = document.getElementById("roomandbuildingid").options[e.selectedIndex].text; //getting selected option
ROOM = selectedOption.split("|")[0].trim().split(":")[1].trim(); //parsing text
BUILDING = selectedOption.split("|")[1].trim().split(":")[1].trim(); //parsing text
return "'room_chart.jsp?room="+ROOM+"&building="+ BUILDING+"'"; //returning url
}
</script>
but when I paste the function into it- it does not work!
<a onclick = sendRequest('GET',GetLink()) href=#>Show Chart</a>
Now, after debug, I found out that actually it creates the proper srting, but somehow my function is not willing to accept it as URL! It is quite a paradox- it creates correct string- if I hardcode it into the code- it works! But dynamic links from variables - don't work!
please help!
see below:
my js file:
function createRequestObject(){
var req;
if(window.XMLHttpRequest){
//For Firefox, Safari, Opera
req = new XMLHttpRequest();
}
else if(window.ActiveXObject){
//For IE 5+
req = new ActiveXObject("Microsoft.XMLHTTP");
}
else{
//Error for an old browser
alert('Your browser is not IE 5 or higher, or Firefox or Safari or Opera');
}
return req;
}
//Make the XMLHttpRequest Object
var http = createRequestObject();
function sendRequest(method, url){
if(method == "get" || method == "GET"){
http.open(method,url);
http.onreadystatechange = handleResponse;
http.send(null);
// alert( document.URL );
// document.write (GetLink());
}
}
function handleResponse(){
if(http.readyState == 4 && http.status == 200){
var response = http.responseText;
if(response){
document.getElementById("ajax_res").innerHTML = response;
}
}
}
OK, the function was returning everything correctly, the parsing was not done right. I fixed it. JavaScript is hard for me to debug.
I get the following error: "attempt to run compile-and-go script on a cleared scope"
<script language="javascript">
<!--
function get_xmlhttp_object () {
var xml_http;
try {
// Firefox, Opera 8.0+, Safari
xml_http = new XMLHttpRequest ();
}
catch (e) {
// Internet Explorer 6
try {
xml_http = new ActiveXObject ('Msxml2.XMLHTTP');
}
catch (e) {
try {
xml_http = new ActiveXObject ('Microsoft.XMLHTTP');
}
catch (e) {
xml_http = false;
}
}
}
return xml_http;
}
function saveRemarks(oid){
var xmlhttp;
// Create a function that will receive data sent from the server
if (xmlhttp = get_xmlhttp_object()) {
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4){
document.getElementById('inpremarks').value = xmlhttp.responseText;
}
}
}
var inpremarks = document.getElementById('inpremarks').value;
var queryString = "?oid=" + oid + "&remarks=" + inpremarks;
xmlhttp.open("GET", "order_remarks_save.php" + queryString, true);
xmlhttp.send(null);
}
//-->
</script>
<textarea id="inpremarks" name="inpremarks" rows="3" cols="70" onchange="saveRemarks(24143);">
The error is caused by the line (Firefox javascript error-console):
if(xmlhttp.readyState == 4){
In IE everythings works fine...
How do I get this working in Firefox also?