How to reload the page when implementing the History API - javascript

I am trying to use the History API to allow me to use the back and forward buttons when loading content dynamically. Here is the code I am using, and an example of the state object I am using too.
How I am using the state object and pushstate()
var stateObj = {Content : homeSection.innerHTML, "Product" : detail.Name, Title : title.innerHTML, Section:"dynamicArticle"};
window.history.pushState(stateObj, "", detailName);
window.addEventListener('popstate', function(event) {
updateContent(event.state);
});
Function used:
function updateContent(stateObject) {
if (stateObject){
homeSection = document.getElementById(stateObject.Section);
homeSection.innerHTML = stateObject.Content;
title.innerHTML = stateObject.Title;
var items = document.querySelectorAll(".homeItem");
if(items){
for(i=0; i<items.length; i++){
items[i].addEventListener("click", selectedProduct);
}
}
checkoutButton = document.getElementById('checkoutButton');
if(checkoutButton){
checkoutButton.addEventListener('click', function(){
displayCheckout();
});
}
basketButton = document.getElementById("basketButton");
quantityInput = document.getElementById("productQuantity");
if(basketButton){
basketButton.addEventListener('click', clicked);
basketButton.addEventListener('click', updateBasketNumber);
quantityInput.value = "1";
}
searchSort = document.getElementById("sort");
if(searchSort){
var items = document.querySelectorAll(".searchResult");
for(i=0; i<items.length; i++){
items[i].addEventListener("click", selectedProduct);
}
searchSort.addEventListener("change", function(){
sort = searchSort.value;
searchItem(e, sort);
});
}
}
else{
return;
}
}
What I am struggling with is that if I navigate to one of the pages using the pushState() and I try to reload the page, as you would expect the page cannot be found.
I am asking if there is a way to allow a reload or for someone to navigate to the URL without it giving an error, and giving the correct content

Just like #jon-koops pointed in the comment you need to configure your server to redirect requests to the same page where all you links branch.
If you are using apache 2.2.16+ it get's as simple as:
FallbackResource /index.html
This will rewrite all URL’s to a single entry point that is index.html page.
Other solutions depend on the server you are running.

Related

HTML IFrame not allowed to download file

