Comments (12)
adamschwartz
commented on July 24, 2024
1
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?'
})from vex.
adamschwartz
commented on July 24, 2024
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?'from vex.
yourdeveloper
commented on July 24, 2024
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
from vex.
adamschwartz
commented on July 24, 2024
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?
from vex.
yourdeveloper
commented on July 24, 2024
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>from vex.
adamschwartz
commented on July 24, 2024
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?'
})from vex.
yourdeveloper
commented on July 24, 2024
This works. Great however no styling is applied it is shown at the top without any styling
from vex.
yourdeveloper
commented on July 24, 2024
from vex.
yourdeveloper
commented on July 24, 2024
That worked. Thanks for your support
from vex.
yourdeveloper
commented on July 24, 2024
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?
from vex.
zackbloom
commented on July 24, 2024
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
})from vex.
yourdeveloper
commented on July 24, 2024
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?
from vex.
Related Issues (20)
- HTML entities in unsafeMessage/unsafeContent
- is it possible to open vex over a canvas ?
- Help moving vex and using append location
- vex-open remains on body in chrome if dialog is closed in background with child browser window & print dialog is called (then print cancelled or proceed) HOT 1
- vex input field sanitizes spaces
- Multiple Buttons?
- problem with the modal position and size HOT 1
- how to use it in Vue？ HOT 2
- readme spelling error
- file input inside vex.open() HOT 1
- Dynamic select using AngularJS with ng-options
- vex.close could cover submission
- demos in documentation don't work
- button click opens and closes dialog at the same time HOT 2
- Can Vex Modal lock? HOT 1
- Unsafe assignment to innerHTML
- Animations required for close
- Make buttons respond to Enter and Esc keys
- Refresh buttons of a dialog confirm HOT 1
- vex dialog buttons are not working as expected. HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vex.