Datepicker can't work with Sammy.js - jquery-ui-datepicker

i've been using datepicker in many of my projects, but this one project, i've got a problem with it.
the prev/next buttons don't act like it suppose to do. when i clicked it, it redirects to the default page. for example, here is the url where i implemented datepicker
$('input#_date').datepicker();
project.dev/index.html?q=123a21#/home
then, when i click prev/next button, it redirects me to default page which is
project.dev/
i have no idea why this one acts like this. has anyone any idea on how to fix this?
EDITED:
i found out source of the problem but still can't figure out a way to solve it.
everytime i clicked next/prev button on datepicker, it always redirects to default router which is $.sammy.get(''). i found out that prev/next button on datepicker is actually an <a> tag without href attribute.

i managed to solve it eventhough (i still have no idea why it happens) by preventing the default event.
$('input#_date).datepicker({
//options
}).focus(function() {
$('.ui-datepicker-next, .ui-datepicker-prev').on('click', function(e) {
e.preventDefault();
});
});

Related

Open a modal from anchor tag but the content is from another page

Is it possible to open a modal from anchor tag but the content is from another page? If yes, can anyone help me on how to do this? Btw I'm using Odoo, there is a default add to cart page in Odoo, so all code there was already default and I can't just get the content of the specific part from add to cart page and load it in my modal which is another page.
You need to write a JS function to achieve this. When clicking on a button, you can listen to button click and show your modal accordingly. Odoo uses jQuery by default so you can call something like this.
$(".button-class").click(function() {
// do some stuff here
// either do jsonRPC to get data from another record.
// add values to the body
// finally show your modal
$(".modal-class").modal("show");
}

Ember router breaks on redirect to '/'

I'm having a hard time making my router understand that we are on a certain page and it should be displayed in the navigation as active. The situation is as follows:
this.route('mainRoute', function() {
this.route('list');
});
The path we are interested in is /mainRoute. Unfortunately, there are a lot of legacy links that point to /mainRoute/list. The workaround for this was to redirect from the /mainRoute/list component back to the /mainRoute component.
beforeModel() {
this.replaceWith('/mainRoute');
}
Now, my issue is that the /mainRoute navigation link will never be seen as active. I've tried adding a path for the /mainRoute ('/', '/mainRoute', 'mainRoute'), I've tried transforming it to a resource and a bunch of other things that passed my mind. But it either won't work, or will go in an infinite redirecting loop.
Any thoughts on it? Thanks so much, I really need a solution for this!
If the navigation links are {{link-to}} components. There is a current-when property you could use here. It accepts either a boolean or a string. The string is a space separated values with the route names you want this link to be active when.
From the docs
If you need a link to be 'active' even when it doesn't match the current route, you can use the
current-when argument.
<LinkTo #route='photoGallery' #current-when='photos'>
Photo Gallery
</LinkTo>
{{#link-to 'photoGallery' current-when='photos'}}
Photo Gallery
{{/link-to}}

Ember: Cannot read property 'enterStates' of undefined and textfield update

I have the following problem with ember.
I have a table with a set of datas. I have an event that returns me the current element of the table. Then it opens another view by transitioning into a new state and writes the selected table data in a textfield.
click: function(e) {
var element = $(e.target).closest("td");
App.tee = element.text().trim();
var router;
router = this.get('controller.target.router');
router.transitionTo('newRoute')
As you can see I have some other routes in my router as well.
The last two routes(home and profile) are part of a nav-tab. They work perfectly beside I click on the table. Then i get the following error when i click on a tab: Uncaught TypeError: Cannot read property 'enterStates' of undefined
Ok i give it another try to explain what i wanted to do.
What i want to do is to create a table with some data (for example persons).
When i click on a specific person in the table the corresponding table-data should be shown in the textfields that appear below. Whenever i click on another person the textfields below should change to the informations of the current clicked person in the table. When i click "New" Button a more detailed Tabview appears on the right side with some additional informations. I was playing around with ember and so far i just implemented some of the views and the routing. Im stucked as i have tried to implement the event that updates the textfield below the table. It updates once but after it has transitioned into the new state(newRoute) nothing happens. I know the code is very raw, but it is just a test to understand how this works in ember.
Ok the solution was easier than i thought. The problem was not the state changing. It was more a problem of how to access the data and how to effect the change of binded data. I realised too late that i needed to understand how the variable access works in Ember and what exactly the App.initialize() method does. So App.initialize() initializes all Controller classes in the router. If you want to access any variables within a controller you have to get the access over the router like
{{view Ember.TextField valueBinding="App.router.tableController.person"}}
Secondly i wasnt familiar with the usage of the set and get methods in Ember and the difference between extend and create. I wondered before where ember instantiates my object.
So my problem had nothing to do with states it was just a totally misunderstanding of the ember framework. Im a noob thats all.
Ok, this is the first shot of the answer.
I think the main issue is just a typo gotoHome instead of goToHome in the template.
By the way I get rid of some deprecation warnings by using <button {{action }}></button> instead of Ember.Button.
There is some other warnings when I click on the table, because you are referencing some properties which don't exist.
here is the corresponding fiddle: http://jsfiddle.net/Sly7/rKw9A/25/
Since I don't understand how it should work exactly, I'm not sure of the overall behavior. I let you explain me the flow (by editing the question please).
Any other comment is welcome :)

Ember.Select not binding data in IE8

is there possibly any reason why Ember.Select would bind in firefox/chrome/IE9 but it won't work in IE8?
i'm not able to reproduce this in a jsfiddle. but in my app, this is happening. i have a few nested views and the drop down is in the inner most layer. i verified that the data is there. the markup for the tags just won't render.
it works when i moved the dropdown up one level to the parent view.
i have another view that render a list of radio options and it's like that as well.
{{#each content}}<input type="radio">{{text}}</input>{{/each}}
(doesn't work in inner most view but works one level up in parent)
i really can't think of anything that would cause it.
any help would be appreciated. thanks!
i couldn't figure out why this is happening. my solution was to insert the options manually on didInsertElement.

One-time FancyBox popup like on Digg.com

How can I go about actioning a FancyBox popup that notifies new users of a quick sign-up button (or whatever is chosen) like on Digg.com ... and as with Digg just one time. I really have no experience with cookies but already have FancyBox running in other parts of the website, so the basis is already there. I require the popup to appear on page load. Any pointers very happily received!
My eventual solution uses the Reveal Modal plugin (click here) to trigger inline to 'fire' on page load using the modified following code for the popup to be displayed only once every three days. Remember also to load jquery.cookie.js and then add the following code:
<script type="text/javascript">
jQuery(document).ready(function(){
if (jQuery.cookie('test_status') != '1') {
jQuery('#myModal').reveal()
jQuery('#myModal').trigger('click');
jQuery.cookie('test_status', '1', { expires: 3}); }
});
</script>
Using something other than FancyBox was the answer to the original question as it seemed there was a conflict somewhere, so using Reveal made the two functions completely separate. I should also note that the .css contents from the Reveal download were added to our site's stylesheet.
Hopefully that will help someone else out.
You can find a code example here https://stackoverflow.com/a/8305703/1055987 including the link to the jQuery Cookie plugin.