Invoke JavaScript event based on Regex

Question

I am writing a Django App, where at front I am using Pure CSS. App has simple text box for search and submit button. When user type any query and hit submit button, the table of matching entries will be shown. For each entry in table, there is a flag button. When user clicks flag button, a modal is generated which ask user to flag results as true or false. Now, to get modal, I am using bootstrap modal. Please find code below for adding of button.

<div id="content2" style="min-height:400px">
        <div class="pure-u-24-19">
        <table class="pure-table pure-table-bordered" id="myTable">
            <table class="pure-table">
                <thead>
                    <tr>
                        <th>id</th>
                        <th>index</th>
                        <th>product_id</th>
                        <th>long_desc_html</th>
                        <th>seller_thumb_url</th>
                        <th>resource_types</th>
                        <th>content_type</th>
                        <th>long_desc</th>
                        <th>title</th>
                        <th>greads_review_url</th>
                        <th>url</th>
                        <th>edm_score</th>
                        <th>avg_rating</th>
                        <th>creation_date</th>
                    </tr>
                </thead>

                <tbody>
                {% if data.count > 0 %}
                {% for dist in data %}
                    <tr class="pure-table-odd">
                        <td>"{{ dist.object.id }}"</td>
                        <td>"{{ dist.object.index }}"</td>
                        <td>"{{ dist.object.product_id }}"</td>
                        <td>"{{ dist.object.long_desc_html }}"</td>
                        <td>"{{ dist.object.seller_thumb_url }}"</td>
                        <td>"{{ dist.object.resource_types }}"</td>
                        <td>"{{ dist.object.content_type }}"</td>
                        <td>"{{ dist.object.long_desc }}"</td>
                        <td>"{{ dist.object.title }}"</td>
                        <td>"{{ dist.object.greads_review_url }}"</td>
                        <td>"{{ dist.object.url }}"</td>
                        <td>"{{ dist.object.edm_score }}"</td>
                        <td>"{{ dist.object.avg_rating }}"</td>
                        <td>"{{ dist.object.creation_date }}"</td>
                        <td> <button id="{{ dist.object.id }}" type="button" class="pure-button-primary pure-button" data-toggle="modal" data-target="#myModal"> Flag </button> </td>
                    </tr>
                {% endfor %}


                {% else %}

                <li>None to show!</li>

                {% endif %} 
                </tbody>
            </table>   
        </div>
        </table>
        </div>
    </div>

I am creating a button with "id" = object.id (Basically it will asssign id={1,2,3...n} ). Now, I want to trigger a javascript that will generate modal for respective button click. Is there any way I can write a generalized java script function (function that can be invoked using may be Regex ), so that I will be able to identify which button has triggered Modal.

Thanks

you dont need a regex for this, can you use jquery? or only javascript? — omarjmh, Apr 03 '16 at 00:19
See my answer below for an example of what they are talking about — Ashley Coolman, Apr 03 '16 at 14:34

score -1 · Answer 1 · edited May 23 '17 at 12:07

Event handler's get an event object with a reference that raised the event in target - for "click" this is the dom element. See the (untested) code below:

$('table button').each((i,e)=>{
    e.addEventListener(
        'click',
        (e)=>{ 
            console.log('clicked', e.target.getAttribute('id'));
        }
    )
})

Note: this^ presumes a modern browser + jquery. To test it out, just change 'table button' to 'div' and paste it in your console and click on any div on this page

So to restate, you get what was clicked on (without regex) by inspecting the target property of the event object.

If you are not familiar with the javascript event system, it gets more elegant than the above code. I urge you to checkout the specifics of the event bubbling at your leisure.

Invoke JavaScript event based on Regex

1 Answers1