im trying to download a file that constructs itself based on the value it recives. This is my code
<html>
<head>
<script>
var myList=[];
window.onmessage = function(event){
if (event.data) {
myList = event.data;
if (myList.length>0) {
buildHtmlTable();
}
}
else {
myList = [];
}
};
function buildHtmlTable() {
var columns = addAllColumnHeaders(myList);
for (var i = 0 ; i < myList.length ; i++) {
var row$ = $('<tr/>');
for (var colIndex = 0 ; colIndex < columns.length ; colIndex++) {
var cellValue = myList[i][columns[colIndex]];
if (cellValue == null) { cellValue = ""; }
row$.append($('<td/>').html(cellValue));
}
$("#excelDataTable").append(row$);
}
return exportF(); // Make Excel file download now
}
function addAllColumnHeaders(myList)
{
var columnSet = [];
var headerTr$ = $('<tr/>');
for (var i = 0 ; i < myList.length ; i++) {
var rowHash =`enter code here` myList[i];
for (var key in rowHash) {
if ($.inArray(key, columnSet) == -1){
columnSet.push(key);
headerTr$.append($('<th/>').html(key));
}
}
}
$("#excelDataTable").append(headerTr$);
return columnSet;
}
function exportF() {
var table = document.getElementById("excelDataTable");
var html = table.outerHTML;
var url = 'data:application/vnd.ms-excel,' + escape(html);
var link = document.getElementById("downloadLink");
link.setAttribute("href", url);
link.setAttribute("download", "export.xls"); // Choose the file name here
link.click(); // Download your excel file
return false;
}
</script>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body onLoad="">
<table id="excelDataTable" border="1">
</table>
<a style="display: none" id="downloadLink"></a>
</body>
</html>
The code itself works, but the error i get is "Download is disallowed. The frame initiating or instantiating the download is sandboxed, but the flag ‘allow-downloads’ is not set. See https://www.chromestatus.com/feature/5706745674465280 for more details."
What can i do to work around this? It feels like ive tried everything i can get my hands on but nothing seems to work for it to download
As the warning message says, you can't initialize downloads from a sandboxed iframe if it doesn't have the allow-downloads permission.
All solutions will imply having access to the page where the iframe is displayed (hereafter "the embedder").
The easiest and recommended way,
is to ask the embedder to add this permission when they define their iframe:
<iframe src="yourpage.html" sandbox="allow-scripts allow-downloads"></iframe>
An other way would be to ask them to not sandbox that iframe at all,
<iframe src="yourpage.html"></iframe>
but I guess that if they did, it's because they don't trust your page enough.
Finally a more complex way would be to pass the generated file back to the parent window.
For this you'd need to define a new API with your clients.
You could obviously just emit a global message event back to them, but I guess the cleanest is to make them pass a MessageChannel's MessagePort along with the myList data, so they can wait for the response there easily and be sure they'll only catch the response and no other unrelated message.
So in the embedder page they'd do
frame.onload = (evt) => {
const channel = new MessageChannel();
// handle the response from the iframe
channel.port2.onmessage = (evt) => {
const file = evt.data;
saveAs( file, "file.html" ); // the embedder is reponsible to initialize the download
};
frame.contentWindow.postMessage( embedders_data, [ channel.port1 ] );
};
And in your page you'd do
window.onmessage = (evt) => {
const myList = evt.data;
// get the MessageChannel's port out of the transfer-list
const port = evt.ports[ 0 ];
// buildHtmlTable has to return the final file, not to make it download
const file = buildHtmlTable( myList );
if( port ) {
port.postMessage( file ); // send back to embedder
}
};
See it as a live plnkr.
Ps: note that your files are not xlsx files but HTML markup.
The correct answer
Under normal circumstances Kaiido's answer is indeed the correct solution to your problem. They will NOT work in your case though.
The answer that will work on WixSince you are using Wix there is no way for you to directly edit the Sandbox attribute of the iframe element. This is just how Wix does things. You can, however, use custom code (only applies to premium websites) to get the class name of the iframe and programatically use javascript to set the new attribute to the existing iframe.
You must use the web inspector to find out the class name (iframes in Wix do not have ids) then add "allow-downloads" to the sandbox attribute. You might then need to reload the iframe using js as well. Go to your website's settings -> Custom Code -> Create custom code at the end of the body tag
If you do not have a premium website then you unfortunately cannot do this. This is due to Wix's own limitations as a platform. If this is an absolute "must" for you project, I recommend you to not use Wix since they limit your freedom as a developer when it comes to working with
technologies that were not made by them. Not to mention that they lock features such as custom elements behind a pay wall. So we can't even test our ideas before committing to a hosting plan. For anyone reading this in the future, take this into consideration and look into other platforms.
Thanks for answers, i didnt find a sollution with the recomended answers. What i did is that i made a completely new page, instead of initializing a html iframe i redirected the current window to the new page i created. The new page took a variable from "www.page.com/?page={value} and downloaded what i needed from there instead. Its messy but it works so if anyone else has this problem i recomend this if you are using wix.

Creating whole new view based on current user's group sharepoint 2013

