I'm working with express right now. I've built just a simple form that goes to a pug page generated via express after submitting:
form.create-list(action='/test', method='get')
fieldset
legend Add your item
label(for='item-name') Item:
input#name(type='text', name='name', required='')
br
label(for='item-name') Quantity:
input#quantity(type='text', name='quantity', required='')
br
br
input(type='submit')
With the get method, I can see the name properties behind pulled into my URL: http://localhost:4000/test?name=hello&quantity=there
I would like to display specifically the name/quantity parameters on my pug page, but have been unsuccessful. In my routing file I used:
router.get('/test/:name', function(req, res, next) {
res.render('layout', {'title': req.param("name")});
});
And in my pug template just added the below line:
p #{title}
Shouldn't that work? I'm not sure what I'm missing here. Anybody have any suggestions?
The value you should be looking for is req.query.name instead of req.params.name
Related
There is a shop on nuxtjs and on the /catalog page I need to make a "Load more" button. By clicking on it, products should be loaded and the url should be changed to /catalog/page_2 (?page=2 is not suitable).
If I change the url through $router.push nuxt goes to this page, but I need to change the url, but not go anywhere.
Is it possible to somehow undo the reloading but save the changes in the url?
history.pushState copes with the task, but in this case nuxt does not know that the url has changed and when clicking forward / backward in the browser nuxt does not load the goods needed for this page
Paginations logically belong to the main page so It's good to consider them in URL queries, like ?page=2.
also you can use router.replace to change queries.
this.$router.replace({
query: { ...this.$route.query, page: this.page},
})
Do it with this example
https://codesandbox.io/s/withered-darkness-9ezn9?file=/pages/index/_id.vue
Now I can change the filters, categories, and the url changes, but the page does not reload
As you don't want to change the page if you are already on the correct one, check for differences in current page URL first;
const your_query = '?page=2' // containing url params
const currPath = this.$route.fullPath; // containing current path + query params, e.g. '/catalog/?page=2'
const nextPath = `${this.$route.path}?${your_query)}`;
if (currPath !== nextPath) {
//"Abuse" router to change the current's windows url
this.$router.replace(nextPath, undefined, () => {
//If route navigation fails, e.g. due to a same-route navigation or wrong permissions in navigation-guards, handle here
return;
});
}
Alternative would be to directly pass the new query params to the router, as:
this.$router.replace({ query:
page: 2
})
So i am using Express and create an MVC application. I have a list of email that i want to put into javascript variable in the front end and create an auto complete
so currently the controller looks like this:
controller.js
res.render('/page',{emails: emails})
the emails is a JSON structured, can be stringified if needed. and my pug template is as follow
div
input (type = "text" id="suggestion")
div (class = "custom-suggestion" id="suggestion-list")
and at the end, i override custom scripts block with:
script.
var emailList = ///////////i want the email from controller's data
How can i achieve this? Any suggestion as long as i can pass the data to the javascript side will be considerable
EDIT
To make the code clearer:
app.js
var app = express();
app.set('view engine', 'pug');
router = express.Router();
router.get('/',function(req,res,next){
emails = ['abcd#abc.com','def#def.com','123#123.com'];
res.render('index', {emails:emails})
})
app.use(router);
index.pug
extend layout
block content
h1= title
block scripts
script
emails= emails /// not working
////////////// how to render this line as
////////////// emails = ['abcd#abc.com','def#def.com','123#123.com']
You can use interpolation to do this:
script.
emails= !{JSON.stringify(emails)};
Note that there's a period after the script tag, this tells pug to treat the content inside the tag to be plain text. Without that period it will create a script tag then an email tag (<script><email></email></script>) which is not what you want here.
Now that you're in plain text mode you can output the template variable into a JavaScript variable using an unescaped interpolation command (!{...}) with a stringify inside.
I'm looking for a way to create single page model/ standalone single page.
It's like a custom single page for 'About Us', 'Home Page','Our Team',etc.
They are single page with backend options.
Anyone have any idea ?
So you need to create all needed type of files, like route JS file, template file, add info about that file into routes/index.js
example:
create file routes/views/aboutUs.js :
var keystone = require("keystone");
exports = module.exports = function(req, res) {
var view = new keystone.View(req, res);
var locals = res.locals;
// locals.section is used to set the currently selected
// item in the header navigation.
locals.section = "about-us";
locals.title = "About our company";
// Render the view
view.render("aboutUs");
};
create template file templates/aboutUs.pug :
block content
p Our company is super cool. We based it here long time ago
Put all your static content into template with correct syntax and css
Finally make addition to routes/index.js file:
app.get("/aboutUs", routes.views.aboutUs);
if you need to control user access to page also add such string
app.all("/aboutUs*", middleware.requireUser);
And dont forget to restart the app to see changes
That's clearly not what OP is asking for. They're asking if there is a way to create a single ADMIN UI editable page for Home, About Us, and so on. My answer is that I don't believe that is possible with KeystoneJS. Which is annoying, because I have clients that want that and Keystone would be perfect otherwise. Seems the only way to do it is create a list, auto create a record if one doesn't exist, and set "nocreat", and "novelette" on the list.
I have a page with a route in the form : :client_id/tarif/:tarif_name
in the corresponding HTML page, I have a <%= collection_select(.....:tarif_name...) which enables to select the name of the tarif to be shown. That works.
How do I instruct to reload the page with the new :tarif_name parameter in the url ?
I thought of using the :onchange option helper with collection_select, but although I managed to execute javascript this way, I find no example of composing and triggering the loading of a url through that option.
Thank you very much for your help
If you are able to run javascript code in the :onchange, then window.location.href = "your_url" will make the redirect.
You will also need the selected value. Your onchange will be something like
function() {
window.location.href = "your_url" + this.value
}
I have 10 links to 10 TagPages, when clicked they take you to a page with all the posts with that tag.
That’s easy enough.
I’d like to know if its possible to stack more than one tagged post in a page. For example when all the “red” tagged posts are showing you can click and load in the “blue” tagged posts without leaving the page.
The 10 links then behave like a filtering system. You can then show any combination of tagged posts in one page… click once and load them in, click again to hide the posts.
I hope that all makes sense.
Any help would be great. Thanks.
You can load in posts by tag with Tumblr's API: http://www.tumblr.com/docs/en/api/v2#posts
The call for each of your tags would look something like this (square brackets marking areas you'll need to change):
URL = http://api.tumblr.com/v2/blog/[base-hostname]/posts?api_key=[key]&tag=[tagname]&jsonp=?
$.ajax(URL, {
type: 'GET',
dataType: 'json',
success: function(data) {
// do something with your data
}
});
Updated with a more specific example:
You'd need to create a function for each click of your tag navigation. So let's say you built out your navigation in simple HTML, you'd want to create a function for each of those clicks.
HMTL:
<nav class="tag-nav>
<ul>
<li>Portrait</li>
<li>Landscape</li>
</ul>
</nav>
JS:
$('.tag-nav a').on('click', function (e) {
e.preventDefault();
// grab classname from the link that was just clicked
var tagName = $(this).attr('class');
// go get our tagged posts
getTaggedPosts(tagName);
});
var getTaggedPosts = function (tag) {
// this is where your AJAX call will go
// bonus points if you check to see if you've already made the AJAX call
// and stored the posts somewhere else on the page
};