I need to save the UI state in the hash fragment, I tried two different methods:
1- hash fragment with a query string format
#a=foo&b=bar
and then get a value with a custom function:
getParam: function (parameter) {
if(document.location.hash !== "") {
var param = document.location.hash.substring(1).split("&");
for(var i in param) {
var keyValue = param[i].split('=');
if(keyValue.length === 2 && keyValue[0] === parameter) {
return $.trim(keyValue[1]);
}
}
}
return null;
}
2- hash fragment with a json object
#{"a":"foo","b":"bar"}
and then get the object with
$.parseJSON(document.location.hash.substring(1))
What is the best methods? Is there a specific convention for the hash fragment format?
Best practise is to leave the fragment id alone. Use the history api to change a real query string.
Then, when the page is requested from scratch, build it entirely on the server.
This:
Avoids the need to load a base page before immediately replacing large chunks of it with Ajax data (which used to make the Twitter web app horrible to use until they moved to the history api)
Makes links friendly for search engines and other non-JS clients
Related
I'm loading up data from the server via ajax requests. The JSON file has configurations for popups in the site.
popupData: {
data:{ var_one: "hello", var_two: "world"},
template: "the <b>{{var_two}}</b> say's {{var_one}}"
}
The variable names and template will be different for every occurrence of the popup.
How can I get this string interpolated with the data that comes with it? I need to pass the pre-built string to a component to be viewed using [innerHTML].
Somewhere after the data was received:
const popupString = popupData.template.replace(
/{{\s?([^{}\s]*)\s?}}/g,
(substring, parsedKey) => {
const replacer = popupData.data[parsedKey];
return typeof replacer !== 'undefined' ? replacer : substring;
}
);
It should equal the <b>world</b> says Hello in your example.
Please note that this code comes from robisim74’s angular-l10n (MIT license).
I am developing a website that is mostly written in asp.net and Javascript and I am using a lot of ajax on it to retreive and display information from a SQL database.
To perform all these operations I am using Web API as the communication path to perform server related tasks.
There are quite a few places on my website I will only want to display certain information. For example, I have the following route of which I may consume: api/customers/orders/order/5
This would retreive data for Order #5. However, what if some places on my website only need to display the Order # or Order Description or something? and what happens if I want to filter the database a bit more, to perhaps only display orders with specific information. By using the above URL it would return everything about the order to the web browser and seems a bit unnecessary.
If I have several needs for different filters then I don't understand how the routing would work for as some bits would be optional.
Any recommendations would be greatly appreciated! Or perhaps i'm missing something!
Thanks
You can do something like following. You can create request filter like specified in below link.
public class RequestFilterAttribute : Attribute, IHasRequestFilter
{
#region IHasRequestFilter Members
public IHasRequestFilter Copy()
{
return this;
}
public int Priority
{
get { return -100; }
}
public void RequestFilter(IHttpRequest req, IHttpResponse res, object requestDto)
{
var query = req.QueryString["q"] ?? req.QueryString["query"];
var limit = req.QueryString["limit"];
var offset = req.QueryString["offset"];
var user = requestDto as QueryBase;
if (user == null) { return; }
user.Query = query;
user.Limit = limit.IsEmpty() ? int.MaxValue : int.Parse(limit);
user.Offset = offset.IsEmpty() ? 0 : int.Parse(offset);
}
#endregion
}
.Net WebAPI URI convention for advanced searching /filtering
I am using the latest versions of Angular, breeze, EF.
I am constructing a complex object on a client called a Quote which is added to a job. This has a QuoteMeasure added to it. One of the properties of QuoteMeasure is a navigation property called measure:
var quote = em.createEntity("Quote", { id: breeze.core.getUuid() }),
quoteMeasure,
measure;
measure = _getMeasureFromLookups(4);
quoteMeasure = em.createEntity("QuoteMeasure", { id: breeze.core.getUuid(), quoteId: quote.id });
I have tried the following which executes a query to the server
quoteMeasure.measureId = measure.id;
quoteMeasure.entityAspect.loadNavigationProperty("measure").then(function () {
console.log(quoteMeasure.measure);
});
quote.quoteMeasures.push(quoteMeasure);
job.quotes.push(quote);
to url /Breeze/Data/Measure?$filter=Id%20eq%204&
which does not exist. I would ideally like to set the navigation property manually as it is static data and previously obtained from a breeze query lookups on the server:
[HttpGet]
public object Lookups()
{
var measures = UnitOfWork.MeasureRepository.Get(null, q => q.OrderBy(m => m.Ordinal)).ToList();
return new { measures = measures };
}
This is what the function _getMeasureFromLookups does, it looks up the previously stored measure. I would like to do assign it this way:
quoteMeasure.measure = measure;
But I get the following meaningless error on the client:
Error: A is undefined M#//llhst/X/Scripts/breeze.min.js:1 d/f.set#//llhst/X/Scripts/breeze.min.js:5 _createNewQuote#//llhst/X/Scripts/app/services/jobService.js:76
This I assume is because a full tree of objects has been downloaded via the lookup rather than an individual measure entity. In http://www.breezejs.com/documentation/navigation-properties there is a section on 'Omitting navigation properties' but then it neglects to tell you how to do this.
So my question is what is best practise for loading navigation property data offline? How can I modify the sample above so that it works?
If I understand your requirement correctly, you should be able to construct your quote and quoteMeasure entities as follows:
var quote = em.createEntity("Quote", { id: breeze.core.getUuid() });
//the assignment quoteId: quote.id is the same as quote.quoteMeasures.push(quoteMeasure)
//you don't need to add it again to the collection
var quoteMeasure = em.createEntity("QuoteMeasure", { id: breeze.core.getUuid(), quoteId: quote.id });
var measure = _getMeasureFromLookups(4);
quoteMeasure.measure = measure;
//or
//quoteMeasure.measureId = measure.id
//your _getMeasureFromLookups should look something like this
function _getMeasureFromLookups(measureId) {
//getEntityByKey will look up Measure from client cache
return em.getEntityByKey('Measure', measureId);
}
Calling loadNavigationProperty will initiate a query to the server.
The 'Omitting navigation properties' section actually tells you how you can omit the principal side of the association. So for example, to apply it to your EF model, if you don't want a Quote to be able to navigate to all QuoteMeasures, you can do the following:
//EF Model on Server
public class Quote {
//Simply remove or comment this collection navigation property
//public virtual ICollection<QuoteMeasure> QuoteMeasures { get; set; }
}
Hope this helps.
Seems the problem was the ommission of these statements:
Configuration.ProxyCreationEnabled = false;
Configuration.LazyLoadingEnabled = false;
Not having this caused the preloading of not only the navigation properties but all of theirs as well which caused the obscure error I noted above. No other modifications were required to get the code working.
EntityAspect.loadNavigationProperty() always makes a request to the server. If you want properties be loaded without making a separate request, do Eager loading with EF.
If you have several properties which are null when breeze fetches them, and you don't want to make several loadNavigationProperty calls, use EntityQuery.expand() method. You can list any properties you need to be loaded
I'm fairly new to Javascript, and assembled the following (part is from an example online, rest is by me):
This works reliably, I'm just wondering how many best-practices I'm violating. If someone is nice enough to provide general feedback about the latter part of this script, that would be appreciated.
The two included functions are to (1) capture the incoming website visitor's referral data on a page, including URL query strings for analytics, and store it to a cookie. (2) When the visitor completes a form, the script will read the cookie's URL value, parse this URL into segments, and write the segment data to pre-existing hidden inputs on a form.
Example URL this would capture and parse: http://example.com/page?utm_source=google&utm_medium=abc&utm_campaign=name1&utm_adgroup=name2&utm_kw=example1&kw=example2&mt=a&mkwid=xyz&pcrid=1234
function storeRef() { //this function stores document.referrer to a cookie if the cookie is not already present
var isnew = readCookie('cookiename'); //set var via read-cookie function's output
if (isnew == null) {
var loc=document.referrer;
createCookie('cookiename',loc,0,'example.com'); //create cookie via function with name, value, days, domain
}
}
function printQuery() { //function to parse cookie value into segments
var ref=readCookie('cookiename'); //write cookie value to variable
var refElement = ref.split(/[?&]/); //create array with variable data, separated by & or ?. This is for domain info primarily.
var queryString = {}; //From http://stevenbenner.com/2010/03/javascript-regex-trick-parse-a-query-string-into-an-object/
ref.replace(
new RegExp("([^?=&]+)(=([^&]*))?", "g"),
function($0, $1, $2, $3) { queryString[$1] = $3; }
);
//write segments to form field names below.
document.getElementsByName('example1')[0].value = refElement[0]; //exampleX is a form hidden input's name. I can not use getElementById here.
//need to be able to manually define these, which is why they aren't in a loop, though I'm not sure how to loop an array referenced in this way
document.getElementsByName('example2')[0].value = queryString['utm_source'];
document.getElementsByName('example3')[0].value = queryString['utm_medium'];
document.getElementsByName('example4')[0].value = queryString['utm_term'];
document.getElementsByName('example5')[0].value = queryString['utm_content'];
document.getElementsByName('example6')[0].value = queryString['utm_campaign'];
document.getElementsByName('example7')[0].value = queryString['utm_adgroup'];
document.getElementsByName('example8')[0].value = queryString['utm_kw'];
document.getElementsByName('example9')[0].value = queryString['kw'];
document.getElementsByName('example10')[0].value = queryString['mt'];
document.getElementsByName('example11')[0].value = queryString['mkwid'];
document.getElementsByName('example12')[0].value = queryString['pcrid'];
}
Thank you!
why would you need to use a cookie to store the data for that, if unless you wanna keep track of the visitors visiting to your site?
My company hosts user created surveys on our server. When they are uploaded, they are given a key number as an identifier. I am trying to create a facebook app that people can post a simple survey to and distribute. I can set the canvas URL to the default URL of our server, but I need to pass that key to the query string at the end of the app URL.
<input type="hidden" id="SurveyKey" name="SurveyKey" value="130633791306">
so, the end link needs to be apps.facebook.com/myappname/130633791306
or apps.facebook.com/myappname/SurveyKey value
I am very new to JavaScript and didn't know if there was some get function that could just pull that from the source code and pass it into a new URL. I'm sure this is something easy, but as I am not sure how to word my question, my search result is coming up with a lot of unrelated material.
The URLs for our surveys look like this:
http://www.snapsurveys.com/swh/surveylogin.asp?k=130633791306
where k is a unique value for every survey. I want to be able to pull that value from the source code and pass it into the URL of my facebook app (which has the canvas URL set as our URL). So, it would look like apps.facebook.com/appname/k=VALUE_HERE
To get the query string in JavaScript you could use a code snipet like this:
function querySt(ji) {
hu = window.location.search.substring(1);
gy = hu.split("&");
for (i=0;i<gy.length;i++) {
ft = gy[i].split("=");
if (ft[0] == ji) {
return ft[1];
}
}
}
Then you just define a variable to store the key, ie
var surveyKey = querySt("k");
Now you can use the surveyKey anywhere, so for example:
var url = "http://apps.facebook.com/appname/k=" + surveyKey;
http://ilovethecode.com/Javascript/Javascript-Tutorials-How_To-Easy/Get_Query_String_Using_Javascript.shtml