I am trying to send tabs id to the the server from Django template. I want to send the selected tab's ID after submit the page. Is there any way to do that? Or How can I put my id into my url? Thank you in advance.
Here is my tab list:
<ul class="nav nav-tabs" role="tablist"˛id="myTab">
<li><i class="fa fa-sun-o"></i>MyFirstTab</li>
<li><i class="fa fa-cloud"></i>MySeconfTab</li>
</ul>
You could use Javascript (jQuery) to append the current tab ID to the form before it is submitted to the server. Something like this:
$(function() {
$( "#form" ).submit(function( event ) {
var currentTabID = $("ul#myTab li.active a").attr('id');
$('<input>').attr({
type: 'hidden',
name: 'currentTabID',
value: currentTabID
}).appendTo(this);
});
});
Then, in your Django view, you can access that data via request.POST.get("currentTabID")
Related
I want to navigate to another page after logging in with facebook. Right now I am able to log in using Facebook and stay on the same page, but i want to navigate to another page.
My .html file is
<button ion-button full (click)="loginWithFB()">Login!</button>
<ion-card *ngIf="userData; else facebookLogin">
<ion-card-header>{{ userData.username }}</ion-card-header>
<img [src]="userData.picture" />
<ion-card-content>
<p>Email: {{ userData.email }}</p>
<p>First Name: {{ userData.first_name }}</p>
</ion-card-content>
</ion-card>
My .ts file is
loginWithFB() {
this.facebook.login(['email', 'public_profile']).then((response: FacebookLoginResponse) => {
this.facebook.api('me?fields=id,name,email,first_name,picture.width(720).height(720).as(picture_large)', []).then(profile => {
this.userData = {email: profile['email'], first_name: profile['first_name'], picture: profile['picture_large']['data']['url'], username: profile['name']}
});
});
}
You just need to push the page using navController in the promise returned after your facebook login call:
this.facebook.api('me?fields=id,name,email,first_name,picture.width(720).height(720).as(picture_large)', []).then(profile => {
this.userData = {email: profile['email'], first_name: profile['first_name'], picture: profile['picture_large']['data']['url'], username: profile['name']};
this.navCtrl.push(PageName, PageParametersIfAny);
});
There's two ways of pushing a page:
Importing the page directly from it's file if you haven't lazy loaded your application.
Just passing the string containing the page name if it's lazy loaded.
Like this if not lazy loaded:
import { MyPage } from 'path/to/my/page/folder';
...
this.navCtrl.push(MyPage);
or this if lazy loaded:
this.navCtrl.push('MyPage'); // There's no import
Hope this helps.
I have created a dialog box using the ember-modal-dialog. The content that is going to displayed in the dialog is received from the server. I am able to make the call to server and fetch the data. But I don't know how to save the data into my model store from actions.
Controller.js
actions:{
fiModal1: function(photo){
Ember.$('body').addClass('centered-modal-showing');
var currentState = this;
photo.toggleProperty('fidialogShowing'))
console.log('opendialog');
raw({
url: 'http://example.co.in/api/photo/'+photo.get('like_pk')+'/likes/',
type: 'GET',
}).then(function(result){
currentState.set('model.feed.liker',result)
});
},
bookmarked:function(liker){
liker.set('is_bookmarked',true)
},
}
feed.hbs
<p {{action "fiModal" photo }}>
{{photo.0.numlikes}}
</p>
{{#if photo.fidialogShowing}}
{{#modal-dialog translucentOverlay=true close = (action "fiDialogClose" photo)}}
{{#each model.feed.liker as |liker}}
<div class = "col-sm-6">
{{#if liker.is_bookmarked}}
<a href {{action "unbookmarked" liker}}>
<img class="foll" src = "images/button-bookmark-secondary-state-dark-b-g.png">
</a>
{{else}}
<a href {{action "bookmarked" liker}}>
<img class="foll" src = "images/button-bookmark.png">
</a>
{{/if}}
</div>
{{/each}}
Now the problem is that when action inside the dialog box is fired it throws an error:
fiver.set is not function
I think that the problem is occurring because I am not saving the result in the model store. How should I do it so the action inside the dialog box also works?
You can just encapsulate the results from your server into Ember.Object
Ember.Object.create(json)
For exemple replace your line
currentState.set('model.feed.liker',result)
by
currentState.set('model.feed.liker', result.map(function(item) {
return Ember.Object.create(item);
})
that way each elements inside your model.feed.liker should have a method 'set' available.
I am creating a new Ember.Model with a return response from an ajax call.
This is the ajax method i have in the controller
createImageResource: function() {
var self = this,
fd = new FormData(),
newResource = {},
resources = self.get('controllers.resources.model'),
fileName = this.get('resource_image').name,
fileSize = this.get('resource_image').size,
fileType = this.get('resource_image').type;
fd.append('resource[resource_type]', 'image');
fd.append('resource[resource_name]', this.get('resource_name'));
fd.append('resource[source_id]', this.get('source_id'));
fd.append('resource_image[resource_image]', this.get('resource_image'));
fd.append('resource[resource_file_name]', fileName);
fd.append('resource[resource_file_type]', fileType);
fd.append('resource[resource_file_size]', fileSize);
this.set('isProcessingResource', true);
$.ajax({
url: '/resources',
method: 'POST',
dataType: 'json',
processData: false,
contentType: false,
data: fd,
}).then(function(newResourceData) {
newResource = Msmapp.Resource.create(newResourceData.resource);
resources.pushObject(newResource);
self.set('isProcessingResource', false);
self.transitionToRoute('resource', newResource);
});
},
This adds the new resource into the array of objects used by the resources controller. It puts it into the DOM like it should. The issue im having is each object is a link to the individual resource. All of the objects that existed on page load work fine. The object added to the list has the correct url and everything, it just doesnt do anything when you try to navigate.
Im not sure if there is something else i need to do in the .then() ?
This is the template
<section class="column_list">
<ul>
{{#each resource in controller }}
<li class="item">
{{#if resource.isLoading }}
{{spinner}}
{{else}}
{{#linkTo 'resource' resource }}
<img {{bindAttr src='resource.listAvatar'}} />
<div class='title'>{{ resource.resource_name }}</div>
{{/linkTo}}
{{/if}}
</li>
{{/each}}
</ul>
</section>
Since you're adding to resources, that's what you should be looping over too - {{#each resource in resources }}.
Either that or push onto your ArrayController instance directly - this. resources.pushObject(newResource);.
We're building app that allows users to post messages to various social media outlets. Our designer has created a series of interactions which allow users to change various settings in their application by use of sliding panels. I've done a quick screen cap to illustrate:
http://screencast.com/t/tDlyMud7Yb7e
The question I have is one of architecture. I'm not sure whether I should be using a View or a Controller (or both) to store some of the methods these panels will contain. Here's the HTML for the panels. They're not currently in a script tag or view:
<div id="panel-account-settings" class="panel closed">
<div class="panel-inner">
<i class="icon-cancel"></i>close
<h3>Account Settings</h3>
Google Analytics
Link Shortening
Disconnect Account
</div>
<div id="panel-google-analytics" class="panel-inner">
<i class="icon-arrow-right"></i>back
<h3>Google Analytics</h3>
<div class="toggle">
<label>Off</label>
</div>
<p>We <strong>won't</strong> append stuff to your links, so they <strong>won't</strong> be trackable in your Google Analytics account.</p>
<img src="{{ STATIC_URL }}images/ga-addressbar.png" />
</div>
<div id="panel-disconnect" class="panel-inner">
<i class="icon-arrow-right"></i>back
<h3>Disconnect This Account</h3>
<p>If you disconnect this account you will lose all the metrics we tracked for each message. Are you absolute sure you want to get rid of them?</p>
<div class="button-group">
Disconnect
</div>
</div>
</div>
The gear icon shown in the video is contained with the accounts template
<script type="text/x-handlebars" data-template-name="accounts">
{{#each account in controller}}
<div class="avatar-name">
<p>{{account.name}}</p>
<p>#{{account.username}}</p>
<i class="icon-cog" {{action "openPanel" Social.SettingsView account }}></i>
</div>
{{/each}}
</script>
which has a bare bones controller
Social.AccountsController = Ember.ArrayController.extend({
openPanel: function(view,account){
console.log(view,account);
$(this).parents(".item-account").addClass("active");
$("#panel-account-settings").prepareTransition().removeClass("closed");
}
});
as well as a Route and a Model. Given the interaction I'm looking to accomplish, my question is where should I be putting the pieces and parts? At a minimum I need to pass in the current Account model so that I know which account I'll be applying changes to. I thought about creating a mainPanel view which would contain the other view...something like this:
<script type="text/x-handlebars" data-template-name="panelView">
<div id="panel-account-settings" class="panel closed">
{{ partial "panelSettingsView" }}
{{ partial "panelAnalyticsView" }}
{{ partial "panelDisconnectView" }}
</div>
</script>
and then the action helper on the gear icon could pass in the account AND the required view. But I'm not sure if that's the right approach. I'd appreciate some input or suggestions. Thanks.
UPDATE 1
Ideally I'd like to eventually load in the content of each panel via AJAX but that's a want to, not a need to.
UPDATE 2
I tried creating a PanelView which would contain the logic on which panels to load:
Social.PanelView = Ember.View.extend({
tagName: 'div',
classNames: ['panel-inner'],
openPanel: function(view,account){
console.log(view,account);
}
});
But when I tried to call it from the gear icon I got an error. This:
<i class="icon-cog" {{action openPanel target="Social.PanelView" }}></i>
Threw this error:
Uncaught Error: assertion failed: The action 'openPanel' did not exist on Social.PanelView
Isn't that the correct syntax?
UPDATE 3
Adding version information:
DEBUG: Ember.VERSION : 1.0.0-rc.1
DEBUG: Handlebars.VERSION : 1.0.0-rc.3
DEBUG: jQuery.VERSION : 1.9.1
The best practice is to always put any DOM- or UI-related logic into your view, and leave data representation to the controller (i.e., a reference to a 'selected' item in the controller is a common example).
Your Social.AccountsController.openPanel method has logic that touches the DOM, which is entirely a view concern. A good start would be to move that logic into the view (Social. SettingsView ?).
It'd be a bit easier to understand your goals and offer more suggestions if you had a jsfiddle of what you have so far.
EDIT: Another good practice is to decompose things into very small objects. So you could explore having a selectedAccount ObjectController whose content is the currently chosen Account (and a corresponding View for it).
Currently I'm playing with the latest ember.js release and I'm building a simple "add username / remove username" hello world app. So far I can add a user (with the controller method below). I also have a checkbox in the html that when clicked should remove the user but ... right now I can only get the bool value of the checkbox to pass off. Instead I need the username to look it up and remove it from the controller content.
How can I re-do the html / view code below so that I can pass off the actual username instead of the bool value?
Thank you in advance!
PersonApp.ModifyPersonCheckbox = Em.Checkbox.extend({
change: function(event) {
PersonApp.personController.removePerson(this.$().val());
},
});
PersonApp.personController = Em.ArrayProxy.create({
content: [],
createPerson: function(username) {
var person = PersonApp.Person.create({ username: username });
this.pushObject(person);
},
removePerson: function(username) {
person = this.content.findProperty('username', username);
this.removeObject(person);
}
});
the basic html below shows how my checkedBinding is wired up
<ul>
{{#each PersonApp.personController}}
<li {{bindAttr class="isActive"}}>
<label>
{{view PersonApp.ModifyPersonCheckbox checkedBinding="isActive"}}
{{username}}
</label>
</li>
{{/each}}
</ul>
You will need to set the content on the view showing the checkbox so that when the event is triggered, the context is passed. I believe this will work:
{{view PersonApp.ModifyPersonCheckbox contentBinding="parentView.content" checkedBinding="isActive"}}
Then, the event variable in the change function will have a context variable containing the record associated with that checkbox. Then you won't even need to search for it in the controller. You can also just bind the username, but this way is cleaner.
The final solution looks like the below (notice the contentBinding="this" addition to the markup)
PersonApp.ModifyPersonCheckbox = Em.Checkbox.extend({
content: null,
change: function(event) {
PersonApp.personController.removePerson(this.content);
},
});
PersonApp.personController = Em.ArrayProxy.create({
content: [],
createPerson: function(username) {
var person = PersonApp.Person.create({ username: username });
this.pushObject(person);
},
removePerson: function(person) {
this.removeObject(person);
}
});
<ul>
{{#each PersonApp.personController}}
<li {{bindAttr class="isActive"}}>
<label>
{{view PersonApp.ModifyPersonCheckbox contentBinding="this" checkedBinding="isActive"}}
{{username}}
</label>
</li>
{{/each}}
</ul>