Executing JavaScript following an Ajax request

I am faced with a situation where my HTML file utilizes a function for loading another PHP file using Ajax:

   function LoadContent(n,func)
{           
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState== 4 && xmlhttp.status == 200)
        {
            document.getElementById("div-content").innerHTML=xmlhttp.responseText;
        if(typeof(func)==='undefined')
                {
                // nothing
                }
            else
                {
                eval(func);
                }

        }
    }
    xmlhttp.open("GET",n,true);
    xmlhttp.send();
}

Everything seems to work fine up until this point. The PHP file being loaded generates HTML content which includes a

<script> 
function foo() { 
alert('hello'); 
} 
</script>

The main HTML file invokes the loader with

javascript:LoadContent('file.php','foo()')
, but unfortunately, the foo() function is not executed. When checking in Chrome, it gives an error "no such function" related to the eval() line.

I am trying to figure out how I can ensure that after the Ajax loading process, the JavaScript function within the loaded HTML is actually executed? Any suggestions or recommendations would be greatly appreciated.

Answer №1

Consider this alternative approach:

javascript:LoadContent('newstandby.php',callbackFunction)

As callbackFunction is a function and will be executed as a callback, it should be passed as a function rather than its result (callbackFunction())

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

Tick the checkboxes that are not disabled, and leave the disabled ones unchecked

Currently, I am employing Jquery for the purpose of checking and unchecking checkboxes. However, some of these boxes are disabled, thus there is no need for them to be checked. Is there a method by which I can instruct the script to disregard disabled che ...

The challenge of loading multiple objects asynchronously in three.js

When I try to load multiple models onto the same scene simultaneously, only one model is successfully loaded. For instance, if I have a building scene with various objects like chairs and toys inside, only one object gets loaded when I try to load them all ...

I'm currently leveraging Vue.js and Python Flask for my backend development. I'm looking to establish some local variables. What is the best way to accomplish this?

Here is my Vue js file where I am utilizing two URLs from localhost. My goal is to create a configuration file that will allow me to make changes in one place and have those changes reflected throughout. <template> <div> <div class="glob ...

Tips on adjusting the pixel dimensions of an image using a file object

Within a form on our website, users have the ability to upload an image file. To ensure quality control, I've set up validation to confirm that the uploaded file is either an image or gif format. In addition to this, I'm looking for a solution th ...

What is the best way to utilize Gulp and Browserify for my JavaScript application?

Looking to modernize my app with a new build system and I could use some guidance. It seems like I need to shift my approach in a few ways. Here's the current structure of my app: /src /components /Base /App.jsx /Pages.jsx /. ...

Issue: The keyword in React/React-Native is returning a boolean value instead of the expected element object

I've recently delved into learning and coding with React, and I'm encountering a bug that I need help fixing. The issue lies within my application screen where I have two checkboxes that should function like radio buttons. This means that when on ...

Incorporate the Facebook Like button into content that is loaded dynamically

I'm currently working on a website that features a dynamic list of items loaded through AJAX. As you scroll down the page, more items are automatically added. Recently, my client expressed interest in adding a Facebook like button (and the correspond ...

Able to display the value when printing it out, however when trying to set it in setState, it becomes

Within my form, there's a function that receives the value: _onChange(ev, option) { console.log(option.key) // Value of option key is 3 this.setState({ dropdownValue:option.key }) // Attempting to set state with 'undefined' as ...

How can I retrieve the index of a v-for loop within a function in Vue.js HTML?

How can I splice the array from the fields in HTML Vue JS if the status is true? I also need to pass the index value to a function. Is this possible? The error I am encountering is: Uncaught ReferenceError: index is not defined at Object.success (80 ...

Exploring the world of three.js, webGL, and GLSL through the magic of random

When using three.js to call a fragment shader, I have a shader that specifies a color for my material in rgb format. I am trying to figure out a way to multiply those colors by a random value. The code I currently have is as follows: gl_FragColor = vec4( ...

FusionCharts Gauges may share similar code, but each one produces a unique output

Currently, I am developing a project that involves creating a dashboard with 3 gauges. These gauges are enclosed in bootstrap cards with a column value set to 4. In the layout of the dashboard, these 3 cards are positioned next to each other. I have succe ...

Connect to dynamically generated div on separate page

I am facing an issue with my navigation bar drop down menu that displays event titles fetched from the database. I want users to be able to click on a specific event and have the page scroll to the dynamically generated content for that event. However, it ...

What is an alternative way to retrieve the page title when the document.title is unavailable?

Is there a way to retrieve the page title when document.title is not available? The code below seems to be the alternative: <title ng-bind="page.title()" class="ng-binding"></title> How can I use JavaScript to obtain the page title? ...

Having difficulty interacting with a button using Selenium and JavaScript

For some reason, I am experiencing difficulty in clicking the login button even though my code appears to be accurate and there are no iframes or windows present: const { Builder, By, Key, until } = require('selenium-webdriver'); const { expect ...

Displaying the quantity of directories within a specific location

Can anyone help me troubleshoot my code? I'm trying to have a message displayed in the console when the bot is activated, showing the number of servers it is currently in. const serversFolders = readdirSync(dirServers) const serversCount = parseInt(s ...

Hide the form using jQuery specifically when the login submit button is selected, not just any random button

One issue I am facing is that when a form is submitted correctly, it hides the form. However, I have added a cancel button to close the pop-up thickbox window, but instead of closing the window, it also hides the form. How can I ensure that hitting cancel ...

What sets server-side development apart from API creation?

As I dive into the world of web development, I find myself facing some confusion in my course material. The instructor has introduced concepts like promise objects and fetch, followed by axios, and now we're delving into the "express" package for buil ...

Asynchronous update of array elements - lack of firing watch events

I have recently developed a component that showcases previews of blog articles. This particular component includes pagination functionality, where selecting a new page triggers the refreshment of the article previews array. The list of articles is obtained ...

Generating Vuetify badges and icons with createElement in the render function: A step-by-step guide

Within my Vue application, I utilize a v-data-table. The column values are generated using a render function within a functional component as illustrated below: render(createElement) { if (this.$props.format) { return this.$props.format(this.ite ...

What is the best way to trigger a modal to appear when dynamically generated items are clicked?

My objective is to retrieve specific data from the server and present it in a list format on my webpage. The list displays correctly, but I want users to be able to view additional details for each list item by clicking on it, triggering a modal popup. How ...