Updating part of the page using Ajax, MVC

Hi guys,

I am using MVC3 and I am working on List/Details view in whcih Details view is part of the list view and depending on the items clicked in the list view, I have to load its details asynchronously.

I am attaching Mock-up for your review


$(document).ready(function () {
      $('#example tbody tr').click(function () {
          alert('row was clicked');
      });
  });

  $(document).ready(function () {
      $('#example tbody tr').hover(function () {
          $(this).css('background-color', '#ccc');
      },
                  function () {
                      $(this).css('background-color', '#fff');
                      //                  $(this).css('background-color', '#fff');

                      //      alert('Hi');
                  });
  });

</script>

Open in new window


and my HTMl looks like this

  <div class="framed-application">
            <iframe src="http://localhost:13229/task/create" frameborder="1"></iframe>    
            </div>
 

Open in new window


Now How can I do following things?

1. Load new details view asynchronously everytime a row is clicked?
2. Pass in ID or something to that view

Thanks,
Tasks-MockUp.png
TheCommunicatorAsked:
Who is Participating?
 
Gurvinder Pal SinghConnect With a Mentor Commented:
$('#example tbody tr').load('url' + $(this).find("td.value").html()).fadeIn("slow");
0
 
TheCommunicatorAuthor Commented:
I am doing something like this and it does nto seem to do anything. Anything wron in this code?

$('#Container').load('../task/create;>').fadeIn("slow");

Open in new window



HTML
<div id = "Container" class="framed-application">
            <iframe id ="FrameContainer" frameborder="1"></iframe>    
            </div>

Open in new window

0
Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

 
Gurvinder Pal SinghCommented:
../task/create;>

this doesn't look like a valid url
0
 
TheCommunicatorAuthor Commented:
Thank you so much. That worked. The only piece whcih is not working (or I am not able to figure out) is that

How to pass $('#example tbody tr')'s some <TD> value to the targetting URL
0
 
TheCommunicatorAuthor Commented:
Well, This is MVC so it is Controller/actiomethod pair
0
 
Gurvinder Pal SinghCommented:
basically i am just appending the value of the inner TD to the url query string
0
 
TheCommunicatorAuthor Commented:
Thank you so much that helped:)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.