We have a GWT app that displays ads on the page with this code:
<script type="text/javascript" language="javascript" src="app/app.nocache.js"></script>
<body>
<div id="top-ads-placeholder" class="uk-hidden-small uk-hidden">
<div id="top-ads-small" class="uk-hidden-small">
<script type='text/javascript' src='http://ads.qadservice.com/t?id=123'></script>
</div>
<div id="top-ads-large" class="uk-hidden-medium uk-hidden-large uk-container-center uk-width-1-1">
<script type='text/javascript' src='http://ads.qadservice.com/t?id=123'></script>
</div>
</div>
</body
The problem with this code is its a blocking and it delays the loading of the app. What we want is to make sure that the GWT app has fully loaded (especially its UI) before the ads script will even load. Is that possible?
You can add this block to the page at the end of your onModuleLoad() or whenever you think your app is ready.
Related
I'm using both AngularJS (v1.6.4) and jQuery (v2.1.4) in my web application. I included static html files using ng-include. So my index.html is like that:
<body>
<div id="wrapper" ng-controller="mainCtrl">
<div ng-include="'partials/header.html'"></div>
<div ng-include="'partials/menu.html'"></div>
<div class="content-page">
<div ng-view></div>
<div ng-include="'partials/footer.html'"></div>
</div>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="plugins/jquery-datatables-editable/jquery.dataTables.js"></script>
<script src="plugins/datatables/dataTables.bootstrap.js"></script>
<script src="assets/js/main.js"></script>
<script>
$("#datatable-editable").DataTable();
</script>
</body>
As you see above I have 3 include files and 1 view. I used datatable in angular view. And I want to initialize it in my index.html file with $("#datatable-editable").DataTable(); But it doesn't work. When I write html elements directly to the page instead of including, it works fine. Why is this happening? How can I solve it?
When I reload a page called Donkey.aspx, there's a breakpoint being hit on the method below.
protected void Application_BeginRequest(object sender, EventArgs e)
{
if (application.Request.Url.AbsolutePath.EndsWith(".blopp")) { ... }
}
The problem is that all I get to see is a hit on the Donkey.aspx and another file (the one with id __browserLink_initializationData) referenced by it, only. However, there's a bunch of other references to files and those are not causing hits on the method. The end of the produced page looks like this.
<script type="text/javascript" src="/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="jquery.placeholder.js"></script>
<script src="beep.blopp" type="text/javascript"></script>
<script src="typeahead.bundle.min.js" type="text/javascript"></script>
<script type="text/javascript" src="utils.js"></script>
</div>
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATEGENERATOR"
id="__VIEWSTATEGENERATOR" value="54ACFC5B" />
</div>
</form>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Chrome","requestId":"f51b45a6ac174b6e8880184492a80734"}
</script>
<script type="text/javascript" src="http://localhost:64593/9...7/browserLink" async="async">
</script>
<!-- End Browser Link -->
</body>
Accessing another page gives me the expected behavior, namely a bunch of hits on the event handler above, including CSS-files etc. Notable is that the files do indeed get loaded, as verified by the functionality of the scripts, console status codes (200 and 304 all around). The master page is virtually empty.
I'm at loss on what's wrong and even more uncertain on how to trouble-shoot it.
Static files are usually cached by browser. Turn off browser cache or reload all from server (Ctrl+F5).
I just installed the very basic level of ckeditor and noticed that it takes quite a while to load on each page load.
Here's a (HTML5) gif of the loading (this is slightly faster than normal): gif here
I'm not doing anything that would pop out as problematic so I'm not sure why it takes so long to load. Is there any way to have the textarea never show up, so that it doesn't look as if it's "popping" into the ckeditor like it does in the gif?
These are the only JS scripts that I have on this page:
<script src="js/jquery.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="ckeditor/ckeditor.js"></script>
Please help
Replace those scripts with:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ckeditor/4.3.2/ckeditor.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ckeditor/4.3.2/adapters/jquery.min.js" type="text/javascript"></script>
Remove the current <textarea> and replace your current CKEDITOR.replace(...) script with this:
<script>
$('<textarea/>').attr('id', 'text_field').css('visibility', 'hidden').appendTo('#ckeditorArea').ckeditor(function(textField) {
$(textField).css('visibility', 'visible');
});
</script>
This uses the jQuery adapters method .ckeditor() to initialize the editor on the new element, rather than using the traditional CKEDITOR.replace() method.
Initially the textarea will be in the page but hidden, then will be visible once the CKEditor interface is applied.
CKEditor Loading performance details:
http://ckeditor.com/blog/CKEditor-Loading-performance-details
I am trying to use jquery UI tab in mvc4 application. All the necessary scripts and styles added in bundleconfig and referred in layout.cshtml page.
please refer below code.
<div id="tabs">
<ul>
<li>Table</li>
<li>Heat</li>
</ul>
<div id="tabs-1">
content fo tab1
</div>
<div id="tabs-2">
Content for Tab2
</div>
</div>
<script type="text/javascript">
$(function () {
$("#tabs").tabs();
});
</script>
required scripts already referred in layout.cshtml. but still tab not working properly. then i tried to add it in locally in same .cshtml page.
<link rel="stylesheet" href="#Url.Content("~/Content/jquery-ui-1.9.0.css")" />
<script src="#Url.Content("~/Scripts/jquery-1.8.3.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.9.0.min.js")" type="text/javascript"></script>
then it works fine but it loaded jquery and UI scripts two times
I don't know what the exact problem is.
Hey try as follow and remove the added jquery lib files from .cshtml page.
$(document).ready(function(){
$("#tabs").tabs();
});
I think you should add render section for scripts to the end of body tag in layout.cshtml
#RenderSection("scripts", required: false)
And type script code in Scripts section on view
#section Scripts {
<script type="text/javascript">
$(document).ready(function(){
$("#tabs").tabs();
});
</script>
}
PS: links for jquery and jquery.ui must be before RenderSection in layout.cshtml
I'm building an HTML5 app that uses Google Doubleclick ads. 99% of the app is dynamically built with JS, but the ads are hardcoded into the html like so:
<script type='text/javascript' src='http://partner.googleadservices.com/gampad/google_service.js'></script>
<script type='text/javascript'>
GS_googleAddAdSenseService("ca-pub-3664602748600160");
GS_googleEnableAllServices();
GA_googleAddSlot("ca-pub-3664602748600160", "125x125");
GA_googleAddSlot("ca-pub-3664602748600160", "250x250");
GA_googleAddSlot("ca-pub-3664602748600160", "160x600");
GA_googleAddSlot("ca-pub-3664602748600160", "468x60");
GA_googleFetchAds();
</script>
<div id="ads" style="float:right;">
<div id="square" style="visibility:hidden">
<div>
<script type='text/javascript'>
GA_googleFillSlot("250x250");
</script>
</div>
</div>
<div id="small_square" style="visibility:hidden">
<div>
<script type='text/javascript'>
GA_googleFillSlot("125x125");
</script>
</div>
</div>
<div id="tall_banner" style="visibility:hidden">
<div>
<script type='text/javascript'>
GA_googleFillSlot("160x600");
</script>
</div>
</div>
<div id="half_banner" style="visibility:hidden">
<div>
<script type='text/javascript'>
GA_googleFillSlot("468x60");
</script>
</div>
</div>
These ads are then hidden/shifted as needed to fill the various ad spots on the generated pages. When i implemented a manifest file to cache persistent assets i get a message that it has failed to load the http://partner.googleadservices.com/gampad/google_service.js file. Knowing this, I tried saving a local copy of that js file and including it in the manifest, but this led to errors regarding the GA_googleblahlah calls being undefined which seems to indicate a load order issue of some sort. Is there some way to exempt this file from cache?
I found the solution. Using a wildcard in the network area after defining the cached elements seems to have fixed the issue. My manifest file now looks like this:
CACHE MANIFEST
CACHE:
/js/jquery.min.js
/js/jquery.easing.1.3.js
/etc
NETWORK:
*
Thanks to Ben Poole for the pointers.
If you don't want a file to cache you add it to the NETWORK: section of your manifest file. From Dive Into HTML5:
The line marked NETWORK: is the beginning of the “online whitelist”
section. Resources in this section are never cached and are not
available offline. (Attempting to load them while offline will result
in an error.)