Displaying list forms in the same div

First, I want to thank you for the very hepful SPServices library. The search services has been especially useful to me.

I'm trying to create an SPA application in SP2007 using SPServices and SharePoint Designer. I want to have a left pane and a right pane. The left pane will have a bunch of links to items from different lists. The right pane will display the list forms (DispForm,
NewForm, EditForm) every time a link is clicked from the left pane OR the right pane (clicking a lookup link in a DispForm rendered on the right pane should open up the target DispForm in the right pane, not in a separate window).

What is the best approach to implement this? I tried the code below to prevent a new window from opening and load the onetIDListForm div in the right pane. It works for all links except links in the right pane (from the loaded DispForm). Is there a better way?

Have you tried working with frames? Your basic page could include all of the links you build in the left pane and an iframe element in the right pane to render whatever you need. Your links on the left can be set to just change the source of the iframe
element, then process the contents of the element on the fly to hide everything you don't want displayed. The links internal to the iframe will still work as they normally do.

The other option is to create your own version of the DispForm for the right pane and populate it via script as the links on the left are clicked. That way, you can build the lookup links as you see fit and direct pop-ups, same window, message boxes, or whatever
you want. I've done something like this and it is quite simple and surprisingly efficient. You can borrrow the basic architecture from any existing DispForm.aspx page to just design the form area and then populate the data elements with an SPServices call.
Each link on the left could run a sub-routine in the page that just reloads the content on the right--doesn't require a page refresh each time since you're doing an SPServices call for the data and manipulating the existing DOM to display it.

The first method seems like a great idea that doesn't require much coding. The only issue is that the page would have only one URL and it wouldn't change with each click. How do I build unique urls so that if the URL is shared, it goes to that specific item
instead of the base SPA page.

Do you have an example of the second method? Could that work for multiple lists?

I was avoiding Angular because I want the server to do the heavy lifting with the listforms instead of building my own on the client side. I also want to accommodate links users would get automatically (e.g., links from alerts). In addition, I also have
several DispForms with mashups (DVWP's filtered by QueryStrings). Given all this, is Angular the right way to go?

I remember seeing you demo a Task list SPA you built in Knockout during your SP24 conference session. Is that publicly available?

I started building the AngularJS app in SP2007. The index page works fine but as soon as I reference an app.js file that defines a controller, it doesn't work (expressions don't evaluate). Do you know what may be causing this issue?

I started building the AngularJS app in SP2007. The index page works fine but as soon as I reference an app.js file that defines a controller, it doesn't work (expressions don't evaluate). Do you know what may be causing this issue?

You don't name the controller in the ng-repeat or anywhere else on the page other than the very top or the isolated area you're trying to apply angular to. Right now you're doing TermsCtrl.Terms. That's not going to work or I've never seen it done like
that before.

Really appreciate your taking the time to help me! Much appreciated. I tried removing the TermsCtrl and it still doesn't work. I think my issue is with the promise callback, not the Angular expressions.

Here's the new code. I put the call to SPGetListItemsJson in a service called "TermData". The "SiteData" service works fine and displays on the page, so means the problem is with the promise. Also tried calling SPGetListItemsJson from controller
itself - same results.

The console.log output from inside the .done method lists all the objects fine, but the console.log output outside of that returns "object: {state: function, always: function...}

Again, it's the promise I think, but I can't put my finger on the precise cause.

Does {{site}} work? Get rid of the other stuff and just test the basics. Is your scope connected to your view at all. From there if that works then you know definitely it's spgetlistitemsjson (which I never got to work myself - didn't try that hard).

Try using the get list item without the json, like i said, I wasn't able to get it working with JSON myself. Also try calling it from the controller instead of the factory just to see if it works. If it does, figure out how to move it to a factory properly.
You really just need to troubleshoot it yourself and try different things do, make sure your spservice is returning something, make sure what it's returning is properly assigned to the scope, make sure you view is correctly setup, put logs everywhere.

This is the example on how to do it in the documentation, follow that:

Realize this is an older post – but while I was searching for a solution on calling multiple "getlistitems" I ran across this issue and noticed you said you were trying to prevent new windows from opening. Not sure if this will help on this project,
but it's handy to include both "preventD" & "returnV false" when you are calling preventDefault.