I know my question is similar to many others, but I hope the specifics are different enough to justify a new question. A joomla site I'm working on uses mod_superfishmenu. This loads jQuery 1.2.6. and extends it. I'm creating a component that uses the jQuery colorbox plugin that requires jQuery 1.3 or higher and again extends JQuery. One technique to have both is reassign jQuery to another name with jQuery.noConflict(). For instance,
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js'>
</script>
<script type='text/javascript'>
var jQuery1 = jQuery.noConflict(true);
</script>
and then change all instances of jQuery in the JavaScript code for colorbox to jQuery1, and make sure all this loads before the superfish module loads its jQuery. But I don't like having to edit the colorbox code, or remembering to edit it again if I upgrade to a newer version. So, I thought it might be possible to load the older jQuery first, then use jQuery.noConflict(true) to rename it, then load the current jQuery, and transfer the plugins attached to the first jQuery to the second one. The part that copies the plugins looks like this:
<script type='text/javascript'>
var oldJquery = null;
if (jQuery != undefined) {
oldJquery = jQuery.noConflict(true);
}
</script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js'>
</script>
<script type='text/javascript'>
jQuery.noConflict();
if (oldJquery) {
for (plugin in oldJquery.fn) {
if (!(plugin in jQuery.fn))
jQuery.fn[plugin] = oldJquery.fn[plugin];
}
}
</script>
This seems to work, but I'm concerned that I've overlooked some detail that can bite me later on. So if anyone sees a flaw in this approach, please point it out. I also welcome any critique that shows why this is a bad idea. Thanks.
Why not make a simple change to mod_superfishmenu and remove the line that include jQuery 1.2.6? This way your jQuery colorbox plugin will load jQuery 1.3 itself which mod_superfishmenu will also use. Simple one line change that is not difficult to do.
As a side note I think all developers for Joomla that include any javascript library should have backend settings in order for users to enable or disabled any library should they have conflicts.
Related
i'm trying to add <script> ... </script> to HTML element in Neos CMS, could you please tell me how to do it, because HTML element in Neos CMS doesn't accept js. Is there any alternative how to do it please. Thanks for any recommendations.
There is a package available with wich the editor can add source code like that. But be careful with this feature as with great power (of the editor) comes great responsibility!
Depending on what your use case is, it may be more secure to provide a custom NodeType for the editor which then adds this JS code via fusion.
One thing you may want to think about is loading things from external sources might be problematic for GDPR compliance.
I'm setting up BootstrapVue in my project, and the CSS appears to be there, but I'm not sure how I can confirm that the JavaScript files are included.
In the bootstrap getting started guide, it says to include this JavaScript file:
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
How can I confirm that it's getting included?
BootstrapVue does not use any of Bootstrap's javascript files. BootstrapVue has re-implemented their jQuery code using Vue (no jQuery required)
So there is no need to include Bootstrap's javascript file in your project.
We have been having discussions in our product dev team regarding html maintainability and reuse. To set the context, we started with HTML5/CSS3 front end with plain JS under Play MVC, which in turn uses RESTful backend. Then we thought of adding AngularJS to the spin and to adopting a hybrid approach only to realize that two strong MVC frameworks don't necessarily work together and you have to pick one. So for the performance and type-safety among other issues, we decided to go with using Play framework and Scala based templates.
Here's the challenge: We would like to create reusable web components just like Apache Tiles, so that common elements such as header, menus, footer, etc. can be reused. These components are ready to go in Play to which dynamic content could be added to serve the entire page.
Can this be done? If yes, how?
Secondly, play templates seem to take you back in the time since they don't allow the separation of concern in html. Therefore for re-designing or improving html content, the html developer will have to deal with the template or merging new html with existing templates. How to make this process easier?
I'm don't know exactly how Apache Tiles works, but if I properly understand, it offers a way to create pages using smaller components (like header, menu, footer, etc) and some sort of include mechanism to glue these components together and then compose the page.
That said, you can achieve the same thing using Twirl. You just need to declare reusable blocks that can be used inside the same page, or you can have something like Rails partials that can be reused across different pages.
Let's see an example. Consider that you have the following files:
File app/views/partials/header.scala.html:
<header>
<h1>My Header</h1>
</header>
File app/views/partials/navigation.scala.html:
<nav>
<ul>
<li>Home</li>
<li>Profile</li>
<li>FAQ</li>
</ul>
</nav>
File app/views/partials/footer.scala.html:
<footer>
Some copyright info
</footer>
File app/views/main.scala.html:
#(title: String)(content: Html)
<!DOCTYPE html>
<html lang="en">
<head>
<title>#title</title>
<link rel="stylesheet" media="screen" href="#routes.Assets.versioned("stylesheets/main.css")">
<script src="#routes.Assets.versioned("javascripts/hello.js")" type="text/javascript"></script>
</head>
<body>
#partials.header()
#partials.navigation()
#content
#partials.footer()
</body>
</html>
The files above defines not only some reusable partial templates (header, navigation and footer), but also a common layout (main) that all the pages of your application can reuse. Now, lets see a page that uses the structure above:
File app/views/users/profile.scala.html:
#(user: models.User)
#main(title = "User Profile Page") {
<h2>This is the profile page of #user.username</h2>
}
And there is more: since views are compiled to Scala code, you can import code written in Scala/Java and call it directly from your views, something like Rails view helpers:
File app/views/helpers/DateHelpers.scala:
package views.helpers
object DateHelpers {
def formatToISO8601(date: Date) = {
??? // format the date
}
}
Let's use this helper in our app/views/users/profile.scala.html page:
#(user: models.User)
#import controllers.DateHelpers._
#main(title = "User Profile Page") {
<h2>This is the profile page of #user.username.</h2>
<p>User since #formatToISO8601(user.createdAt)</p>
}
And there are other approaches to consider:
Ping-Play: Big Pipe Streaming for the Play Framework
You can create a Play module that integrate with Apache Tiles. I'm pretty sure this is possible.
A quick answer would be the following. If you are comfortable with Yeoman, you can keep most of the UI part in existing HTML, while rendering some pages with Scala templates. I would recommend Play-yeoman, which may help such that you can--with minimum effort--reuse UI components.
For instance, you may easily convert a NodeJS+Angular app into Play+Angular. The Play-yeoman plugin helps a lot. But it is not so flexible as it does not support any arbitrary Yeoman configuration, just Angular.
I'm using NetBeans as my IDE for a Ember.js project. When I create handlebars templates in my app like below the code highlighting doesn't work correctly.
<script type="text/x-handlebars">
<div>
</div>
</script>
Normally, when I'd select the first div, it and its matching end tag would highlight yellow, but this doesn't work. Since its inside the handlebars script tag both are highlighted red as errors and don't match together. This makes writing complex templates kinda annoying as it can be difficult to pinpoint syntax errors.
Is there anyway to get NetBeans to highlight inside the handlebars tag as if its regular html?
One option, until Netbeans implements this enhancement, is to add the following script tag in index.html immediately after your reference to jQuery:
<script src="js/libs/jquery.js"></script>
<!-- use following line to change script type to 'text/x-handlebars' -->
<script>jQuery('script[type="text/html"]').attr('type', 'text/x-handlebars');</script>
This is a variation of the answer provided by GCoda.
I had the same problem and tried various non satisfying fixes.
In the end I figured the best solution is simply to change the script's type attribute to text/html:
<script type="text/html">
<div>
</div>
</script>
I got same problem. And i just used a some kind of postprocessing, i am using node.js, so i did res.send(data.replace(/type="text\/html"/g,'type="text/x-handlebars"')); on my / page.
I think you can do something similar in you language, and ofcource this is not a fix, just an ugly trick to make developing more easy. Dont keep it in production.
I have seen coffescript tutorials that show how to use coffeescript with rails, nodejs, or even coffeescript REPL for learning it.
How can I create a web project where I can just write a cofeescript script inside an HTML page, I mean something like
<script type ="text/coffeescript">
//some coffeescript code
</script>
How to use coffeescript in developing web-sites? just tells to include output javascript and test it. But, I do not want to do that (I feel its just clumsy).
I also saw coffeescript web site, it has small amount of direction regarding this, it says-
I tried it, I included a those scripts along with jquery. But my page is remains blank. Has anyone does it before, can you provide a sample code?
Thanks.
Just include coffee-script.js in the usual manner and then add <script> elements like this:
<script type="text/coffeescript">
alert 'pancakes!'
</script>
or this
<script type="text/coffeescript">
eggs = 'gotta have some'
document.write "It really is CoffeeScript: #{eggs}"
</script>
Demo: http://jsfiddle.net/ambiguous/DmuHh/