How to select multiple div id's that begin with string with jQuery

Question

In the snippet below, $modal is undefined because there are multiple form instances.

<script type="text/javascript">
  $(document).ready(function() {
    var $modals = $(".update-form");
    var $form = $("#program-update-form-{{ form.instance.uuid }}");

    $modals.on("hide.bs.modal", function() {
      $form.trigger("reset");
    });

  });
</script>


<html>
  {% for id in form.instance.uuid %}
    <div id="program-update-modal-{{ form.instance.uuid }}" class="update-form">
  {% endfor %}
</html>

I think what I'm wanting to do is here is gather all program-update-modals and trigger a reset on the hide.bs.modal action. The number of form instances is going to be dynamic and obviously the uuid's will be dynamic so I need to know how in jQuery to just grab all the div id's beginning with 'program-update-modal-'. Open to other suggestions as well.

When/how is "hide.bs.modal" triggered? This isn't a standard event — ControlAltDel
– ControlAltDel, Commented Nov 20, 2020 at 18:57
This is precisely what classes are for. Add a class name to the elements you'd like to group. — Dropout
– Dropout, Commented Nov 20, 2020 at 18:58
@Dropout if I use the class name, will $modal.on() line still work? — Benjamin Donnaloia
– Benjamin Donnaloia, Commented Nov 20, 2020 at 19:06
@BenjaminDonnaloia it should IMO.. $modal.on(...) binds the event handler onto the element. If you change the selector to a class selector, i.e. $(".some-class") it should bind the event to each of the elements. — Dropout
– Dropout, Commented Nov 20, 2020 at 19:09
@Dropout, I have updated the OP with your suggestion, does this look like what you are saying? — Benjamin Donnaloia
– Benjamin Donnaloia, Commented Nov 20, 2020 at 19:12

nickles80 · Accepted Answer · 2020-11-20 19:19:52Z

1

Use the built in starts with selector. https://api.jquery.com/attribute-starts-with-selector/

var divs = $("div[id^='program-udpate-modal']");

answered Nov 20, 2020 at 19:19

nickles80

1,1018 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ControlAltDel · Accepted Answer · 2020-11-20 19:03:47Z

0

For collecting all the divs with the common ID pattern, just query for all DIVs and then filter, then iterate over them all and put them namewise into a Javascript object

var PUMDivs = {}

var divs = $("DIV").filter(function(elem) {
  return elem.id.indexOf("program-update-modal-") == 0;
}).each(function(idx, elem) {
  PUMDivs[this.id.substring("program-update-model-".length)] = elem;
});

answered Nov 20, 2020 at 19:03

ControlAltDel

35.2k10 gold badges60 silver badges86 bronze badges

Comments

Ravi Chauhan · Accepted Answer · 2020-11-20 19:20:07Z

0

var $form = $("[id^=program-update-form-]");

$modals.on("hide.bs.modal", function() {
  $form.trigger("reset");
});

To get all the elements starting with "program-update-form-" you should use:

answered Nov 20, 2020 at 19:20

Ravi Chauhan

1,53513 silver badges30 bronze badges

Collectives™ on Stack Overflow

How to select multiple div id's that begin with string with jQuery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related