Chosen select event not triggering in Ember.js app - ember.js

I have the following structure of fields in a form within an Ember app:
<div class="box">
<label>Name</label>
{{text-input value=model.name}}
</div>
<div class="box">
<label>Gender</label>
{{chosen-select value=model.gender content=selectOptions.genders}}
</div>
The text-input tag refers to a component that inherits from Ember.TextField. The chosen-select tag refers to another component that inherits from Ember.Select. One of the behaviors provided by chosen-select is that it converts the <select> element into a chosen select for better user interaction.
After doing that, I wanted to give the focus to any input field (textfield or select) whenever the user clicked anywhere in the field's surrounding box, not just on the field or its label. I was able to do it successfully with the text input fields, using the code below (pure jquery, no ember was needed here):
$(document).on 'click', '.box', ->
$(this).find('input').focus()
By attaching the click event handler to the document, I'm able to catch clicks on .box elements that do not exist at the time this event handler is declared. The result is that whenever a .box element is clicked, the text input field inside it (if any), gets the focus.
Achieving it for selects too
I wanted to achieve the equivalent behavior for .box elements containing a chosen select, which is to have the dropdown from the select being open programmatically when the surrounding .box is clicked.
According to chosen's options documentation, if we want to programmatically instruct a chosen control to open its dropdown, we must sent it the chosen:open event, so this is what tried, adding it to the code above:
$(document).on 'click', '.box', ->
$(this).find('input').focus()
$(this).find('select').trigger('chosen:open')
And it does not work. It does not give any errors either. I then noticed that if I issued that last line from the browser's js console it works (substituting this with a reference to a .box element, of course). When issued from the console, the corresponding select inside that box opens its dropdown. But when issued from the click event handler above it does not work.
So I figured I needed to issue this command not directly in that context, but using some of Ember's Ember.run functions, like Ember.run.next and some others. But I've had no luck, and I've tried all sorts of things, even triggering the event after a small delay.
I was hoping that someone here with some Ember.js expertise could shed some light on this problem. I assume the problem is when ember, because if I get an equivalent html with no ember (from the front-end designer that gave me the html I'm working with) the thing works flawlessly from the click event too.

Related

Bootstrap 5 input field unable to focus on modal

When I open the modal, it is impossible to focus on the input field
I tried deleting tabindex="-1" but without success
If I set the focus on the field via js, the focus is activated, but if I remove the focus and then try to select the input field the focus does not remain
There are two modals, and the same thing happens in both.
In the first the code is hard-coded (it's just an input field and a button) and therefore the content is not loaded via ajax
I don't know what to try anymore

Sitecore 8, MVC, Experience Editor: How to make a rendering refresh after a Field Editor Button has been used

We have a rendering listing the selected items in a TreeSelect in the current item. In our case we call them "Tags" (1)
We have added a Field Editor Button to the component to let the editor change selected items. (2) (As described on for example Adding a custom component)
When an editor clicks (2) the editor window (3) it is opened in a dialog. The editor may select different items(called tags in our case) using the TreeSelect.
When the editor presses the ok-button (4) the values are set.
Now to the problem:
The values are actually set as they get stored when the editor presses the Save button but we want our list on the page (1) to immediately reflect the set items when the editor presses the ok-button (4), i.e. before having to actually save the whole item.
How do we achieve that?
(I am in contacts with Sitecore support but so far I have not gotten any answers...)
Update
After a lot of conversation with the support we still have no useful solution.
We tried turning it into a field renderer displaying the links.
What worked was:
The field do get updated when you have edited it in the popup field editor. (but...)
It looks good the first time when page is loaded.
You can make a WebEdit button with commands to edit the field and add it as Custom button to the field (register <command name="webedit:fieldeditor" type="Sitecore.Shell.Applications.WebEdit.Commands.FieldEditor, Sitecore.Client"/> and set Click on the button to webedit:fieldeditor(command={3473DDA1-2983-493C-AF7A-054C75AA7AD3},fields=NameOfField where the guid points to itelf and an "Icon" is set on it.)
What didn't work was:
The field get updated by the raw value, not what I want to display. Server code is involved, but not in the rendering of html-code.
When I want to edit the value in the field editor, the value sent to the field editor is not the raw value but what actually is displayed on the page. (I guess this can be solved somehow)
The issue to the support turned into a feature request to let the server be involved in rendering the field, not just sending a new value to the JavaScript updating it. The server does the first rendering so when it already is involved in updating, it should be allowed to do the rendering the following times too.
We have decided to not spend more time on this right now (we have other things to do too.) and have a bad editor experience as the field not get updated until the editor actually saves the item.
Still we have no suitable solution for this issue. If you want to keep working on it and want a reference to my issue it is 439059.
This may not be useful here. I've done this in normal sites, but not in Sitecore. But, here's one possibility....
This is a situation where you would pass a callback function to the child popup window. This callback will cause the caller / parent window to re-read/re-load the information that was just updated by the child.
Example:
User presses (2) to open Editor Window(3) (Editor window is opened and the Callback function is passed as a parameter)
User presses "OK" button (4). The "OK" button event handler updates the changes, then calls the Callback function which re-loads the now updated information, and closes the popup window.
Once the popup closes, the parent window now displays the information that the popup/editor just updated.
This takes some client side javascript (jquery) development but it is quite do-able normally.

emberjs back key leaves some display from child route

To see the problem, please run the following in browser by clicking the arrow shown in upper right corner of of output panel.
http://jsbin.com/uVORASe/4/edit?html,js,output
Click one of the links (either strategy-1 or strategy-2) to display output generated by the child template. Then click back button on browser. When the back button is clicked, browser shows the parent URL as expected. But parts of the child display remains on screen. This process repeats every time a child route is visited. Why? Going back to the parent route should just display strategy-1 and strategy-2 on the left side.
I don't think this is an Ember-Data issue because problem also happens when I tried Ember-Model. I think use of the bootstrap classess has something to do with this. For example, if I take away the bootstrap table-responsive class, Ember throws an error.
Any ideas to explain what's going on?
The close tag of your <table> tag is wrong. You are using </table the expected is </table>.
http://jsbin.com/UKONORI/1/edit

How to ensure the same controller instance is referenced in two different places in ember

tl;dr: Ember is creating two instances of an ArrayController when I want only one. How do I ensure that my code is always referencing the same one?
The scenario
Using ember, I am trying to create a section of a page where potential buyers can select from two sets of options, then click a button to accept those options and redirect to another page based on their choices. Example:
However, when I click the button, it uses whatever was selected when the page first loaded, ignoring any actions in between.
Let's work through the code
When you click the Reserve Now button, it triggers an action on the LessonPackagesController:
#handlebars template
<a {{action bookLesson on="click"}}>Reserve Now</a>
Here's the action it triggers: (If you don't understand emberscript, imagine it's just pseudocode... that runs)
#LessonPackagesController
bookLesson: ->
window.location = #bookingUrl
The location it points to is currently outside the ember application, so I don't think transitionToRoute and its sibling methods are viable.
#bookingUrl is a computed property on the controller.
#LessonPackagesController
+computed chosenPackage lessonType
bookingUrl: ->
url = "/instructors/#{#id}/lesson_bookings/new"
url += "/#{#lessonType}"
url += "/#{#chosenPackage.name}" if #chosenPackage
url
To simplify, I've started out by setting #lessonType to a default ('private'), and we don't have to worry about how #id is being fetched, because it's working.
Before we get into the details of how #chosenPackage is updated, I put together some code that logs every time #chosenPackage is updated, confirming that both #chosenPackage and #bookingUrl are being updated as expected.
#LessonPackagesController
+observer chosenPackage
yolo: ->
console.log(#bookingUrl)
Whenever I click a lesson package, for example the six-lesson package, I see the following in my console: /instructors/58/lesson_bookings/new/private/six. This is exactly as I expected.
However, when I click the Reserve Now button, I get the following: /instructors/58/lesson_bookings/new/private. This is the #bookingUrl that exists before the #chosenPackage is updated.
The plot thickens
In further tests, I put a #content log in 'yolo', and found that the content was... an empty array. Putting this together with the null #chosenPackage in #bookLesson, I surmised that I was accessing two different instances of LessonPackagesController. Here's how I access it when updating the #chosenPackage (which triggers the #yolo function):
class App.LessonPackageController extends Ember.ObjectController
needs: ['lessonPackages']
selectMe: ->
#chosenPackage = this
+computed chosenPackage
chosen: ->
this == #chosenPackage
chosenPackageBinding: 'controllers.lessonPackages.chosenPackage'
chosenPackage: ''
I know that all the LessonPackageController instances interact with the same LessonPackagesController because selecting one will deselect the current chosen package. However, it happens to be different than the instance which #bookLesson is called on.
How do I ensure those two instances are in fact one instance, the same instance?

Ember.js adding and removing views from the DOM?

I am looking into ember.js, after working with SproutCore 1 previously. I am looking for some examples on how to add and remove views from the DOM as the user navigates the application.
For instance, I have an application that contains a set of cases and each case has a workflow. There are also administration pages, etc.
When the user starts up the app, a dashboard-like user interface is shown. From here the user is able to search or click on a case in order to bring up that case. At this point I want to do the following:
I want to remove the GUI for the Dashboard, and i want to show the GUI for the case - which is a complex GUI in itself with its own set of navigation rules etc.
Also, within the case I want to add and remove portions of the GUI as the user navigates and manipulates the case.
When the user clicks on the "Dashboard" link, I want the current GUI to be removed, and the dashboard to be added again.
As this will be a somewhat large application I am not sure if toggling the isVisible parameter is sufficient, or if other measures needs to be taken in order to not overload the user's browser.
Is there a guide, or an example that shows how to do this ?
WARNING: OUTDATED ANSWER
A view inherits from Ember.View which means it gets some key methods. append(), which appends to body, appendTo(arg) which takes an argument and remove().
The argument is a jQuery style selector of where to insert the element in the DOM.
// my view
App.PartsView = Ember.View.extend({
...
});
// create/insert my view
App.partsView = App.PartsView.create();
App.partsView.appendTo('#partcontainer');
In my code I have a <div id="partcontainer"></div>.
// remove from DOM
App.partsView.remove();
The documentation has a good part on Building a View Hierarchy and later a section on Ember.ContainerView depending on whether you want to do it all programatically or not.