jQuery 1.4 no conflict with jquery ui and drupal 6 - drupal-6

I am implementing a little survey prompter / reminder tool that is being implemented in a Drupal 6 website environment that contains various ColdFusion and static html pages. I am attempting to use jQuery 1.4.4 with Drupal's version of 1.2.6.
I am importing jQuery 1.4.4 like this:
<code>
<script type="text/javascript" src="/misc/jquery.js?7"></script>
<script type="text/javascript" src="/misc/drupal.js?7"></script>
<script type="text/javascript" src="/sites/all/modules/lightbox2/js/lightbox.js?7"></script>
<script type="text/javascript" src="/sites/all/modules/poormanscron/poormanscron.js?7"></script>
<script type="text/javascript" src="/sites/all/themes/realdecoy/scripts/jquery.carousel.js?7"></script>
<script type="text/javascript" src="/sites/all/themes/realdecoy/scripts/jquery.superbox-min.js?7"></script>
<script type="text/javascript" src="/sites/all/themes/realdecoy/scripts/swfobject.js?7"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>
<script type="text/javascript" src="/_inc/survey/jquery.cookie.js"></script>
<!-- this script starts with : var j144 = jQuery.noConflict() : which I believe should restore $ to the jQuery 1.2.6 instance -->
<!-- this then sets up numerous behaviors using the j144 instance -->
<script type="text/javascript" src="/_inc/survey/survey.js"></script>
</code>
Now what should (and does happen when I do not have 1.2.6 i.e., no noConflict to deal with) the user will load the page, and be asked about participating in a survey at the end of their visit. Subsequently using cookies the users behavior is somewhat monitored to detect when they leave the site (i.e., navigate to a page, or click an external link). Like I said, this all works correctly, and I have performed testing on this, when I am working on a ColdFusion script and do not have to use noConflict to allow Drupal's jQuery to co exist. Now, it does not malfunction completely with noConflict, however the entire process is very buggy and does not flow consistently.
Does anyone have any suggestions about how to go about finding where the problem is? I've made several small edits to some of the plugins being loaded after I load jQuery 1.4, and I've juggled the code

Are you sure you can't just upgrade Drupal's 1.2.6 version? It also seems like a waste of bandwidth/cpu/rainforests to be loading two separate jquery versions.
So far jQuery versions have mostly been backwards compatible. Adding features more than removing them.

Related

place external JavaScript after CSS file inside head element using JSF 2.3

I use JSF 2.3 for developing web application.
As a web developer, I care about the performance of loading speed of a site.
As I was exploring on how I could make my site faster, I encountered this post on Stack Overflow. And the quote from the accepted and most up-voted answer said
stylesheets should always be specified in the head of a document for better performance, it's important, where possible, that any external JS files that must be included in the head (such as those that write to the document) follow the stylesheets, to prevent delays in download time.
I know that JavaScript performs better when it is placed at the bottom of the <body>, but I want to include reCAPTCHA and Google instructs us to place the required external JavaScript before the closing </head> tag.
So, I decided to include the required external JavaScript before the closing </head> tag and after CSS files to boost the performance.
However, my CSS files are declared in a JSF way like <h:outputStylesheet name="css/default.css"/>, and I realized that the CSS files declared this way are always placed after files that are declared in a non-JSF way, which is <script src="https://www.google.com/recaptcha/api.js"></script>. I also considered making the external JavaScript behave in a JSF way by changing <script> to <h:outputScript>, but the <h:outputScript> can only render local scripts as described in this post .
So, the result will always be as follows.
<head>
<script src="https://www.google.com/recaptcha/api.js"></script>
<link type="text/css" rel="stylesheet" href="/project/javax.faces.resource/css/default.css.xhtml" />
</head>
insted of
<head>
<link type="text/css" rel="stylesheet" href="/project/javax.faces.resource/css/default.css.xhtml" />
<script src="https://www.google.com/recaptcha/api.js"></script>
</head>
Maybe I'm thinking too much, and the placement order of link and script doesn't affect the performance that much, but if the loading speed gets faster even a little, I want to follow the better way.

