Restore the href attribute following modal closure

Among the buttons in my gridview, there are options to trigger a bootstrap modal, each with different contents:

return Html::a('<i class="fa">&#xf06e;</i> ', $key, [
                'title' => 'View details of this agenda',
                'data-bs-toggle' => 'modal',
                'data-bs-target' => '#exampleModal',
                'class' => 'modal-link',
            ]);

return Html::a('<i class="fab text-danger fa-readme"></i> ', ['report/' . $model->agenda_id], [
                    'title' => 'Report for agenda pending approval',
                    'data-bs-toggle' => 'modal',
                    'data-bs-target' => '#exampleModal',
                    'class' => 'modal-link',
                ]);
 return Html::a('<i class="fab text-success fa-readme"></i> ', ['report/' . $model->agenda_id], [
                    'title' => 'View report for this agenda',
                    'data-bs-toggle' => 'modal',
                    'data-bs-target' => '#exampleModal',
                    'class' => 'modal-link',
                ]);

Below is the JavaScript function used to trigger the modal:

    $(function () {
    $('.modal-link').on('click', function (e) {
        e.preventDefault();
        $('#exampleModal').modal('show').find('#modalContent').load($(this).attr('href'));
    });
});

Upon initial click, the correct content (href) is displayed. However, subsequent clicks show the content from the first click. How can I reset the content so that each click displays the accurate href content?

Update

Here are the JS libraries incorporated in my yii2 application:

    'https://code.jquery.com/jquery-3.7.1.min.js',
    'https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0c6f637e694c3e223d3d223a">[email protected]</a>/dist/umd/popper.min.js',
    'library/restaurantly/assets/vendor/aos/aos.js',
    'https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a0c2cfcfd4d3d4d2c1d0e0958e938e908dc1ccd0c8c191">[email protected]</a>/dist/js/bootstrap.min.js',
    'library/restaurantly/assets/vendor/glightbox/js/glightbox.min.js',
    'library/restaurantly/assets/vendor/swiper/swiper-bundle.min.js',
    'library/restaurantly/assets/js/main.js',
    'https://cdn.jsdelivr.net/npm/sweetalert2@10/dist/sweetalert2.min.js',

Attempts to resolve the issue by removing these libraries individually resulted in the disappearance of the entire page.

javascriptyii2bootstrap-modalbootstrap-5

Answer №1

One possible solution is to address the caching issue that occurs after the initial load. To resolve this, you can clear the modal content whenever the modal is hidden. The following snippet demonstrates how to bind an event handler to the hidden.bs.modal event.

$(function () {
  // ...rest of your code

  $('#exampleModal').on('hidden.bs.modal', function () {
    $(this).find('#modalContent').empty();
  });
});

Answer №2

Huge shoutout to mandy8055 for their assistance. While their initial suggestion didn't solve all my problems, it did lead me to discover an alternative solution. Check out the revised code below:

$(document).on('click', '.modal-link', function(e) {
    e.preventDefault();
    var url = $(this).attr('href');
    var modal = $('#exampleModal');
    modal.find('#modalContent').load(url, function() {
       modal.modal('show');
    });
});

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 functionality of mouse hover in multimaterial three.js appears to be not functioning

I'm facing an issue where I want to create a mouse hover effect on an object with multiple materials. See an example here function update() { // Finding intersections // Creating a Ray with the origin at the mouse position // and dire ...

javascriptthree.jshovermouse

Using Electron to redirect to a different HTML file while passing GET variables

I am currently working on developing an Electron app. Within the project files, for example, I have app.html. My goal is to send GET variables like ?id=54&q=asd to the receiver.html, where I can then retrieve these id and q variables. As we all know, ...

javascriptelectron

How to render in Express.js without overwriting HTML elements (such as <p> tags)

I am currently working on a project that resembles a blog and I have a requirement to display text without altering the HTML tags. ./app.js //app.js ... var text = 'Hello <b>World</b>' app.get('/', (req, res)=>{ res ...

javascriptnode.jsexpressrender

Including a personalized User-Agent string in my headers for fetch requests

Currently, I am utilizing the fetch API within my React project to retrieve data from a JSON endpoint. One requirement I have is to include a custom User-Agent string in my requests. Upon inspecting my requests, I noticed that the UA string displays as: ...

javascriptreactjshttpheaderfetch-api

How to incorporate template literals when sending JSON responses in Node.js?

