Link to home
Start Free TrialLog in
Avatar of Bob Schneider
Bob SchneiderFlag for United States of America

asked on

Bootstrap Modal and ASP QueryString

I am implementing a bootstrap modal to edit individual records in a table.  I need to pass a unique id to the modal when it opens so I can query the MS Sql Server db to pull/display the data to edit.  Not sure how to do this.  Code below.  Note that the modal opens correctly.  Just need to populate it with data so I can edit it.  If there is a better approach, I am open to it, but I really like the way the modal opens.

Trigger:
<a data-toggle="modal" href="#myModal" class="button"><%=Items(1, i)%></a>

Open in new window


Modal:
<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Edit Item</h4>
        </div>
        <div class="modal-body">
          <p>This is a large modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>



Open in new window

Avatar of leakim971
leakim971
Flag of Guadeloupe image

You didn't show how you query your DB
Are you using jQuery ? This is not in the topics.

here Vanilla JS :
<script>
    const containerWhichHaveAllButton = document.querySelector("body");
    containerWhichHaveAllButton.addEventListener("click", (event) => {
        const target = event.target;
        if(targer.classList.contains("button")) {
            //const id = target.dataset.id;
            const id = target.textContent;
            // 1) get you data Async
            // 2) Then, fill the modal with the data
            // 3) open the modal
            alert(id);
        }
    });
</script>

Open in new window


ASKER CERTIFIED SOLUTION
Avatar of Scott Fell
Scott Fell
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Bob Schneider

ASKER

Thank you both.  I will piece this together and then open another question if I have more specific questions.  To answer the db query question, I normally submit to the page itself and run a query and process the data before the page reloads.
 I normally submit to the page itself and run a query and process the data before the page reloads.

In this case, you will want to use ajax to give the best results.

What you could do, however, is submit the page to itself as you are used to, throw the data to the modal.  Use ASP to hard code the modal being open.  https://getbootstrap.com/docs/4.6/components/modal/

It is a more modern and present experience to use ajax though