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')
Related
I have made an app with jQuery mobile and laravel.
On the first page "mobilepage1" if have a form with a next button.
Also some of the form elements are dropdown menu's. The dropdown select options I get from a table in the database.
In the form on mobilepage1 I have a dropdown list with all department names:
I get this list from my controller like so:
$departmentlist = Company::find($usercompanyid)->departments;
This is how I display the list in the mobilepage1 form:
{{ Form::label('department', 'Department:')}}
<?php
foreach($afdelingslijst as $item) {
$afdelingsarray[$item->afdelingen] = $item->afdelingen;
}
?>
{{Form::select('size',$afdelingsarray)}}
On the second page I want to make a back button.
I tried the jQuery mobile way with a link with: data-rel="back"
But this does not work. I get a page error, it's missing the departmentlist used in mobilepage1. I can make a link to a route to mobilepage1, but I think all the information the user entered in mobilepage1 would be gone.
I see this url in the address bar when I am on mobilepage2 (this is after I filled in the form on mobilepage1 and clicked next).
/public/mobilepage2?size=Personeelszaken&size=32&directechef=Tineke&size=1&size=1&size=1&date-2=&size=1&time=&omschrijving=
Is there a way I can link to the the mobilepage1 route and still keep the information the user entered?
It looks like it would work just by hitting the back button if you passed in the department list with a view composer rather than through a route. Remove it from your route and place this in a file that's being autoloaded...
View::composer('mobilepage2', function($view)
{
$departmentlist = Company::find($usercompanyid)->departments()->lists('afdelingen','afdelingen');
$view->with('departmentlist', $departmentlist);
});
I'm not sure how you are finding $usercompanyid but you should be able to find it within the closure or pass it in by adding use ($usercompanyid) right after the function($view) part.
Also using the lists() function like that will build your array for you so you don't need to worry about the foreach loop in your view.
Since the values are getting passed back and forth as get variables, I think if you use Form::model() instead of Form::open(), it should place all those values back into the input fields for you.
Background
I have a view page(abc.html.haml) with 2 drop down options A and B. A, B are lists which hold a set of records whose parts I am showcasing through the UI.
By default on hitting the controller#index action(called via browser url), the page populates with the records from the A list.
I then have an Ajax call which populates the same page with the records from list B, on choosing the drop down menu. Let's assume I have now moved from State A to B using the drop down option.
Issue
Once, I have the page populated with records from list B, Now, upon page refresh, My drop down menu still holds the same state 'B', but the default set of records which load from the controller#action on page refresh is from the list A(thus the state of the drop down menu should be 'A').
Any inputs on how I can get a work around for this ?
Thanks.
I am not sure if I understand your problem completely, but a few options I can think of:
Use javascript to change the URL when selections are made in the drop downs. You could add paramaters to the URL that could reflect the state of the drop downs, you could then parse these on load of the page.
Give the user a refresh button that you control, then you can send information back to the controller on refresh so that you load the right defaults.
Store the current users selections in the database via ajax calls as the user makes them. I don't know the context of your app, so I don't know how feasible this is. Then you could obviously load these on page load if they exist.
The simplest option however would be to reset all controls on page refresh, I think users expect that behaviour anyway.
I am looking for the best way to create ajax enabled subforms from items in a list with MVC 3. A static list of values should be generated, but with an "edit" link/button next to every item, to toggle inline edits.
I did follow the tutorial at this link
http://blog.janjonas.net/2011-07-24/asp_net-mvc_3-ajax-form-jquery-validate-supporting-unobtrusive-client-side-validation-and-server-side-validation [1]
However it is based on the form edit fields always being visible
I'd like to show a static list with field values, but let the user activate an edit field by clicking "edit" (e.g. button)
I did modify the example at [1] by creating a default partial view with a form with submit button only. When posting the data by ajax the edit form will show. It looks like it is working, (I only need to hide validation errors on the first POST - which does not send real data).
Update:
An even better solution would probably be to leave out all forms in the static view, just have a single css class button/link next to each item, and let jquery fetch the relevant view for the clicked item. I am not sure how to do that with MVC 3+jQuery though.
Another update:
I discovered Ajax.Actionlink, which did exactly what I wanted!
I found out how to do it, and it turned out to be real simple!
I created two partial views.
One for rendering each static item. I used used Ajax.ActionLink with InsertionMode "replace", and set the parent of the item as the target
The second for rendering the form. Here I used Ajax.Beginform with similar options.
On successfully saved data, I returned the static view, on failure, I returned the partial view with the ajax form again.
I'm happy I found a MVC-centric way to do it (although it is fun creating custom stuff with jQuery)
It sounds like you need an inline editing plugin for jQuery. I would try jEditable. I have not used it myself but appears to have extensive docs.
this entry might help: code + video + explanation ;)
http://ricardocovo.wordpress.com/2011/04/03/asp-mvc3-editing-records-with-jqueryui-dialogs-and-ajaxforms/
-covo
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);
});
2/28: Seems the Go uri is only if you create your own persisten layer. I'm going to try and use a link on my form to do this. If I can figure out how to find the form_id of the current form.
Original Question:
I'm trying to restrict who can delete a form instance. It seems if people can get to the form-runner summary page, they can click the delete button and delete a form (even if they are not allowed to do any "/orbeon/fr/hr/expense-report/edit/*" options.
Anyone found a way around this issue. I wonder if we could use the GO button on the form /edit/ view to build our own delete feature.
If I look at the page source from the hr/expense-report/edit/f36b446c3ddbf7c63ec033d5c6fa7ce4 view, that the from does have the details to the actual form instance.
Example:
form id="xforms-form" class="xforms-form xforms-initially-hidden xforms-layout-nospan" action="/orbeon/fr/Test/Hidden_Search/edit/f36b446c3ddbf7c63ec033d5c6fa7ce4"
I wonder if that information could be passed to the "GO" button, if I have that on my page?
Right now, if users can access the Form Runner summary page, they can also access the "delete" button. Showing the "delete" button on the summary page for some users but not others, requires a change to Form Runner, which shouldn't very complicated.
For instance, if you only want the "delete" button to be shown for users with the role can-delete, on this xforms:bind of fr/summary/view.xhtml add the attribute:
relevant="xxforms:is-user-in-role('can-delete')"