Utilizing express and aiming to return some JSON, I am considering using a template literal. Here is my current approach: resp.status(201).json({ message: "Customer added to database", url: "http://localhost:5000/Customer/" + doc._id ...

javascriptjsonnode.jsexpress

The transitions on my jQuery Mobile page are not functioning correctly

I am currently working on a custom MVC structure using Handlebars and jQuery Mobile. To manually manage routing, I have disabled two jQM parameters: $.mobile.linkBindingEnabled = false; $.mobile.hashListeningEnabled = false; These lines disable link bind ...

javascriptjquerymodel-view-controllerjquery-mobilehandlebars.js

Different tiers of log levels

I am trying to figure out how to log only "INFO" level messages to the console for users, and to a file store "DEBUG" level posts. Currently, I have come across a solution that involves using multiple "getLogger()" functions like so: log4js.getLogger(&ap ...

javascriptnode.jslog4js-node

Setting the font size for the entire body of a webpage globally is ineffective

Technology Stack: Nuxt.js + Vuetify.js Problem: Unable to set global body font size Solution Attempt: I tried to adjust the body font size to 40px in ~/assets/style/app.styl: // Import Vuetify styling ...

javascriptcssvue.jsvuetify.jsnuxt.js

Preventing text from wrapping in a TypeScript-generated form: Tips and tricks

I’m currently working on a ReactJS project and my objective is simple: I want all three <FormItem> components to be displayed in a single line without wrapping. However, I am facing the following output: https://i.stack.imgur.com/mxiIE.png Within ...

javascripthtmlcssreactjstypescript

What steps can be taken to ensure that the header elements such as the image, text, and button are

I am currently working on a website project using Bootstrap 5. For the header section of the site, I have incorporated a carousel from Bootstrap that includes images, text, and buttons. My main objective is to ensure that all elements within the carousel ...

htmlcssresponsive-designfrontendbootstrap-5

Is there a way to retrieve all IDs within an array of objects using a foreach loop and merge the data associated with each ID?

I am currently working on a TypeScript API where I have merged all the data from this API with some additional data obtained from another API function. I have provided a snippet of my code which adds data to the first index of an array. M ...

javascriptnode.jsarraysjsontypescript

Ways to retrieve the text of the <Label> element without relying on the "id" attribute

I have a challenge in extracting text enclosed within the `Label` tag. My knowledge of Javascript and JQuery is limited, so I require guidance on accomplishing this task. Currently, I am attempting to use code that I found on a stackoverflow post titled ge ...

javascript

What is the best way to replicate a synchronous ajax call? (mimicking synchronous behavior with asynchronous methods)

Given that a "native" synchronous ajax call can block the user interface of the browser, it may not be suitable for many real-world scenarios (including mine). I am curious to know if there is a way to mimic a synchronous (blocking) ajax call using an asy ...

javascriptajax

Exploring nested optgroup functionality in React.js

Within my code, I am utilizing a nested optgroup: <select> <optgroup label="A"> <optgroup label="B"> <option>C</option> <option>D</option> <option>G</option> </optg ...

javascriptreactjs

Add a new associative array to the Yii2 migration script

Within the database, there are 4 tables: months, types, prices, and tonnages. An array of data is structured as follows: 'prices'=> [ 'soy' => [ 'january' => [ 50 => 145, ...

phpyii2

Error in AngularJS when passing object to modal dialog

I'm facing a challenge with an AngularJS application I'm developing. It involves displaying a list of contacts, each accompanied by a button that triggers a modal containing a form for editing the contact information. The issue arises when attemp ...

javascriptangularjsangularjs-scope

What is the most effective approach for handling JSON data from URLs in a professional manner?

Hey there, I'm facing a dilemma on how to efficiently handle data retrieved from various URLs on my website. My website allows me to fetch JSON data from multiple URLs. For instance, there's a page full of posts related to a specific group with ...

javascriptjquerymysqlajaxjson

The mysterious plugin "transform-runtime" has been detected in the ".babelrc" file located in "UsersPhpstormProjectseasy-essay"

After downloading a GitHub repository, I came across a file named .babelrc.json with the following contents: { "presets": [ "es2015", "stage-0" ], "plugins": [ "transform-runtime", "add-module-exports", "transform-decorators-lega ...

javascriptangularjsnode.jsgulpbabeljs

Utilizing React JS to assign various state values from a dropdown menu selection

In my project, I have implemented a dropdown list populated from an array of values. This dropdown is linked to a handleSelect function. const handleSelect = (e) => { handleShow() setCommunityName(e) } <DropdownButton id="dropdown-basi ...

javascriptreactjs

Understanding the scope of jQuery variables within a function

myClass.prototype.toggle = function() { var elements = []; $.getJSON('http://localhost/jsoner.php', function(data) { $.each(data, function(index, value) { elements.push(value); alert(elements[0]); //this is functioning } ...

javascriptjqueryvariablesscope