Target dynamic content

[dpiearcy]

You guys always help.  I'm NOT a javascript programmer but am learning slowly.  Here's the situation:

 

I'm loading dynamic content I originally created for PHP and MySql for this sites main page.  No problems there.  I savvy PHP.  But now I'm building a phone app using juerymobile (mostly... lot's of custom javascript in there as well).  So I'm calling for the dynamic content to be loaded via AJAX and JSONP.  No problems there either.  (basically getting that info from a PHP file of course that gets the info from the database).  

 

Now in PHP once I have that ID for the content I want I can manipulate things to my hearts desire.  Since I'm not a javascript programmer it's hard for me to wrap my head around the way to accomplish what I can with PHP.  

 

I'm truncating data.  I want to slide to a new view when an arrow is clicked.  So I don't have to call for the data again, I'm hiding a div that slides into view when clicked.  But I need the content of that particular row (in MySql) and only that row to appear in that div.  I have that data in a var but since it's in a loop....  

 

I can pass the ID on to javascript if that helps.  

 

Some good reading would be nice to increase my learning.  Stupid class I took online didn't get into these kinds of details.  

 

Thanks!

[dpiearcy]

I THINK I've found my answer.  I stumbled across this bit of code and I believe it does exactly what I want it to do.  Now just to change it to fit my application.  

(function(){
        
    // querySelector, jQuery style
    var $ = function (selector) {
        return document.querySelector(selector);
    };
    
    // Create function outside loop
    function dynamicEvent() {
        this.innerHTML = 'Dynamic event success.';
        this.className += ' dynamic-success';
    }
    
    // Iterate over #links <li>
    // Use querySelector to target #links and then get tag names <li>
    var links = $('#links').getElementsByTagName('li');
    
    // For each <li> inside #links
    for (var i = 0; i < links.length; i++) {
        var link = links[i];
        
        // <li> onclick, runAlert function
        link.onclick = dynamicEvent;
    }
    
    // Onsubmit
    $('.generate').onsubmit = function() {
    
        // Grab the input value
        var dynamicValue = $('.generate-input').value;
        
        // If empty value
        if(!dynamicValue) {
        
            alert('Please enter something.');
            
        } else {
        
            // Change the submit value
            $('.generate-submit').value = 'Click your item below!';
            
            // Create the links with the input value as innerHTML
            var li = document.createElement('li');
            li.className = 'dynamic-link';
            li.innerHTML = dynamicValue;
            
            // Append it and attach the event (via onclick)
            $('#links').appendChild(li);
            li.onclick = dynamicEvent;
        }
        
        // Prevent the form submitting
        return false;
    }
})();

I'm using a bunch of var's with div's etc. in them but the principle is the same.  Thanks anyway.