jQuery / Colorbox - Pass one variable to <div id='inline_content'>

Question

I know nothing about jQuery and have been trying to get this going for over a week. It looks like I need professional advice. On our church site we have a page containing member birthdates. If I could the member id number into the inline_content block, I could get all the data I need with some reference. Ex. $memberid=$_REQUEST['memberid']; Here is what I'm using:

blanknew.php (page title)

Lots of PHP code

head
link rel="stylesheet" href="_css/colorbox.css" script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" /script> script src="_js/jquery.colorbox.js" /script> script $(document).ready(function(){ $(".inline").colorbox({inline:true, href:"#inline_content", width:"300px"}); }); /script
/head

body
Here I have a table with member names (and memberids)

td nowrap="nowrap" align="left" a class="inline" href="#inline_content?memberid=' . $ID .'"' . $fname . '/a /td; (I'm pretty sure this is wrong)

<div style='display:none'>
    <div id='inline_content' style='padding:10px; background:#fff;'>
      <?php 
echo $_REQUEST['memberid']; (this gives me nothing)
?> 
      </div>
</div>

I'm not lazy but I just don't know where to begin. If someone could give me the code I need and exactly where to put it, I would be very grateful. (I can't say I'm impressed with the auto formatting of my code - it's bad enough already)

Answer 1

I'm not entirely sure what you have available to you or what your end goal is, but here are some thoughts I had.

You can place script functions like this towards the top of the page IF they are wrapped in the $(document).ready() function. What it sounds like you want to do is put member IDs into the div you showed. You could set up an event for each member on the page so that when they are clicked on wherever you have their 'member id' stored could get displayed in your inline-content. (did you mean to hide the inline content with display:none? You could apply that to the inner div with the same outcome -- and if $_REQUEST['memberid'] is populated, you won't see it while display:none is there unless you have an action that changes that property.)

Here's an idea that might work for you:

<script>
    $(document).ready(function() {
       // Specify a class for all your members and then 
       $(".some_clickable_element_with_member_id").click(function() {
           $("#inline_content").html( $(this).attr("id") );
           return false; // if you don't want the click to go anywhere (assuming you're using an <a> tag.
       });
    });
</script>

Are you trying to have a table set up so that there are hidden attributes of the member ids which you want to pass to a subsequent page via a hyperlink? You don't need jQuery for that. You could just build the links in php with the memberid as part of the query string to the destination page. For example:

<a href="processThisMember.php?member_id=<?php echo $id; ?>">
    <?php echo $fname; ?>
</a>

Edit

You probably want to wait to become more familiar with jQuery and HTML before trying to integrate a plug-in. Read up on the jQuery documentation for selectors and manipulation and once you understand or partially absorb how to find elements and operate on them you're going to be in a much better place to solve this and future scenarios.

To access the person's id for your links just ask for the id:

$(this).attr("id");

$(this) changes depending on the context. I am assuming you're operating on the link $(".memberid").click(function() {. At that point, $(this) refers to the hyperlink that was clicked on.

To access the name, just ask for the html(); this gets the contents between the opening and the closing

$(this).html();

To put it all together,

$("#inline_content").html( $(this).attr("id") + " " + $(this).html() );

I'm not familiar with colorbox so I don't know how you should or are supposed to be able to pass values to it. I suggested giving the href of # but it looks like that was how the colorbox was getting activated. Change your links back to an href of

<a href="#inline_content" id=...></a>

Leave the class and the id there and hopefully you'll be able to take these ideas and generate the behavior you're looking for. There's still the possibility that you should leave the href as to how you had it when you asked this question but hopefully this will get you to where you want to be. Work with changing one thing at a time and watching how the behavior changes.

Remove the script tags merely containing $("#inline_content").html(); that wasn't how I intended for you to use that information.

When you change the back you should see your colorbox pop-up again.