I am trying to generate a view based on the current user's group name. Group Name I am gathering from the custom list.
My question is how to apply the gathered group name to 'Group Name' column as a view parameter.
The only solution I figured:
I have created a view with a parameter.
I have added an HTML Form Web Part into the same page and connected it to the list view (sending the value to the parameter via web part connection). Then with a window.onload function I gather the current user's group name and pass this value via Form Postback function. But since the Postback function triggers full page reload, it falls into the endless loop of form submission > page reload.
Another way I have tried is attaching a click event listener to the BY MY GROUPS tab and it works perfectly, but the only disadvantage is that the page reloads each time user clicks on this tab, which I would like to avoid.
So the solution that I need is a way to post the form without a page reload.
Another option suggested here is to use CSR (client side rendering), but that has its own problems:
This code does not work as it is supposed to. In the console it shows me correct items, but the view appears untouchable.
Even if it worked, the other column values are still viewable in the column filter, as in this screenshot:
So, it seems that CSR just hides items from the view (and they are still available). In other words its behavior is different from, for example, a CAML query.
Or am I getting it wrong and there's something wrong with my code?
Below you can find my CSR code:
<script type='text/javascript'>
(function() {
function listPreRender(renderCtx) {
SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function() {
var currUserID = _spPageContextInfo.userId;
var cx = new SP.ClientContext('/sites/support');
var list = cx.get_web().get_lists().getByTitle('Group Members');
var items = list.getItems(SP.CamlQuery.createAllItemsQuery());
cx.load(items, 'Include(_x006e_x50,DepID)');
cx.executeQueryAsync(
function() {
var i = items.get_count();
while (i--) {
var item = items.getItemAtIndex(i);
var userID = item.get_item('_x006e_x50').get_lookupId();
var group = item.get_item('DepID').get_lookupValue();
if (currUserID === userID) {
var rows = renderCtx.ListData.Row;
var customView = [];
var i = rows.length;
while (i--) {
var show = rows[i]['Group_x0020_Name'] === group;
if (show) {
customView.push(rows[i]);
}
}
renderCtx.ListData.Row = customView;
renderCtx.ListData.LastRow = customView.length;
console.log(JSON.stringify(renderCtx.ListData.Row));
break;
}
}
},
function() {
alert('Something went wrong. Please contact developer')
}
);
});
}
function registerListRenderer() {
var context = {};
context.Templates = {};
context.OnPreRender = listPreRender;
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(context);
}
ExecuteOrDelayUntilScriptLoaded(registerListRenderer, 'clienttemplates.js');
})();
</script>

How to populate jqGrid filter toolbar and search when the page loads (ASP.net webforms)

