I am working on a webapp for a school project that uses JQuery, along with some of my own JS code. There seems to be a strange tendancy across the site for the browser (regardless of if I use firefox or chrome) to be redirected back to the main page (index.html).
For example, I have a page called create.html which includes JQuery and has a button defined as follows:
<button onclick="addEmail()"type="create" class="button button-block"/>+</button>
the addEmail function does not include any code to redirect or otherwise change the page. Even when the onclick attribute is removed entirely the browser ends up back on the index.html page once the button is clicked. The index.html page also does not render correctly when it is loaded in this manner. We have the following includes in the create.html file:
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="js/create.js"></script>
The files are hosted on an apache server as well.
Thanks,
Ryan
Related
So I made a page that utilizes some javascript and also loads a js file. However, I need to move that code to a template file. When I do so, that script tag and the file are not loaded. And I don't get any error messages during page load in the browser, the file does not exist in browser, and there are no build errors or log messages. Here are snippets of code.
The following works in my "addUser.jsp" file.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<script type="text/javascript" th:src="#{/resources/js/selectListSort.js}"></script>
</head>
<body>
...
<script th:inline="javascript">
// several event listener loaders
</script>
</body>
But when I move it to my officeAccess.jsp file, it fails to load.
In addUser.jsp, I make the call:
<div th:replace="administration/fragments/officeAccess :: officeAccess ( userForm = ${userForm} )"></div>
All the html in officeAccess is loaded as expected, just the javascript and file fail to load.
From everything I've researched, what I'm trying to do isn't possible.
Since I'm loading the template, the new code is loaded in the body and belong outside the body. Or... they're ignored when loaded via the template engine. I'm not sure which.
In any case, I'll just load the scripts in the parent page as needed for the templates (since this does work).
I have a php based webpage and inside it iframe with another webpage. Parent contains list of items, and iframe contains page that will add/edit the list, save it to DB and send a js message to parent page (list) to update list without reloading parent page (a litle bit more complicated then that, but that is the core idea).
//html parent page basic content
<head>
<script>
function alert_me(){
alert('IT\'S ALIVE!');
}
<script>
</head>
<body>
<iframe src='child_page.html'></iframe>
</body>
And now the child page.
<head>
<script>
$(document).ready(function(){
//this is not working and this is what I want (auto call function after reload child)
window.top.alert_me();
//I tried autoclick button but it's not working either
$('.alert_me_button').trigger('click');
});
</script>
</head>
<body>
<!-- this is working just fine, so I know the code itself is ok -->
<a href="#" class="alert_me_button" onclick="window.top.alert_me();" >Click me to alert me</a>
</body>
As you see It works fine when user click the button callij js funtion, but it will not work the I don't want any user action. I triend , documnt.ready()... even setInterval() to pause the script to be sure it's not timing issue. Any ideas?
The code works just fine.
What browser are you using. I just copied your code and added jquery from cdn. I used SimpleHttpServer to serve the pages and avoid the cross origin blocking.
After reloading I got the message twice both in Chrome and Firefox as well.
I'm working on a Wordpress site that was built using Visual Composer. I'm trying to embed a Hubspot form, which is something I have done numerous times but never using VC. I figured it would be as simple as adding a "raw html" block in VC and adding the form embed script.
This does indeed load the form, however it is displayed on the bottom left of the screen instead of the right column where it was set. However, if the page is refreshed, it displays as it should, no problems. This makes me think the script is loaded after the rest of the page is loaded.
I have tried creating a shortcode for the script and inserting in the VC section. Does not work.
You can see the issue here:
http://yourveininstitute.com/leg-swelling/
( form loads at the bottom of page and loads correctly on refresh )
The HS embed code looks like this ( portal and id redacted ):
<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
css: '',
portalId: '######',
formId: '#################'
});
</script>
I could really use some help on this one. I'm spinning my wheels.
I'm seeing a hubspot form loading correctly in the sidebar, even on the first load. Are you still experiencing the problem? If so, I might try enqueueing the external script call, and only putting the hbspt.forms.create stuff in the VC block.
Try adding this to your functions.php file:
add_action('wp_enqueue_scripts', 'add_hubspot');
function add_hubspot() {
wp_enqueue_script('hubspot', '//js.hsforms.net/forms/v2.js');
}
I wanted to use the loading page from here http://www.gayadesign.com/diy/queryloader-preload-your-website-in-style/
because the personal website I was making is very poorly optimized and loads quite slowly
The loading page works fine if I make it a seperate page and then redirect to my home page like so:
http://matthewpiatetsky.com/cs103/demo/demo.html
However, I have also tried adding this same animation when I go directly to the page, and it does not work. I think this is because of the other js files present in the document.
http://matthewpiatetsky.com/cs103/
In the redirecting page the script is located here and it works.
http://matthewpiatetsky.com/cs103/demo/js/script.js
In the actual page the script is located here and it doesn't work.
http://matthewpiatetsky.com/cs103/js/matthew.js
The script declarations in the actual page look like this, so this script is called last. Calling it first breaks the page, so I'm guessing the 5-grid js is the problem.
<script src="js/jquery-1.9.1.min.js"></script>
<script src="css/5grid/init.js?use=mobile,desktop"></script>
<script src="js/jquery.formerize-1.1.js"></script>
<script src="js/init.js"></script>
<script src="path/to/file/jquery.queryloader2.js" type="text/javascript"></script>
<script type="text/javascript" src="js/matthew.js"></script>
It looks like you are missing a plugin. Your code tries to use the QueryLoader2 plugin on line 19 of Matthew.js, but you don't have this plugin included on your page.
I am creating a personal website.So,its a very lightweight website!
The website uses jquery heavily.So if target browser doesn't have javascript enabled,my website would not work.
To resolve this issue I used this html
<html>
<head>
<script>
window.location.href="javascriptEnabled.html";
/*Since javascript is enabled redirect to javascript based page*/
</script>
</head>
<body>
Showing Static Website since javascript is not enabled..
</body>
</html>
As you can see,I am redirecting to javascript enabled page if the target browser supports it.
But if javascript is not enabled,the script would not work and then static html would be loaded which is in body tag!
I have two questions.
1>Is this the best way to resolve javacript-no javascript issue browser issue?
2>If I use window.location.href and the browser is javascript enabled,would it download the full page or would it stop at window.location.href?
To keep things simple, yes it's an OK idea. You can load content with <noscript> tags
As soon as the browser hits that window.location.href it will start redirecting, but it will still download all DOM. Browsers download all Document then it will start to render.
You can use: <body onload="document.body.style.display = 'none';"> to hide it's contents until redirect occurs.