Jquery Button functionality not working when using onload event

Question

I've been trying to load a PHP file dynamically using onload event in Jquery / Javascript. The following is the code I've written so far.

    <script>
    $(document).ready(function() {
        setInterval(function () {
                $('#alerts').load('alert-check.php', function () {
                    $('#notifID').click(function (e) {
                        e.preventDefault();
                        console.log("TRUE");
                    });
                });
            }, 1000);

    });
</script>

The php file loaded correctly every 1 second, but the problem is whenever I click the x button it is not working. inside the alert-check.php I have this code.

    <?php

include '../controller/action.php';
if(isset($_POST['dismiss'])){
    $id = $_POST['id'];
    $update = db_update('tbl_notif', $data = array("type"=>"Dismissed"), $where = array("id"=>$id));
}


$timenow = date('h:i:s');
$value = custom_query("SELECT * FROM tbl_notif WHERE type='Sticky' ORDER BY id DESC");
if($value->rowCount()>0)
{
    while($r=$value->fetch(PDO::FETCH_ASSOC)) {

        $r['content'];
        ?>
        <form id="alertForm" method="POST" action="">
            <div class="alert alert-info alert-dismissible" role="alert">
                <button type="submit" class="close" data-dismiss="alert" aria-label="Close" name="dismiss"><span aria-hidden="true">&times;</span></button>
                <input type="text" value="<?= $r['id']; ?>" id="notifID" name="id">
                <i class="fa fa-info-circle"></i> <p><?= $r['title']; ?></p>
                <p><?= $r['content']; ?></p>
            </div>
        </form>

        <?php
        if($r['intervals'] == '5m'){
            $t = date('h:i:s');
            $intervalResult = date('h:i:s', strtotime('+5 minutes', strtotime($t)));
            $update = db_update('tbl_notif', $data = array("notif_interval"=>$intervalResult, "type"=>"Sticky"), $where = array("id"=>$r['id']));
        }
    }
}

?>

I've been trying to solve this issue for a couple of weeks, any one please help me. Thank you.

Button click is client side whereas PHP is server side, but you can achieve this by using ajax. — Ammar Ali, Aug 24 '18 at 04:54
When script is starting #notifID isn't exists. Try $('#notifID').on('click', function (e) {... — Choo Hwan, Aug 24 '18 at 05:03

Piyush Bansal · Accepted Answer · 2018-08-24T05:24:13.473

1

Your "x Button" Click event loaded first before your "x button" as it is loading dynamically. In that way that will not work.

There are two options available to accomplish it.

Move your "x Button" click event to dynamically loaded file
You can modify your click event code in the following manner:

jQuery("#x_button_parent_element_id").delegate("alerts","click",function(){
                  $('#notifID').click(function (e) {
                        e.preventDefault();
                        console.log("TRUE");
                    });
});

Hope it helps you.

Thanks

edited Aug 24 '18 at 05:24

answered Aug 24 '18 at 05:17

Piyush Bansal

1,635
4
16
39

It shows me this error TypeError: $(...).delicate is not a function – AmyllaVimiar Aug 24 '18 at 05:22
Use "jQuery.delegate" not "jQuery.delicate". I made typo error. Sorry for that. – Piyush Bansal Aug 24 '18 at 05:24
So far here's the code I have written and still no luck whenever I clicked the notifID button setInterval(function () { $('#alerts').load('alert-check.php', function () { $("#alerts").delegate("alerts","click",function(){ $('#notifID').click(function (e) { e.preventDefault(); console.log("true"); }); }); }); }, 1000); – AmyllaVimiar Aug 24 '18 at 05:27
You have used delegate function in a wrong way. As you put $("#alerts").delegate, which means this will check #alerts button under #alerts which can not be possible. If you don't have multiple elements with id "alerts" use the following jQuery("body"),delegate instead of jQuery("#alerts").delegate – Piyush Bansal Aug 24 '18 at 05:34

SagarScript · Answer 2 · 2018-08-24T05:25:56.567

0

This question has already been answered in a different thread - its because elements must be loaded into the DOM before you set an event listener - Check out this detailed answer, applies to your problem:

Can't access dynamically generated element So...

so replace:

 $('#notifID').click(function (e) {
     e.preventDefault();
     console.log("TRUE");
 });

with:

$(document).on('click', "[id^=notifID]", function(){
     e.preventDefault();
     console.log("TRUE");
});

edited Aug 24 '18 at 05:25

answered Aug 24 '18 at 05:06

SagarScript

1,145
11
15

@AmmarAli - I don't think I have the required reputation to do that yet - don't seem to have that option. – SagarScript Aug 24 '18 at 05:10
I'm sorry I can't understand it well since i'm new to javascript. – AmyllaVimiar Aug 24 '18 at 05:14
Edited and added the answer - hope that helps. – SagarScript Aug 24 '18 at 05:26
setInterval(function () { $('#alerts').load('alert-check.php', function () { $(document).on('click', "[id^=notifID]", function(){ e.preventDefault(); console.log("TRUE"); }); }); }, 1000); I tried this one but still no luck :( – AmyllaVimiar Aug 24 '18 at 05:34

score 0 · Answer 3 · answered Aug 24 '18 at 05:18

0

use require.js to resolve this issue it will give you better control over js loading within your page .. here is a video tutorial how to use it ..

youtube video

answered Aug 24 '18 at 05:18

Ahmed amin shahin

857
6
15

Jquery Button functionality not working when using onload event

3 Answers3