I want to create a ( + ) button that lets the user add new elements in the frontend of the application with its own Text and color.
See the illustration
For [ studying + violin + Running + Movies ] are the create element using a pop up created with the (+) sign
basically an On Pressed function that lets me add an element, how do i write it, using what?
You need to navigate the user to another page. Take input on that page then navigate back. You can find navigation and routing examples in here.
Related
In my pug file I have this chunk of code
each doc, i in docs
li.list-group-item
a.btn.btn-default(href='/docs/edit/'+doc._id)=doc.docname
b
button.btn.btn-primary.pull-right(type='button' data-toggle='modal' data-target='#login-modal') Share
#login-modal.modal(role='dialog')
.modal-dialog
.modal-content
.modal-header
h2 Invite users
button.close(type='button' data-dismiss='modal') ×
.modal-body
form(name='form' onsubmit='put();' method='POST', action='/docs/share/'+doc._id)
#form-group
label Who would you like to share it with? (Username)
input.form-control(name='userfriend' type='text')
input.btn.btn-primary(type='submit' value='Submit')
.modal-footer
button.btn.btn-primary(type='button' data-dismiss='modal') Close
The problem is that although the share button does take me to docs/share/:id the id is always that of the first document in the list. This is strange because I use the doc._id property for another button and that one works. Is there something special about the modal button that doesn't allow you to use ids other than the first entry?
To be more clear, lets say there are two entries in my docs: A and B. Their ids are respectively a and b. The share button of A AND the share button of B sends a query to docs/share/a , when the share button of B should send a query to docs/share/b. Even when there are more documents, the share button always sends it to the first in the list. After deleting the first in the list, it will then send a query to the new first in the list. Any ideas on how to fix this? For background I am using NodeJS and Mongoose in coordination with this but I don't think that's necessary as other webpages work fine with the doc._id property, its only the modal button that seems to have trouble with only doc._id of the first doc in the list.
Your issue is with multiple modals on the page with the same id. This line is inside your each loop:
#login-modal.modal(role='dialog')
There's nothing unique about that id, so when you call your modal by id it will just use the first one it finds. You may have generated twenty modals on your page, but they all have the id login-modal.
Change that line to include the doc id and then make sure you add it to your modal call as well, wherever that code sits.
.modal(id= ('login-modal-' + doc._id) role='dialog')
I tried to use jsTree because of easy creating static HTML list into tree.
Do not ask me why, but I need to use as source HTML list structure with links.
I have left column on the web with some div panel and tree navigation using jsTREE.
What I need:
1) User expands some nodes and let me say on 3rd level of three there is item with link
2) User click on the link, it will redirects the user on new page with some content
3) On the left there is still jsTREE and I need to expand the tree and highlight the node, user clicked in previous step.
The best for me would be to compare URL and HREF of hyperlink in tree.
If webpage URL and hyperlink href attribute in tree is the same, this node should be highlighted and expanded, so user can see, where he currently is.
Any idea, how to do it?
just use jstree plugins to do so:
"plugins": ["types", "wholerow", "conditionalselect"]
I am working on an E-Commerce website and my requirement is to show URLs something like following.
"../example.com/Electronics/Home-Audio-and-Theater/Portable-Audio/iPods"
Where Electronics is Main category and all of the subsequent parts are subcategories.
I have a Menu which shows level upto iPods(3rd level). I want that on click of any level the URL should be created accordingly. For Example:-
If I click on Electronics the URL should be:-
../example.com/Electronics
If clicked on "Home-Audio-and-Theater"
example.com/Electronics/Home-Audio-and-Theater
and so on.
All of the Names of levels are dynamic so I can't create controller for each level.
I need a technique by which I can show these URLs according to menu item clicked and hit the controller.
Please suggest ideas for this.
Thank You
I am new to using Backbone.js and my Javascript/CoffeeScript-fu could use some attention. I
I have a nested resource page (i.e., /network/:network_id/affiliation/new) with elements that need to load dynamically. I thought this could be a suitable point to work with Backbone.js.
The start of my code is included below. Here is what I am looking to accomplish on the page:
By default, a select list is populated with instances of Course from /courses. The Rails view loads this by default, so I don't think anything needs to be done here.
A button that, when clicked, empties the select list and populates it with the JSON from /courses
A button that, when clicked, empties the select list and populates it with the JSON from /networks/:network_id/courses where :network_id is available as #network.id.
A button that, when clicked, empties the select list and populates it with the JSON from /metro_areas/:metro_area_id/courses where :metro_area_id is available as #network.metro_area_id.
A select list full of metro areas that, when selected, empties the courses select list and populates it with the JSON from /metro_areas/:metro_area_id/courses where :metro_area_id corresponds to the selected metro area.
When a course is selected from the course select list, an anchor href is updated with that course's
(** Couldn't get the code to format properly, so here's a gist **)
https://gist.github.com/1d746b1f2e159b313149
You can use embeded collections in model
class app.Network extends Backbone.Model
url: ->
base = "networks"
return base if #isNew()
base + (if base.charAt(base.length - 1) is "/" then "" else "/") + #id
initialize: ->
#courses = new app.Courses(#get('courses'))
#courses.url = '/networks/' + #get('id') + '/courses'
getCourses: ->
#courses
I am doing a PhoneGap app with JQuery Mobile and I have two pages, one that has a dynamic list of pages and one that has a form to either edit or create a page. These are in a single html file.
Tapping on a list item passes ?action=edit and tapping the "Add" button I have, passes ?action=add querystrings.
Here is a jsfiddle to visualize the pages
NOTE: The example doesn't act quite the same as the live code.
I am running my app on an Android phone and if I do these actions, the correct querysting is observed in the alert box: -
Click the add button on list page
Click back on the form page
Click the an edit list item link on list page
However, if I do it the other why around (click edit first, then the add button) clicking the add button never shows the add querystring in the alert box
(the jsfiddle example always locks the first clicked link's querystring, which is even worse than the live code!)
The problem here is that you're using a multiple template to do this. If you were using this as separate pages, this would work as normal. As a multiple app, the best way to handle this would be to make a link trigger the setting of some global variable that keeps track of the current state of the app.
Make the edit links like this
Page 15
Then make the script something like this:
var editingId = 0
function editPage(id){
editingId = id;
$.mobile.changePage("#editingPage");
});
$("div#editingPage").live("pageshow", function(){
loadDataForPage(editingId);
});