How to use ES6 modules while creating jQuery plugin? - javascript

I am creating a jQuery Plugin for building a form builder. The code is going to be very lengthy. I don't wanna keep everything in just one file.
To achieve this I am trying to break everything into ES6 modules but JS is throwing a Syntax error.
Uncaught SyntaxError: Unexpected identifier
Uncaught TypeError: $(...).formBuilder is not a function
Here's my code:
index.html
<!DOCTYPE html>
<html>
<head>
<title>Form Builder</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/3.0.1/mustache.min.js"></script>
<!-- <script src="functions.js"></script> -->
<script src="index.js"></script>
</head>
<body>
<div id="form-builder"></div>
</body>
</html>
<script type="text/javascript">
$("#form-builder").formBuilder();
</script>
index.js
import formBuilder from './functions.js'
(function($){
$.fn.formBuilder = function(){
formBuilder()
}
}(jQuery))
functions.js
export default function formBuilder(){
$.get('template.mst', function(template) {
let rendered = Mustache.render(template, fieldsData);
$('#form-builder').html(rendered);
});
}

I had to make two changes to get your code to run (in Chrome/Firefox):
First, from MDN
The import statement cannot be used in embedded scripts unless such script has a type="module".
This is a little misleading: "embedded script" sounds like it wouldn't include a src= script...but in practice it doesn't seem to work without it.
<script type="module" src="index.js"></script>
Second, module scripts are lazy-loaded, which means your final script tag will be executed before index.js is actually loaded/parsed. You can change this by using the jQuery ready callback.
<script>
$(() => {
$("#form-builder").formBuilder();
});
</script>

Related

Javascript shows me TypeError saying my variable is undefined

Im trying to code a simple Javascript exercise where I have to place different text at different part of the page but it keeps throwing me a
TypeError:sal[0] is undefined
Here is the javascript code.
function sals(a,b,c,d,e,id)
{
var sal = document.getElementsByClassName(id);
sal[0].style.top=a;
sal[0].style.left=b;
sal[0].style.color=c;
sal[0].style.fontsize=d;
sal[0].style.zindex=e;
}
sals('5%','50%','yellow','250px','20','GB');
What am I doing wrong?
For further reference, here is my HTML code aswell
<html>
<head>
<title>Hello</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<h1 class="GB"> Holla</h1>
<script src="main.js"></script>
</body>
</html>
Your JavaScript is running before the page (DOM) has fully loaded.
the simplest way to make sure the DOM is loaded before your JS runs, is to add 'defer' to the script tag thus;-
<head>
<title>Hello</title>
<link rel="stylesheet" href="main.css">
<script src="main.js" defer></script>
</head>
<body>
<h1 class="GB"> Holla</h1>
</body>
</html>

I Can't include Angular Datepicker to module

Hey I want to use this module into mine :
https://github.com/720kb/angular-datepicker
I include css here :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="/javascripts/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/19f59abbe2.js"></script>
<script src="/javascripts/angular.js"></script>
<script src="/javascripts/app.js"></script>
<link href="/stylesheets/sass/vendors/bootstrap.min.css" rel="stylesheet">
<link href="/stylesheets/sass/vendors/angular-datapicker.css" rel="stylesheet">
<link rel='stylesheet' href='/stylesheets/main.css' />
<link href="/stylesheets/sass/vendors/font-awesome.min.css" rel="stylesheet">
</head>
<body>
and on end body :
</div>
<% include partials/footer.ejs %>
<script src="/javascripts/angular-datapicker.js"></script>
</body>
</html>
And when I open page in console I see error :
Error: [$injector:modulerr] Failed to instantiate module app due to:
[$injector:modulerr] Failed to instantiate module 720kb.datepicker due to:
[$injector:nomod] Module '720kb.datepicker' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.6.4/$injector/nomod?p0=720kb.datepicker
also I add inside module :
angular.module('app', ['angular.datepicker'])
How can I repair this?
EDIT:
<script src="/javascripts/angular.js"></script>
<script src="/javascripts/angular-datapicker.js"></script>
<script src="/javascripts/angular-datepicker.js"></script>
<script src="/javascripts/app.js"></script>
<link href="/stylesheets/sass/vendors/bootstrap.min.css" rel="stylesheet">
<link href="/stylesheets/sass/vendors/angular-datapicker.css" rel="stylesheet">
Why the top link of angular-datapicker.js is showing error "cant include script" in console where second link bottom loading, and all is ok? if that is the same?
This is a complete stab in the dark, as you have not provided any reproducible sample.. but by just looking at the snippet you're provided... my best guess is that you're not using any dependency managers etc, and thus are relying on the order of when your scripts are loaded.
If you're app is then inside the body of the app... and you then only load the date-picker at the end... you'd see the problem you're experiencing.
You also have a typo in your file name.
A potential solution could be:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="/javascripts/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/19f59abbe2.js"></script>
<script src="/javascripts/angular.js"></script>
<!--move the datapicker script to here-->
<script src="/javascripts/angular-datepicker.js"></script>
<!--rest omitted for brevity-->
</head>
You've misspelled it to angular-datApicker.js
It should be angular-datEpicker.js

