CODEWITHSUNDEEP
javascriptjqueryhtmlbootstrap-modal
Silent Beast
Silent Beast

Reputation: 119

Cannot Update Bootstrap Modal Forms

I have a CRUD reminder app, and when users right click on a reminder, a context menu pops up. Options include edit, delete, etc. Each reminder has an id, and the context menu button updates based on the reminders id, and passes it to a bootstrap modal form:

JS:

//part of the context menu script
//this function is called when the user right clicks inside of any element with class task
function toggleMenuOn(e) {
    if ( menuState !== 1 ) {
      menuState = 1;
      menu.classList.add( contextMenuActive );
    }

    let reminder_id = e.target.id

    $.ajax({
    url: '/ajax/get_reminder/',
    data: {
      'reminder_id': reminder_id
    },
    dataType: 'json', 
    success: function (data) {
        let context_btn1 = document.getElementById("context_menu_btn1");
        let reminder_pk = data.serialized_reminder.toString(); 
        let reminder_url = "{% url 'update-reminder' 0 %}".replace(/0/, reminder_pk) 
        context_btn1.className = "update-reminder context-menu__link btn btn-light";
        context_btn1.setAttribute('data-id', reminder_url);
        change_var(reminder_url)
    }  
  });

  }

let context_btn_id = "/update_reminder/0/";
function change_var(new_name) {
    context_btn_id = new_name;
}
$(document).ready(function() {
    $("#context_menu_btn1").click(function () {
        $(this).modalForm({formURL: context_btn_id});  
    });
});

HTML:

<nav id="context-menu" class="context-menu">
    <ul class="context-menu__items">
        <li class="context-menu__item">
            <button type="button" class="context-menu__link btn btn-light" id="context_menu_btn1" data-id=""><i class="fa fa-edit"></i> Edit</button>
        </li>
        <li class="context-menu__item">
            <button type="button" class="context-menu__link btn btn-light" id="context_menu_btn2" data-id=""><i class="fa fa-times"></i> Delete</button>
        </li> 
        <li class="context-menu__item">
            <button type="button"class="context-menu__link btn btn-light" id="context_menu_btn3" data-id=""><i class="fa fa-eye"></i> Share</button>
        </li>
    </ul>
</nav>

Reminder HTML:

<div>
    <h3 class="ml-4">Long-Term Assignments:</h3> 
    <div class="events-content-section ml-4 mr-3">
        {% get_reminder_id user.username as id_reminders %} 
        {% for reminder_id, long_term_reminder in id_reminders.items %}
            <div class="task mb-2" style="display: flex;">
                <button type="button" class="view-reminder btn btn-light" data-id="{% url 'view-reminder' long_term_reminder.pk %}" id="{{ reminder_id }}" style="width: 100%;">
                    <h4 style="float: left;">{{ long_term_reminder.title }}</h4>
                </button>
            </div> 
        {% endfor %}    
    </div>
</div>

As you can see, I have one navigation menu and have buttons that change data-id every time it is shown. The code works the first time, but when I go to edit another reminder it just brings up the modal form for the first reminder. For example, if I were to update a reminder named Test1, and then try to edit Test2, it would bring up the edit form form for Test1. I think it has something to do with the code not creating a new modalForm every time context_btn_id is updated. As a reference, the code below works, but an individual button is created for each reminder.

$(".view-reminder").each(function () {
  $(this).modalForm({formURL: $(this).data('id')});
});

How would I solve this issue? Any help would be appreciated!

Upvotes: 0

Views: 130

Answers (1)

Ahed Kabalan
Ahed Kabalan

Reputation: 855

You can add a data-id attribute for each reminder in reminders list or table and on navigation click you can get the selected reminder id.

Upvotes: 1

Related Questions