Creating Multiple Functions

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:

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
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!

What is the HTML structure of your buttons and divs? are the buttons in the divs or are they elsewhere on the page? And are you using jQuery to wire up the click events? — Chris
– Chris, Commented Nov 18, 2011 at 14:00
@Chris, the buttons are in the divs themselves. I am using a bit of jquery to wire everything up, and I can provide the code I am using in an edit. — drummer392
– drummer392, Commented Nov 18, 2011 at 14:01

steveyang · Accepted Answer · 2011-11-18 14:01:49Z

3

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     : {}
          }); 
};

answered Nov 18, 2011 at 14:01

steveyang

9,3189 gold badges58 silver badges82 bronze badges

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

6 Comments

drummer392 Over a year ago

This is very helpful. I will play around with it and see what I come up with!

drummer392 Over a year ago

quick question for me (being sort of beginner-intermediate) how is the div.ID getting to the function as uniqueID?

steveyang Over a year ago

You store it in the button as <button div-id="1234">Button</button> and you use $('button[class=yours]').click(function () {newContent($(this).attr('div-id')}); Be careful inside your newContent, because attr('div-id') retrives the data as a string, you need to convert to number with parseInt(the_string, 10)

drummer392 Over a year ago

Ok, that makes sense, but say that my divs are named with numbers and letters? For the sake of this application, I will not be naming the divs, but other people will be, so it will be random what the divs will be called.

steveyang Over a year ago

This is sort of beyond the scope of this question. The solution you are looking for is how to bind a button click event with a specific div. One solution, as you mentioned, is to name each div and store then in the button element, another would use the jQuery filters (.eq(), .find() etc.) You could open another question for this.

|

Collectives™ on Stack Overflow

Creating Multiple Functions

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related