Page 1 of 1

jQuery generated content not seen by jQuery

Posted: Mon Jan 28, 2008 2:14 pm
by RobertGonzalez
Ok, so I am no jQuery expert but I am profficient enough to hang myself. Which I have done, and now I need a jQuery pro to assist me.

I have a document I am developing in which I want to take the value of the title attribute of an <area> tag and make content out of it when the tag is mousedover. That is working without a glitch. The problem I am facing is that I want users to be able to take the generated content from the mouseover and close the content if they choose.

So basically the process is "roll over an element and display a div somewhere else on the screen. Append a link to the generated div that allows for the clearing of div when clicked."

My challenge is that it seems that jQuery is not recognizing the content it generates outside of the function that generated it. I am not all that sure how to handle scope in JS, so any help would be much appreciated in figuring this out.

Just so I am clear, I can make the content show up and all of that. I just cannot, for the life of me, figure out how to tell jQuery to take an element that it has created and, when clicked, clear the div in which that created content resides.

Re: jQuery generated content not seen by jQuery

Posted: Mon Jan 28, 2008 3:00 pm
by Kieran Huggins
Code?

Re: jQuery generated content not seen by jQuery

Posted: Mon Jan 28, 2008 3:32 pm
by RobertGonzalez
I got it sorted out. What I ended up doing was creating the div with the elements that would eventually show on the screen and defaulted the box. Then I applied a hidden property to the CSS for it, then used jQuery to show it and replace elements as needed in the box.

This is what I have now and it is working:

Code: Select all

    // Takes a string and makes address parts of the string     function getBranch(string, piece) {        // This expects something like: Corporate Branch: 20 Kieran Drive - Aboot, CA 99999        stopOne = string.indexOf(':');        string = string.replace(':', '');        stopTwo = string.indexOf(' - ');        string = string.replace(' - ', '');                // Now fetch and return what is being asked for        if (piece == 'branch') {            return string.substring(0, stopOne);        } else if (piece == 'address') {            return string.substring(stopOne+1, stopTwo);        } else if (piece == 'locale') {            return string.substring(stopTwo, string.length);        }      }        // Handle the replacement of values in the show box    function showBranch(branchString) {        $('#branch-location').removeClass('hide-location').addClass('show-location');        $('#branch-location-name').html(getBranch(branchString, 'branch'));        $('#branch-location-address').html(getBranch(branchString, 'address'));        $('#branch-location-locale').html(getBranch(branchString, 'locale'));    }        // Area map stuffs    $("area").mouseover(function() {        showBranch($(this).attr('title'));    });        // Branch listing stuffs    $('.branch-listing span').mouseover(function() {        showBranch($(this).attr('title'));    });        // Close the branch info box stuffs    $('a.close-location').click(function() {        $('#branch-location').removeClass('show-location').addClass('hide-location');    });
And the markup:

Code: Select all

<div id="branch-location" class="hide-location">
    <?php $branches->startRecord(); ?>
    <h3 id="branch-location-name"><?php echo $this->escape($branches->fields['branch_name']) ?> Branch</h3>
    <p id="branch-location-address"><?php echo $this->escape($branches->fields['branch_address']) ?></p>
    <p id="branch-location-locale"><?php echo $this->escape($branches->fields['branch_city']) ?>, <?php echo $this->escape($branches->fields['branch_state']) ?> <?php echo $this->escape($branches->fields['branch_zip']) ?></p>
    <p><a title="Close this box" class="close-location">Remove this information</a></p>
</div>