Solved

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

Posted on 2013-05-15
5
653 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

Question has a verified solution.

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

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
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…

726 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