I have an ASP.net MVC 4 web application (Visual Basic). On the _Layout.vbhtml shared view I have a small bit of javascript at the very bottom of the code designed to hide a loading div and display the main page content once everything has loaded.
Here is part of the .vbhtml file:
<!-- JQuery & Javascript Loading -->
#Scripts.Render("~/bundles/jquery", "~/bundles/jquerymain", "~/bundles/bootstrap", "~/bundles/lib", "~/bundles/gebo_dashboard")
#RenderSection("scripts", required:=False)
<!-- Close loading page -->
<script type="text/javascript">
$(document).ready(function () {
//* show all elements & remove preloader
alert("Hello Ready");
setTimeout('$("html").removeClass("js")', 1000);
});
</script>
</div>
</body>
And here is the produced html:
<!-- JQuery & Javascript Loading -->
<script src="/Scripts/jquery-1.7.1.js"></script>
<script src="/Scripts/jquery/jquery.ui.touch-punch.js"></script>
<script src="/Scripts/jquery/jquery.ui.totop.js"></script>
<script src="/Scripts/jquery/jquery.easing.1.3.js"></script>
<script src="/Scripts/jquery/jquery.debouncedresize.js"></script>
<script src="/Scripts/jquery/jquery.cookie.js"></script>
<script src="/Scripts/jquery/jquery.qtip.js"></script>
<script src="/Scripts/jquery/jquery.colorbox.js"></script>
<script src="/Scripts/jquery/jquery.jBreadCrumb.1.1.js"></script>
<script src="/Scripts/jquery/jquery.actual.js"></script>
<script src="/Scripts/jquery/jquery.imagesloaded.js"></script>
<script src="/Scripts/jquery/jquery.wookmark.js"></script>
<script src="/Scripts/jquery/jquery.mediaTable.js"></script>
<script src="/Scripts/jquery/jquery.peity.js"></script>
<script src="/Scripts/jquery/jquery.flot.js"></script>
<script src="/Scripts/jquery/jquery.flot.pie.js"></script>
<script src="/Scripts/jquery/jquery.flot.resize.js"></script>
<script src="/Scripts/bootstrap/bootstrap.js"></script>
<script src="/Scripts/bootstrap/bootstrap.plugins.js"></script>
<script src="/Scripts/lib/jquery-mousewheel.js"></script>
<script src="/Scripts/lib/antiscroll.js"></script>
<script src="/Scripts/lib/fullcalendar.js"></script>
<script src="/Scripts/lib/ios-orientationchange-fix.js"></script>
<script src="/Scripts/lib/list.js"></script>
<script src="/Scripts/lib/list.paging.js"></script>
<script src="/Scripts/lib/prettify.js"></script>
<script src="/Scripts/lib/sticky.js"></script>
<script src="/Scripts/gebo/gebo_common.js"></script>
<script src="/Scripts/gebo/gebo_dashboard.js"></script>
<!-- Close loading page -->
<script type="text/javascript">
$(document).ready(function () {
//* show all elements & remove preloader
alert("Hello Ready");
setTimeout('$("html").removeClass("js")', 1000);
});
</script>
</div>
</body>
When I load up the page and view it in a browser, the $(document).ready function never fires and so leaves the loading div visible.
I have tested the script section by placing an alert outside of the $(document).ready function, both before and after and the alerts fire of exactly the way I'd expect them to. However the alert inside of the $(document).ready function never shows, indicating that the function never runs.
I have also tried using the pageLoad() function with no luck too.
Does anyone know why this refuses to work?
Ah, i've just found the issue. I've been porting a template into my ASP.net project and there was a single javascript error on the page according to Firebug. Not sure how I missed it, but solving the error has fixed the issue. :)
Related
I have a website under construction with an external script from phpjabbers.com, it only loads when I refresh the page. I tried searching for a solution but nothing seems to work. The console in FF didn't give any errors.
The website is http://www.lowie-design.be/test/salon/index.html,
then you can click the menu-button and then 'Verhuur'.
When you go directly to the page http://www.lowie-design.be/test/salon/verhuur.html it works fine.
The script is included on this way within the body where it should appear:
<script class="verhuur-script" type="text/javascript" src="http://www.salon-weddings.be/script/index.php?controller=pjFrontEnd&action=pjActionLoad"></script>
Everything works fine after I refresh the Verhuur-page.
Is the second page being loaded by ajax?
When you go straight to the link these scripts are at the bottom
<script src="js/jquery-1.11.1.js">
<script src="js/hammer-v=1.js">
<script src="js/barba.min.js">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js">
<script src="js/MagicScroll.js">
<script src="js/MagicScrollAnimations.min.js">
<script src="js/masonry.js">
<script src="js/main.min-v=1.41.js">
<script type="text/javascript">
<script type="text/javascript" src="http://salon-weddings.be/script/core/third-party/pj_jquery/1.11.2/pjQuery.min.js">
<script type="text/javascript" src="http://salon-weddings.be/script/core/third-party/pj_validate/1.10.0/pjQuery.validate.min.js">
<script type="text/javascript" src="http://salon-weddings.be/script/core/third-party/pj_jquery_ui/1.9.2/js/pjQuery-ui.custom.min.js">
<script type="text/javascript" src="http://salon-weddings.be/script/core/third-party/pj_bootstrap/3.3.2/pjQuery.bootstrap.min.js">
<script type="text/javascript" src="http://salon-weddings.be/script/app/web/js/pjEquipmentRent.js">
When you go via the main menu link, you only get the following at the bottom of the page:
<script src="js/jquery-1.11.1.js">
<script src="js/barba.min.js">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js">
<script src="js/MagicScroll.js">
<script src="js/MagicScrollAnimations.min.js">
<script src="js/masonry.js">
<script src="js/main.min-v=1.41.js">
And the console app is producing "Hammer is not defined" from line 237 on "main.min-v=1.41.js"
A quick fix would be to add all the possible scripts to the main page so extra pages will look fine on ajax load.
An alternative way would be to make the main menu links an absolute link and make page loading do fancing fading in rather than loading a html page in a specific div.
Okay... obviously this is because I am so new. I don't understand why this does not work. I thought this is because the argument its not inside a function but I don't really know.
<head>
<title>Documento sin tÃtulo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
$(function(){
$("p").hide();
});
</script>
</head>
<body>
<p>hi</p>
</body>
It should look like this:
<script src="jquery.js"></script>
<script>
$(function() {
$('p').hide();
});
</script>
First you must load the external Javascript file (like jquery.js) in its own script tags. Then you include your Javascript (or jQuery for this case) in its own script tags.
Your code works!
However, you need to load the JS file first. The function to hide the p should be in its own <script> tag (different one from loading the script)
$(function() {
$("p").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<p>hi</p>
<div>world!</div>
I have the onclick event: onclick="javascript:_stats_content('my_bets');" which works fine.
This loads new content into a div.
However I want to set a default piece of content to load when the page loads. I have attempted to do this with the code below, but it is not working:
<body onload="myFunction()">
<script>
function myFunction() {
_stats_content('my_bets'); // have also tried with 'javascript:' infront
}
</script>
Can anyone provide any solutions?
Thanks.
EDIT:
Upon reading comments, I have added type="text/javascript".
I also replaced with an alert() and it fails to show. I should note that I am using AngularJS to display the page so this might interfere. However the first onclick example works fine on the page, so I don't understand how onload would be any different.
EDIT2: This is an extract of code from the top of the page:
<head>
<script type="text/javascript">
function myFunction() {
alert("Hello! I am an alert box!!");
}
</script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="content/ext/msgbox/Scripts/jquery.msgBox.js"></script>
<link rel="stylesheet" type="text/css" href="content/ext/msgbox/Styles/msgBoxLight.css">
<script type="text/javascript" src="content/ext/qtip/jquery.qtip.min.js"></script>
<link rel="stylesheet" type="text/css" href="content/ext/qtip/jquery.qtip.min.css">
<script type="text/javascript" src="js/colors.js"></script>
<?php include './js/includer.php'; ?>
</head>
<body onload="myFunction()">
I have replaced with an alert to make it easier to troubleshoot, although the alert is still not showing. I think it's just an AngularJS related issue, guess I'll just have to figure this out.
Whilst I wasn't able to get this exact method to work, the reason for which I still have no idea. I imagine it's AngularJS interfering.
I used:
<img src="87.jpg" onload="javascript:_stats_content('my_bets');" width="0" height="0">
Just before the </body> tag and that worked.
I'm trying to install SoundManager's 360Ui player.
But i cant seem to nail it.
This is the jQuery code in my header:
<script type="text/javascript" src="wp-content/themes/medium/includes/js/soundmanager2-nodebug.js" charset="utf-8"></script>
<script type="text/javascript" src="wp-content/themes/medium/includes/js/excanvas.js" charset="utf-8"></script>
<script type="text/javascript" src="wp-content/themes/medium/includes/js/berniecode-animator.js" charset="utf-8"></script>
<script type="text/javascript" src="wp-content/themes/medium/includes/js/360player.js" charset="utf-8"></script>
...
<script type="text/javascript">
//some soundmanager settings
soundManager.url = 'wp-content/themes/medium/swf/';
soundManager.flashVersion = 9;
soundManager.useHTML5Audio = true;
soundManager.debugMode = false;
</script>
And the HTML call:
<div class="ui360">
<!-- dynamically-inserted block -->
<div class="ui">
<canvas class="sm2-canvas"></canvas>
<span class="sm2-360btn"></span>
<div class="sm2-timing"></div>
<div class="sm2-cover"></div>
</div>
<!-- /UI -->
<a href="http://**.**.**.**:8000/live">
</div>
For some reason the small play button appears and a second later disappears.
I'm looking to place the big player demo but i cant seem to
properly initiate that player.
All js files and css files from Demo folder are registered.
My Website
Its supposed to appear on the left panel.
if you examine the firebug console you will see that a GET request to http://tranceil.fm/new/readerPlayer.php return a 301 redirect, that might be causing the issue
I know this was asked a couple of years ago, but I was stuck on the same thing and here is how I solved it.
There is a second CSS file called 360player-visualization.css that you need to include.
<link href="360-player/360player.css" rel="stylesheet">
<link href="360-player/360player-visualization.css" rel="stylesheet">
Then in the HTML, include ui360-vis class name as well.
<div class="ui360 ui360-vis">
</div>
Just as you had it, you should also have a custom CSS to increase the size of the player:
.ui360,
.sm2-360ui {
width:250px;
height:250px;
}
And as you had it, the three required JS files:
<script src="360-player/script/berniecode-animator.js"></script>
<script src="soundmanager2-nodebug-jsmin.js"></script>
<script src="360-player/script/360player.js"></script>
I'm juuuuuust trying to get an pop up displaying test when the document is ready. I've managed to get google maps working on another page but somehow this is a lot of pain.
Here's the code:
<html>
<head>
[...]
<script type="text/javascript" href="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
{literal}
<script type="text/javascript">
$(document).ready(function () {
alert ("test");
});
</script>
{/literal}
</head>
[...]
</html>
What should I do to get that popup message? I also tried copy pasting from my working jquery page without much success.
Changing <script href=...> to <script src=...> works like a charm for me.
Does you javascript is enabled in your browser ?
You can type this:
$(function() {
alert("test");
});