Runtime error" '$' is undefined after formatting pc

I have a project written in C# ASP.net. jQuery have worked well before format computer. I have reinstall windows 7 on pc then install VS 2012 again. I run project then give this error
JavaScript runtime error '$' is undefined
I don't change anything. I referenced jQuery top of aspx file.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title></title>
<link rel="stylesheet" type="text/css" href="css/site.css" />
<link rel="stylesheet" href="Content/themes/base/jquery-ui.css"/>
<style>
.ui-datepicker-trigger { position:relative;top:0px ;left:2px ; height:16px;width:16px;vertical-align:middle; }
/* {} is the value according to your need */
</style>
<script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.12.0.js"></script>
<script type="text/javascript" src="js/jquery.maskedinput.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
SOLUTION
I have found solution like this
Please check with your physical location of jQuery file.
or try to add CDN of jQuery as below.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
You should change the path of the jquery libs to relative like this:
<script type="text/javascript" src="~/Scripts/js/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="~/Scripts/js/jquery-ui-1.12.0.js"></script>
<script type="text/javascript" src="~/Scripts/js/jquery.maskedinput.min.js"></script>
You then will have to make a folder(if it doesn't exist) named Scripts and subfolder(if it doesn't exist) named js and place your jquery libs inside.

Marionette 3 templates work inline, but not when included in a separate file

I've been able to get my Marionette 3 templates to work when they are inline. When I include the template in an .html file I get a NoTemplateError when rendering the view. I've seen examples that use TemplateCache and require, but I don't understand why I can't just include the template .html file in the body and have it work.
The main source file
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
<title>Gmail API Quickstart</title>
<meta charset='utf-8' />
</head>
<body>
<script src="jquery.js" type="text/javascript"></script>
<script src="underscore_1_8_3.js" type="text/javascript"></script>
<script src="backbone.js" type="text/javascript"></script>
<script src="backbone.radio.js" type="text/javascript"></script>
<script src="backbone.marionette_3_2_0.js" type="text/javascript"></script>
<script src="bootstrap.js" type="text/javascript"></script>
<link href="bootstrap.css" rel="stylesheet">
<link href="mycss.css" rel="stylesheet">
<script src="messageDetails.js" type="text/javascript"></script>
// This template works
<script type="x-template/underscore" id="mailItem-template">
<div id="mailItem" class="col-md-12">
<img src="trash_recyclebin_empty_closed.png" align = "top" width="18" height="18"/>
<input type="checkbox" style="padding: 10;"/>
</div>
</script>
// If I comment out the above template and put the template in .html file it doesn't work in the view. I've tried
<link href="mailItem.tmpl.html" type="text/html"/>
// I've also tried this, but I get an Syntax error
<script src="mailItem.tmpl.html" type="text/javascript"/>
// View that uses the template
<script src="MessageDetailsView.js" type="text/javascript"></script>
This is because using the <script> tag isn't going to load it. Essentially if a <script> tag isn't javascript the browser will leave it alone.. this is handy since you can grab it later to use it as a template, but the browser isn't ever going to load the external template.
What you could do is make your external template a javascript.
var myTemplate = _.('My template text');
then you should be able to load that via a tag an expect myTemplate to be available globally.
But your best options is most likely to use a build tool like webpack to precompile and import your templates as javascript into your script directly.
More info:
Explanation of <script type = "text/template"> ... </script>

Getting 'Uncaught TypeError: $(...).timeago is not a function'

To calculate the relative time of a post I'm using jquery-timeago library. Here is the JavaScript code which I need to place in the HTML page
<script type="text/javascript">
jQuery(document).ready(function() {
$("abbr.timeago").timeago();
});
</script>
I have also included Jquery
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
Im still getting the error as
How do I resolve this error? There are already few questions such as this on Stack Overflow but none of them could resolve my issue.
EDIT:
Here's the head part of the HTML page
<html>
<head>
{% for ud in userdata %}
<title>{{ud.fullname}} </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,700' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timeago/1.4.3/jquery.timeago.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script type="text/javascript">
jQuery(document).ready(function() {
$("abbr.timeago").timeago();
});
</script>
</head>
Here's a fiddle. But it works fine. DEMO
EDIT : The issue has been resolved by making changes in the below way!
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function() {
$j("abbr.timeago").timeago();
});
</script>
replace your current CDN with the below one and try.
https://cdnjs.cloudflare.com/ajax/libs/jquery-timeago/1.4.3/jquery.timeago.js
Include this after jquery.min.js
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timeago/1.4.3/jquery.timeago.min.js"></script>
Check this fiddle now Fiddle
<abbr class="timeago" title="2011-12-17T09:24:17Z">December 17, 2011</abbr>
jQuery(document).ready(function () {
$("abbr.timeago").timeago();
});
Place your code properly.
Then it will start working.
CDN
Use the CDN provided by Shussain
I had related issue, as per above in this exact case it was solved with Shussain user's comment:
$j = jQuery.noConflict(); $j(document).ready(function() { $j("abbr.timeago").timeago(); });
But I have solved issue with replacing document ready as per below:
(function ($) {
"use strict";
// Your js code
});
})(jQuery);

Categories