Help : Kind of Like 'Registration form with multiple pages'

Topics: Writing modules
Jan 4, 2012 at 6:18 PM
I am an Orchard Newbie; I want to deliver a module that has a 'Tab Effect' where each Tab can pull in a MVC view.  I did a prototype in a standalone MVC app show below and it seems to be working.
When I port it to an MVC module; the tabs work but are not pulling in the results of the view. Any ideas? I have the basics of the Orchard subsystem - so in general want to also understand how I can re-use existing views without making necessarily registering them as widgets or modules.
Thanks in advance.

---

<!-- I changed this to Script.Register in the Orchard Module -->
<
link type="text/css" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css" rel="Stylesheet" />   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>   <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<
div id="tabs">  <ul> <!-- the following are views --> <li><a href="@Url.Action("Address","Home")">Enter Address</a></li> <li><a href="@Url.Action("Office""Home")">Choose Office</a></li> <li><a href="@Url.Action("Profile""Home")">Choose Profile</a></li> </ul> </div>

  <script>
	  $(document).ready(function () {
		  $("#tabs").tabs();

	  });
  </script>
Jan 4, 2012 at 6:30 PM

"The tabs work but are not pulling in the results"... so in what way are they working?

Can you show your code for .tabs()?

Also it looks like you are including jquery UI twice...

Jan 4, 2012 at 6:35 PM

Sure; here is the exact code.  The .tab() code is pulled in from the Jquery scripts.  The tabs look correct; but when clicking on them each should show the results of the view in the div; but they don't show anything

 

@{
    Script.Require("jQuery").AtHead();

   
    Style.Require("jQueryUI_Orchard").AtHead();
    Script.Require("jQueryUI_Tabs").AtHead();
   
}

 

<div id="tabs">
 <ul> <!-- the following are views -->
		<li><a href="@Url.Action("Address","Home")">Enter Address</a></li>
		<li><a href="@Url.Action("Office""Home")">Choose Office</a></li>
		<li><a href="@Url.Action("Profile""Home")">Choose Profile</a></li>
	</ul>
</div>

  <script>
	  $(document).ready(function () {
		  $("#tabs").tabs();

	  });
  </script>
Coordinator
Jan 4, 2012 at 11:13 PM

Use your browser's dev tools to watch network activity when you click a tab.

Jan 5, 2012 at 6:21 PM

I think that the tabs() script won't automatically know what to do when the tabs are clicked. You have to assign an event handler to perform the AJAX call and insert the HTML in the correct tab pane on your page. jQuery documentation may have further examples and explanation.