Rewriting scripts "the Angular way"? - javascript

Okay, I have a pretty basic site I'm working on that I'm now modifying to use a MEAN stack and thus I'm getting started with Angular. I'm using Scotch.io's MEAN starter App as a base to get started. So far, it's been pretty easy, I've got key components in templates and added them using ng-include.
HTML
<title>First Angular Page</title>
<!-- CSS -->
<link rel="stylesheet" href="libs/font-awesome/css/font-awesome.min.css"> <!-- Font Awesome -->
<link href='http://fonts.googleapis.com/css?family=Quicksand:700|Montserrat:700|Open+Sans|Sniglet:400,800' rel='stylesheet' type='text/css'> <!-- Google Fonts -->
<link rel="stylesheet" href="css/mainStyles.css"> <!-- Stephie's styles -->
<!-- JS -->
<script src="libs/angular/angular.min.js"></script>
<script src="libs/angular-route/angular-route.min.js"></script>
<!-- ANGULAR CUSTOM -->
<script src="js/controllers/MainCtrl.js"></script>
<script src="js/controllers/NerdCtrl.js"></script>
<script src="js/services/NerdService.js"></script>
<script src="js/appRoutes.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="sampleApp" ng-controller="NerdController">
<!-- NAVAGATION -->
<div ng-include='"templates/navagation.html"'></div>
<div id="site-canvas">
<!-- HEADER -->
<div ng-include='"templates/header.html"'></div>
<div id="page-content">
<!-- ANGULAR DYNAMIC CONTENT / UNIQUE PAGE FRAGMENT -->
<div ng-view></div>
</div> <!-- #page-content -->
<!-- FOOTER -->
<div ng-include='"templates/footer.html"'></div>
</div><!-- #site-canvas -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/menu.js"></script>
</body>
</html>
But now I've got problems, my menu.js file isn't working. It consists pretty much entirely of add/removeClass methods using jQuery.
Here's an old Code Pen of the site I'm working on in basic HTML to demostrate how it's supposed to work.
http://codepen.io/StuffieStephie/pen/BNqJVX
function toggleNav() {
if ($('#drawer').hasClass('show-nav')) {
$('#drawer').removeClass('show-nav');
$('#nav-icon').removeClass('open');
$("nav li.gotsMenus").removeClass("showSub");
} else {
$('#drawer').addClass('show-nav');
$('#nav-icon').addClass('open');
$("nav li.gotsMenus").removeClass("showSub");
}
}
$('#closeButton, #site-canvas, nav li li').click(function() {
$('#drawer').removeClass('show-nav');
$('#nav-icon').removeClass('open');
$("nav li.gotsMenus").removeClass("showSub");
});
But this doesn't work with my Angular templates. (Or at least, the click and hover functions don't. The scroll function that auto hides the header still works mysteriously ...? So it's kinda working)
So.. where to begin? I'm sorry if this is a really dumb question but I'm new to Angular and I've been spinning my wheels for a couple of hours now. Do I put this in a directive or controller or module or what? Do I have to rewrite this in vanilla js? And even if I did, I have other jQuery dependencies (I have an image gallery powered by Tumblr's JSON API that uses a jQuery-dependent lightbox, among other things).
If someone can just point me in the right direction I would be so grateful ;_;

Sounds like a race condition, when the script executes, there might not a #menuHeader in the DOM. You may need to add the code to the load callback using a delegate. So like:
$("#menuHeader").on('load', function () {
// Put menu.js code here
});
I would put a break point and figure out what's actually in the DOM when this executes. And basically figure out what it takes to load up the DOM first, then run the script.

Related

Why does this simple Angularjs using syncfusion throws me the error Uncaught TypeError: Cannot read property 'widget' of undefined