Bundle JS files using CDN and integrity attribute

In ASP.NET MVC 5, is it possible to use BundleColletion.UseCdn and have it render with the HTML integrity attribute? For example, is there someway to make this:
bundles.UseCdn = true;
bundles.Add(
new ScriptBundle("~/bundles/jquery", "https://code.jquery.com/jquery-3.1.1.min.js")
.Include("~/Scripts/js/jquery/jquery-3.1.1.min.js")
);
render as this?
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
Partial answer.
To add crossorigin="anonymous" attribute you can use #Scripts.RenderFormat
#Scripts.RenderFormat("<script type=\"text/javascript\" src=\"{0}\" crossorigin=\"anonymous\"></script>", "~/bundles/jquery")
You also can include integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" part in RenderFormat, but it does not look like a good solution.
I tried this way in our ASP.NET MVC 5 project when CDN fails
#Scripts.RenderFormat("<script src='{0}' integrity='sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa' crossorigin='anonymous'></script>", "~/bundles/bootstrapJS")
And this will generate (inside developer tool),
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
And From this answer we found that there is bug if script is fail to load from CDN
So we add script manually inside the tag.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>(window.jQuery) || document.write('<script src="/Scripts/jquery-1.12.4.min.js"><\/script>');</script>
</head>
<body></body>
</html>
You can have it like
<script src='#Scripts.Url("~/bundles/jquery")' crossorigin="anonymous" integrity="value"> </script>

mathjax is not rendered when my page is on Dropbox

I have some mathjax enhanced WWW pages on Dropbox (e.g., mathjax_test.html), that are rendered like this
while on localhost they are rendered like this
The code of the page is
<html>
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<head>
<title>Test of mathjax</title>
<meta http-equiv="content-type" content="text/html;charset=latin-1"></>
</head>
<body>
We analyze the common case in which the dynamic load can
be expressed by a constant load vector \(\boldsymbol r\)
modulated by an adimensional function of time,
\(f(t)\) (e.g., the seismic excitation can be
described in such terms).
</body>
</html>
Is there something that can be done to have mathjax code rendered correctly when the page is fetched from Dropbox?
The problem is that Dropbox only serves content over https but in your source MathJax.js is loaded via src="http://cdn.mathjax.org/....
Browsers block such http calls (see this SO post), hence MathJax is not loaded and accordingly can't render the page.
(You can open the JavaScript console in the developer tools of your browser to see an error message about this.)

Automatically include assets into template

