Solved

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

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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
jQuery Animation faster 5 42
JS Plugin 4 29
bootstrap footer centering and expand problems 7 17
Run a batch file when a Crystal Report is opened 5 12
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
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 …
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…

932 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

15 Experts available now in Live!

Get 1:1 Help Now