Utilize GetXmlHttpObject for an AJAX request to interact with a PHP script

I am currently attempting to call a PHP file using the GetXmlHttpObject object and so far, I have had some progress. However, it seems that there is an issue with the URL variable.

Do I need to handle the URL string in a different way?

Here is the relevant code snippet:

remoteCounter('marks');//invoking function

document.write("<div id=\"marks\"></div>");//destination div

function GetXmlHttpObject () {

 var xmlHttp = null;

 try {
   // Firefox, Opera 8.0+, Safari, IE 7+
   xmlHttp = new XMLHttpRequest();
 } catch (e) {
   // Internet Explorer - old IE - prior to version 7
   try {
      xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
   } catch (e) {
      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
   }
 }

 return xmlHttp;
}


function remoteCounter(param){
counterObj = GetXmlHttpObject();

var url="HTTP://dnsname/directory/view.php?" + param;
alert(url + " " + counterObj);

counterObj.open("GET", url , true);
counterObj.onreadystatechange=updateCounter;
counterObj.send(null);
}

function updateCounter(){
//alert('updateCounter');
    if (counterObj.readyState == 4 || counterObj.readyState == "complete"){
        document.getElementById("marks").innerHTML=counterObj.responseText;
    }
}

I can substitute the counterObj.responseText variable in document.getElementById("marks").innerHTML=counterObj.responseText;

and observe the test string displaying correctly in the source document, indicating that the HTML and JavaScript source code are not the root of the problem.

I have even opted to comment out sections of the view.php file to simply echo a basic string, yet it does not appear either--leading me to believe the issue lies within the request to the file rather than the contents of the file or the source code.

The actual server name and directory have been replaced with 'dnsname/directory' for this post, and I have included alerts for debugging purposes.

Thank you for your assistance.

Answer №1

Change the position of the first two lines:

document.write("<div id=\"marks\"></div>"); //target div

remoteCounter('marks');  //calling function

It is important to declare the div tag with id "marks" first.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The Bootstrap toast fails to appear on the screen

I am currently working on a website project using HTML with bootstrap and javascript. I have been attempting to include a toast feature by implementing the code provided on the bootstrap website: <div class="toast" role="alert" aria-live="assertive" ...

Which Javascript/Css/HTML frameworks and libraries would you suggest using together for optimal development?

Interested in revamping my web development process with cutting-edge libraries, but struggling to navigate the vast array of tools available. The challenge lies in finding a harmonious blend of various technologies that complement each other seamlessly. I& ...

Utilize a singular ajax function to handle various events with personalized data parameters

Could someone help me with this specific issue? Here is an explanation. Let's say I have a function called load_window() and various events like clicks, changes, etc. How can I properly create a custom_data variable in these events and use it in the ...

Creating a radio button along with a submit button that redirects to a different local HTML file

Can someone please help with this code? I'm trying to redirect to the value of each radio button when it's clicked. Any guidance or JavaScript code would be greatly appreciated. Thank you. I've tried multiple solutions but none of them seem ...

Custom Email Template for Inviting Msgraph Users

I'm currently exploring the possibility of creating an email template for the MS Graph API. I am inviting users to join my Azure platform, but the default email they receive is not very visually appealing. public async sendUserInvite(body: {email: < ...

Creating grids and dividing them using a combination of CSS, JavaScript, and PHP

I've encountered an interesting challenge while working on a web project and would love some advice on how to tackle it: Within a database, I have a collection of images that I want to display in a grid format. The twist is that higher ranked images ...

Change the class of <body> when the button is clicked

One of my tasks involves adding a button that, when clicked, should give the body the class "open-menu". Implementing this using jQuery was quite straightforward - I just needed to add the following line of code: $('.burger').click(function() ...

Is it feasible to send props to { children } within a React functional component?

Workaround presented below. I am attempting to send props down to a child component using {children}. The Parent component: const ParentComp = ({ children, propsToSendToChild }) => ( <div>Dynamic component content: {children} &l ...

Chrome Extension for Extracting Data from Websites

I am in the process of developing my Google Chrome extension that needs to store a variable from another website by passing it over. Below is the snippet of code found in the script.js file of the website: var editorExtensionId = "extension"; & ...

Master the art of controlling Bootstrap tabs through Ajax from a different web page

In my Laravel project, there is a view that displays all products in the first tab and pending products in the second tab. However, when I try to validate a certain product from the second tab, I get redirected to another view with the first tab active. Th ...

Navigating Sockets with Navigator in React Native

Every time I encounter the error message undefined is not an object (evaluating this.props.socket.on). In my code, I define the socket in the index.ios.js file as shown below: class Main extends Component { constructor(props) { super(props); ...

Tips for successfully passing store state as a prop in React-Redux with TypeScript

Having trouble passing information from the initial state of the store to a component where it's supposed to be rendered. Despite a console.log in the component showing that it's undefined, there doesn't seem to be any issue with the initial ...

I am currently working on completing my order book code, but I am struggling to understand how to summarize the objects

I have been working on my order book code and I am struggling to figure out how to summarize objects. Below is the current code that I have: const orderbook = [ { "ClientID": "31135d2c-a5f0-11ed-b07a-10e7c6f7c62e", "Side": "BID", ...

Having trouble importing the "@angular/material" module

I'm completely new to working with the MEAN stack and currently running into issues with Angular's material module. I am attempting to bring in the "@angular/material" module into my code, but encountering an error each time I try to import it. T ...

What is the best method to determine the accurate height of a window that works across all browsers and platforms?

Is there a way to accurately determine the visible height of the browser window, taking into consideration any floating navigation bars or bottom buttons that may interfere with the actual viewing area? For example, mobile browsers often have floating bar ...

The back button fails to refresh the page on a website utilizing Ajax technology

Recently, I implemented AJAX on a client's website to introduce some smooth animations for page transitions. When navigating from the homepage of firedogcreative.com to the edit page, and then to one of the work pages, we see a history like this: fir ...

What could be causing Vuejs to not update elements promptly?

Currently, I am encountering a scenario where I am adding options to a select element using Vue.js when the @change event of that specific element is triggered. An issue arises where the new option is not 'registered' until I exit the function. ...

Having trouble connecting to the http json service in AngularJS

I recently started learning angularjs and I'm facing an issue with my code. There seems to be a flaw in the code and I'm uncertain about it. From a java perspective, the httpController has a nested function defined inside. Below is the code sn ...

Socket connection in Vue not activating

I've been experimenting with incorporating Vue.js and sockets together, but I'm encountering an issue where my Vue application isn't receiving socket events. Despite following online tutorials, the example provided doesn't seem to work ...

C# monitoring thread for real-time updates on AJAX console

After reading various posts on StackOverflow about multi-threading, I have not found one that addresses my specific question. In my MVC 3 application, I am importing around 5000 records from an XML document into a database. I want to include an AJAX conso ...