If the user confirms it with a bootstrap dialog box, they will be redirected to the corresponding links

Question

If the user confirms it with a bootstrap dialog box, they will be redirected to the corresponding links

Firstly, I am not interested in using javascript confirm for this purpose. Please read on. For example, adding an onClick attribute to each link with a function that triggers a system dialog box is not what I want.

Instead of the standard system dialog box, I have implemented bootstrap's dialog box.

Here are several delete buttons for different items:

<a href="www.mysite.com/product/1" data-target="#myModal"  data-toggle="modal"><i class="icon-remove"></i> Delete</a>
<a href="www.mysite.com/product/2" data-target="#myModal"  data-toggle="modal"><i class="icon-remove"></i> Delete</a>
<a href="www.mysite.com/product/3" data-target="#myModal"  data-toggle="modal"><i class="icon-remove"></i> Delete</a>

Below is the code for displaying the modal using Bootstrap:

<div class="modal small hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Confirm Delete ?</h3>
  </div>
<div class="modal-body">
  <p class="error-text"><i class="icon-warning-sign modal-icon"></i>Are you sure you want to Delete the Category and all its associated Properties?</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
    <button class="btn btn-danger" data-dismiss="modal">Delete</button>
  </div>
</div>

The dialog box is working correctly, but after clicking the delete button in the dialog box, it does not redirect to the corresponding page of the links above. The modal simply disappears without redirection.

javascript html css twitter-bootstrap http-redirect

Answer 1

Answer №1

To easily remove items, simply assign the class remove-item to your links and include this script on your webpage for a seamless process.

<script>
$(function () {
  $('a.remove-item').click(function () {
    var url = this.href;
    $('#myModal .btn-danger').click(function () {
      window.location.href = url;
    });
  });
});
</script>

Answer 2

To easily remove items, simply assign the class remove-item to your links and include this script on your webpage for a seamless process.

<script>
$(function () {
  $('a.remove-item').click(function () {
    var url = this.href;
    $('#myModal .btn-danger').click(function () {
      window.location.href = url;
    });
  });
});
</script>

Answer 3

Answer №2

To enable the deletion of items without refreshing the page, you can include data-attributes in your bootstrap markup and make an AJAX request to the server.

<div class="modal small hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Confirm Delete ?</h3>
  </div>
<div class="modal-body">
  <p class="error-text"><i class="icon-warning-sign modal-icon"></i>Are you sure you want to Delete the Category and all its associated Properties?</p>
  </div>
  <div class="modal-footer">
    <a class="btn" data-dismiss="modal" aria-hidden="true">Cancel</a>
    <a class="btn btn-danger" data-action="delete-item" data-item="XXX" data-dismiss="modal">Delete</a>
  </div>
</div>

Using jQuery or JavaScript, you can then send a request to the server for deleting the data-item specified as XXX.

You can simplify the process of dynamically adding data-items by generating them using a JavaScript method like below:

function show_dialog_for(item_id)
{
   //your code here to generate and display the modal
   //Bind the ajax method to send the delete request for the item_id
   $("a[data-action]").bind( "click", function() {
      //Send request for deletion
   });
}

Next, you need to bind this functionality to the click event of a link, which can be achieved as shown:

$(".remove-item").bind( "click", function() {
   show_dialog_for($this.prop("data-item"));
});

For example, with the following link containing the class property "remove-item" and data-item value of XXX:

<a href="www.mysite.com/product/1" class="remove-item" data-item="XXX" data-target="#myModal"  data-toggle="modal"><i class="icon-remove"></i> Delete</a>

This approach should assist you in achieving the desired functionality.

Answer 4

To enable the deletion of items without refreshing the page, you can include data-attributes in your bootstrap markup and make an AJAX request to the server.

<div class="modal small hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Confirm Delete ?</h3>
  </div>
<div class="modal-body">
  <p class="error-text"><i class="icon-warning-sign modal-icon"></i>Are you sure you want to Delete the Category and all its associated Properties?</p>
  </div>
  <div class="modal-footer">
    <a class="btn" data-dismiss="modal" aria-hidden="true">Cancel</a>
    <a class="btn btn-danger" data-action="delete-item" data-item="XXX" data-dismiss="modal">Delete</a>
  </div>
</div>

Using jQuery or JavaScript, you can then send a request to the server for deleting the data-item specified as XXX.

