Question

I am going to try to make this question as clear as I can.

Here’s what I’m trying to do:

ELEMENTS:
– button
– modal box
– functions

Application Requirements:

1. I need to have a button on a page, when clicked it calls a function
   called newcontent. That function will need to have it’s own
   unique ID because I have a specific pageID show up in a modal box
2. In the modal box function, I call a specific page with a specific
   ID, but I also use an .each function to grab the specific DIV ID
   from which the button was pushed.

Here is the current modal box code:

function newcontent() {    
    $('div.heriyah').each(function() {        
        $.fallr('show', {
            content     :  '<iframe width=620" height="600" src="<? echo $URL ?>/manage_content.php?id=<? echo $pageID; ?>&div='+ this.id +'"></iframe>',
            width       : 620 + 5, // 100 = for width padding
            height         : 600,
            closeKey        : true,
            closeOverlay    : true,
            buttons     : {}
        }); 
    });
}

I will get an error like this:

uncaught  exception: Can't create new message with content: "<iframe 
width=620" height="600" 
src="http://www.brandonrray.com/Heriyah/admin/manage_content.php?id=1&div=sermons_home"></iframe>",
past message with content "<iframe width=620" height="600" 
src="http://www.brandonrray.com/Heriyah/admin/manage_content.php?id=1&div=up_events_home"></iframe>"
is still active

But I know that is because I am trying to call the same function like 10 times depending on how many divs are on the page.

Button Jquery Wiring:

$('div.heriyah').each(function() { 
$('div.heriyah').append('<div id="add_button_container"><a onClick=newcontent_'+ this.id +'();return false><div id="add_button" class="edit_links">+ ADD NEW CONTENT</div></a></div></div><div class="clear"></div><div class="placeable"></div>');
}); 

Can anyone push me in the right direction for this app, and if you need me to be more clear, please let me know. I do not want to get kicked off these forums again!

Answer 1

Instead of applying each everytime your button is clicked, you use a callback function and trigger the newContent with a parameter which is stored in your button element. The parameter could also be any attribute of the button.

$('button[class=yours]').click(function () {newContent(this.id)});
// If you want to pass the DIV ID from the button
// $('button[class=yours]').click(function () {newContent($(this).attr('div-id')});
//
var newContent = function (uniqueId) {
    $.fallr('show', {
              content     :  '<iframe width=620" height="600" src="<? echo $URL ?>/manage_content.php?id=<? echo $pageID; ?>&div='+ uniqueId +'"></iframe>',
              width       : 620 + 5, // 100 = for width padding
              height         : 600,
              closeKey        : true,
              closeOverlay    : true,
              buttons     : {}
          }); 
};