Save and load entire web page state (Visual HTML, And javascript Variables) - javascript

So lately I've been working on this project, which will end at the end of January (end of this week).
http://www.nikollr3.three.axc.nl/ (this is a preview of the program a few months ago, but u get an idea)
We have started testing the website and noticed that it was sometimes making Firefox crash.. since Firefox' error or crash reports were never of any use (no useful information found), I have no idea how to fix this error. And a possible solution would be to have a save / load button on the web page, which can save or load a state (and for example autosave state untill it crashes) then when it crashes you would be able to reload the last state and continue working on the project. By saving a 'state' I mean recreating the EXACT moment as to when the save button was clicked, thus same javascript variable values and same HTML looks.
I have found little things about this on the internet, the only one relevant being for android phones,.. Any ideas or implementations?

write all your variables and "HTML looks" (attributs) to a XML-file. load (if (exist(XML)pseudo-code) all necessary data onPageLoad

Related

Code in Google Tag Manager does not working

I have a test tasks and 2 from 3 I've done.
But this one I don't understand how and what I need to do?!
I managed to find syntax error:
At first should be:
...function someFunctionName() {...}
or
(function() {...})()
...second it's anonymous function...
TASK:
This script is executed in GTM and implemented in Google analytics by custom Task.
The script sends information about user behavior to Optimozg server and then to Bigquery (bq.php file processes and forwards data). Optimozg server data is coming in correctly, but the data in Google Analytics does not reach.
What is the reason?
How do you fix it?
Hint:
(test the code on your site instance with GTM)
function(){return function(tracker){if("undefined"===typeof tracker.get("BigQueryStreaming")){var f=tracker.get("sendHitTask"),h=function(){function d(c){var a=!1;try{document.createElement("img").src=e(!0)+"?"+c,a=!0}catch(k){}
return a}
function e(c){var a="https://test.optimozg.com/bq/bq-test.php";c||(a+="?tid="+encodeURIComponent(tracker.get("trackingId")));return a}
return{send:function(c){var a;if(!(a=2036>=c.length&&d(c))){a=!1;try{a=navigator.sendBeacon&&navigator.sendBeacon(e(),c)}catch(g){}}
if(!a){a=!1;var b;try{window.XMLHttpRequest&&"withCredentials" in(b=new XMLHttpRequest)&&(b.open("POST",e(),!0),b.setRequestHeader("Content-Type","text/plain"),b.send(c),a=!0)}catch(g){}}
return a||d(c)}}}();tracker.set("sendHitTask",function(d){h.send(d.get("hitPayload"));tracker.set("BigQueryStreaming",!0)})}}}
Not sure why JS devs should know anything about GTM. They typically don't go there.
But yes, to understand how to use the given code properly, just read this article: https://www.simoahava.com/analytics/customtask-the-guide/ it describes what custom tasks are and how to use them.
Ok, so first make a GTM account. Deploy the GTM code on your site. May as well use a local site. Or, rather, have the GTM code being injected by a local extension to a random site that doesn't have GTM yet. Or maybe use a redirector extension to redirect the request for their GTM to yours, up to you.
After that, you just make a tag in GTM that would send a Universal Analytics pageview. GA4 decided not to bother with custom tasks, unfortunately, so UA only. Then you make a trigger on pageview. You assign the trigger to the tag. Don't forget to publish the workspace at least once for it to be testable. Then you preview. Preview is a CTA in GTM in top right corner, near the publish. Basically a neat GTM debugger. Enter the site where you have your GTM snippet deployed/injected. Make sure preview sees your tag firing on page load. That would mean you did the preparation correctly.
We're doing the Hint section here, by the way. Now you need to make a custom javascript variable in GTM, paste the code snippet as is in there. The reason why it wants the code in an anonymous function is because it will run it as a closure on it's own. So they kinda remove the need of the extra ()(). It's mostly done for people who don't know JS, so don't be surprised.
Ok, you've made the CJS var, now go to your tag, and set your customTag exactly as Simo shows in his article:
Good, now publish your container, go to the site where you have it deployed, open the network tab and reload the page.
Inspect the calls to the BQ and Optimozg endpoints. Now what they ask is, I believe, why the original call that is meant to be sent by the tag is not being send. So if you remove the setting of the customTask, then publish and reload the page, you should see a request to the collect endpoint, which is the GA's endpoint for data tracking. If you re-add the customTask code, it will prevent the normal tag's functionality from execution, so no collect call.
What they want to hear from you is how to make the tag fire the original event alongside their optimozg and bq calls.
Most likely, the answer is pretty simple and elegant, but requires a lot of debugging to reach to. Reading Simo's article will help understanding the significance of setting various tasks.
Uh, ok, I didn't mean to really debug it, but it looks like I found the bug. It's in the var f = tracker.get("sendHitTask") It's being used to store the original sendHitTask function, but it never gets used. Why is that? Basically, you just need to call the function in the new sendHitTask function that you set in the last line. I'm not going to debug it in my GTM, but I'm pretty sure that's the issue. It's kinda begging to be found there.
Also, this is not quite a junior JS dev task. It's a senior tracking implementation task. Basically, about $110/hr in Canada and US. Junior JS devs are around $35/hr, I guess. They're just trying to save money, heh. I was thinking of hiring junior JS devs instead of tracking implementators too, but it's hard to teach how data analysis works in all the different tools.

Same JavaScript code behaves differently in two different environments

I had a working jQuery Progress Bar code (http://jqueryui.com/progressbar/) in a huge web site until a new release crashed it with error "Uncaught TypeError: Object [object Object] has no method 'progressbar'".
I identified the root cause as jQuery being added more than once which somehow happened during the release process. Many other places on the website, for example, where jQuery Chosen (http://plugins.jquery.com/chosen/) was used, crashed as well.
I managed to fix it using jQuery.noConflict(); before the problematics calls and everything went back to peace. New release to the production environment and everybody's happy.
Turns out though that everything else but the jQuery Progress Bar is fixed. To make it even more fun, I went back in my testing environment and absolutely everything is working there, including the Progress bar.
I compared all the files on the server with those in my test environment and the code is exactly the same. All other JavaScript works with no problems on the server but the jQuery Progress Bar would only continue to work in my test environment but not in Production where the "Uncaught TypeError: Object [object Object] has no method 'progressbar'" persists. Any ideas or hints what could be the issue?
This type of errors occur not because conflicts, but because by the time your html loads, jquery starts executing., and find null reference to which you are trying the ui. The best way to do is, put the <script> tags at the end of the document. Then, probably, your html would have been loaded, and the object to which you attached the progressbar will be ready to be attached to.
And, Since our test environments are local, script files will be local and load instantly which is not the case with production and you can not be sure of different people's bandwidths. And, these things sometimes work to fool us as they do with cached files, for the second time onward, but may not work for every client as well.

ASP.NET get variables from Crystal Report not transferring properly to external application

I have a Crystal Report that redirects to another application URL and includes get variables in the link. For some reason those variables disappear when the page loads in the second application, and I'm not sure why.
When I view the source of the Crystal Report output, here is an example link:
GLASS BLOWING SHOP
When I plug this into an html decoder to make sure it's correct, I get this result:
javascript:parent.bobj.event.publish('hyperlinkClicked','CrystalReportViewer1__UI','target=_self&url=/intranet/API_PriceInc_Ltr/Start.aspx?slmno=ZZZ&cusno=7597&venno=50065&cutoff=08/01/2013&increase=.01&shipaddr=773&effective=08/05/2013&slmname=XXXX')
The above string works perfectly when I plug it into the web page URL bar manually(adding the server IP, of course.) However, when I click on the link from the Crystal Report, I get this instead:
http://SERVER-IP/intranet/API_PriceInc_Ltr/Start.aspx?slmno
For some reason everything after the name of the first variable gets cut off. Any suggestions as to why?
Same problem here, upgrading from Crystal Report 9 to 13 and .NET 1.1 to 4.0.
My link is build by a format formula (format editor, tab "hyperlink").
Solution: I had to change something in the formula and save ist again.
You don't need to change something specific. Add a blank or anything. Just re-save the formula with the Crystal Report 13 editor.
Possible you first have to upgrade your Crystal Report to the newest servicepack, like mentioned in the links from Ben's answer. Not sure because I found the solution with re-saving after I upgraded.
Turns out this is a known bug that was documented ~3 years ago on the SAP webpage. Their support said it was resolved with an update, the poster came back stating that the issue was still present, and then there was never another response.
Here is the initial thread documenting the issue: http://scn.sap.com/message/9553393
Here is my thread bringing the issue back up (hopefully to resolution): http://scn.sap.com/thread/3416821

Page refresh in case of javascript errors

I have some pages running javascript for displaying updates of different measure values. These stuff seems to run fine. But - there is always the risk that javascript can crash in case of a fault (especially after running some hours)
So I want to implement a simple kind of watch dog. One of my ideas is to use a meta-refresh-tag. The Browser will reload the site after xy minutes and all javascripts will be reinitalized.
Of course I do not want to refresh the site if no error occured and want to reset the refresh timer using javascript. As long js runs the timer will be resetted periodally. If javascript crashs the meta-refresh-timer counts down to zero and the page will be reloaded.
Reading stackoverflow postings I have found some answers that says a reset of the meta-timer by javascript is not possible. Do you know a better way to implement the watchdog? Using javascript ittself for refreshing is useless: If the script crashs it will never fire a reload event..
Ideally you should properly handle the error instead of just reloading the page. However you could use the window.onerror event like this:
window.onerror = function() {
location.reload();
}
More information about onerror here:
https://developer.mozilla.org/en/docs/DOM/window.onerror

HTML Offline Application Cache, Listing Downloaded Files

As part of a loading screen for an offline-enabled web application I'm building (using a cache manifest), I'd like to display an accurate progress bar that lets users know which files has thus far been downloaded and which are still pending. Something like the following:
Loading...
/assets/images/logo.png: loaded
/assets/images/splashImage.png: pending
I know that I can use the cache "pending" event, but I don't see that the event arguments have any data associated with them.
Is there any way to do this?
There is a progress event that gets triggered when each file downloads, however its payload does not include the file name in any browser that I've tested with (Chrome, Safari, FF beta). Chrome displays the file name in the Console (though as far as I know it's inaccessible to JS), but neither Safari nor FF even go that far. And from what I've seen, the files do not download in the same order that they're listed in the manifest, so there's not even a way to generate an ordered list then knock them off one at a time.
So in answer to your question, no, there isn't any way to do this right now. It's possible that in the future the progress event will include the filename - at least in some browsers - but right now this isn't possible.
I should add that in Chrome (not in Safari or FF) you can at least get a count of files to be downloaded, allowing you to at least calculate an accurate progress bar. To get this in Chrome you'd use the following:
function downloadProgress(e) {
totalfiles = Number(e.total);
}
window.applicationCache.addEventListener("progress", downloadProgress, false);
However this will error out in other browsers, so you need to wrap a try/catch or some other method (typeof(e.total)) to avoid the error.
This is a few years late, but maybe it'll help someone else who's researching this.
It doesn't list the files or anything, but it shows an accurate(ish) progress bar based on the total number of files loaded. It may still need a little work...
https://github.com/joelabeyta/app-cache-percent-bar

Categories