passing value to one div from another via jquery

Question

i am trying to pass a value form one div to another. the first div is generated by a for each loop and has a conditional statement that if the condition matches, the value is passed to second div and the second div is shown via a jquery popup window. here is my code:

<?php foreach ($value as $data) {
?>
<div class="center">
    <h4>Description:</h4>
    <?php 
        if(strlen($data['description'])<50)
        {
            echo $data['description'];
        }
        else
        {
            $str=$data['description'];
            $substr=substr($str,0,50);
            echo $substr.'<p class=button><a href=#>read more...<a/><p/>';
    ?>
    <?php }?>
</div>
<?php }?>
<div class="popupContact">
    <a class="popupContactClose">x</a>
    <h1>Description</h1>
    <p class="contactArea">
        <?php echo $str;?>
    </p>
</div>
<div class="backgroundPopup"></div>

here is my jquery popup

//SETTING UP OUR POPUP
//0 means disabled; 1 means enabled;
var popupStatus = 0;

//loading popup with jQuery magic!
function loadPopup(){
    //loads popup only if it is disabled
    if(popupStatus==0){
        $(".backgroundPopup").css({
            "opacity": "0.7"
        });
        $(".backgroundPopup").fadeIn("slow");
        $(".popupContact").fadeIn("slow");
        popupStatus = 1;
    }
}

//disabling popup with jQuery magic!
function disablePopup(){
    //disables popup only if it is enabled
    if(popupStatus==1){
        $(".backgroundPopup").fadeOut("slow");
        $(".popupContact").fadeOut("slow");
        popupStatus = 0;
    }
}

//centering popup
function centerPopup(){
    //request data for centering
    var windowWidth = document.documentElement.clientWidth;
    var windowHeight = document.documentElement.clientHeight;
    var popupHeight = $(".popupContact").height();
    var popupWidth = $(".popupContact").width();
    //centering
    $(".popupContact").css({
        "position": "absolute",
        "top": windowHeight/2-popupHeight/3.25,
        "left": windowWidth/2-popupWidth/2
    });
    //only need force for IE6

    $(".backgroundPopup").css({
        "height": windowHeight
    });

}


//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){

    //LOADING POPUP
    //Click the button event!
    $(".button").click(function(){
        //centering with css
        centerPopup();
        //load popup
        loadPopup();
    });

    //CLOSING POPUP
    //Click the x event!
    $(".popupContactClose").click(function(){
        disablePopup();
    });
    //Click out event!
    $(".backgroundPopup").click(function(){
        disablePopup();
    });
    //Press Escape event!
    $(document).keypress(function(e){
        if(e.keyCode==27 && popupStatus==1){
            disablePopup();
        }
    });

});

now, as the first div is generated from a for each loop, i need to distinguish the read more.. link to determine which one of the read more is clicked and pass the appropriate $str to the second div. is it possible to pass the value via jquery? or is there any better way of doing it? it may sound confusing as i am weak with my words, but if someone do understand what i am saying please help.

Answer 1

Is it possible for you to do the DOM manipulation via jQuery instead? If so I would recommend changing to the following code:

$(document).ready(function () {
    $.each($value, function(index) {
        var desc = $value[index]["description"];
        var container = $('<div></div>').append('<h1>Description</h1>');
        if (desc.length < 50) {
            container.append(desc);
        } else {
            var anchor = $('<a href="#" class="button" onclick="return false;"></a>')
                //cache the rest of the description using .data()
                .data('desc', desc.substr(50, desc.length))
                .click(function () {
                    //using jQuery UI for a dialog
                    $('#genericDialog').html($(this).data('desc')).dialog();
                 })
                .text("Read more...").wrap('<p></p>');
            container.append(desc.substr(0, 50));
            container.append(anchor);
        }
        //append the container to the dom
        container.appendTo("#contactHolders");
    });
});

Here is the html I used:

<div id="contactHolders">
</div>
<div id="genericDialog"></div>

I made a fiddle here if you want to see this code working. Documentation for jQuery UI Dialogs is here.

Answer 2

One of the simplest way to do, is to keep your long text in a hidden block, while you're in the foreach:

$str=$data['description'];
$substr=substr($str,0,50);
echo $substr.'<p class=button><a href=#>read more...<a/><p/>';
echo '<p class="full-desc">'.$str.'</p>';

then hide the p with css:

.full-desc{ display: none; }

and retrieve the value in javascript:

$(".button").click(function(){
    $(".contactArea").html($(this).next().text());
    //centering with css
    centerPopup();
    //load popup
    loadPopup();
});

Answer 3

There are of course many ways to accomplish this if I understand your question right.

One solution is to use the html 5 data attributes to pass a value that identifies what link is pressed.

In your read more link you could add:

<p class=button data-descriptionId = [PHP code to write the Id]><a href=#>read more...<a/><p/>

Then in jQuery you can hook up the clicked event for the link, get the value and load content via an ajax call. I cannot see how you intend to load the data but it would look something like this:

$(document).ready(function(){

    $(".button").click(function(){
    event.preventDefault();
    var id = $(this).attr("data-decriptionId");

    //Make ajax call to the database see jQuery documentation for $.ajax passing inn the idvariable

});

    //set this as callback function to put the result in the second div

    function SetData(data){
    $(".contactArea").text(data); 
    }

});

To do the ajax call se documentation for it here

That should work.