I'm using the linkedIn fork of Dust with Node.JS & Express.
My template hierarchy is having:
1 layout template - The base template
1 Page template - This is the template that will be rendered
Optional number of partials - Might be included by the page template
layout.dust (layout template):
<html>
<head>
<script src="/js/layout.js"></script>
<link rel="stylesheet" href="/css/layout.css">
<script src="/js/home.js"></script>
<link rel="stylesheet" href="/css/home.css">
<script src="/js/sidebar.js"></script>
<link rel="stylesheet" href="/css/sidebar.css">
<script src="/js/widget.js"></script>
<link rel="stylesheet" href="/css/widget.css">
</head>
<body>
{+content}{/content}
</body>
</html>
home.dust (page template):
{>layout/}
{<content}
<div>
{>sidebar/}
</div>
<div>
{>widget/}
</div>
{/content}
When the user visits the website homepage, then home.dust will be rendered, and the user will see a page with the sidebar and some widget. The content of sidebar.dust and widget.dust is irrelevant.
As you can see in layout.dust, there are 4 sets of JavaScript and CSS included in the head section, one for each of the templates and partials. My problem is finding a way to automatically include each asset into the layout (without hardcoding). Ideally I would like to be able to just do this:
{#scripts}
<script src="{.}"></script>
{/scripts}
Different pages may require different assets.
How can I push each script source path into the context of layout.dust?
What do other developers do, do they just hardcode them?
I'd be adding all scripts to the head of the layout without pushing any from the pages that extend from this layout. I'm not sure how knowledgeable you are on javascript minification but it's common practice to bundle all (or most) of your javascript assets into one file and serve them up to the user with a single HTTP request. This speeds up your page a lot; checkout what Google has to say about it here.
It's not hard because there are a few tools to do this for you automatically. You could go for an asset manager or Grunt.
ASSET MANAGER:
There are a few on npm. I found one called Express Asset Manager and another called Asset Pipeline.
GRUNT:
Use contrib-uglify and contrib-concat to handle you minification. There are plenty of others that you should find useful. You can do the exact same thing with all of your CSS too.
Obviously in development you don't really want to try to debug minified code so you can do something like the following:
{?production}
<script src="production-minified-script.js"></script>
{:else}
{#scripts}
<script src="{.}"></script>
{/scripts}
{/production}
where production is a variable passed to your template from process.env.NODE_ENV. To avoid manually adding in each script, you could pass them in as an array by
STILL WANT TO ADD FROM OTHER PAGES?
If you still want to add from other pages, add in a block to your head below your main scripts, something like:
{+otherScripts}{/otherScripts}

meteor real router for multi page apps without JavaScript render

I am new to meteor and I am trying to do multi-page application where http://www.mydomain.com/page1 will result a totally different page from http://www.mydomain.com/page2.
By totally different I mean that I don't want the page to be rendered by the client.
I tried to use meteor-router but What I got is something like:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/myapp.css?9297ad4aa173c4e0c19aebd27c62a5c43242bb93">
<script type="text/javascript">
__meteor_runtime_config__ = {"ROOT_URL":"http://localhost:3000","serverId":"iMp4kgzzeqDtktJoY"};
</script>
<script type="text/javascript" src="/packages/underscore/underscore.js?6d71e6711255f43c0de8090f2c8b9f60534a699b"></script>
<script type="text/javascript" src="/packages/meteor/client_environment.js?07a7cfbe7a2389cf9855c7db833f12202a656c6b"></script>
<script type="text/javascript" src="/packages/meteor/helpers.js?2968aa157e0a16667da224b8aa48edb17fbccf7c"></script>
...
...MANY MANY MANY SCRIPTS.... ?!?
...
...
<script type="text/javascript" src="/myapp.js?2866dcdb5c828b129cdd3b2498a4bf65da9ea43f"></script>
<title>myapp</title>
</head>
<body>
</body>
</html>
And this is not what I want. I want page1 route will return me:
<!DOCTYPE html>
<html>
<head>
My meta tags
</head>
<body>
page1
</body>
</html>
And I want page2 to return different meta tags with different content.
In order to be clear, lets assume that my clients sometime doesn't have javascript. I don't asking about whether meteor is the right framework! I am asking only if can I do this with meteor.
Meteor works a bit different compared to the traditional LAMP stack. Basically it works by patching out the DOM to only where the changes are needed as opposed to re-downloading the whole web page. It makes for a very satisfying end user experience on modern web browsers.
To use meteor router you need to find a spot that you want to patch out with new data for different pages with {{renderPage}}. You can use something like
<head>
<title>xx</title>
</head>
<body>
{{renderPage}}
</body>
<template name="page1">
<h2>Hello!</h2>
</template>
<template name="page2">
<h2>Ola!</h2>
</template>
Now you need to define a router in your client side javascript:
Meteor.Router.add({
'/page1': 'page1',
'/page2': 'page2'
});
So if you load /page1 you would see Hello! and if you load /page2 you would see Ola! as defined in the <template name="page2">..</template>
With the meta tags you need to use javascript to create them. With something like
$('head').append("<meta...");
Again this depends on your preference, personally I find these type of apps load ridiculously fast between web pages as compared to other 'thin' based websites. (Have a look at meteor.com to see how fast you can swap between the pages). The browser does need javascript, however.
Of note is in production mode there will only be 1 script tag.

Resources