You can simplify the process of dynamically adding data-items by generating them using a JavaScript method like below:

function show_dialog_for(item_id)
{
   //your code here to generate and display the modal
   //Bind the ajax method to send the delete request for the item_id
   $("a[data-action]").bind( "click", function() {
      //Send request for deletion
   });
}

Next, you need to bind this functionality to the click event of a link, which can be achieved as shown:

$(".remove-item").bind( "click", function() {
   show_dialog_for($this.prop("data-item"));
});

For example, with the following link containing the class property "remove-item" and data-item value of XXX:

<a href="www.mysite.com/product/1" class="remove-item" data-item="XXX" data-target="#myModal"  data-toggle="modal"><i class="icon-remove"></i> Delete</a>

This approach should assist you in achieving the desired functionality.

Answer 5

Answer №3

Check Out the Live Demo

To integrate this functionality into your website, make sure to include the following JavaScript code:

    $(".delBtn").click(function() {
        $("#delConfirmBtn").attr("href", $(this).attr("href"));
       $("#delConfirm").modal('toggle');
        return false;
    });

Here is the link that triggers the action:

<a href="del_products.html?idproduct=1" class="delBtn btn btn-default">Delete</a>

This link opens up the confirmation modal window:

<a href="#" id="delConfirmBtn" class="btn btn-danger">Delete</a>

The modal window structure looks like this:

  <!-- Modal -->
  <div class="modal fade" id="delConfirm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">Delete product</h4>
        </div>
        <div class="modal-body">
            <p>Lorem ipsum.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <a href="#" id="delConfirmBtn" class="btn btn-danger"><i class="icon-trash"></i> Delete</a>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

You can view and test the code on our custom demo site

Answer 6

Check Out the Live Demo

To integrate this functionality into your website, make sure to include the following JavaScript code:

    $(".delBtn").click(function() {
        $("#delConfirmBtn").attr("href", $(this).attr("href"));
       $("#delConfirm").modal('toggle');
        return false;
    });

Here is the link that triggers the action:

<a href="del_products.html?idproduct=1" class="delBtn btn btn-default">Delete</a>

This link opens up the confirmation modal window:

<a href="#" id="delConfirmBtn" class="btn btn-danger">Delete</a>

The modal window structure looks like this:

  <!-- Modal -->
  <div class="modal fade" id="delConfirm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">Delete product</h4>
        </div>
        <div class="modal-body">
            <p>Lorem ipsum.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <a href="#" id="delConfirmBtn" class="btn btn-danger"><i class="icon-trash"></i> Delete</a>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

You can view and test the code on our custom demo site

If the user confirms it with a bootstrap dialog box, they will be redirected to the corresponding links

Answer №1

Answer №2

Answer №3

Check Out the Live Demo

Similar questions

What is the appropriate utilization of the await keyword within concise if-else statements in JavaScript?

"Utilizing the React library to implement an HTML component with a styled radio input that

Having trouble displaying Google Map using GMapPanel in EXTJS 4?

The comparison between local variables and data can result in a significant drop in performance

Is there a way to automatically update the URL to include $_GET['data'] (media.php?data=123) when a selection is made from a dropdown list?

The canvas grid is malfunctioning and failing to display correctly

Troubleshooting a cross-origin resource sharing problem in Express.js

Issues arise when Angular properties become undefined following the initialization or OnInit functions

What is the reason for the result of 0x80000000 & 0x80000000 being lower than 0?

Creating a Slack-inspired interface with a Bootstrap 4 fixed bottom message box nested within a column

The content of my menu is concealed within a DIV. It may remain hidden or malfunction

"Implementing a bookmark/watch feature with a hover text cloud using either a Drupal module or CSS styling

The element type 'ReactElement<any>' does not match a JSX element constructor function. 'undefined' cannot be assigned to type 'Element | null'

Steps for revealing all the information from a database when clicking on the 'Read More' button

Converting Latin numbers to Arabic using PHP

Looking for a simple method to generate a text-only dropdown link in Bootstrap 4 without using a button?

The React Router Dom V6 triggers loaders as soon as the router is initialized

Unexpected token N error was thrown while using the Jquery .ajax() function

Filter Observable based on object array property

The functionality of jQuery's toggleClass is not functioning properly when clicking on a different thumbnail