Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

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

Posted on 2013-05-15
5
Medium Priority
?
656 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 1000 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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

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…
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 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)
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…
Suggested Courses

604 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