I can't trigger custom event from Javascript

Question

I've got a page running with a div, into which I load a php page. In this PHP page, I do various things, one of which is, for example, to change a password. When you click "save", it runs the following (I've taken everything away except for the important bit).

function resetPass() {
    $(document).trigger("set-alert-id-password", [
      {
        message: "Must be at least 6 characters long",
        priority: "error"
      }
    ]);
}

This is using a Bootstrap library called bsFormAlerts, and is meant to show an alert under the input field created here on the PHP page.

<input type="password" class="form-control" disabled="true" value="******">
<span class="input-group-btn">
    <button class="btn btn-default" type="button" onclick="resetPass(this);">
        <i class="glyphicon glyphicon-edit"></i>
    </button>
    <span data-alertid="password"></span>
</span>

This works fine if this input is on the index.html page, but since it is in a PHP file that gets .load()'d into a div on the HTML page it doesn't call.

My question: is there some way that I can call into the div which has now .load()'d another file, as it doesn't seem to call through to it? Anything else I can try?

Thanks in advance

sorry that's what I meant I use. I have $("#page-wrapper").load("account.php", ......) which is working fine, it's just when I try to call a trigger to the loaded content if that makes sense. — theuseduser
– theuseduser, Commented Apr 22, 2014 at 22:39

Alex Shilman · Accepted Answer · 2014-04-22 22:44:21Z

1

Im not sure if i understand you correctly but Try something like this this:

$( "#page-wrapper" ).load( "ajax/test.html", function() {
  $(document).trigger("set-alert-id-password", [
  {
    message: "Must be at least 6 characters long",
    priority: "error"
  }
]);
});

answered Apr 22, 2014 at 22:44

Alex Shilman

1,5471 gold badge11 silver badges15 bronze badges

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

3 Comments

theuseduser Over a year ago

Thanks for this Alex, but assuming I understand this correctly, it isn't what I'm trying to achieve. This would trigger the id as soon as the page opens, what I'm trying to do is trigger it from a function that gets called by a button on the page. The actual loading of the PHP (including a callback function) works fine. Thanks anyway :)

Alex Shilman Over a year ago

Where are you binding your set-alert-id-password event?

theuseduser Over a year ago

with this <span data-alertid="password"></span>, it's built into the library linked above

Terry · Accepted Answer · 2014-04-22 23:00:07Z

1

Because the button is dynamically added and is not present when the DOM tree is ready, the event will not bind. You should also avoid using inline JS but migrate that over to event binding using .on().

First, we remove the inline JS for your button:

<input type="password" class="form-control" disabled="true" value="******">
<span class="input-group-btn">
    <button class="btn btn-default" type="button">
        <i class="glyphicon glyphicon-edit"></i>
    </button>
    <span data-alertid="password"></span>
</span>

The we use .on() to bind the click event to your button:

$(document).on('click', '.btn.btn-default', function() {
    $(document).trigger("set-alert-id-password", [
      {
        message: "Must be at least 6 characters long",
        priority: "error"
      }
    ]);
});

The purpose of doing so is to listen for the click event that originates from your button (with the class btn and btn-default ^[1] that eventually bubbles up to the document object, so it can originate even from a dynamically added element that is initially not present (before .load() was executed, for example).

¹ I have a feeling that the classes assigned to the button is generic, so you should include a unique identifier (like an ID) to select it unambiguously in jQuery.

answered Apr 22, 2014 at 23:00

Terry

66.7k16 gold badges107 silver badges127 bronze badges

4 Comments

theuseduser Over a year ago

Hi and thanks for the reply. I've played around with doing it this way, but unfortunately it doesn't work either. Thought so because in actual fact, I can put an alert right behind it and it does get shown, it's just the actual trigger to that element that doesn't work :(

Terry Over a year ago

So, the question now is, what is set-alert-id-password? If you use it in the context above, it has to be an event name: api.jquery.com/trigger

theuseduser Over a year ago

Oh my god. After hours and hours of battling, I realise what I broke (I did have it working a few days ago and it suddenly stopped working). I no longer included the js file in the PHP file, only in the HTML file that was loading the PHP file into a div. Annoying. Thanks very much for the help!

Terry Over a year ago

@theuseduser That happens from time to time :) but I'm glad the issue is gone for good as we speak.

Collectives™ on Stack Overflow

I can't trigger custom event from Javascript

2 Answers 2

3 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related