Solved

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

Posted on 2013-05-15
5
643 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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

810 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