ember.js | JavaScript framework for creating ambitious web applications | Frontend Framework library

this is the main app in ember.js

app/templates/application.hbs

I have a component that contains a html button that when clicked on needs to call a function that renders another component and sets the state of the new component to the arguement passed in to the function that returns the new component. I set a state variable that is initialized with the string 'start'. When the html button is clicked the state var should change and the new component needs to be rendered. In my app the page doesn't load and in the minimal reproducible example I tried to make in codesandbox the state variable won't even initialize with the 'start' string

TL,DR: Firefox (and only Firefox) fails to display the right select child element as marked with selected="selected" upon clean refresh of a page, even though it is correct in DOM (but only under certain conditions).

(I do not believe this is a duplicate of HTML select, correct option selected in DOM, but wrong item shown in firefox as I am not using ember.js.)

I'm building a "software management/update server" in ASP.NET WebForms. It stores master copies of applications and serves downloads and updates via a simple API. Each application (or "App" as they're referred to in-code) has a DeptID and a GroupID, which are GUIDs, relating to respective Dept and Group tables. Each Group has a DeptID field also.

On one particular page, used for editing a chosen software application's details, NON-postback requests (.e.g., http://localhost/admin/app/edit.aspx?id=guid-here) will result in calls to the database to populate field data on the page.

In brief, the ASP.net runtime Page_Load event does the following:

• Ensures that this load is not a Postback
  • Verifies than an id parameter was provided in the query string
    • Populates options in the ddlDept DropdownList (renders as HTML select element) from the Dept table
    • Pulls all fields from the App record from DB as matched by id into a DataSet
    • Populates options in the ddlGroup DropdownList (another select) from the Group table, matching the DeptID pulled from the App dataset
    • Populates the data for all form fields from the App dataset

Important to Note: When you click Save, the page is posted back to the server and field data dumped into the database. If the save operation is successful, the browser is instructed to redirect to the current page's URL using Response.Redirect(Request.Url.ToString), resulting in a "clean load" (non-postback load) of the page.

After the page has been successfully saved, hitting F5 or clicking refresh should result in another clean load (non-postback) of the page, and all fields should be populated just like a direct URL hit on the page.

After the page has been successfully saved, hitting F5 or clicking refresh reloads the page as a non-postback (verified in VS debug), but the ddlGroup select element renders the "default" / first item ("Select One") instead of the item marked selected="selected" in the DOM.

I have stepped through every single line of VB code in debug — and when the server sends the page back after this "post-save" and supposedly "clean" load, the ddlGroup value is correct in code all the way out the door. Only in the browser, and only Firefox specifically, is the displayed value set to the wrong item, even though it's right in the DOM. Refreshing again doesn't help at all. When I try to save again, the RequiredField validator for ddlGroup complains that the field isn't valid, even though, again, it's supposedly right in DOM.

This seems to me to be a very bad Firefox bug.

Thoughts?

I am new to Ember.js and I am currently working on a vehicle app. I have done the login part in which I have an HTTP Post request with fetch which has credentials : 'include' in the init object and send it to the server, which is remote. On a successful login the user is transitioned to the home page where there are three option buttons: vehicles, logout and Profile Data. Moreover, cookies are set as the login response has a set-cookie header. At the moment I am not using the vehicles button, but the other two do not work as expected. For them I have made two other http fetch request in which I have credentials : 'include' in the init object but I assume that I cannot access the cookies in which there is my jsessionId. I tried to read them with document.cookie, but it turned out that jsessionId is HTTP only which means that it cannot be accessed through JavaScript.

If I read the cookies, I could include them in my two fetch requests for logout and getUser I think that then the requests would be successful.

Am I right or not and what should I do ?

Here are some of my source files:

components/login.js

I'm new to ember.js and this is my first application. I want to build a login form in which if the user has passed in the right email and password, he should be transitioned to the home page. I am not sure whether I should use Ember Data for the login part but I read somewhere that Ember Data is not suitable for this specific login task so I should make ajax request (Is this assumption right ?). However, when I made the request I received the following error :

Uncaught type error: Cannot read property 'ajax' of undefined at LoginComponent.logUser

I have made the http request in a login component class but I am not sure whether I should use a controller for this part as in all the examples I have seen the request was handled in controllers. However, I do not know how to use the login controller on a click on the login button.

So I have a few more questions apart from how to handle the error that I have:

1. Should I use Ember Data (if yes how) for the login task or should I use the ajax method?
2. What is the difference between a controller and component(the class) and when I should use each of them user clicks on handling data or making request as in this case?

Thank you in advance for your help!

Here is my code

login.hbs - template:

I am creating a Login form in JavaScript and am trying to send this form to my Ruby on Rails backend.

I have two problems:

1. When the form loads, it triggers the eventListener and sends the blank form's data to the backend. I have e.preventDefault() commented out in the second function below because I kept getting the error that it is not a function. Note: in the backend for Rails, I get the following message when I type in params. "Permitted: false" concerns me. "sessions", "action"=>"create", "session"=>{}} permitted: false>

2. When I fill in the form with an email and password and click the submit button, the loginData (from loginButton.addEventListener("submit", submitLogin(loginData) submits a blank value for the email and 'password' for the password (which are the default values I set to test the values) even though these elements are filled in in the form with an actual email address and password.

Function loading login form (note: this loads just fine):

I've run into a situation with a glimmer component that renders a LinkTo component within. The issue is that LinkTo treats the case where @model={{undefined}} and the case of omitting the @model argument as 2 different cases. This is because the default value for it is a special value of UNDEFINED. When this happens the component uses JS to make the transition i.e. the href is # and so you can't use browser commands like Open in new tab to open the resulting link. So I tried using inline ifs

Can we use Ember.js to build a static website? We are going to store the website in AWS S3.

Kind regards

I've set a blue background image, added some content and was done. I've tried zooming in the site, and whenever I zoom in, the background image automatically pushes itself up and does not cover the founders and half of the yellow arrow.

How it looks normally

How it looks when I zoom in

Any idea on how to fix this?