javascript - HTML and Jquery Modal for Editing

Question

I am somehow new to Jquery and is going through some code of a project.

The existing Jquery looks like this and this pops up a modal of confirmation upon delete:

{% for profile in profiles %}

        $("#delete_{{ profile.id }}").mousedown(function(event){
        let action = "deleteprofile"
        $.confirm({
            title: 'Delete',
            content: 'Are you sure?',
            buttons: {
                confirm: function () {
                    submit_to_modal({
                            'profile_id': "{{ profile.id }}"
                        },
                        action)
                },
                cancel: function () {
                    $.alert('cancel');
                }
            }
        });
    })

{% endfor %}

I think this project uses jquery-confirm after searching for similarities in the code, I read about it here: https://craftpip.github.io/jquery-confirm/ it can also be found here: How to display a confirm box before submitting a form using jquery confirm?

So upon the click of a button in the html. e.g

  <button id="delete_{{ profile.id }}">Delete</button>

The jqeury will be triggered producing a confirmation. After confirmation the deleteprofile action which is from the views of the backend will be triggered and it will make the DELETE request.

However, I want to be able to make an edit modal from this.

Where an item from a list of items, such as profiles when clicked will produce a modal.

I searched for it and found these resources:

Bootstrap: Modal dialog for editing data dynamically Jquery .on() submit event

But all of them dont recieve the which will trigger the specific item. For example, I only want to edit, profile-001, but it cant be done with these samples. I already tried them and the modal didnt pop out.

I found this: How to make an "Edit User" form inside Bootstrap Modal using JQUERY?

But this is on PHP, I am using only jinja for this. I also couldnt replicate this on the html. as I am fairly new to frontend stuff.

How do you usually add input fields to modals in jinja, or in jqeury in this case? I want to be able to pop out a modal which will have input values, which will be recieved by jquery per item.

Any source to what i want to find is also welcome, I have been scanning four hours already and tried testing it but I cant get a modal to pop up except for the deletion modal.

Answer 1

Use jQuery-ui cdn, Here is the code for dialog.

ConfirmDialog('Are you sure'); //need to call this function with click, "Are you sure" 
                                 message passed with function

ConfirmDialog('Are you sure');

function ConfirmDialog(message) {
  $('<div></div>').appendTo('body')
    .html('<div><h6>' + message + '?</h6></div>')
    .dialog({
      modal: true,
      title: 'Your Title...',
      zIndex: 10000,
      autoOpen: true,
      width: 'auto',
      resizable: false,
      buttons: {
        Confirm: function() {

          $('body').append('<h3>Confirm Dialog Result: <b>Confirm</b></h3>');

          $(this).dialog("close");
        },
        Cancel: function() {
          $('body').append('<h3>Confirm Dialog Result: <b>Cancel</b></h3>');

          $(this).dialog("close");
        }
      },
      close: function(event, ui) {
        $(this).remove();
      }
    });
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>