adding an event observer to button in modal window

i have a modal window (modal.htm) and there is a button within it that when clicked, i would like the modal window to change from modal.htm to, say, modal2.htm without refreshing the page.

how would i do this?

Posted November 21st, 2007 at 9:00am by craig_willard 

afteropen:function(){
   $('button-elm').observe('click', function(){
      new Ajax.Updater(Control.Modal.container, 'modal2.htm');
   });
}

This should take you in the right direction.

Posted November 22nd, 2007 at 4:05am by Roland

Thanks for the reply, Roland.

I tried your suggestion, but now when I click the link to open my modal, the modal is not appearing in a layer overtop of the current page as it should, but instead opening up as it's own page.

here is the code in question...

this is the link to open the modal:

<a href="modal.htm" class="FreeTrialModal">Take me to the download page</a>

and this is the code that executes when it is clicked:

    document.getElementsByClassName('FreeTrialModal').each(function(link){
        new Control.Modal(link,{
            containerClassName: 'modalWindow',
            overlayClassName: 'overlay',
            overlayCloseOnClick: false,
            width: 284,
            afterOpen: function() {
                $('modalSubmit').observe('click', function(){  
                   new Ajax.Updater(Control.Modal.container, 'modal2.htm');  
                });  
            }
        });
    });

$('modalSubmit') is a submit button on the modal page as such:

<input type="submit" name="modalSubmit" id="modalSubmit" value="Download Free 30-Day Trial " />

Posted November 26th, 2007 at 10:40am by craig_willard 

observe('click', function(event){
    even.stop(); //	

				Posted November 26th, 2007 at 2:55pm		by Roland

after some more research, the issue i'm having is that when I try to add the observer to $('modalSubmit') on afterOpen, the $('modalSubmit') element apparently doesn't exist because it hasn't been added to the DOM yet...

for now i'm using a setTimeout to wait a tenth of a second before adding the observer, and that seems to work, but it's hardly the most elegant solution.

and in addition, the 


                    new Ajax.Updater(Control.Modal.container, 'modal2.htm');

line is sending me to a page not found error, even though modal2.htm does exist (i even tried the absolute URL - http://localhost/modal2.htm).

help!

Posted November 27th, 2007 at 8:08am by craig_willard

Could you upload a live example..

I think the modal loads an iframe (not sure).. so the element with id #modalSubmit is not IN your modal container but in the iframe, and thats a whole other dom tree.

You can load modal.html also with ajax, so #modalSubmit is attached to your current dom tree.

About your second problem;

Could you upload a live example.. i dont know what your current document structure looks like.. but try this:

new Ajax.Updater(Control.Modal.container, '/modal2.html'); or new Ajax.Updater(Control.Modal.container, './modal2.html'); // mind the dot

Roland,

Posted November 27th, 2007 at 8:57am by Roland

Thanks for getting back to me, Roland.

Here's the link.

1) I am not loading this particular modal in an iframe, though I am aware that is an option. I actually tried doing it that way but ran into some completely different issues.

2) Not sure why this isn't working. I'm going to read up on Prototype's AJAX functionality.

Let me know your thoughts once you've had a chance to look at the example. I notice a sporadic error when you click the link, but if you refresh a few times it should go away. Not sure what that's about. Maybe the page is cached on my end.

Posted November 27th, 2007 at 10:28am by craig_willard

UPDATE:

Looks like the link to modal2.htm isn't working b/c Ajax.Updater doesn't like the .htm extension. If I rename to .aspx, we're golden.

Still, problem #1 remains an issue....

Posted November 27th, 2007 at 10:43am by craig_willard

You shouldnt load the entire html document (html/head/body)....

http://www.wediditman.com/work/modal3.htm should return only what you want in your modalContainer div.

You now generate something like this..

--- modal3.html ---

That's invalid html!

Posted November 27th, 2007 at 11:39am by Roland

Will do. That's definitely a fix I'll make. I'm still getting the hang of AJAX.

Any clue why I have to call that setTimeout function to ensure that my button has been written to the DOM? My understanding was that by putting my code in the afterOpen function, that would be taken care of.

Posted November 27th, 2007 at 12:26pm by craig_willard

Login or Register to Post