jsFiddle blocks any code containing 'window.location.href = ...'? - javascript

I was working on a fairly large prototype in jsFiddle (which I've used many times for a similar purpose), and got an unpleasant shock when I hit the 'Update' button only be sent straight to http://jsfiddle.net with a completely empty code editor.
Luckily hitting 'Back' in the browser was sufficient to recover the lost code. But I quickly found that my code could not be saved, and that the problem didn't seem to affect any other bit of code on the site.
After a lot of trial and error, I determined that the code could not be saved due to the following benign-looking line:
window.location.href = "/u/deleteReport?reportId=" + reportId;
In fact, it appears that it's impossible to save any code (not even the most trivial of examples) on jsFiddle that contains window.location.href.*=.*;. I'm a bit surprised by this fact, and wondering if anyone knows why this limitation exists? It seems somewhat arbitrary and also entirely ineffective, as things like window["location"].href = "..."; are still allowed.
Here's an example; the following code can be saved in jsFiddle without any problems:
var path = window.location.href;
$("a").click(function(e) {
window["location"].href = path;
});
...while trying to save this equivalent code will dump you straight to the jsfiddle index page:
var path = window.location.href;
$("a").click(function(e) {
window.location.href = path;
});
Refer this Fiddle
Does anyone know of an explanation for why this happens?

Related

What could be causing: "Uncaught TypeError: this.captcha_ip.form.submit is not a function" in this (downloaded) javascript?

I'm a total noob to javascript and also this is my first time doing anything but reading this website so maybe I have gone about this all wrong. I've been using PHP+HTML as a hobby for almost 20 years for basic, static websites, but for an M.Arch university project I decided to build a website for a zine, which includes a contact form where I'd like people to be able to submit articles and attachments.
I downloaded an example form and reskinned it to fit the site, but for some reason, the javascript - which I haven't altered in any way - doesn't seem to work. The source website ( https://html.form.guide/contact-form/contact-form-attachment/ ) doesn't seem to have a contact form for me to ask them what's what, and a bit of googling and looking through other stack overflow questions isn't helping, possibly because I don't know enough about javascript to even have the right keywords.
When I inspect the form in my browser, clicking the submit button brings up this error:
Uncaught TypeError: this.captcha_ip.form.submit is not a function
at FG_CaptchaValidator.OnSuccess (fg_captcha_validator.js:42)
at _OnSuccess (fg_captcha_validator.js:120)
at XMLHttpRequest._StateHandler (fg_captcha_validator.js:143)
Here's the function in the downloaded javascript (I really have absolutely no clue where to even begin to bugtest something like this) that the line is part of:
function FG_CaptchaValidator(captcha_ip,captcha_img)
{
this.captcha_ip = captcha_ip;
this.captcha_img = captcha_img;
this.validatedCode=''
this.validate = function()
{
if(this.validatedCode.length==0 ||
this.validatedCode != this.captcha_ip.value)
{
this.ValidateOnline();
return false;
}
else
{
return true;
}
}
this.OnSuccess = function()
{
var msg = this.GetResponseText();
if(msg == 'success')
{
this.validatedCode = this.captcha_ip.value;
if(this.captcha_ip.form.onsubmit())
{
this.captcha_ip.form.submit();
}
}
else
{
sfm_show_error_msg(msg,this.captcha_ip);
document.error_disp_handler.FinalShowMsg();
}
}
this.ValidateOnline = function()
{
var url = captcha_img.src;
var postStr = this.captcha_ip.name + "=" +
encodeURIComponent( this.captcha_ip.value )+'&fg_validate_captcha=y';
this.Init('POST', url);
this.Send(postStr);
}
}
I hope there's something obvious that's just slightly off in this code, because I really don't know where to start with javascript. I know it's a bit like PHP, lots of similar functionality, just at different ends... but the actual syntax..?
If it's not this code, then perhaps I've messed something up in my reskin of the contact form itself, or the way the scripts are included, or, I don't know.. Any guidance would be appreciated!
EDIT TO BRING STUFF IN FROM COMMENTS/ELABORATE: Within my <head> section for every page I bring in metajava.php: <?php require("metajava.php"); ?> within that file I have the scripts included (amongst others): <script type="text/javascript" src="scripts/gen_validatorv31.js"></script> <script type="text/javascript" src="scripts/fg_captcha_validator.js"></script>
I think these two scripts must be getting included correctly, or the browser's inspection console (I use Brave) wouldn't be pointing me to the proper line of the script in the error, and the scripts wouldn't show up in the sources tab(?)
I don't get any 404 errors; the form simply does not submit or appear to do anything unless I'm inspecting the page and see the console error. If I click submit once (with the inspect console open) I get the error I quoted at the beginning, and if I slam it repeatedly like the migrainous bean I am lately, I get a 500 error.
I've also done a little test of the PHP includes by way of adding
echo "filename-for-each-required-include.php included"; to each php include with the title of the file, and they all come in at the top correctly, though it breaks the captcha so I've removed it again now that I know they're working.
I still wonder if it's a javascript syntax thing that I'm not picking up bc I don't know anything really about javascript. I have modified a few simple scripts before but it was VERY trial and error and this is such a complicated looking expression I don't know where to start - is it even meant to be a function?
PS: Thanks for literally YEARS of solving my problems without my even needing to sign up and ask <3

What is a way to add a delay to a pre-existing redirect code

As someone completely new to javascript (my experience doesn't go past a mastery of CSS), can someone tell me if there is a way to add a delay to this exact redirect code by adding something into it, and can you pretty please show me how to do it as though I am an infant child who knows nothing because I am very, very inexperienced at javascript, and very, very confused.
<script>
//redirect to new blog
var path = window.location.pathname;
window.location.replace('http://newurl.tumblr.com' + path);
</script>
All other questions on this topic seem require a stronger foundation of understanding of javascript than I have, or the code they're showing doesn't bear much resemblance to the one I'm using, and I find myself getting confused and lost when I read them. Questions like this one do have answers that seem simple enough, but since the new url is mentioned in the timeout code, I'm uncertain if that would effect the code I currently have, which I prefer because it redirects people to the corresponding pages of my blog instead of just to the homepage. Since that question and others like it confuse me that way, I'd appreciate any help with those concerns borne from my inexperience in mind!
You would do setTimeout()
Try this and see if it works for you:
<script>
//redirect to new blog
var path = window.location.pathname;
setTimeout(function(){
window.location.replace('http://belladxne.tumblr.com' + path);
}, 3000);
</script>
If I'm understanding correctly...no, this code should not affect the URL replacement, since you're just grabbing the pathname of the current URL you are on.
Combining your example code and the suggested answer from the linked question using setTimeout
<script>
//delay in seconds:
var redirectDelay = 5;
//redirect to new blog
var path = window.location.pathname;
setTimeout(function() {
window.location.replace('http://belladxne.tumblr.com' + path);
}, redirectDelay * 1000);
</script>
I've also added the variable redirectDelay so that you can easily tweak the delay until you find the delay time that fits what you're wanting.
here
setTimeout(function() {
var path = window.location.pathname;
window.location.replace('http://belladxne.tumblr.com' + path);
}, 2000); // <- this is the delay, 2 seconds

Push error while using javascript & PHP

I did try to find solution by myself and tried to fix it but without any good result. I assume it's probably something easy to fix but I got confused and decided it will be better to ask some more advanced people.
I am trying to do some small easy clicking game using javascript (+YUI library, JSON) and everything was fine the code was working, everything is ok as far as I was just using it as .html and simply opening the index.html by my browser (code in code.js and then index.html calling the script) but then I tried to upgrade it and make it to PHP and still everything looks alright till the momment when I launch my "website" by xampp and go to it by localhost, everything looks good and most of the code/website is working but by some reason one main function instead of working is giving me huge amount of text (It was not showing me everything, but this is what Firebug gave me):
<p id="add">function (a){this.push.apply(this,a);return this;}function (d){if(this.length<3){return null;}if(this.length==4&&this[3]==0&&!d){return"transparent"; }var b=[];for(var a=0;a<3;a++){var c=(this[a]-0).toString(16);b.push((c.length==1)?"0"+c:c);}return(d)?b:"#"+b.join("");}function (b){if(this.length!=3){return null; }var a=this.map(function(c){if(c.length==1){c+=c;}return c.toInt(16);});return(b)?a:"rgb("+a+")";}function (){for(var b=0,a=this.length;b</p>
The above code is not mine, it is the output of an "error" I have when I press the button to get credits, I do not have such lines nowhere in my source code and it is cut off at the end because it shows to me this way (firebug gave me whole part as stated above)
I don't have such lines in my code and this happens when for example I want to click on a button that will give me credit by clicking onto it (clicking game, You click on the button it will give You credit):
function credit() {
var a = game.credit+=100;
document.getElementById("add").innerHTML=Fix(a);
}
Do I have this problem because I need to use some other function/rewrite my code for PHP ? Or is it because I need to use some push function, or do I have something wrong with my apache? Or it's because of the document.getElementById and I should write it differently while using PHP?
Ps: game.credit because it's using different function too, and Fix(a) because it's using other function to beautify the result. Every other functions are working, only the ones that are responsible for adding the credit are showing me this text.
This is Fix function:
function Fix(what){
var str='';
what=Math.floor(what);
what=(what+'').split('').reverse();
for (var i in what) {
if (i%3==0 && i>0) str = ','+str;
str = what[i]+str;
}
return str;
}
#Edit
Ok I just did check it and it's this Fix function causing problem, everything works fine when I do not use it (for example I do: "document.getElementById("add").innerHTML=a;"). So what's wrong with this fix function, can someone help me make it work? This function is changing the numbers in example 1000 to 1,000 and not allowing it to be like 503.0203

Chrome JavaScript location object

I am trying to start 3 applications from a browser by use of custom protocol names associated with these applications. This might look familiar to other threads started on stackoverflow, I believe that they do not help in resolving this issue so please dont close this thread just yet, it needs a different approach than those suggested in other threads.
example:
ts3server://a.b.c?property1=value1&property2=value2
...
...
to start these applications I would do
location.href = ts3server://a.b.c?property1=value1&property2=value2
location.href = ...
location.href = ...
which would work in FF but not in Chrome
I figured that it might by optimizing the number of writes when there will be effectively only the last change present.
So i did this:
function a ()
{
var apps = ['ts3server://...', 'anotherapp://...', '...'];
b(apps);
}
function b (apps)
{
if (apps.length == 0) return;
location.href = apps[0]; alert(apps[0]);
setTimeout(function (rest) {return function () {b(rest);};} (apps.slice(1)), 1);
}
But it didn't solve my problem (actually only the first location.href assignment is taken into account and even though the other calls happen long enough after the first one (thanks to changing the timeout delay to lets say 10000) the applications do not get started (the alerts are displayed).
If I try accessing each of the URIs separately the apps get started (first I call location.href = uri1 by clicking on one button, then I call location.href = uri2 by clicking again on another button).
Replacing:
location.href = ...
with:
var form = document.createElement('form');
form.action = ...
document.body.appendChild(form);
form.submit();
does not help either, nor does:
var frame = document.createElement('iframe');
frame.src = ...
document.body.appendChild(frame);
Is it possible to do what I am trying to do? How would it be done?
EDIT:
a reworded summary
i want to start MULTIPLE applications after one click on a link or a button like element. I want to achieve that with starting applications associated to custom protocols ... i would hold a list of links (in each link there is one protocol used) and i would try to do "location.src = link" for all items of the list. Which when used with 'for' does optimize to assigning only once (the last value) so i make the function something like recursive function with delay (which eliminates the optimization and really forces 3 distinct calls of location.src = list[head] when the list gets sliced before each call so that all the links are taken into account and they are assigned to the location.src. This all works just fine in Mozilla Firefox, but in google, after the first assignment the rest of the assignments lose effect (they are probably performed but dont trigger the associated application launch))
Are you having trouble looping through the elements? if so try the for..in statement here
Or are you having trouble navigating? if so try window.location.assign(new_location);
[edit]
You can also use window.location = "...";
[edit]
Ok so I did some work, and here is what I got. in the example I open a random ace of spades link. which is a custom protocol. click here and then click on the "click me". The comments show where the JSFiddle debugger found errors.

function call does not return to calling function

I'm using Shadowbox.js to display a slideshow on a website.
This slideshow shows several pictures and I would like to know who's looking at what pictures.
For this purpose I'm using statcounter.com.
Shadowbox offers a so called hook to call a function when the slideshow opens and when it changes to another picture.
I've written a small piece of code to get things moving, but for some reason, I get an entry in my statcounter log, but the shadowbox does not appear.
When I don't use the onopen and onchange in the options, the shadowbox does display.
As a test you can set up a directory where you place below code. Create to subdirs in this directory called "sb" and "pix". Get the Shadowbox-application from the website and store it in the "sb" directory (http://shadowbox-js.com/download.html).
Next to that store 3 testimages (called image1.jpg, image2.jpg and image3.jpg) in the "pix" directory.
To check if statcounter is picking up the pictures, you can use my testaccount on statcounter.com (just for viewing: account testcase, password casetest1).
Please find the html with the code here: http://www.heres-online.nl/test/index.html
Please take into account, I only just starting in javascript and html programming.
I can imagine I'm overlooking something terribly simple ...
Any help is highly appreciated.
Instead of trying to insert an image tag that way, just make one:
var img = new Image();
img.src = "... tracker URL ...";
That's all you need to do. edit Also get rid of all those backslashes in your URL strings; there's no point to them.
edit again I think this is all you need:
var nonsense = 1;
function tracker() {
var img = new Image();
img.src = "http://c.statcounter.com/counter.php?sc_project=5981755&security=582aa718&invisible=1&u=" +
encodeURIComponent("http://my.pix/" + Shadowbox.getCurrent().content) +
'&nonsense=' + new Date().getTime() + '_' + nonsense++);
return true;
}
(added a "nonsense" parameter to try and overcome possible caching issues)
edits — OK note the "return true" and the change of "escapeURIComponent" (wrong) to "encodeURIComponent". (I always get confused because the old deprecated function was called "escape".)
Please hold your horses on my last comment. I made a mistake myself (typo).
Instead of encodeURIComponent I typed enocdeURIComponent (why not copy/paste ... yeah, well I just didn't).
The script is now doing exactly what I intended it to do. I know have a Statcounter entry for every picture in the slideshow! Superb. I'm very pleased with your help, this was really nagging me, not being able to get it running. And the speed of getting an answer here was really amazing!
I've posted your solution on the Shadowbox.js forum as well. I posted my question there too, but no answers yet. But for anyone strugling with the same issue, this solution might be helpfull.
Thanks again, and have a nice weekend!

Categories

Resources