Why is IF statement breaking operation of data-popup?

Question

If I comment the IF statement then the data-popup is working. But with IF statement the popup is not working. I did a lot of research and rewrote the form.

I think the code is good but why is the data-popup not showing if I add the following?:

         if ($row['description'] == "Incorrect password o") {
                $log .= "<td>";
                $log .= "
                <a  class='btn btn-danger' data-popup-open='popup-" . $index . "' href='#' >Password reset</a>

                <div class='popup' id='detail-" . $index . "' data-popup='popup-" . $index . "'>
                    <div class='popup-inner'>
                        <div class='row'>
                            <div class='well' >
                                <h3>Verzend nieuwe wachtwoord</h3>
                                <form role='form' action='login/requestnewpass/' method='POST' id='contactForm' data-toggle='validator' class='shake'>
                                    <div class='row'>
                                        <div class='form-group col-sm-6'>
                                            <label for='requestnewpass' class='h4'>Username</label>
                                            <input type='text' name='requestnewpass' value='" . $row['username'] . "' class='form-control' id='requestnewpass' placeholder='Enter name' required data-error='Vul hier je naam in'>
                                            <div class='help-block with-errors'></div>
                                            <input type='submit' name='submit' value='submit' class='btn btn-success'>
                                        </div>
                                    </div>
                                </form>
                            </div>                    
                            <p>
                                <a data-popup-close='popup-" . $index . "' href='#'>Close</a>
                            </p>
                            <a class='popup-close' data-popup-close='popup-" . $index . "' href='#'>x</a>
                        </div>
                    </div>
                </div>";
                $log .= "</td>";
            } else {
                $log .= "<td>";
                $log .= "</td>";
            }


    <script>
        $(function () {
            //----- OPEN
            $('[data-popup-open]').on('click', function (e) {
                var targeted_popup_class = jQuery(this).attr('data-popup-open');
                $('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);
                this.parent.firstchild()
                e.preventDefault();
            });

            //----- CLOSE
            $('[data-popup-close]').on('click', function (e) {
                var targeted_popup_class = jQuery(this).attr('data-popup-close');
                $('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);

                e.preventDefault();
            });
        });
    </script>

html:

        <div class="table-responsive" >
            <table class="table table-striped persoontable table-hover" data-toggle="table"
                   data-show-columns="true"
                   data-show-toggle="true"
                   data-pagination="true"
                   data-show-refresh="true"

                   data-search="true">
                <thead>
                    <tr>
                        <th data-sortable="true">Description</th>
                        <th data-sortable="true">Username</th>
                        <th data-sortable="true">Ip</th>
                        <th data-sortable="true">Website</th>
                        <th data-row-style="rowStyle" data-sortable="true">Level</th>
                        <th data-sortable="true">Created</th>
                        <th data-sortable="true">Reset password</th>


                    </tr>
                </thead>
                <tbody class="sortable">
                    <?php echo $log; ?>
            </table>
        </div>
    </div>

With some extra debugging I found that the problem occurs only after I use the add on functions of bootstrap-table. The button clicks on the first page work, but once I use the pagination or sort functions the data click listeners will get overwritten.

Does `$row['description']` equal `"Incorrect password o"` ? Does the HTML get output to the page? — Turnip, Apr 19 '16 at 12:28
That completely contradicts what you said in your question... "But with IF statement it is not working. " — Patrick Q, Apr 19 '16 at 12:31
@PatrickQ I mean the if statement works but the data-popup will not work with the statement. Without the if the data-popup works en with statement the data-popup dont work — Cloop, Apr 19 '16 at 12:35
Try Moving your
tag above the tag and your tag below the
tag. May this will fix the issue. — Yasitha, Apr 19 '16 at 12:46
@Turnip Yes it is fully working with that condition. but then if I click on the button it shows nothing. So i removed the if statement and it works. Thats weird. I need the if statement. — Cloop, Apr 19 '16 at 12:57
did you try keeping the if statement and removing hole html content inside it and just using an alert() — Yasitha, Apr 19 '16 at 13:00
Yes that is not working. But it is not an java script problem. Because it works without the if. — Cloop, Apr 19 '16 at 13:04
Given your update, you may want to use a delegated event handler instead of a direct handler. See [this](https://learn.jquery.com/events/event-delegation/) and [this](http://stackoverflow.com/questions/8110934/direct-vs-delegated-jquery-on). — Patrick Q, Apr 19 '16 at 13:47
@Cloop Did you review the links I posted? They cover the topic pretty well. — Patrick Q, Apr 20 '16 at 12:47
@PatrickQ I added an , 'a' but then it is also not working $('[data-popup-open]').on('click', 'a', function (e) { — Cloop, Apr 20 '16 at 12:48

Why is IF statement breaking operation of data-popup?

0 Answers0