Currently, I'm trying to populate the filterToolbar with values taken in from a cookie. If there is cookie data for the filters, I want it to fill the respective textboxes and filter the jqGrid for that data.
I'm using ASP.net webforms, so most of my data is initialized already. How/where could I add javascript in order to get this going?
I actually figured out what I was doing.
So what I ended up doing as a solution was adding a timeout function in the document.ready function
$(document).ready(function () {
// some code
setTimeout(function () {
$('#Jqgrid1')[0].triggerToolbar();
}, 500)
//some code
}
My guess is that I couldn't use the $('#grid')[0].toggleToolbar() to force it because whenever I tried to use it, it was before the whole grid was finish setting up.
In the ASP webform, I had several functions registered.
<cc1:JQGrid ID="Jqgrid1" runat="server"
Height="630"
SearchDialogSettings-Draggable="true"
EnableViewState="false"
AutoWidth="True" >
<ClientSideEvents
LoadComplete="Jqgrid1_LoadComplete"
GridInitialized="initGrid"
/>
<%-- grid code --%>
</cc1:JQGrid>
The LoadComplete is executed after the grid is loaded. I tried doing triggering my toolbar there, but didn't work. My guess is, again, it was too early in the grid execution to use the triggerToolbar() function.
The same went for the GridInitialized events (even though both events would seem to imply to me that the grid is done doing its thing... but whatever...)
The way that I read my cookies in was actually in the GridInitialized event handler.
function initGrid() {
var myJqGrid = $(this);
var valueName = 'GridFilters';
var myCookie = document.cookie;
var gridFilterString;
var gridFilterArray;
var currentFilter;
var myCookie_arr;
var myDic = {};
if (myCookie.indexOf(valueName) > -1) { // don't even bother if the cookie isn't there...
myCookie_arr = myCookie.split("; "); // looking for the cookie I need
// read cookies into an array
for (var i = 0; i < myCookie_arr.length; i++)
{
parts = myCookie_arr[i].split("=");
first = parts.shift(); // remove cookie name
myDic[first.trim()] = parts.join("=").trim(); // handles multiple equality expressions in one cookie
}
if (myDic.hasOwnProperty("GridFilters"))
gridFilterString = myDic["GridFilters"];
if (gridFilterString != "NONE") {
myFiltersDic = {}
myFiltersArr = gridFilterString.split("&")
for (var i = 0; i < myFiltersArr.length; i++) {
parts = myFiltersArr[i].split("=");
myFiltersDic[parts[0].trim()] = parts[1].trim();
}
myParams = $(this).jqGrid("getGridParam", "postData");
var filters = []
for (keys in myFiltersDic) {
$('#gs_' + keys.trim()).val(myFiltersDic[keys].trim());
}
$.cookie('m_blnSearchIsHidden', "0", "/");
if (!isLoaded)
{
$(this)[0].toggleToolbar();
}
isLoaded = true;
}
}
}

run a Js script bot every time that a page is loaded

i'm new in firefox add-on dev
I'm triyng to run a contentscriptScript in a active tab which click on a random link into the tab, it's works
But i'm trying to repeat this operation in the new webpage in an endlessly way, like a kind of WebBot.
i dont know if i have to implement this setting in the contentScript or in the Main.js , SetInterval and SetTimeOut seems to doesnt work.
Here the ContentScript.
var webs = []; // all links
var l = document.links; //get all links
var unwebs; //new WebPage
function browse(){
// find links
for(var i=0; i<l.length; i++) {
webs.push(l[i].href);
}
//pick a random link
unwebs = webs[Math.floor(Math.random()*webs.length)];
}
function clickLink(){
//redirection
window.location.href = unwebs ;
}
$(document).ready(function(){
browse();
clickLink();
}
thank you.
See the tabs docs
main.js
var tab = require('sdk/tabs').activeTab;
tab.on('ready', function() {
//attach content script with tab.attach
});

Execute javascript only in specific url

I have an external JS file with inside this code:
var mobile_number_param = document.getElementById('mobile_number_param');
mobile_number_param.maxLength = 9;
mobile_number_param.readOnly = true;
var email = document.getElementById('email');
email.readOnly = true;
var user_notes = document.getElementById('user_notes');
user_notes.maxLength = 90;
var admin_notes = document.getElementById('admin_notes');
admin_notes.maxLength = 90;
Now my goal is to apply the code related to "mobile_number_param" but ONLY when I'm on the "reserve.php" page otherwise I'm not allowed to modify my Mobile Phone number in other area such my profile page.
Somebody told me this:
You can recognize the current url by checking window.location.href and e.g. searching for reserve.php to know you're on the reservation page..then apply your code.
Unfortunately I'm not a coder and don't have any idea how to do.
Any suggestions ? Thank for your time...
if (window.location.href.indexOf('reserve.php') != -1) {
// do stuff for reserve.php page here
}
Just add the following function in your external JS File:
function myFunction(pagename) {
var pageurl = window.location.href;
var pg = pageurl.split("/"); /*SPLITS THE URL ACCORDING TO DELIMINATOR "/". Eg x/y/z/reserve.php pg[0]=x,..pg[3]=reserve.php*/
var pgname = (pg[pg.length - 1]);
if (pagename == pgname) /*check whether the current page is reserve.php or not*/
{
return true;
}
return false;
}
Calling the Function:
if (myFunction("reserve.php")) {
/*Yes reserve.php page*/
} else {
/*Not reserve.php page*/
}
Server sided you could read the HTTP referer field.
If it contains reserve.php include the one js else an other js.
If you prefer to use only one js you could wrap the fucionality into a function.
called from reserve.php with parameter 1, from other pages parameter 0
or else.

Categories

Resources