How to seamlessly change url of website - javascript

I know this has been asked several times, but I just can't figure out how to change the url or render a new html and make it seem as if you never leave the site.
I want to do exactly what this site does:
http://uncharted.sunbrella.com/
Does it load all the content and just change the visible objects via javascript? Do they use angular states? I can't figure out how to get that effect of seamless transition between sections of websites.

Based on their page source code, it doesn't look like they're using angular, but you certainly could use it. If you did, I would recommend using ui router with multiple views on the page.
The secret to loading html dynamically is by using ajax to request data on the fly and updating the dom via javascript.
The site you referenced used css to make the page responsive and to prevent you from scrolling until you clicked a link. After clicking it looks like the content loaded outside of the view port so you don't see the data loading until you scroll.
Long story short, to point you in the right direction, I would urge you to learn more about ajax loading and css dom manipulations. If you are familiar with Angular, checkout ui router as it would allow you to easily setup multiple views on a page.

Related

Reload only part of an iframe

I looked on many posts but I've never found out such a context like the one I have so I'm requesting you some help.
Here is my development context :
I had in mind to build a single-page based PHP Application and I then chose to set-up a global container page embedding a side navbar-menu on the left for navigation control and an iframe on the right for related content.
The iframe is updated following the navigation navbar to display the selected content to the user.
First, I'm not saying that this is the right way to do this kind of PHP Application and would be ears opened to different way to achieve this.
For now, it's working out but I rose up a problem since I would like to reload only A PART of my content iframe. Indeed, there is a div box inside it that should be updated when the rest shouldn't (or at least it looks strange during navigation).
I was wondering if setting-up a listener on the iframe to look on mysql database updates and then trigger a JS function would be memory cost efficient ?
What would you guys think ? Maybe there's a different way to solve this problem (I was thinking of a big AJAX rendering instead of an iframe for example) ?
Thanks a lot for your answers,
Martin
Okay so for those who would face the same situation I ended up trigerring an ajax function in my child iframe from the parent main page via the instruction document.getElementbyId("myIframe").contentWindow.myAjaxFunction() that run the search script in background (with post parameters from the parent page).
Then I got the reload of only a section of the iframe.

Moving an HTML+javascript page to iFrame

I have an existing website composed of individual pages (each page is a different tool that requires some user input (ie forms), and each with it's own set of javascript functions to populate dropdown lists, etc on that page). Each of the tools is accessed from the main index.html.
Instead of each tool being its own "stand-alone" page that is invoked from index.html, I'd like each tool to be displayed in an iFrame instead on the main page. This way the main page remains static, while only updating the iframe with whatever tool the user selects. So say on the main index page, I have a 3 tools menu (collect logs, collect KPIs, collect status), along with an iFrame. If the user selects collect logs for example, the menu containing "collect logs" stays there, but the "collect logs" page is displayed in the iFrame.
My problem is that all the HTML content works fine, but none of the javascript code in the selected tool page works (ie none of the drop downs get populated since it's the javascript code in the page that does that by reading a file on the server).
Is there an easy way to port each tool page (html+javascript) to an iFrame without having to re-write tons of code (in my naivety I thought simply invoking the page inside an iFrame using target='' in the href would work)? Or is there a better method of accomplishing what I'm trying to do? Maybe iFrame isn't the solution.
Content in iframes remain autonomous from the wrapper app, so it makes sense that it's not working correctly. Other than building a listener for a click event associated with the div wrapped around the iframe, the iframe document isn't accessible if it points to a different origin. (See [same-origin policy]
(https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy))
To stay with simple html/css/js solution:
You can use a regular div to wrap each 'stand-alone' content and then just use whatever button/navigation target you have display that div and hide the previous by changing their css display style with the onClick event.
More invasive option:
You may want to consider using a more modular JS approach, like React JS, to build components vs pages and utilize React's structure to toggle components.
With react you can render each 'tool' when the user selects it . You would be able to utilize React component state as well to help in storing data and such for the life-cycle of the component.

Changing the contents of HTML page depending on options on navbar

I'm making an administrator portal for a band-website. The design is as follows:
There is a side navigation bar(on the left of the page), with things to be done (such as verify reservation requests, answer fanmails, modify band info, upload photographs to the gallery etc.). Clicking on these options should populate a form in the empty space on the right. I don't want to create a separate page for every one of them.
I have checked hell lot of websides for side navs, but i see they all redirect to links to different pages. If anybody could suggest me what all i should explore.
What you are asking about is called 'Single Page Application'. You need to use JavaScript for this. Best way is using JavaScript MVC frameworks like Angular, Ember, React etc.

Issue with styled-components in "custom" single page application

I'm currently working on an old project, which has its "own way" of doing a single page application (does Ajax calls to an MVC application, gets the view, replaces the view client-side, appends styles and lots of other stuff!!), and although not ideal, currently I'm stuck with it!
I am trying to integrate an existing React application into this site, and what I'm doing is to use create-react-app and then build to create the bundles, and in the application, in the view begin returned from the server for a specific page, I'm putting script and link tags, pointing to my bundle files. It's worth noting that this server view is a partial ASP.NET MVC view, so my script and link tags are somehow part of the body.
I'm also using styled-components in my React application.
Now, here's the problem: when I first load the page I mentioned, my script is loaded, and I can see all my components being styled properly, but when I navigate in the existing custom SPA application, at some point, styles related to styled-components are messed up, and the only way to get them back is to reload the page.
I was inspecting the page, and I saw that styled-components is doing things with a custom link created in the head, and I see data-styled-components attribute being populated with custom class names as my components are loaded, but when the problem arises, in Chrome Developer Tools, I see that the link tag flashes as if it's changed, but it stays the same.
I have attached a GIF of the tag:
- It starts with the initial page load
- I navigate away and come back and I see more classes being appended
- I repeat the step, and I only see that it flashes
I know the post is already long, but any help is deeply appreciated. Is it possible that, with the current infrastructure, it has something to do with the fact that whenever I come back to the page, a script tag is sent from the server pointing to my React bundle?
Thanks to Max Stoiber for answering in this GitHub issue:
The reason for this behavior is exactly what I mentioned at the end of the question: every time the page is loaded, a script tag is sent from the server, containing the bundle, which in turn causes a new instance of styled-components to be created; this is not supported in styled-components, and that was the issue

What is the best practice to use JSP and Ajax to load data?

I am a front-end developer who knows little JSP. I am working on a project that is building a CMS. This particular part I need advice is for slideshow data. In the JSP I am loading each slide and then injecting data with ajax. However it seems to be loading slowly, especially slideshows with more than 100 slides. It is also breaking with a lot of slides/HTML structure seems to break.
Each slide's data is loading with it's own endpoint by taking it's ID. In addition, each slide has a edit button that calls the slide's endpoint again to load a form, which also seems to load a bit slow. I was seeking what the best way to go about including this data with ajax. I was thinking something like infinite scroll - specifically http://www.responsivewebmobile.com/app/webroot/rwm_infinite_scroll/. However, what is the best way of organizing this and loading the data? Any advice is greatly appreciated.
Use Single page scrolling.We can load only one page at that time by loading data from Ajax dynamically.
Refer this
http://pagescroller.com/
http://alvarotrigo.com/fullPage/
While clicking page up or page down or slider ,we can load the content of next page using Ajax with id

Categories

Resources