Solved

Updating part of the page using Ajax, MVC

Posted on 2011-09-10
8
331 Views
Last Modified: 2012-05-12
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
0
Comment
Question by:TheCommunicator
  • 4
  • 4
8 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 36516498
0
 

Author Comment

by:TheCommunicator
ID: 36516538
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
 
LVL 40

Expert Comment

by:gurvinder372
ID: 36516583
../task/create;>

this doesn't look like a valid url
0
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

Author Comment

by:TheCommunicator
ID: 36516588
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
 

Author Comment

by:TheCommunicator
ID: 36516607
Well, This is MVC so it is Controller/actiomethod pair
0
 
LVL 40

Accepted Solution

by:
gurvinder372 earned 500 total points
ID: 36516609
$('#example tbody tr').load('url' + $(this).find("td.value").html()).fadeIn("slow");
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 36516612
basically i am just appending the value of the inner TD to the url query string
0
 

Author Comment

by:TheCommunicator
ID: 36525088
Thank you so much that helped:)
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying 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

Suggested Solutions

Title # Comments Views Activity
JavaScript Regex not working for 1-3 digit number?   /^\d{1,3}$/ 5 26
ajax jquery 3 25
Explain this javascript function to me 2 25
Javascript 2 20
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 …
This article discusses how to create an extensible mechanism for linked drop downs.
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…

808 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