I have one search page with some search criteria. From that page I going to some other page and clicking browser back button means the page was refreshing. Actually I page should not be refresh instead on refreshing the page should display with some result with out refreshing.
Kindly give me suggestions.
From you question i understand that you need navigate to some other page without refreshing the page as like google.
But its not done using cache. There are function called pushState() and onpopstate() to make this.
How it will work?
With the function pushState(), we can able to change the url of a page without refreshing the page. And the previous url will automatically added to the history. So we need implement a single page to load the content of the page using ajax based on the url.
The function onpopstate() will be triggered when a url is changed using pushState().
Example:
http://html5.gingerhost.com/
The above page uses the above function. That page consist of 4 links (Home, Seattle, New York, London). When we click on those link a new url will be loaded without refreshing the page.
<title></title>
<ul id="menu" class="clearfix">
<li class="current">Home</li>
<li>Seattle</li>
<li>New York</li>
<li>London</li>
</ul>
<article>
<h1></h1>
<div id="image"></div>
<div id="articletext"></div>
<div class="clear"></div>
</article>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script>
// THIS IS WHERE THE MAGIC HAPPENS
$(function() {
//Capture the click on the links
$('#menu a').click(function(e) {
href = $(this).attr("href");
// Call a function to load the content based on the url
loadContent(href);
// HISTORY.PUSHSTATE add the url to the history
history.pushState('', 'New URL: '+href, href);
e.preventDefault();
});
// THIS EVENT MAKES SURE THAT THE BACK/FORWARD BUTTONS WORK AS WELL
window.onpopstate = function(event) {
console.log("pathname: "+location.pathname);
// Load the content on clicking back or forward using its url
loadContent(location.pathname);
};
});
function loadContent(url){
// USES JQUERY TO LOAD THE CONTENT PROVIDED BY content.php
$.getJSON("content.php", {cid: url, format: 'json'}, function(json) {
// output provider by content.php like {"title":"Seattle - Part of a demo for #ProSEO","h1":"Seattle","article #articletext":"<p>Seattle is the northernmost major city in the contiguous United States, and the largest city in the Pacific Northwest and the state of Washington. It is a major seaport situated on a narrow isthmus between Puget Sound (an arm of the Pacific Ocean) and Lake Washington, about 114 miles (183 km) south of the Canada - United States border, and it is named after Chief Sealth \"Seattle\", of the Duwamish and Suquamish native tribes. Seattle is the center of the Seattle-Tacoma-Bellevue metropolitan statistical area--the 15th largest metropolitan area in the United States, and the largest in the northwestern United States.<\/p><p>Seattle is the county seat of King County and is the major economic, cultural and educational center in the region. The 2010 census found that Seattle is home to 608,660 residents within a metropolitan area of some 3.4 million inhabitants. The Port of Seattle, which also operates Seattle-Tacoma International Airport, is a major gateway for trade with Asia and cruises to Alaska, and is the 8th largest port in the United States in terms of container capacity.<\/p>","#image":"<img class=\"thumbnail\" alt=\"\" src=\"seattle.jpg\">"}
// THIS LOOP PUTS ALL THE CONTENT INTO THE RIGHT PLACES(values will be set)
$.each(json, function(key, value){
$(key).html(value);
});
});
}
</script>
As like above you can able to render the content and provide a json response and pass it to the jquery and you can able to achieve that.
Some suggestions:
Use session to store search parameters, when user back to search page check if session exist. If exist use that parameters to find data again or load cached query results.
Better options, change form request type from POST to GET method. So when you submit search form, your url looks like:
http://myhost.com/search?q=my+term¶m1=zzz¶m2=¶m3=
Use this url parameters to find data again. This option allow you to share search criteria with other users.
Create the search values to create a unique key e.g. with md5. Then store the result with this key to your caching system ( file, memcached whatever).
So if a user should run the same search again fetch the result directly from cache without bothering the db.
It could look like this:
$sCacheKey = md5(json_encode($this->data));
$result = Cache::read($sCacheKey, 'short');
if ($result === false) {
$result = $this->YourModel->find(conditions etc....);
Cache::write($sCacheKey, $li, 'short');
}
Or do you want to cache your complete rendered page?
Related
I am a newbie at the MEAN stack. I have a full app working and have searched extensively on how to solve the following problem but I'm realizing that I don't know how to "ask" the question to be sent to the proper resource.
I have a marketplace. In the dashboard, a user can enter details about their product (a boat) and it is sent to the DB. In my marketplace, I'm retrieving all of the boats from the DB and theyre styled and listed on the page.
I want a user to click on one of the tiles components that I have created with an ng-list (boat) and be sent to a new page with a fully-expanded view of that specific boat. (larger pictures, expanded details, etc.) basically all the details about the product that won't fit in the minimalistic tile component in the marketplace.
How do I pass data about that specific boat that the user clicks on and be sent to a new page? Is this an ng-directive? an API/route thing?
I just am unsure how to reference the specific boat from the list i'm retrieving and have the user sent to a new details page. Any direction or resources that will teach me to solve this problem?
In general, use ng-repeat to display a list of products and ng-click to handle clicks.
<a ng-repeat="product in productList" ng-click="goto($index)">
<h2> {{product.title}}</h2>
<img ng-src="{{product.picture}}">
<p>{{product.description}}</p>
</a>
JS
$scope.goto = function(index) {
$location(productList[index].location);
});
Use a router such as ngRoute or ui-route to intercept the new location and load the appropriate template and controller.
I have previously created a web app, and now I would like to integrate it with OnsenUI to enable my app to be used on all mobile devices as well as the web.
I am using a splitter in a toolbar which will be the header of all pages, and it will redirect the user to other pages when they click an item in it. Clicking the home item successfully redirects to the home page (index, which is already loaded correctly). However, clicking any of the other items in the splitter redirects me to the requested page, but shows the content of the file in text format instead of actually rendering the page. It looks like the following, except it's all jumbled together with no spaces:
searchForTrainer.jade:
//-ons-template(id='searchForTrainer.jade')
ons-page(ng-controller='SearchController' ng-init='showme = false; getAllTrainers();')
ons-toolbar
.left
ons-toolbar-button(ng-click='mySplitter.left.open()')
ons-icon(icon='md-menu')
.center
| Search Trainer
// ***** I cut off the rest of the file for simplicity
// ***** I should still be able to see the toolbar if the page loads correctly
Here is the content of index.jade:
doctype html
html
head
link(rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css')
link(rel='stylesheet', href='/stylesheets/style.css')
link(rel='stylesheet' type='text/css' href='/stylesheets/jquery.datetimepicker.css')
link(rel='stylesheet' type='text/css' href='/stylesheets/ratings.css')
link(rel='stylesheet' type='text/css' href='/stylesheets/searchTrainerTab.css')
link(rel='stylesheet' type='text/css' href='/onsenui/css/onsenui.css')
link(rel='stylesheet' type='text/css' href='/onsenui/css/onsen-css-components.css')
block loadfirst
script(src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js')
script(src="https://code.jquery.com/jquery-1.12.3.min.js"
integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous")
script(src='/onsenui/js/onsenui.js')
script(src='/onsenui/js/angular-onsenui.js')
script(src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js')
script(src='/angular/fitnessapp.js')
script(data-require='angular-credit-cards#*', data-semver='3.0.1', src='https://rawgit.com/bendrucker/angular-credit-cards/v3.0.1/release/angular-credit-cards.js')
script(async='', defer='', src='https://maps.googleapis.com/maps/api/js?key=AIzaSyDcVf7YAPNwa8gUsMCOZNQZA31s5Ojf2n8&libraries=places')
body
ons-splitter(var='mySplitter', ng-controller='RootController as splitter')
ons-splitter-side(side='left', width='220px', collapse='', swipeable='')
ons-page
ons-list
ons-list-item(ng-click="splitter.load('index.jade')", tappable='')
| Home
ons-list-item(ng-click="splitter.load('searchForTrainer.jade')", tappable='')
| Search Trainer
ons-list-item(ng-click="splitter.load('searchForEvent.jade')", tappable='')
| Search Event
ons-list-item(ng-click="splitter.load('trainerAddEvent.jade')", tappable='')
| Create Event
ons-list-item(ng-click="splitter.load('userProfile.jade')", tappable='')
| Profile
ons-list-item(ng-click="splitter.load('addPayment.jade')", tappable='')
| Payment
ons-list-item(ng-click="splitter.load('userSettings.jade')", tappable='')
| Settings
ons-list-item(ng-click="splitter.load('trainerSignup.jade')", tappable='')
| Trainer Application
ons-list-item(ng-click="href='/logout'", tappable='')
| Logout
ons-splitter-content(page='index.jade')
ons-template(id='index.jade')
ons-page(ng-controller='MapController' ng-init='getEvents()')
ons-toolbar
.left
ons-toolbar-button(ng-click='mySplitter.left.open()')
ons-icon(icon='md-menu')
.center
| Fitness App
//-.right
a(href='https://www.paypal.com/webapps/mpp/paypal-popup', title='How PayPal Works', onclick="javascript:window.open('https://www.paypal.com/webapps/mpp/paypal-popup','WIPaypal','toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=1060, height=700'); return false;")
img(src='https://www.paypalobjects.com/webstatic/mktg/logo/bdg_now_accepting_pp_2line_w.png', border='0', alt='Now Accepting PayPal')
//- google maps stuff
ons-input#pac-input.controls(type='text', placeholder='Search Box')
div#map.col-md-12
ons-bottom-toolbar
.center
| Fitness App
block scripts
script.
// ***** I cut out javascript related to Google Maps for simplicity
here is the splitter load page function I am using in my angular file:
this.load = function(page) { console.log("The page is: " + page);
mySplitter.content.load(page)
.then(function() {
mySplitter.left.close();
});
};
Has anyone successfully built an Onsen app using Jade?
UPDATE
When I leave the code in html instead of jade, everything works correctly. When I convert it back to jade it shows up as text again.
UPDATE 2
Using Solution 1 from the selected answer, I realized and solved my problem with the guidance from the selected answer on my other post:
Answer
By the looks of it you seem to be using Jade on the server side.
To solve the problem I see a couple possible solutions.
Solution 1:
Make sure that whatever Onsen UI is receiving is pure HTML. You're free to use Jade, but as it stands Onsen does not have Jade bundled inside, so there is no way for it to support it out of the box. However as long as Onsen sees only html it should be fine.
The reason why the ons-template(id='index.jade') works initially is actually because when you serve the page you are actually serving actual html, so when onsen starts the contents of that template are actually pure html.
In searchForTrainer.jade it seems that you are giving it raw jade, which it does not know how to handle. You can handle this on the server side, making sure that the request for the searchForTrainer returns html. Returning jade.renderFile('searchForTrainer.jade') from the server instead of the jade file itself should solve the issue.
Solution 2:
As you noticed as long the contents are inside the initial page everything will be fine. So you could just put all your ons-templates inside the initial page.
If you want to retain your current file structure you can just do
include searchForTrainer.jade
while having an ons-template tag in the file itself. That way in the end the result will be a page with the template already converted into html.
Solution 3:
The final option is to give the raw jade files, but help Onsen understand Jade, so that it can use them properly. To do that you need to include jade.js and modify Onsen UI so that it uses it.
However since Onsen does not currently provide an official API for switching template engines whatever hack we use now might break in the future. It's possible that in the near future a feature like that may be implemented, but in order to do it now we need to wrap some of onsen's internal functions.
Here's a simple example to do it.
module.run(function($onsen) {
var old = $onsen.normalizePageHTML;
ons._internal.normalizePageHTML = $onsen.normalizePageHTML = function(html) {
return old(jade.render(html, {}));
};
});
And here's also a working Demo showing this solution in action.
Note: that demo actually checks for a comment // jade at the beginning just to be safe.
Which solution to choose?
Solution 1 - I think this makes most sense as it retains a clear separation of concerns. If you want to change the templating engine it should be handled only in one place. Onsen does not need to know what you're using on the server as long as it gets what it wants.
Solution 2 - Not the best way to solve the problem, but it may be the easiest to use if you just want things to work. One minus is that with it you would load all the templates at the beginning, which may not be very good.
Solution 3 - While this solution can work I would suggest avoiding it as handling jade on the frontend would result in poor performance. It's could be an option if you actually decide not to rely on the server.
I'm trying to create a custom element for reuse. What I have is data consisting of three attributes that will be displayed on it's respective page, depending on the link you click.
I'm using the Polymer Starter Kit. Basically, I want to have a page of information that changes depending on what the URL is. I have a list of programs on a page with links to their respective pages. So far I have this:
In my index.html, I have a section that looks like this:
<section data-route="programs">
<paper-material elevation="1">
<h1>Programs</h1>
<a href$="{{baseUrl}}programs/firstprogram">Program 1</a></br>
<a href$="{{baseUrl}}programs/secondprogram">Program 2</a></br>
<a href$="{{baseUrl}}programs/thirdprogram">Program 3</a></br>
</paper-material>
</section>
Then I have a custom element, program-info, that looks like this
<dom-module id="program-info">
<template>
<h2 class="page-title">{{program.name}}</h2>
<p>{{program.price}}</p>
<p>{{program.description}}</p>
</template>
<script>
(function() {
'use strict';
Polymer({
is: 'program-info'
});
})();
</script>
</dom-module>
Based on the program that was clicked, I want to grab data and use it in my custom element (name, price, description). I've thought about putting it in an array since there are only seven programs, but I don't know understand how to grab the right item in the array based on the URL.
Any thoughts?
If you are indeed using PSK, take a look at the section/page user-info in app/index.html. It displays information about a user based the name that was grabbed from the URL.
Of course you should also take a look at the routing configuration in app/elements/routing.html to figure out how the name is grabbed from the URL and set to the params variable.
Then you should add/modify your programs route to suit your needs.
Edit:
You can see a similar approach in this sample app : The data is fetch when the route changes and is then set to an article property in the scope of the blog-app element. In this element, said article property is itself bound to the similarly named property of the "page element" article-detail that is in charge of displaying the article's content that was previously fetched over the network.
Extjs prefers your app to be a single page app, but I'd still like to be able to do things like refresh my page and keep my current location in the app, and enter a url to get directly to a particular point in the app. Is there a solution for this?
Yes, I do the same in my app. You can use the Ext JS history mechanism to do so. Have a look at this example from Sencha.
You can listen to the history change event like this
Ext.History.on('change', function(token) {
// you navigate-to-target code goes here, e.g. change the viewport content
}
You can then initiate navigation by setting the browser hash to some navigation target
document.location.hash = yourNavigationToken;
This gives you also the ability to use deep-linking and forward/backward navigation with the browser buttons.
You need to init the history:
// The only requirement for this to work is that you must have a hidden field and
// an iframe available in the page with ids corresponding to Ext.History.fieldId
// and Ext.History.iframeId. See history.html for an example.
Ext.History.init();
and add an iframe and a hidden input field to your page, like in the example:
<form id="history-form" class="x-hide-display">
<input type="hidden" id="x-history-field" />
<iframe id="x-history-frame"></iframe>
</form>
I'm trying to figure out how to link an html picture element back to the database entry that was originally used to generate the picture link.
I am using Meteor:
- I have a database that contains photosets data from Flickr API
- In the HTML, I have a handlebar "each" script that iterates through each photoset in the database and then uses this info to generate the html for the photoset cover picture links.
- When the html renders, the photoset cover pictures are downloaded from Flickr and displayed to the screen.
I would like to be able to click on the photoset cover picture and then automatically generate the links to the pictures in the photoset. But I don't understand how to dynamically link the html picture elements back to their respective database entries that were originally used for generating the picture links. I need to be able to find the original database entries so that I can load the info needed for generation of subsequent links.
As a newb to all of this I'm not really sure where to start looking or what to try. I've wondered about creating an object with custom key pairs to 'memorise' the identity of each photoset picture. Is this the way to go, or is there an easier way that I am overlooking?
Thanks.
Say you have your pictures being put out this way:
Template.mytemplate.helpers({
picture:function() {
return pictures.find()
}
});
You can also do this instead, which is pretty much the same thing:
Template.mytemplate.picture = function() {
return pictures.find();
}
With the html
<template name="pictures">
{{#each picture}}
<img src="{{src}}" class="pictureselector"/>
{{/each}}
</template>
You can use events which can get data from that particular picture document/record
Template.mytemplate.events({
'click .pictureselector':function(event,template) {
console.log(this._id); //Should give you the `_id` of the picture that was clicked
}
});
this is the data context of the element that was clicked & generate the link you want using the data inside this.
Be careful if you use something with a callback inside the click like Meteor.call, you will have to relay the message down via var self = this otherwise the context of this would become the one of Meteor.call