Web Analytics Made Easy -
StatCounter Node/express newbie problem with creating a new page and button link to it - CodingForum

Announcement

Collapse
No announcement yet.

Node/express newbie problem with creating a new page and button link to it

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Node/express newbie problem with creating a new page and button link to it

    I'm new to web development (have a C++/Java background) I'm looking for some help with some simple modification I'm making to the node-login project as an exercise.

    I hope I can describe my problem helpfully without posting a bunch of code here. I've added a button to the home page (modifying the home.jade) that is supposed to navigate to a new page I've made called "about". I've added an about.jade, and the get handler in routes.js. I've added the button handling code in homeController.js.

    So my button doesn't work. However, I can manually navigate to localhost:3000/about and the page loads fine. When I set breakpoints I can see that both clicking the button and navigating manually result in the routes.js get function executing and calling render for my about page. I can also see with the Firefox debug network activity log that I get a response with the expected HTML for my GET about, and the HTML is the same for both methods.

    The only difference I can see is with the manual navigation method that works, I also get a bunch of GET exchanges for some scripts included in about.jade. With the button method, those don't fire. The log stops with GET about.

    Any ideas? I'm not sure where to look. Any other info I can provide?

    Thanks!

  • #2
    You speak of buttons. Do you mean a button element or do you just want a link to about page?
    Don't use old mysql library
    The Absolute Minimum Every Software Developer Absolutely, Positively Must Know About Unicode and Character Sets
    When a white horse is not a horse

    Comment


    • #3
      Can't guess at this. Post your code!
      Evolution - The non-random survival of random variants.
      Physics is actually atoms trying to understand themselves.

      Comment


      • #4
        Not quite sure what the problem is as you did not include any text that we can examine, but

        PHP Code:
        var url = require('url');

        function 
        handler (requestresponse) {

          
        console.log(request.url);

          var 
        pathname url.parse(request.url).pathname;

          
        // check if the page is specified. If not, default to index page.
          
        if (pathname == "/")
                
        pathname "/index.html"assuming index.html is your default page.

          
        //read (pathname) and return result;

        .....


        Comment


        • #5
          Thanks for the replies. Ok, here's some code:

          Code:
          // client side code
          this.goToAbout = function()
          	{
          		$.ajax({
          			url: "/about",
          			type: "GET",
          			error: function(jqXHR){
          				console.log(jqXHR.responseText+' :: '+jqXHR.statusText);
          			}
          		});
          	}
          
          // server side code
          app.get('/about', function(req, res)
          {
          	if (req.session.user == null)
          	{
          		res.redirect('/');
          	}
          	else
          	{
          		res.render('about');
          	}
          });
          This does execute, I can set a breakpoint in the Firefox debugger on the client side and my IDE for the server side code and see that. I guess since the main difference between using my button and manually going to the about URL is that ajax function then it seems likely that is the problem?

          Comment


          • #6
            Ok after playing with this some more, I found that the problem was my goToAbout() function. I changed the body of it to simply "location.replace("/about");" and that worked.

            But I'm not sure I'm doing this the best way possible. Again I am just trying to learn this by modifying an existing project. Can anyone say if I could be doing something simpler or better? I know from ancient HTML days that you can make a simple link with the <a href...> tag so maybe I really need my button handler to be doing that?

            Comment


            • #7
              Instead of using JavaScript to do this use the button itself or an anchor, who's job it is in the first place.
              BUTTON:
              Code:
              <form style="display: inline" action="about.html" method="get">
              	<button>About Us</button>
              </form>
              Or style an anchor as a button:
              Code:
              <!DOCTYPE html>
              <html >
              <head>
              <style type="text/css">
              .like_button {
                  text-decoration: none; font: menu;
                  display: inline-block; padding: 2px 8px;
                  background: ButtonFace; color: ButtonText;
                  border-style: solid; border-width: 2px;
                  border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
              }
              .like_button:active {
                  border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow;
              }
              </style>
              </head>
              
              <body>
              <a class="like_button" href="about.html">About Us</a>
              </body>
              </html>
              Evolution - The non-random survival of random variants.
              Physics is actually atoms trying to understand themselves.

              Comment


              • #8
                Thanks sunfighter - that makes sense, but now I am stuck modifying the jade code to make it look how I want. So far I have this:

                Code:
                 block content
                	nav.navbar.navbar-default.navbar-fixed-top
                		.container
                			.navbar-header
                				.navbar-brand Control Panel
                			ul.nav.navbar-nav.navbar-right
                				li
                					.navbar-btn#btn-logout.btn.btn-default Sign Out
                					.navbar-btn#btn-update.btn.btn-default Update an Account
                					//new code
                					a(href="about") 
                						.navbar-btn#btn-about.btn.btn-default About this site
                					//new code
                But this results in the following html:
                Code:
                  <body>
                    <nav class="navbar navbar-default navbar-fixed-top">
                      <div class="container">
                        <div class="navbar-header">
                          <div class="navbar-brand">Control Panel</div>
                        </div>
                        <ul class="nav navbar-nav navbar-right">
                          <li>
                            <div id="btn-logout" class="navbar-btn btn btn-default">Sign Out</div>
                            <div id="btn-update" class="navbar-btn btn btn-default">Update an Account</div>
                            <!--new code--><a href="about"> 
                              <div id="btn-about" class="navbar-btn btn btn-default">About this site</div></a>
                            <!--new code-->
                          </li>
                        </ul>
                      </div>
                    </nav>
                And that results in a working link, however, the About button is on a new line and not in-line with the other buttons. I am guess it is because the <div> line is indented, but I don't know how to make the button's div tag both inside the <a href> tag and NOT indented. I've played around and gotten a lot of variations but none if it is quite right. Any ideas?

                Thank you!

                Comment


                • #9
                  The first thing we need to straighten up is our language and what we call things.
                  You are not working with a button. You are working with an anchor.
                  You asked about buttons, but you have none.

                  You do not give us the CSS for this nor did you mention things are controlled by a framework, which might style things out of our control. It looks like BOOTSTRAP; is it?

                  I also do not understand why you are using a unordered list to do this.
                  Look at this:
                  Code:
                  <!DOCTYPE html>
                  <html lang="en">
                  <head>
                  <title>Theme</title>
                  <style type="text/css">
                  .nav div{
                  	float: left;
                  	margin-right: 20px;
                  }
                  </style>
                  </head>
                    <body>
                  <div class="navbar-brand">Control Panel</div>
                  
                  <div class="nav navbar-nav navbar-right">
                  	<div id="btn-logout" class="navbar-btn btn btn-default">Sign Out</div>
                  	<div id="btn-update" class="navbar-btn btn btn-default">Update an Account</div>
                  	<div id="btn-about" class="navbar-btn btn btn-default"><a href="about">About this site</a></div>
                  </div>
                  
                  </body>
                  </html>
                  Will this work in your framework without causing much trouble?

                  As a side note - Learn HTML/CSS before messing around with a framework. If you do that you might not need the framework.

                  P.S. Don't forget to clear the floats after the <div class="navbar-brand">Control Panel</div> element.
                  Last edited by sunfighter; Oct 2, 2016, 06:21 PM.
                  Evolution - The non-random survival of random variants.
                  Physics is actually atoms trying to understand themselves.

                  Comment


                  • #10
                    Ok thanks for the advice. I am just trying to learn this stuff by modifying an existing project that my partner handed to me, so I admit I'm not clear on some of the basics you mention. I'll try to study this and see how that goes.

                    Comment

                    Working...
                    X