Develop Reference

JavaScript Redirect In Drupal Does Not Redirect Out of iFrame

I am trying to breakout of an iFrame after a form is submitted. After the form is submitted it should end up at example.org/thankyou, for example. I have tried various options but I think the best way to do it is to navigate to a controller and then have that controller load JavaScript for the redirect.
I have tried both window.parent.location.href = "https://example.org/" and window.parent.location = "https://example.org/" in the JavaScript and neither of them work. They do not appear to do anything. There are no JavaScript errors in the Chrome DeveTools.
My custom JavaScript that I am loading in the controller is in the JS that is delivered when the page is loaded. This is verified by loading the JS file through the ChromeDevTools.
The code is loaded at the end of the HTML document. I am almost wondering if this is being called to late in the page render process.
Any help is greatly appreciated.
Thanks!

Jquery not loading on normal refresh

Javascript and Jquery is not loading on normal page refresh, but loads correctly on hard refresh (CTRL+SHIFT+R) and Incognito.
I'm calling the functions through window.onload:
window.onload = function() {
adddata(); adddata_pages();
adddata_views7();
adddata_pages7();
adddata_views1();
adddata_pages1();
};
And I'm including the Jquery files in this order in the head of html:
jquery.min.js , bootstrap.min.js , Chart.min.js , jquery.dataTables.js.
And in the end (before closing body tag) I'm calling my external js file which has all my functional code.
Can please anyone help as where I'm going wrong or what is the solutions for this?

Load your external js file inside document ready tags. jQuery has to be first in load order.
$( document ).ready(function() {
//load here your file
});

It is depends on your IDE in NetBeans you should refresh the cache to see the changes. Because refreshing page is not helping at all.Alternative solution is that you could use nodejs which uses auto refreshing when typing.

Hugo: Javascript commands not working till after reloading the page

I am working on a Hugo Static Site Generator theme, the problem is that the Javascript features don't load unless I reload the page
e.g
Before reloading the page
After reloading the page
This is the code, I used in adding the new class
$(document).ready(function() {
$('h2').addClass('hello')
});
Now, the problem is that since it is a static site generator when opening a new page, it will not refresh/reload the site, but load the page like a cached page. therefore most of the javascript features only apply once unless the page is reloaded. The problem is also experienced when I am using VueJs on the theme, Which means, I need to find a way to force load a new URL, instead of it loading like an anchor link.
UPDATE: I have been able to resolve it, The problem was from another javascript file, making an ajax get request
Thanks

Did you debug or add console.log inside your ready function to see it can reach there? I am suspecting that your h2 is rendered by js and at the time your code to add class hello that h2 is not rendered yet.
If this is the case I think you need to render html at server first or you can include your script in the same place as your components

Changes made from js files are not being rendered and cannot be debugged

I have a html page (inicio.html) which loads some js scripts. Then from a js script there is a navigation to another page in a different html file (test.html) and a different set of js files.
The problem is that when I do the changePage ($.mobile.changePage("test.html");) and the new page is loaded the new js files are kept in files like
http://localhost:8080/cdmWEB/resources/scripts/jquery/2.0.3/jquery-2.0.3.min.js/eval/seq/2
The js functions are being executed because the console.log messages in them are shown. But the changes the js scripts should do in the page are not rendered and the js cannot be debuged (using firebug).
I am loading the js scripts with the tag in the html file, but I have also tried the $.getScript function with the same result.
I am using jQuery 2.0.3 and jQuery-mobile 1.3.1.
From what I saw the reason why the js files are kept like that is because they are retrieved using ajax. Is there a way to prevent this and retrieve the file "normally"? or is there something I am missing (probably)?

Have a look here:
Jquery Mobile - $.mobile.changepage not loading external .JS files
You should consider loading the needed JS in the main page, and not in the page your changing to.

I ended up using window.open('test.html','_self','',true); to make the transition. This loads the new scripts when the transition is made and the jquery appends keep working fine.

Load User Function before external resources in jsfiddle

I am working on developing a new accordion for my client. Everything is working correctly in my local machine but I am having issue when the same thing is uploaded in jsfiddle.
I found that the issue is because the user defined function is loading after the external js files I have added.
This is my fiddle. http://jsfiddle.net/imsabarinath/rpq2w/12/
In this I have added a user function detectBrowserClass.I have also added 8 external js files and css files via the external resource tab. But when I run the code, it seems that the user function is loaded only after all the external resources are loaded. I inspected with firebug and it clearly shows the user function is loaded after the external resources
Is there any way I can load the user function detectBrowserClass before loading any of the external resources in jsfiddle; means before all the script tags ?

Instead of using the "External Resources" option, you can put the script tags in the HTML field, i.e. add them to the body.