Clever Geek Handbook

Dynamic Slidedown effect using jQuery read data from table

I want to list some records from a table in an ASP.NET page. For each record, I want to display some data and at the same time provide a button to click it. I want to show "VISION BUTTON BUTTON". If they click on the button, I want the slide down window (using jQuery) to display other data to write. An example of what I'm looking for can be found here.

Dropdown example

I would rather have one function to handle the details. I would like the drawer to appear right below each post, not at the bottom of the page. Is there a way to do this using jQuery? I looked at the wrapper add but didn't know how to implement it.

0


source to share


1 answer


Place the field in your ASP markup, but hide it:

<a href="javascript:showDetails(123);">Show details</a>
<div id="details123" style="display: none"></div>


Now let's implement the show / load function:

function showDetails(recordId) {
    var detailsDiv = $("#details" + recordId);
    // load stuff -- replace this with whatever is 
    // appropriate for your app
    $.getJSON("/myapp/someJSONfunction?recordId=" + recordId,
        null,
        // this will be run if successful
        function(data) {
            if (data.value) {
                detailsDiv.text(data.value).slideDown();
            }
        }
    });
}
+2


source






More articles:


All Articles