To be honest, I don't know what really causes the problem but will try to explain it.
In my react app, I have placed a Google Translate Widget (which is retired some years ago) to easily translate whole website in just a click. It works fine until I am clicking on a MODAL or some button that changes TAB without changing routes. I mean, when routing there is no problem but if new component renders in the same route (like it does in MODAL and TAB component), the app crashes and all I am getting is a blank page.
Images to make it clearer:
As it seems, Google translated page to French in homepage here is a different route and everything seems OK.
BUT when I click on Make a Reservation Button (which is the vertical one) or All Features button (which is the black one at the bottom), distressingly this is what I get:
A blank page. So, without using google-translate-widget all is working without a problem. But if the page is translated and user clicks on a button renders some component on the same route this happens. ANY solution suggestion or comment means so much to me.
Thank you.
I got the component which cause the insertBefore error inside span tag. It solved the issue.
Related
My goal is to create multi screens in one single page.Depending upon the action the user will be able to navigate from one screen to another screen.I have shared the images below
When the user clicks on any of the categories ,it will navigate to a second screen.
While clicking back it will again comeback to the first screen without change in URL.I have tried creating a full page modal and could not achieve this kind of functionality.I am not sure whether it should be done as a modal with multiple screens.
Please suggest me any method I can achieve this.
What you are likely referring to is creating an SPA or Single Page Application. This can be done through 'Vanilla' JavaScript at great effort or via one of many JavaScript Libraries or Frameworks.
Reactjs, Angular and Vuejs are probably the most common.
IF you were to use Reactjs then you could use what's called React Router. React Router would do what you want to do very easily. Doing it in Vanilla JavaScript would require a great deal of work or it would be very ugly.
However you did ask, so one way of doing would be to use JavaScript to load an iFrame or to make a top level parent element display: none and another to then display:...
Also if you are thinking of something less hacky, but not something as sophisticated as React or it's peers, then check this link out for a relevant article. Perhaps it's a path forward that you would prefer.
https://dev.to/rishavs/making-a-single-page-app-in-ye-good-olde-js-es6-3eng
To help rookies like me, you can make a single page app or SPA, or a dynamic page that updates based on user actions with a single URL, in vanilla Javascript. You don't have to use a framework.
There are 3 concepts you need to understand:
The server doesn't see past the # in the URL
You need to tell your code what screen you want to display. Normally you would have URL.com/page-you-are-on and click a link to go to URL.com/page-you-want
However, in a single page app, you don't go to different URLs. So how does it work? You use a fragment identifier or a pound symbol. #
The # in the URL doesn't get recognized by the server. So URL.com/page#page1 and URL.com/page#page2 to the server is the exact same URL.com/page.
So you can use the URL to indicate to the server what page you want, in your single page app.
A Router can decide what to show based on the # URL fragment
So your page loads at URL.com/page#page-you-want. You need to inspect the URL and get the piece past the #. You inspect the URL, and split it on the #. That means you get page-you-want. Your code then uses that to decide what content to display. The function or file that does this is commonly called a router because it routes to the file or function you want displayed.
Once you know what to show, dynamically update the DOM
This is where the magic happens. Your website looks at the URL, gets everything past the #, sends it to function that decides what to display. You now need to display it.
The DOM has lots of functions and methods that help it update and create various things. It could be as simple as this:
function displayPageAbout() {
// the router calls this if the URL is URL.com/page#about
let pageSection = document.getElementById('pageSection') //this is where the page will be displayed
//create the div and give it content
let page = document.createElement('div');
page.textContent = 'This is the About Page'
//add the div to the spot on the page where the content should go
pageSection.appendChild(page);
}
That is basically it.
If found these two examples and tutorials useful in understanding what it is, and how it could work.
https://blog.jeremylikness.com/blog/build-a-spa-site-with-vanillajs/
https://dev.to/rishavs/making-a-single-page-app-in-ye-good-olde-js-es6-3eng
Good luck!
I'm currently attempting to tab through some react components that I've (text inputs, checkboxes, radio buttons, etc) implemented (using material-ui). Something I've discovered is that tabbing through my components locally works as expected but as soon as I put it on the server, it skips through my checkboxes & radiobuttons (but tabbing to text inputs works fine).
The website that I'm displaying my react project on is built on backbone and I'm basically displaying an iframe with my react project inside that. Is it possible that this has some effect on a user's ability to tab through the components inside an iframe?
Thanks for your help!
With some help from above, I was able to figure out that when I render my react project inside the backbone project, some components such as my checkbox and radio buttons are wrapped inside a <span> tag and in order for it to be able to be tabbed I had to add the tagIndex attribute to it. Thanks everyone!
chatbox
profile view
So these are mockups for my social network project.
My question is that when a user logs in he is presented with this view.
There are two parent components THE LEFT PANE and RIGHT PANE.
THE LEFT PANE remains there for the whole session. BUT inside right pane I have to render
Chat box(when someone clicks on a friend from the list).
Pending request Component(When the see pending request button is
clicked)
Search Friends(When make friends button is clicked)
Profile View (When someone clicks on the interactive I button
Priorities:
I do not want to show the change in the address bar when any
component changes. So cannot use Browser Router.
Possible Solution but in doubt
I could use Conditional rendering by attaching some state variable
with each button click and when that button is clicked determining
the state i should render that specific component.
I could use Memory Router in react router in order to keep the code
clean and do not show the change in the address bar.
Help
CAN ANYONE WITH A GOOD EXPERIENCE IN REACT TELL ME IS THERE ANY OTHER WAY OF DOING THIS? AND IF NOT THEN WHICH IS A BETTER OPTION BETWEEN THESE TWO?
Pls refer to the images to get full idea about the situation.
thanks.
P.S. I can only post two links the other two components of pending request and make friends would be loaded the same way inside the right pane.
I think the best way would be to use the memory router Coz it would help to keep your code neat and understandable for reusability
I'm using AngularJS not to build SPA but just for certain features in the system. I'm having a trouble to find out why Angular is preventing page from being refreshed after it get's there or how to disable/workaround it.
So I have simple menu:
<ul>
<li>Homepage</li>
<li>Profile</li>
</ul>
And when I'm already on the http://example.com/admin page and I'm clicking in first link (/admin) then nothing happens.
I could detect if a certain a element has a href and then use window.location but unfortunately I'm using AJAX in some other parts of the system so that won't fit.
Please advise.
You're working with a Single Page Application. The router takes care of navigating between different application routes, but the browser never fetches an entirely new page.
When you click on a link for a page that you're already on, there is no where to navigate to.
EDIT: You could write a directive that will detect clicks on anchor tags, and if the route is the same, it could trigger a page refresh. That will give you the behaviour you're looking for. However, I struggle to where this would be desirable.
EDIT 2: This is what stops your navigation: https://github.com/angular/angular.js/blob/v1.5.x/src/ng/location.js#L889.
As far as I can see, there is nothing you can do to disable that behaviour, or if there is, it will be an uglier and more fragile solution that creating your own directive that will trigger a page refresh.
you need to be using ng-href and http://plnkr.co/edit/stdkjN?p=preview
I'm developing an hybrid mobile app using a SPA with angularjs, so I'm using routes to determine which page will be displayed and I'm using transitions (angular style, with ng-enter, ng-leave, etc) to change between pages.
However I'm having problem when users try to go back in the application. First of all, I can't use window.history.back because not always the last page seen is the page that the back button must lead on, so I have to change the route to the correct location.
Anyone is willing to wait a bit when clicking in a item that will lead to another page, but the opposite is not real. When users tap the back button and the app change the route, it takes some time to render the page as if it were a new page, but users keep tapping the back button because they feel like the app has stopped working.
I wanna know if there is a way to keep in memory the elements of the page that were already rendered to fasten the process of going back on the application.
P.S.: I know this way I will need a good memory consumption tracking to prevent memory leaks and a expensive usage that would make the application even slower.
I guess ui.router with nested views should help you.
Please see example http://angular-ui.github.io/ui-router/sample/#/contacts/42/item/b
(link blog & fax)
As you see, click on the links don't lead to reload all page (only required content) but urls are different for each views.
There's documentation for nested views
https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views