I am relatively new to Angularjs and I am trying to use Syncfusion to implement few diagrams so I started with a simple code using the angularjs CDN provided in their website. But it throws me error. I am not sure what I am doing wrong. I could not find any post related to similar thing in SO or in Syncfusion forum. Can anyone please help me? I am really sorry if incase this is duplicate
This the help doc from their website: Help DOC Syncfusion AngularjS
This is the CDN links page: https://help.syncfusion.com/js/cdn#gsc.tab=0
Following is the code:
<!DOCTYPE html>
<html ng-app="DateCtrl">
<head>
<title>Testing EJAngular</title>
<!--jQuery Starts-->
<script src="http://cdn.syncfusion.com/js/assets/external/jquery-1.10.2.min.js"></script>
<!--jQuery Ends-->
<!-- Angularjs CDN Starts -->
<script src="http://cdn.syncfusion.com/js/assets/external/angular.min.js"></script>
<!-- Angularjs CDN Ends -->
<!--EJ Angular Starts-->
<script src="http://cdn.syncfusion.com/18.2.0.44/js/common/ej.widget.angular.min.js"></script>
<!--EJ Angular ENDS -->
</script>
</head>
<body ng-controller="DatePickerCtrl">
<!--Container for ejDatePicker widget-->
<input id="datepick" ej-datepicker e-value="dateValue" e-enableStrictMode="true" />
<script type="text/javascript">
var DateCtrl = angular.module('DateCtrl', ['ejangular'])
DateCtrl.controller('DatePickerCtrl', function ($scope) {
$scope.dateValue = "2/3/2013";
});
</script>
</body>
</html>
Error Messages from console:
Posting this answer as it maybe useful for someone in the future. Few more CDN needs to be added. Here is all CDN:
<link href="http://cdn.syncfusion.com/18.2.0.44/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" />
<script src="http://cdn.syncfusion.com/js/assets/external/jquery-1.10.2.min.js"></script>
<script src="http://cdn.syncfusion.com/js/assets/external/jquery.easing.1.3.min.js"></script>
<script src="http://cdn.syncfusion.com/js/assets/external/jsrender.min.js"></script>
<script src="http://cdn.syncfusion.com/18.2.0.44/js/web/ej.web.all.min.js"></script>
<!-- Angularjs CDN Starts -->
<script src="http://cdn.syncfusion.com/js/assets/external/angular.min.js"></script>
<!-- Angularjs CDN Ends -->
<!--EJ Angular Starts-->
<script src="http://cdn.syncfusion.com/18.2.0.44/js/common/ej.widget.angular.min.js"></script>
<!--EJ Angular ENDS -->
This issue generally arises when we haven’t referred the required Syncfusion script files. Check out the AngularJS documentation in the below link.
https://help.syncfusion.com/angularjs/overview
https://help.syncfusion.com/angularjs/accordion/getting-started#create-a-simple-accordion-in-angularjs
check the below link for DatePicker demo.
http://jsplayground.syncfusion.com/a1zdhiii
Check the below links to know more about Syncfusion AngularJS DatePicker.
Behavior : https://help.syncfusion.com/angularjs/datepicker/behavior-settings
Value binding: https://help.syncfusion.com/angularjs/datepicker/data-and-event-binding
API reference: https://help.syncfusion.com/api/js/ejdatepicker
We can also raise queries in Syncfusion forums.
https://www.syncfusion.com/forums

How to set up some JavaScript into WordPress (API)

