0

I would like an image to change once clicked and change back once the dialog it links to is closed. I actually found a solution to what I was trying to do on this site, right here However, upon modifying it to suit my needs it does not work, Can anybody pinpoint what I am missing?

HTML:

<div data-role="footer" data-position="fixed" data-id="myFooter">
  <div class="navBar" id="bah" data-role="navbar">
    <a href="#menu" id="burgerMenu" data-rel="popup">
      <img id="burger" src="resources/burger.png" alt=""/>
    </a>
  </div>
</div>

jQuery:

$(document).ready(function()
{
    $("#bah").on("dialogclose", function(event)
    {
        $("#burger").attr("src","resources/burger.png");
    });
});
Community
  • 1
  • 1
Brian
  • 287
  • 4
  • 16
  • Does the event handler work? As in, can you print something out to the console in your event handler? – theWanderer4865 Mar 30 '17 at 14:45
  • No, but it could be I am terrible. I can get it to do stuff if I take "dialogclose" out of the picture. – Brian Mar 30 '17 at 18:37
  • 1
    Just want to point out here that you should try to stay positive about yourself when learning new things. YOU are NOT terrible, we all have had and continue to have moments like this where something is escaping us for one reason or another. You are doing something new, don't sell yourself short or get discouraged at this temporary road block - you'll learn and get better every day you keep trying. That said, glad you found an answer! – theWanderer4865 Apr 04 '17 at 22:00
  • Thanks @theWanderer4865 – Brian Apr 24 '17 at 11:03

1 Answers1

0

Use jQM pagecreate event instead of the regular jQuery ready For popup clode, the correct event is popupafterclose The popup id in your example is menu not bah.

$(document).on("pagecreate","#page1", function(){ 
    $("#menu").on("popupafterclose", function(event) {
        $("#burger").prop("src","http://lorempixel.com/24/24/technics/1/");
    });
});

DEMO

ezanker
  • 24,628
  • 1
  • 20
  • 35
  • That worked SO well, but there was no need to use "pagecreate", I just had to change the id selector and use "popupafterclose". Thank you so much! – Brian Mar 30 '17 at 20:17
  • 1
    @Brian if you don't use pagecreate for jQM, you will run into other problems down the line... – ezanker Mar 30 '17 at 20:28
  • Ah, so do I have to then specify every page I have the dialog in (all of them) after the "pagecreate"? like: $(document).on("pagecreate","#menu", "#workouts", "#profile", "#cathegories" ETC function(){ – Brian Mar 30 '17 at 20:52
  • 1
    @Brian, if the dialog markup is external to the pages and only made once, then you can do it the way you have been – ezanker Mar 30 '17 at 21:23