Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Need help including and setup #50

Closed
yourdeveloper opened this issue Apr 11, 2014 · 12 comments
Closed

Need help including and setup #50

yourdeveloper opened this issue Apr 11, 2014 · 12 comments
Labels
question

Comments

@yourdeveloper
Copy link

Great library, Demo's are looking awesome.
I want to implement in nodeJS/Express/Jade project but i always get ReferenceError can't find variable 'vex'
I have include vex.dialog.js and vex.js, vex.css and vex-themse-os.css in my layout jade and in my Jade for the home page i wanna show a simple alert to get started like this

extends  layouts/layout
block content
    .page
        .container
        .content.text-center
            .heading
                h2 Home

                .border

        script.
            vex.dialog.confirm
            message: 'Are you absolutely sure you want to destroy the alien planet?'

It will give always the reference error
Please give instructions what am I doing wrong here?
@adamschwartz
Copy link
Contributor

You probably just need to include the library:

extends  layouts/layout

block content
    .page       
        // - ...
        script(src="vex.combined.min.js")
        script.
            vex.defaultOptions.className = 'vex-theme-default'
        link(rel="stylesheet" href="vex.css")
        link(rel="stylesheet" href="vex-theme-default.css")
        script.
            vex.dialog.confirm
                message: 'Are you absolutely sure you want to destroy the alien planet?'

@yourdeveloper
Copy link
Author

Adam,
The library is included in the layouts/layout jade file including all the other css and js so it is there i can see it in the inspector

@adamschwartz
Copy link
Contributor

If you're seeing ReferenceError can't find variable 'vex', then it's likely something is not being included properly. Can you post the compiled HTML source?

@yourdeveloper
Copy link
Author

I have moved now the .js to the header of the template and the reference error is gone but no dialog is shown.
Full HTML rendered is here

<!DOCTYPE html>
<html><meta name="viewport" content="width=device-width, initial-scale=1">
  <head>
    <title>YourDeveloper Mobile Solutions | Node Backend systems</title>
    <link rel="stylesheet" href="/assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="/assets/css/style.css">
    <link rel="stylesheet" href="/assets/css/animate.min.css">
    <link rel="stylesheet" href="/assets/css/font-awesome.min.css">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,600">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
    <link rel="stylesheet" href="/assets/css/vex.css">
    <link rel="stylesheet" href="/assets/css/vex-theme-os.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="/assets/js/vex.combined.min.js"></script>
  </head>
</html>
<div class="loader">
  <div class="fading-line"></div>
</div>
<div id="navbar-top">
  <nav role="navigation" class="navbar navbar-default navbar-static">
    <div class="container">
      <div class="navbar-header">
        <button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
      </div>
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav navbar-left">
          <li class="active"><a href="/" class="external">Home</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="/profile" class="external">My profile</a></li>
          <li><a href="/logout" class="external">Logout</a></li>
        </ul>
      </div>
    </div>
  </nav>
</div>
<div class="page">
  <div class="container"></div>
  <div class="content text-center">
    <div class="heading">
      <h2>Home</h2>
      <div class="border"></div>
    </div>
  </div>
  <script>
    vex.dialog.confirm
     message: 'Are you absolutely sure you want to destroy the alien planet?'
  </script>
</div>
<footer id="footer">
  <div class="container">
    <div class="row">
      <div data-animation="fadeInUp" class="col-lg-12 animated hiding">
        <ul class="social list-inline">
          <li><a href="https://www.facebook.com/YourDeveloper" target="_blank" title="Facebook" class="facebook"><i class="fa fa-facebook fa-2x"></i></a></li>
          <li><a href="https://twitter.com/yourdeveloper1" target="_blank" title="Twitter" class="twitter"><i class="fa fa-twitter fa-2x"></i></a></li>
          <li><a href="https://plus.google.com/u/0/101433423573328720709/posts" target="_blank" title="Google+" class="google-plus"><i class="fa fa-google-plus fa-2x"></i></a></li>
          <li><a href="http://www.linkedin.com/in/yourdeveloper" target="_blank" title="LinkedIn" class="dribbble"><i class="fa fa-dribbble fa-2x"></i></a></li>
          <p class="copyright">© 2014 YourDeveloper, All rights reserved</p>
        </ul>
      </div>
    </div>
  </div>
</footer>
<script src="/assets/js/jquery.min.js"></script>
<script src="/assets/js/bootstrap.min.js"></script>
<script src="/assets/js/isotope.pkgd.min.js"></script>
<script src="/assets/js/imagesloaded.min.js"></script>
<script src="/assets/js/jquery.scrollTo.min.js"></script>
<script src="/assets/js/jquery.nav.min.js"></script>
<script src="/assets/js/jquery.appear.min.js"></script>
<script src="/assets/js/app.js"></script>
<script src="/assets/js/script.js"></script>

@adamschwartz
Copy link
Contributor

One issue I'm seeing is this coffeescript in your jade:

        script.
            vex.dialog.confirm
                message: 'Are you absolutely sure you want to destroy the alien planet?'

This is compiling to:

  <script>
    vex.dialog.confirm
     message: 'Are you absolutely sure you want to destroy the alien planet?'
  </script>

Change it to this and that might fix your issue:

        script.
            vex.dialog.confirm({
                message: 'Are you absolutely sure you want to destroy the alien planet?'
            })

@yourdeveloper
Copy link
Author

This works. Great however no styling is applied it is shown at the top without any styling

@yourdeveloper
Copy link
Author

screen shot 2014-04-11 at 17 29 42

@adamschwartz
Copy link
Contributor

Since you're including <link rel="stylesheet" href="/assets/css/vex-theme-os.css"> you need to set the className to vex-theme-os. You can do this globally or for each individual vex.

Globally:

        script.
            vex.defaultOptions.className = 'vex-theme-os'

Individual:

        script.
            vex.dialog.confirm({
                className: 'vex-theme-os',
                message: 'Are you absolutely sure you want to destroy the alien planet?'
            })

@yourdeveloper
Copy link
Author

That worked. Thanks for your support

@adamschwartz adamschwartz changed the title How to use with NodeJS and Jade Need help including and setup Apr 11, 2014
@yourdeveloper
Copy link
Author

Final question if I may, I wanna use it to display error messages that come in an error like this in Jade template

        - if (errors.length>0)
            ul
            - each error in errors
                li=error

            script.
                vex.defaultOptions.className = 'vex-theme-os';
                vex.dialog.alert({
                    message: 'Something went wrong'
                })

errors is the array and i wanna use ul and li to display each error in the dialog, how can i combine this?

@zackbloom
Copy link
Contributor

Hey @yourdeveloper, I believe what you want to do is include your ul and li in the string you pass to message. You can't really generate a javascript string directly, but you could do something like this:

        - if (errors.length>0)
            ul.error-list(style="display: none")
            - each error in errors
                li=error

            script.
                vex.defaultOptions.className = 'vex-theme-os';
                vex.dialog.alert({
                    message: document.querySelector('.error-list').outerHTML
                })

@yourdeveloper
Copy link
Author

Zack, Thanks for the update
This works - if (errors.length>0)
.error-list(style="display: block")
ul
- each error in errors
li=error

        script.
            vex.defaultOptions.className = 'vex-theme-os';
            vex.dialog.alert({

                message: document.querySelector('.error-list').outerHTML

            })

However because of display:block the error-list is shown in the dialog and on the main window. If I use display:none it isn't shown on screen and not in the dialog. how can i change the display style when doing the document.querySelector?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
question
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@zackbloom @adamschwartz @yourdeveloper