"Displaying a popup message prompting users to refresh the page after clicking

Question

"Displaying a popup message prompting users to refresh the page after clicking

I need to implement a feature where the page refreshes only after the user clicks the "OK" button on a dialog box that appears once a process is completed.

The issue I'm facing is that in my current code, the page refreshes immediately after the process completes, without waiting for user interaction.

Below is the code snippet I am currently working with:

$.ajax({
    type: "POST",
    url: wsurl + "BackendRequest",
    data: '{ sDomain : "' + domain + '", sUserName : "' + username '"}',

    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (data) {
        document.getElementById('btnGenerate').disabled = true;
        showDialogPopup('Generate Request', data.d);
        //window.location.reload();
    },
    error: function (objXMLHttpRequest, textStatus, errorThrown) {
        showDialogPopup('Generate Request', data.d);
        //window.location.reload();
    }
});

The challenge is to find a way to trigger the page refresh only when the user interacts with the dialog box and clicks the "OK" button in the showDialogPopup method.

javascript c#asp.net ajax function

Answer 1

Answer №1

In order to make the "Ok" button functional, you need to create an onclick event for it. Here is a sample code snippet that you can use:

<a onclick="OpenModal()">Open Modal</a>

<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
    <div class="modal-content">
        <button onclick="ReloadPage()">Ok</button>
    </div>
</div>
</div>

<script>
//Function to open the modal
function OpenModal() {
    $("#myModal").modal('show');
}

//Function to reload the page
function ReloadPage() {
    window.location.reload();
}

Answer 2

In order to make the "Ok" button functional, you need to create an onclick event for it. Here is a sample code snippet that you can use:

<a onclick="OpenModal()">Open Modal</a>

<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
    <div class="modal-content">
        <button onclick="ReloadPage()">Ok</button>
    </div>
</div>
</div>

<script>
//Function to open the modal
function OpenModal() {
    $("#myModal").modal('show');
}

//Function to reload the page
function ReloadPage() {
    window.location.reload();
}

Answer 3

Answer №2

If you're looking to utilize a confirm popup modal that returns a boolean value, here's how you can do it:

 success: function (response) {
    const isConfirmed = confirm('Generate Request');

   if(isConfirmed) {
     console.log('User clicked the OK button - Data:', response.data)
     window.location.reload();
   }
}

Answer 4

If you're looking to utilize a confirm popup modal that returns a boolean value, here's how you can do it:

 success: function (response) {
    const isConfirmed = confirm('Generate Request');

   if(isConfirmed) {
     console.log('User clicked the OK button - Data:', response.data)
     window.location.reload();
   }
}

"Displaying a popup message prompting users to refresh the page after clicking

Answer №1

Answer №2

Similar questions

Best Practices for Implementing AngularJS Dependency Injection

Every time I attempt to load the table, I encounter an error

Using absolute positioning on elements can result in the page zooming out

Having trouble displaying json data in an HTML file with d3.js

Fulfill the promise within the $stateProvider and proceed with utilizing the outcomes

Retrieve data from dropdown menu to showcase table using Node.js

The size of the Webpack bundle grows with each subsequent build

Executing functions from main component in tanstack table operations

Mocha Chai: Dive into an array of elements, discovering only fragments of the desired object

Is there a way to figure out the number of days from the current date using jQuery UI datepicker?

Leveraging JavaScript functions for invoking Ajax requests, accompanied by ASP.NET controls

An error has occurred: Unable to access the property "filter" as it is undefined

A guide on applying bold formatting to a specific section of text in React

I encountered an issue while constructing a React application. An error message popped up indicating: "Warning: Can't execute a React state update on a component that is not mounted"

What is the best way to convert Arabic language HTML into a PDF document on the client side?

Tips for formatting dates in Angular 6

Manipulate the CSS of a single div within a group of divs that have the same class using jQuery

Learn how to display or conceal the HTML for 'Share this' buttons on specific routes defined in the index.html file

Buttons for concealment and revelation are unresponsive

Adjusting background size using jQuery as the window is resized