I have this code, and I cant get it to work in my WordPress, I have used the addons Insert Headers & Footers and also WP Coder... but I am not sure why it will not work, the page is just blank.
How can I get this to work? What should I place where in the WordPress site - plugins etc.?
I have tried to place this in the "WP CODER" under "HTML code":
But it does not work, the page is blank.
1) Add the following code to the <head> section of your website:
<link rel="stylesheet" type="text/css"href=”https://zellr.com/integration/kirpparikalle.css” />
2) Add the following code to the section of your page. Place it inside the element where you wish to see the login and registration forms.
<h1 id="kirpparikalle_title"></h1>
<br/>
<div id="kirpparikalle_container"></div>
<!-- Note: jQuery is requirement for the integration scripts.
If you already have jQuery included in your website, you can remove the next line. -->
<script type="text/javascript" ```src="https://zellr.com/integration/jquery.min.js"></script>
<script type="text/javascript" ```src=”https://zellr.com/integration/kirpparikalle_i18n.js"></script>
<script type="text/javascript">
$(function() {
KK_COMPANY = ' denlillelandsoldat ';
KK_CONFIG['redirect_url'] = 'http://denlillelandsoldat.dk/';
KK_LANGUAGE = 'da';
kk_show_default_login();
});
</script>
It should show some booking module on the page.
Try to copy this exact code and paste it where you want it to appear, you have odd characters in the code you've applied on your website. Also the js code might produce an error to made a little change to the wrapper
<link rel="stylesheet" type="text/css" href="https://zellr.com/integration/kirpparikalle.css" />
<div id="kirpparikalle_container"></div>
<!-- Note: jQuery is requirement for the integration scripts.
If you already have jQuery included in your website, you can remove the next line. -->
<script type="text/javascript" src="https://zellr.com/integration/jquery.min.js"></script>
<script type="text/javascript" src="https://zellr.com/integration/kirpparikalle_i18n.js"></script>
<script type="text/javascript">
(function($) {
$(function() {
KK_COMPANY = ' denlillelandsoldat ';
KK_CONFIG['redirect_url'] = 'http://denlillelandsoldat.dk/';
KK_LANGUAGE = 'da';
kk_show_default_login();
})( jQuery );
</script>
Are you using block editor (gutenberg) or the classic editor?
In classic editor. Paste your codes inside text editor
Same concept in gutenberg tho.

Bootstrap navbar drop-down doesn't toggle

I want to use bootstrap navbar in my website and so i have made the webpage header.html (link given below) and it works fine
http://upscfever.com/upsc-fever/header.html
However when i use the same code on my home page (link below). it doesnt close after we open it.
http://upscfever.com/upsc-fever/index.html
On my homepage - index.html i have written below code.
<script>
$(function () {
$("#header").load("http://upscfever.com/upsc-fever/header.html");
});
</script>
<body>
<div id="header"></div>
<!-- other things-->
</body>
I get the error:
jQuery.Deferred exception: $(...).dropdown is not a function
#http://upscfever.com/upsc-fever/index.html:1:15
g/https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js:2:29946
g/https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js:2:30262
you may want to put the load script just before the end of the body tag, so that the <div id="header"> gets added to the DOM before using it.
Also make sure you are not loading bootstrap js more than once in your index.html file.
Maybe try with
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
and see if it will work.

Bootstrap & Wordpress - Nothing happens

So I'm trying to use a Bootstrap Modal, and I want it to appear after a click (onclick method).
Right now I have this
$(document).ready(function(){
$("#cancelPObtn").on("click", function(){ $("#error-dialog").modal();});
});
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/js/bootstrap.min.js"></script>
<!-- BELOW ON MY WORDPRESS POST -->
Yes, cancel it
<div class="modal hide fade" id="error-dialog">
<div class="modal-header">
<a class="close" data-dismiss="modal">x</a>
<h3>Cancel Purchase Order?</h3>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
Yes, cancel it
Nevermind
</div>
</div>
<!-- I HAVE THE JAVASCRIPT ON MY POST TOO, USING <script type="text/javascript"> -->
So, it appears to be working, everywhere, but on my Wordpress post I can't make it work! I've added the JS + CSS Files from Bootstrap on my header.php
What could be the issue here?
Thank you!
You should read up on enqueuing scripts and styles in WordPress. WordPress has it's own way of including the script files and the stylesheets that you should familiarize yourself with. A lot of times, what ends up happening is either the files aren't included correctly, or in the wrong order, or without the dependencies they might need. Adding the links directly to header.php is strongly discouraged.
In addition to using wp_enqueue_script as recommended above, I would ensure you're writing non-conflicting jQuery, as WordPress plugins sometimes come bundled with their own JavaScript libraries, which can cause issues.
See below:
<script type="text/javascript">
jQuery(function($) {
$('#cancelPObtn').click(function() {
$('#error-dialog').modal();
});
}
</script>
Also, WordPress is probably calling its own instance of jQuery, so you can use window.jQuery to test before including your own, like this:
<script type="text/javascript">
window.jQuery || document.write('<script src="https://code.jquery.com/jquery-1.7.2.min.js"><\/script>');
</script>
Resources:
jQuery.noConflict()
HTML5 Boilerplate

Is it possible to include the comment in a comment by using JS or other PL?

Is it possible to include the comment in a comment by using any other languages? The only condition is that I'am building static website, so we need to avoid using PHP.
I know that this has been asked already, and it is here. The answer states that I need to use version control, but that answer is on the year 2011. This question is also the same here and it clearly says it is not possible in HTML, but the answer is on the year 2012. Are there any other methods out there? It's almost 2015, maybe I can achieve it by using JS?
I would like to use that in a situation where I can easily make the sources online (if I have the internet) and offline (If I don't have internet).
Sample code:
<!-- Offline Sources -->
<script type="text/javascript" src="javascripts/javapreloadjs-0.4.1.min.js"></script>
<!-- preloadjs-0.4.1.min.js -->
<script type="text/javascript" src="javascripts/bitmapdata-1.0.2.min.js"></script>
<!-- bitmapdata-1.0.2.min.js -->
<script type="text/javascript" src="javascripts/vector3d-1.2.0.min.js"></script>
<!-- vector3d-1.2.0.min.js -->
<script type="text/javascript" src="javascripts/stats.js"></script>
<!-- stats.min.js -->
<script type="text/javascript" src="javascripts/break-image.js"></script>
<!-- Break Image end -->
<!-- Online Sources -->
<!--
<script type="text/javascript" src="http://jsrun.it/assets/o/w/w/d/owwdC"></script>
<!-- preloadjs-0.4.1.min.js -->
<script type="text/javascript" src="http://jsrun.it/assets/t/C/4/c/tC4cT"></script>
<!-- bitmapdata-1.0.2.min.js -->
<script type="text/javascript" src="http://jsrun.it/assets/i/d/o/F/idoFR"></script>
<!-- vector3d-1.2.0.min.js -->
<script type="text/javascript" src="http://jsrun.it/assets/3/n/9/C/3n9CY"></script>
<!-- stats.min.js -->
<script type="text/javascript" src="http://jsrun.it/assets/j/L/J/z/jLJzs"></script>
<!-- Break Image end -->
-->
Notice that this will only comment this code
<!--
<script type="text/javascript" src="http://jsrun.it/assets/o/w/w/d/owwdC"></script>
<!-- preloadjs-0.4.1.min.js -->
Because the HTML thinks that the first --> is the end of a comment.
There are also situation where I'am debugging the code that has lots of comment trying to explain everything and I just want to comment a certain block of codes so I can try something.
Like this
<!-- Temporary comment so I can play with this portion of code
<!-- Header part -->
<h1> Sample Header</h1><!-- This is a header -->
<!-- End of Header -->
-->
<!-- Header part -->
<h1>Now I can do anything that I want to this code while leaving a comment of this portion of the code!</h1><!-- This is a header -->
<!-- End of Header -->
I'm guessing you want to do this because one set of conditions should import one thing vs another. I think javascript is the best tool for this anyway, even if you could use plain html (which you can't, because comments can't be nested in html).
You can load the set of script dynamically, based on whatever conditions need to be met:
http://api.jquery.com/jQuery.getScript/
Or you could roll up your own (if you're jQuery-averse) by running an XMLHttpRequest and then executing the script.

Categories

Resources