Solved

Append to DIV with results from webservice on row click in gridview how?

Posted on 2013-05-15
5
637 Views
Last Modified: 2013-05-20
I have been searching for 2 days but have not found the exact thing I need.  I have a gridview built dynamically that has a div in a hidden table row for each row of the gridview.  I am using jquery and on row click in the gridview I use a webservice to return data from the database.

Using jquery how do I target the specific div in that row and then append or add the json data to that div before making it visible?    

Some please provide an example or a link to an example.  Thanks.
0
Comment
Question by:thamilto0410
  • 3
  • 2
5 Comments
 
LVL 1

Author Comment

by:thamilto0410
ID: 39169780
Anyone?
0
 
LVL 83

Expert Comment

by:CodeCruiser
ID: 39170902
Similar sounding approach here

http://stackoverflow.com/questions/9590238/jquery-append-div-after-certain-table-row

If its not relevant, show us some code.
0
 
LVL 1

Author Comment

by:thamilto0410
ID: 39173230
Codecruiser,

Sorry for the delay been in meetings all day.  Okay I did not use the above but yes that is very similar to what I need.  Now because I am using a gridview and expand collapse to show additional data related to a specific record I did find this on Codeproject under expand/collapse :

 $(document).ready(function() {
        var trindex=0;                                  //trindex hold row index created by jquery
        $("tr").click(function() {
        if ($(this).find("td:first").length > 0) {      //check whether it is header or content row
            trindex++;                                  //row index icreament to assign new row id everytime
            //create a row with td colspan 3 to show product description
            var row= '><td class="currRow" colspan="3" ><div id="did"><img id="imagepath" src="" style="height: 81px; width: 104px" />  Description :<span id="des">sd</span><p>Cost :<span id="cost">sd</span></p></div></td></tr>';                
           
            //adding anitmation to row
            var newRow = $("<tr id=tr"+ trindex + row).animate({
            height: "140px",
            opacity: 0.25,
            }, 500);

          //adding row to existing table
         $(this).after(newRow);

         //getting previous created row
        var rowName="tr" + parseInt(trindex-1);

        //reomving previous created row from table with animation
        $("#"+rowName).find('td').removeClass('currRow').addClass('hideRow');
         $("#"+rowName).animate({
            height: "0px",
            opacity: 0.25,
        }, 500, function() {
         $("#"+rowName).remove();
  });
         
   //ajax call to webservice
        $.ajax({
                 type: "POST",
                 url: "WebService.asmx/GetDetails",   //webserviceName/methodName
                 data: "{'name': '" + $(this).find("td span").text() + "'}",  //passing values to webservice(productid)
                 contentType: "application/json; charset=utf-8",
                 dataType: "json",
                 success: function(msg) {
                 //extrating response data to newly created row
                 $("#tr"+trindex ).find("td #did p #cost").text(msg.d.cost );
                 $("#tr"+trindex ).find("td #did  #des").text(msg.d.description);
                 $("#tr"+trindex ).find("td #did #imagepath").attr('src', msg.d.imagePath); //$("#myImage").attr("src", "path/to/newImage.jpg");
                 },
                 error: FailedMessage     //showing error message if failure
             });
             }
        });
       
});
          function FailedMessage(result) {
              alert(result.status + ' ' + result.statusText);
          }  

  I have it working to add a row to the current row clicked and show the additional details but when I click another row it does not hide/remove the previous row added/showed can you give me a push in the right direction for how to modify so that when another record is clicked the previous does get collapsed/closed/removed.  Thank you.
0
 
LVL 83

Accepted Solution

by:
CodeCruiser earned 250 total points
ID: 39174297
Well you have following

         //getting previous created row
        var rowName="tr" + parseInt(trindex-1);

        //reomving previous created row from table with animation
        $("#"+rowName).find('td').removeClass('currRow').addClass('hideRow');
         $("#"+rowName).animate({
            height: "0px",
            opacity: 0.25,
        }, 500, function() {
         $("#"+rowName).remove();


I suspect there is an issue with the index. Try adding some alerts around the index/rowname to see if it is picking the right row.
0
 
LVL 1

Author Closing Comment

by:thamilto0410
ID: 39183065
Thank you CodeCruiser.  Took me until today but I got it.  You were right the index of the row being passed was not accurate.  It is working perfectly now.
0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

OverviewThis article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results. The princip…
Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now