I'm creating mobile app with phonegap, google maps and jquery mobile. I would like to have more then one single html templates files (navigation for pages) and load just the content of the page via ajax to javascript overlay.
Also i want to keep the history and hashes to be able to go back to previous page etc. I tried using $.mobile.loadPage and changePage but this is changing the whole pages and i would like to change just the content.
Is there any solution?
You will find this framework the exact one you are looking for.
Related
How is it possible for a web application/website to have the same identical source code behind every page on the site with no change at all. I was looking at the crypto - fiat currency exchange website: (Remitano.com) and for each page on the site the code is the same. How could this be possible?
The site is most likely a single page application (SPA). This means that it dynamically adds and removes elements with JavaScript. This is why sites made with React, Vue, and Angular don't work without JavaScript enabled.
For example, if you look at the code of a Vue app, you'll see something like <noscript><strong>We're sorry but myvueapp doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript>. The content inside noscript only displays if the user has JS disabled in their browser.
I have to make a website with different Java-Tasks and informations. The user can join the homepage and can click to different pages. On the Java page he can do some tasks. The website is completely done with HTML. Now i need GWT for the tasks.(multiple choice etc.) This page is easy to make, when i only have this page. But how can i put all these things together. I mean: a homepage and different pages with only html and links and a page which is also linked to all other pages for navigation and is done with gwt for the different tasks. Do i need GWT for all the other pages or only for the task-page? On the other pages there is only text.
You don't need GWT for all the pages, but you can use it.
You can create a GWT project with a Module for the GWT page you want and a static HTML for each one of the HTML pages.
Alternatively, you can build a web application that loads the content of each page dynamically in the same element (e.g. in <div id="content"></div>), based a URL token (e.g. < url >#somepage) triggered by your menu items. You can get the token value in GWT with com.google.gwt.user.client.History.getToken().
Web applications such as Gmail work like that. For your use case, with many static pages (pure HTML), it might seem to be an overkill. But if you are using GWT anyway, I would do it like that. In the long term you don't have to update the menu in each HTML page, as you have a single widget for that. You get scalability and a better project organization.
I’m working with Symfony2, and I have a base.html.twig view which includes a navbar and a logo. Also I have other views which extend the base.
When I go from one page that extends the base to another one, the whole page is being rendered in Safari even the navbar and the logo, the same when I reload the page.
Firefox works fine.
So, is there any option in symfony2 to force safari browser to reload just what the code says? (I don’t want to ask the user to install or configure anything in his/her computer).
I think I'm looking for something like that (but for Symfony2): Livereload
There are many ways to make an AJAX requests to load only part of the whole page. You can use pure JavaScript or frameworks like jQuery, Dojo, Backbone.js, Ember.js, AngularJS, Spine.js, KnockoutJS, YUI, Batman.js, Closure, Agility.js, Knockback.js, React.JS. You can use any of them. They all contain AJAX-functionality.
But you need not only JS-framework to work with partial loading. You need also to organise your controllers on the server-side. Your controllers must not extend your base.html.twig but send in response only html-part or JSON-object that represent this html-part.
Been working on building a huge app using angular js. Have seen too many questions on the same topic on how best we can design an app, but still am lil confused.
A basic app usually has a
1) Login page/Index page
2) Home page - with headers and footers. Body being the partial/composite which keeps on changing.
since we don't have handle to load multiple ng-views, which is best way to structure the Home page such a way that we have one single HomePage container with headers and footers and Body is loaded dynamically via $route.
Right now I have designed it using a single LoginContainerPage which loads Login page and home pages via $routers, but since only a single ng-view is allowed i cant use another ng-view within the Home page to laod the body dynamically again. i am not keen to use ng-include as well.
Another way to go is keep LoginPage outside the $route and start routing from HomePage such that the Body is loaded dynamically.
Wanted to check if there are any better ideas around.
Thanks in advance!!
well in the project i'm working on with angularjs i took this approach:
i had a header that was the main navigation system i made a controller for that that handled the navigation system and knew about where i am right now. i had an ngView which loaded my main content based on routes but sometimes i needed different templates to be loaded and compiled base on some event for instance ajax loaded tabs. i implemented these types of things using ngInclude that the main controller on the view had the responsibility to choose the template and include it, i believe there is no need for multiple ngViews you can simply use scopes to implement different things and handle different parts of your app with different controllers and data. i guess the best idea for you is to make your login page separate.
i did this in my project. my login page was the only non-Ajax page that i had.
edit:
for authetication part if you wish to implement the authentication through angular you migh want to check this.
Ok guys, what I can't seem to grasp is how, on a one page website, you link to certain pages/divs while using the scrollto function.
if you look at Ultranoir.com
You can see the site is built with the one page format but if you watch the url field, it navigates to subfolders etc, but is still loading all content dynamically. How do they achieve this effect while still keeping it so clean and ordered? on my current site it all stays at www.url.com/index.html even when I navigate pages. any help? thanks!
They are using hash tags to load different parts of their pages dynamically. if u add i.e. index.html#!/blog or index.html#!/about
you can parse the url client-side using javascript and load the correct content through ajax based on the url.
Check out this page to see an example implementation of this functionality using php and JQuery: http://www.queness.com/post/328/a-simple-ajax-driven-website-with-jqueryphp
They do it by abusing the fragment identifier. A modern approach would make use of pushState