CODEWITHSUNDEEP
javascripthtmljqueryreplacewith
Pino8891
Pino8891

Reputation: 3

Dropdown menu not working with replaceWith() and appendTo()

Hope someone can help me.

Let's begin with the fact that I have very little experience with php, js, jquery and so on. I'm working on a little web app where the user fill a form with a specific request, the data is written on a DB and then, a manager, from another webpage with admin privileges, can read the data inside the DB from an html table. And all this works fine. On this table, in the last column there is a button that, when pressed, it opens a pop-up with additional infos about the request and the possibility for the manager to select different stages (like "in progress", "done", "rejected") for the request iteself. Now the button and the pop-up works fine but I'm not able to make the dropdown menu for the selection of stages working properly.

EDIT: While trying to narrow down the problem I found this

Part of my popup creation:

 +'<form id="statoNewDiv" class="divPop2">\n'
  +'<div class="divPop" style="margin-bottom: -5%"><label for="statustomodify">New status:</label>\n'
  +'<select class="form-control Empty" name="statustomodify" id="statustomodify" required></select>\n'
etc

Dynamic modifiy of the popup based on the state of the request:

if (state_info == "Forwarded"){
    $('#statustomodify').replaceWith('<select class="form-control Empty" name="statustomodify" id="statustomodify" required></select>');
    $('<option selected id="defaultstate">New state...</option>').appendTo("#statustomodify");
    $('<option value="In progress" style="background-color: gold; font-weight: bold">In progress</option>').appendTo("#statustomodify");
    $('<option value="Done" style="background-color: green; color: white; font-weight: bold">Done</option>').appendTo("#statustomodify");
    $('<option value="Rejected" style="background-color: gray; color: white; font-weight: bold">Rejected</option>').appendTo("#statustomodify");
  }

If I click on the lable "New status" in the popup the dropdown menu gets in focus and I'm able to change the status with the up and down arrow keys. But when I click on the dropdown itself it doesn't work. If I change the name of the lable nothing appens even when I click on "New status". So it seems that if the name of the lable and the name of the id to replace on the jquery matches the function itself works (even if not properly). The problem seems that the ID of the select seems to be totally ignored.

If I remove appendTo from "New state..." I get "In progress" (and so on) but I'm always unable to select it. I've tried to move the /select after the option value="Rejected" but still nothing. I've tried to use the .first() and .last() after the appendTo() (like: .appendTo("#statustomodify").first() ) but still nothing. I've tried to use the HTML code outside and it works fine.

One last thing, I use this as bootstrap:

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

And I've tried both of those:

https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js

https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js

The bootstrap is placed before the script at the beginning of the file.

I hope someone can give me an hand or a tip about what to check! Thank you!

Upvotes: 0

Views: 93

Answers (1)

Pino8891
Pino8891

Reputation: 3

Fond what my problem was. At the end of the code I have a function to make some elements of the page drag and drop (like for example the popup itself). Inside this funcion there was the preventDefault() method. This was preventing my dropdown menu from working correctly. By commenting/removing that the dropdown now works correctly

Upvotes: 0

Related Questions