I need how to load dynamically page loading in same page using meteor js.I will develop for Admin panel ,after login Admin display admin details dynamically with same template page.
You can put the details in a conditional:
<template name="example">
{{#if admin}}
Admin details
{{/if}}
</template>
Template.example.admin = function() {
return Meteor.user() && Meteor.user().admin;
};
I'd suggest you use routes for this. This also allows you to control what other users see when they aren't admin and redirect, etc. instead of using a crazy number of conditional statements. For an example of an admin interface that is actually added via a smart package, see the following files, which use iron-router:
https://github.com/HarvardEconCS/turkserver-meteor/blob/master/admin/clientAdmin.html
https://github.com/HarvardEconCS/turkserver-meteor/blob/master/admin/clientAdmin.coffee
Related
I'm currently in the process of updating a website so that it supports Wordpress Blocks (5.0+) via Advanced Custom Fields. I have a block which needs some JS and was wondering if there is a way to implement a JS callback either via acf_register_block() or register_block_type() so that a JS function is called when the block is added to a page in the CMS?
For anyone else looking, the easiest way so far would be to call the existing JS function for your block from within the block render template itself, however it should only call the function if the admin page is showing (so that it doesn't show inline scripts on the front end).
eg.
function slider_block_html(){
//html output here
if(is_admin()){
echo "<script>sliderInit();</script>";
};
}
I'm currently working on a BigCommerce theme using their Stencil framework. It leverages Handlebars.js for some logic already and I'm trying to use it to show specific html on specific pages.
Looking at the documentation I can see there is a "pages" object and that I should be able to name or URL to do what I need to do.
I cannot figure out the syntax to get the page name or url to run the iff against. I can succesfully get it to do what I want by testing if it's a page content type, but not any of the type properties.
{{#if pages }}
... do foo here
{{/if}}
What I want to do is something like
{{#if pages.url '===' 'about' }}
... do foo here
{{/if}}
{{#if pages.url '===' 'service' }}
... do foo different here
{{/if}}
It looks like you are actually using the wrong Object Model for the data that you are trying to pull. The first word of your handlebars object should be "page" and not "pages". This will pull any content or data from the static pages that you build in the back office. (AKA the WYSIWYG)
Here is a link to the docs of the model that you want. https://stencil.bigcommerce.com/docs/page-content-object
For Example:
{{{page.title}}}
{{{page.content}}}
Note that I am using 3 handlebar on each side to escape the HTML on the WYSIWYG. Let me know if you need any other help.
I want to build a Blog, of sorts, with Meteor but, rather than just have a Blog such as platypus.meteor.com, I want to create a separate Meteor template for each Blog "post" and then send a link to select people such as "platypus.meteor.com/thispost"
In this way, the person would only see the post I intend them to see; to see others, they would have to guess at other values, such as "/thatpost", "/theotherpost" etc.
And in my case, if they stumbled across them, no big deal.
This is my plan:
Create one template at a time:
<template name="thispost">
. . .
</template>
...and then allow access to that to whomever I apprise of its availability (that is, they simply enter the link I send them into their browser).
I don't know what sort of routing I need to set up; I'm open to either IronRouter or FlowRouter. At any rate, I want an URL like "platypus.meteor.com/thispost" (after a "meteor deploy platypus" of this project) to show the user the contents of that Template and nothing else.
So my question is: what do I have to do, routing-wise, to accomplish this?
How about simply:
Router.route("/:templateName/:postId",{
template: this.params.templateName,
data: function(){ return Posts.findOne({ _id: this.params.postId })
});
Then you can generically share any post with any template and have the template name appear right in the route.
I am new to Meteor. I have a website that I want to convert into meteor. Do I have to set up a router, and change all of the links? Or can I use the existing href links that navigate between the html pages? Will images be a problem? Will the css and javascript in each of the page headers work?
If you have Routes you should define it using the meteor package iron:router, here is common tutorial
so if you have something like myUrl/about.
you should do something in meteor like this.
Router.route('about',function(){
this.render('about') //and you should have a <template name="about></template>
})
About images, you should put images under the /public directory, check more on the official meteor docs structuringmyapp.
If you web use jquery plugins you should use a onRendered function
Template.example.rendered(function(){
//initialize jquery plugins
})
All this because like you say on the question, you have Routes, if you don't have routes.
If you want to test it on a live editor you can use Meteorpad.
I recommend you to read the discoverMeteor book or install the 2 example from meteor, also the Meteor tutorials Begginers its a good option here
Add iron:router to route your website.
// Router Example
Router.configure({
layoutTemplate: 'Layout' //Layout is a template for your website
});
Router.map(function() {
this.route('index', {path: '/'}); // Index is an another template
});
Layout template should have {{> yield}} tag
<template name="Layout">
// Include header in separate template
{{> yield}}
// Include footed in separate template
</template>
<template name="index">
<!-- Page content -->
</template>
to execute JQuery ready function by
Template.Layout.onRendered({
//JQuery content HERE
});
Hope this will enough for simple website
I've spent a few hours on this but I'm not getting anywhere. I'm just starting on Wordpress, and I'd like a simple page where I click on something (a list item) and a textual description appears in a div somewhere else on the same page.
This would be trivial if I was writing plain HTML and JS, but I can't get my head around how to integrate this into WordPress. As far as I can make out, I have to write a plugin, but I can't find any handlers for mouse events in the hooks API. Or should I just hardcode an onclick into the HTML, and find somewhere to put some JavaScript code to handle it? Any advice appreciated...
Wordpress doesn't have mouse events/hooks. Wordpress hooks apply to the backend only, they are a way to interact with the WP core which is written in PHP (executed on the server, not the client).
Mouse events happen on the client side, so to achieve what you want you should register a Javascript file with wordpress via wp_register_script (http://codex.wordpress.org/Function_Reference/wp_register_script) and add your Javascript behaviour there.
You don't have to write a plugin, just add wp_register_script logic in your functions.php.
Vlad Cazacu is right, we dont have any hooks for javascript events and i am not sure if there is any option in other server side languages as well besides node.js. Anyways you can use jquery in the normal way with registering and enqueing the file. But if you want to have advanced interactivity then there are functions in wordpress that can do that for instance there's this function wp_localize_script, it is used with ajax to grabs the data as a javascript array/object and then converts it into php array/object which is then available to use in wordpress/php.
In short -
Add an id (and a styling class) to whatever you want a handler for
in the HTML
Register handlers in JS, as follows:
function fp_onload_js() {
var id = document.getElementById('myID');
id.addEventListener(
"click",
function() { myEventListener(); },
false);
}
Register/enqueue the file which contains your JS, in functions.php:
add_action('wp_enqueue_scripts', 'theme_enqueue_stuff');
function theme_enqueue_stuff() {
...
wp_enqueue_script(
'myHandle',
get_template_directory_uri() . '/path_to_my_js_file.js');
}
The tricky bit: you have to make sure that the event listener code is run after WordPress has constructed the DOM, after the IDs have been created. You need to run the JS after the page loads (see here). Basically, also in functions.php:
add_action('wp_footer', 'fp_onload_php');
function fp_onload_php() {
?>
<script type="text/javascript">
fp_onload_js();
</script>
<?php
}
And make sure you don't use the 'visual' tab in the WordPress editor - it will mess up your carefully-crafted HTML.