MindMap project, edit page problem.

gistfile1.txt

******full repo at  https://github.com/averygoodplanet/MindMap


/////////// map-form.jade //////////////////////
form#map-form(action='/create', method='post')
  fieldset
    legend New MindMap
    .row
      mixin field(12, 'text', 'title', 'Title')
    .row
      .small-6.columns
        button#new-map.radius.small.expand.success(type='submit') Create
      .small-6.columns
        a.button.radius.small.expand.alert(href="/table") Cancel

/////// ./app.js    Routes ///////////////
...
app.post('/create', map.create);

/////////  ./routes/map.js  ///////////////

// POST '/create'
exports.create = function(req, res){
  req.body.user = res.locals.user;

  // save a new map to database
  new Map(req.body).save(function(err, map){
    // pass map object back to browser (static app.js)
    // then within static app.js you'll do a page change and
    // pass object
    console.log('*******in newMap, map: ');
    console.log(map);
    res.render('edit/index', {map: map});
  });
};

/////////  ./views/edit/index.jade ////////////

extends ../template/layout
//- script(type='text/javascript').
//-   alert('hello')
//-   window.onload = alert('hi')
//- script(type="text/javascript")
//-   window.map =
//-      //- window.addEventListener('load', function(){
//-      //-     loadMap(map);
//-      //- });

block content
  .row
    .small-12.columns
      h1 Edit Page
      a.button.small(href="/save") Save (return to table)
  .row
    .small-12.columns
      if(map)
        h2= map.title
  .row
    .small-12.columns
      button.small#blackFilledRectangle blackFilledRectangle
      button.small#resetCanvas  resetCanvas
      button.small#redEmptyRectangle redEmptyRectangle
      button.small#verticalLines verticalLines
      button.small#drawText drawText
      button.small#drawImageObject drawImageObject
      button.small#drawCircle drawCircle
      button.small#textCenteredCircle textCenteredCircle
      button.small#addFreeNode  addFreeNode
      button.small#connectNode0To999  #connectNode0To999
      button.small#createAndConnectNewNodeTo0 #createAndConnectNewNodeTo0
      button.small#connectNewNodeToSelected #connectNewNodeToSelected
  .row
    .small-4.columns
      textarea#nodeTextBox(placeholder="enter new text here, then double-click on node's label")
    .small-8.columns
  //- .row
  //-   .small-12.columns
  //-     canvas#canvas1(height='600px', width='600px' background-color='white')
      //- canvas height and width need to be set inline
      //- and not in CSS/LESS, to avoid blurry text/images
  .row
    .small-12.columns
      #container
        #left-container
          #id-list
          #center-container
          #infovis
        #right-container
          #inner-details
      #log
  .row
    .small-12.columns

PROBLEM DESCRIPTOIN

 INTRO: Hi, I'm Peter Himmelreich (averygoodplanet@gmail.com), a software school student, a Node NOOB, and am "stuck" with a problem on my project for the Nashville Software School. I've spent 4+hrs trying to resolve the problems through stackoverflow and other internet articles without progress. Any help is greatly appreciated--thanks!      

..* HOW TO CONTACT ME: averygoodplanet@gmail.com 

WHERE MY CODE IS: https://github.com/averygoodplanet/MindMap

DESIRED BEHAVIOR:
//Leading up to problem issue:
1. clone repo
2. start up redis ('redis-server'), mongo ('startmongo', 'mongo'), and 'supervisor app.js'
3. go to localhost:3000
4. register username and password and login
5. When user clicks 'Login', table/index.jade loads
6. User clicks 'New MindMap' button, which takes them to new/index.jade.
7. User enters title in input field, clicks Create, this causes the form #map-form to do a POST '/create', routes to map.create. Exports.create saves a new Map to mongoose, then renders the edit/index.jade page, and passes the map object to edit/index.jade.  This jade file is able to successfully display the map title on the page using the jade 'h2= map.title'.
//****point I'm stuck at
8.  After the edit/index.jade page has been loaded (e.g. after my static javascript file (public/javascripts/app/app.js) has ran $(document).ready(initialize)), I need to call a function loadMap() passing the map object from jade to that function in static javascript file.  
9. This loadMap(map) function will then assign map.graphData to global variable called json, and call init(json) (located in app/example2.js, which should load the graph data into Infovis graphing library's canvas to be displayed on the page, similar to http://philogb.github.io/jit/static/v20/Jit/Examples/ForceDirected/example2.code.html).

KEY ISSUES (see 8 and 9 above):
--When I want user click to send data to server, have server save a new database object, return the database object so it is available to jade, and render a different page, how do I call a function in my static javascript (and pass the object from server to that function) after the new page is done loading (e.g. after $(document).ready(initialize);). (I want to call this function only on this page, not on other pages.)


THINGS I TRIED (and wasn't able to make work):
1.   script(type='text/javascript')
           window.addEventListener('load', function(){loadMap(map)})
//This ends up firing this on every page I navigate too, and I don't think I was actually able to pass the map variable to static js
2. Difficulty getting scripts entered into jade to run. Stackoverflow said something about commenting out app.use(app.router) in config.js, but I do not think that was working.
3. Adding a separate js file listing in views/template/scripts.jade, and then doing something like if(window.location.pathname === '/create'){ try(map) ... but was unable to get this to work.
4. Some articles said that doing a '#{map}' or something would allow me to make a the map variable in jade available to my static javascript, I was unable to make this variable available to my static javascript files. Even if I was able to do this, I still have the remaining problem of calling loadMap(map) and making sure that this is called after the page loads (after $(document).ready(initialize)), and making sure this function is only called on this page (not on all pages).
5. Instead of doing a form submission, I tried to use AJAX for the exports.create, and then do a res.render('edit/index', {map: map}); but I couldn't get it to change pages. Also unsure of how to call loadMap(map) after $(document).ready(initialize) on the Edit Page.


CONCEPTS I'M UNSURE ON:
--Clarifying in my head when to you AJAX versus when to use just a form submission
--How to pass variables from jade to static javascript (on one page only)
--How to call a function in my static javascripts, loadMap(map) with a map variable in jade, only on the edit/index.jade page, and only after the page complete $(document).ready(initialize);
--Where there is a good tutorial/demos on this sort of stuff (something that really spells it out for a beginner, that does a good job of showing different use cases with code (e.g. 'when you want to redirect after saving data to database', ...) A lot of stuff out there I've seen is either a trivial 'hello world' example or is hundreds of pages (i.e. for someone more advanced.)

Resolved this issue with help from Mr. Raw Syntax https://github.com/rawsyntax, by:

1. I have the map variable in jade. In jade doing JSON.stringify(map) and placing the contents in a hidden html element.
2. Within initialize() function in static js add a function that checks if(window.location.pathname === '/create') and if so calls a function which accesses the data in jade by doing JSON.parse($('#mapdata').text()).