I'm trying to create a custom element for reuse. What I have is data consisting of three attributes that will be displayed on it's respective page, depending on the link you click.
I'm using the Polymer Starter Kit. Basically, I want to have a page of information that changes depending on what the URL is. I have a list of programs on a page with links to their respective pages. So far I have this:
In my index.html, I have a section that looks like this:
<section data-route="programs">
<paper-material elevation="1">
<h1>Programs</h1>
<a href$="{{baseUrl}}programs/firstprogram">Program 1</a></br>
<a href$="{{baseUrl}}programs/secondprogram">Program 2</a></br>
<a href$="{{baseUrl}}programs/thirdprogram">Program 3</a></br>
</paper-material>
</section>
Then I have a custom element, program-info, that looks like this
<dom-module id="program-info">
<template>
<h2 class="page-title">{{program.name}}</h2>
<p>{{program.price}}</p>
<p>{{program.description}}</p>
</template>
<script>
(function() {
'use strict';
Polymer({
is: 'program-info'
});
})();
</script>
</dom-module>
Based on the program that was clicked, I want to grab data and use it in my custom element (name, price, description). I've thought about putting it in an array since there are only seven programs, but I don't know understand how to grab the right item in the array based on the URL.
Any thoughts?
If you are indeed using PSK, take a look at the section/page user-info in app/index.html. It displays information about a user based the name that was grabbed from the URL.
Of course you should also take a look at the routing configuration in app/elements/routing.html to figure out how the name is grabbed from the URL and set to the params variable.
Then you should add/modify your programs route to suit your needs.
Edit:
You can see a similar approach in this sample app : The data is fetch when the route changes and is then set to an article property in the scope of the blog-app element. In this element, said article property is itself bound to the similarly named property of the "page element" article-detail that is in charge of displaying the article's content that was previously fetched over the network.
Related
I have a lot of html pages, and decided to use their names (which are short and unique) as id, so when i want click to one row of table, the id (which is the name of file) is passed to templateURL. For example,
app.config(function($routeProvider) {
$routeProvider
.when("/post/:id",
{
title: 'Disease',
templateUrl : "/pages/posts/:id.html"
})
For example, i have Treponema.html, HeartDisease.html, LungCancer.html etc in a list. When I click one, it should show its content on the right side of page, on which i have declared:
<div ng-view></div>
And when i click one listed item, i will take their id as the name (HearDisease, LungCancer) and put it in templateUrl.
<div id="HeartDisease"
onclick="window.location.href ='/post/'+this.id+'.html';>
<p>HeartDisease.html</p>
</div>
I think that the more appropriate for your use case will be to use ng-include. Look at the bottom of the page you have an example.
If you want to update the route in browser you can do it in your controller using the $location object.
So, I've tried several times to thrust myself into the world of website development. Each time, I have abandoned a project for one simple reason: lists.
I would like to know, from front to back, the dataflow for a system which follows the following sequence of events:
The user is shown a list in a website
The user fills out a new list item in some sort of modal dialog
The user hits "Submit" and that item is now added to the list.
That new list item is sent to the server to be stored
Would there be a whole new page load? When would the data be posted to the server? What are the various options for this (seemingly simple) application? I am targeting relatively small web tools. Not necessarily single page, but I'm not against it.
I understand how to add the new <li> to a list with JQuery, and I know how to build the modal with HTML. I can pull the data from the modal, but I'm not sure how to take that data from JQuery, turn it into the appropriate block of HTML (which could be rather complex), and store the new record in the database.
I can't seem to find a tutorial on this sort of data handling.
Thank you!
Simple. Since you mentioned jQuery, let's use jQuery. Ready? Here we go!
I'm assuming you have a textarea or an input in your modal where a user can enter text. If so, give it an id attribute so it can be referenced, like id="myText".
Then, to take the textarea or input's content and turn it into a list item in your list, you'll need to append an <li> with the textarea's content to its parent <ul> tag. Again, you'll need some way to reference the <ul> tag, so give the <ul> tag an id attribute, something like myList, so it becomes <ul id="myList">.
Now, it's just a matter of taking the val()ue from the input field, and appending it to the list. This is how you do that.
var textareaStuff = $('#myText').val();
$('#myList').append('<li>'+textareaStuff+'</li>');
That wasn't so hard, was it? This is actually quite fun.
I will admit, POSTing stuff to the server may take some getting used to, but it's not too hard.
I've prepared an HTML file for you that does all these things, with pretty detailed documentation. It should be able to help you learn what you're wanting to learn. It's below.
<!DOCTYPE html>
<html>
<head>
<title>My jQuery Experiments</title>
</head>
<body>
<!-- Here's your list with its ID so we can reference it in JS. -->
<ul id="myList">
<li>Sample Item 1</li>
</ul>
<input id="myText"> <!-- Here's your input field. This can be in a modal. -->
<button id="addItemButton">Add Item</button> <!-- We need a save button. -->
<!-- Include jQuery -->
<script type="text/javascript"
src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<!-- This is the javascript you'll need to write and understand -->
<script type="text/javascript" >
// When the element with id="addItemButton" is clicked,
$('#addItemButton').click(function() {
// Append the stuff in brackets to the element with id="myList"
$('#myList').append('<li>' + $('#myText').val() + '</li>');
// ^ The stuff in brackets is an li code with the value of the HTML
// element with id="myText", your input field above.
// Now to post it to a server, we'll need to use AJAX.
// Luckily, jQuery has an AJAX function. It looks like this:
$.ajax('http://example.com/mysaver.php', {
// We're POSTing stuff to the server.
method: 'post',
// This is the data to send to the server.
// It is a JSON object.
// If using PHP, you'll get $_POST['item'] = whatever is in id="myText"
data: { item: $('#myText').val() },
// If the AJAX request was successful,
success: function(data) {
// The argument 'data' contains whatever the server returned.
},
// If not,
error: function(jqXHR) {
// Handle your error here.
}
});
});
</script>
</body>
</html>
I hope this was helpful! Go ahead and approve this answer if it was, and please feel free to ask further questions in the comments and I'll do my best to help out where I can.
I have a product page, and there is an option for a 'quick view' which opens the product description and images in a modal. I also have a 'full details' button where I would like the user to be taken to a new URL based on the item code, but also display the information from my JSON for that clicked product. This is what I have:
<a ng-click="store.selected = product" ng-href="{{store.selected.code}}.html" class="btn btn-sm">Full details</a>
Everything works great for the Modal, so I am presuming there is a problem moving onto a different page and carrying this information across? I have mocked it up in Plunker to show the problem:
Plunker here
Any help would be much appreciated.
You should consider using ng-route to switch the view to a different html file. But you can also use ng-include with a little less set up.
When the Full details link is clicked, toggle a variable that tracks whether the gallery or the details should be visible. And, construct the path to the html template you want to display:
$scope.setSelection = function(product) {
$scope.store.selected = product;
$scope.detail.show = !$scope.detail.show;
$scope.detail.source = product.code + '.html'
}
Then, use ng-include to display the template:
<div ng-if="detail.show" ng-include="detail.source">
</div>
Here is an update of your plunker: http://plnkr.co/edit/zhsY6TAjONewyInGiwUC?p=preview
Note that the template should just be a snippet of html.. you don't need to include scripts like angular again.
I'm having a problem on how to load a dynamic view using Angularjs in anchor tags. By the way I can't use ng-view since ng-view can only be use once in a template. So I'm thinking of using the ng-src but on the sample docs it is using a select element tag and fetching its values to the controllers. What I want is when I click a link say the View1, the content of my div will change. I will explain further.
Say I have this 3 anchor tags
<li>View1</li>
<li>View2</li>
<li>View3</li>
Before
<div data-ng-include="" data-ng-src="default.html"></div>
Now when I click #/view1
//the ng-src of the html will change depending on the link clicked
<div data-ng-include="" data-ng-src="view1.html"></div>
Perhaps you are trying to do something as below:
HTML:
<!-- Dont use # in the hrefs to stop the template from reloading -->
<li>View1</li>
<li>View2</li>
<li>View3</li>
<div data-ng-include="selectedTemplate.path"></div>
JS:
$scope.selectedTemplate = {
"path":"view1.html"
};
ng-view is the main view of any Angular app, and is affected by the route changes. So all you anchor tags will only affect the ng-view template.
To load other partial views based on the main ng-view, ng-include is the correct way to go as you have mentioned already.
To load a view based on the main view (view shown in ng-view), you need to write mapping logic which depending upon the main view should load other partials (ng-include elements for page).
So your partial becomes like
<div data-ng-include='templateNameVariable'></div>
This variable has to be set whenever the ng-view changes on location change.
You can watch for $route $routeChangeSuccess event and change the templateNameVariable based on the active route (hence the view).
So there should a controller out side the ng-view directive which will orchestrate this, and you would do
$scope.$on('$routeChangeSuccess',function(event,current,previous) {
//Change the templateNameVariable to point to correct template here, based on current route.
});
I'm trying to figure out how to link an html picture element back to the database entry that was originally used to generate the picture link.
I am using Meteor:
- I have a database that contains photosets data from Flickr API
- In the HTML, I have a handlebar "each" script that iterates through each photoset in the database and then uses this info to generate the html for the photoset cover picture links.
- When the html renders, the photoset cover pictures are downloaded from Flickr and displayed to the screen.
I would like to be able to click on the photoset cover picture and then automatically generate the links to the pictures in the photoset. But I don't understand how to dynamically link the html picture elements back to their respective database entries that were originally used for generating the picture links. I need to be able to find the original database entries so that I can load the info needed for generation of subsequent links.
As a newb to all of this I'm not really sure where to start looking or what to try. I've wondered about creating an object with custom key pairs to 'memorise' the identity of each photoset picture. Is this the way to go, or is there an easier way that I am overlooking?
Thanks.
Say you have your pictures being put out this way:
Template.mytemplate.helpers({
picture:function() {
return pictures.find()
}
});
You can also do this instead, which is pretty much the same thing:
Template.mytemplate.picture = function() {
return pictures.find();
}
With the html
<template name="pictures">
{{#each picture}}
<img src="{{src}}" class="pictureselector"/>
{{/each}}
</template>
You can use events which can get data from that particular picture document/record
Template.mytemplate.events({
'click .pictureselector':function(event,template) {
console.log(this._id); //Should give you the `_id` of the picture that was clicked
}
});
this is the data context of the element that was clicked & generate the link you want using the data inside this.
Be careful if you use something with a callback inside the click like Meteor.call, you will have to relay the message down via var self = this otherwise the context of this would become the one of Meteor.call