Meteorjs - undefined function for ignite ui plugin - meteor

Getting the following error
Exception from Tracker afterFlush function: undefined is not a function
TypeError: undefined is not a function
<head>
<title>Orion</title>
<link href="http://cdn-na.infragistics.com/igniteui/2014.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2014.2/latest/css/structure/infragistics.css" rel="stylesheet" />
<!-- JavaScript Library Dependencies -->
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="http://modernizr.com/downloads/modernizr-latest.js"></script>
<!-- Ignite UI Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/2014.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2014.2/latest/js/infragistics.dv.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2014.2/latest/js/infragistics.lob.js"> </script>
</head>
<template name="currencyData">
<div class="container">
<div id="gridChartContainer">
<table id="grid"></table>
</div>
</div>
Template.currencyData.rendered = function() {
if (this.find("#grid")) console.log("Found the grid");
this.find("#grid").igGrid({
width: "100%",
dataSource: currencyData,
autoGenerateColumns: true,
});
}


Found the issue with the calls...
Modified my function to look as below
Template.currencyData.rendered = function() {
this.$("#grid").igGrid({
width: "80%",
dataSource: currencyData,
autoGenerateColumns: true,
});
}

Related

Owl Carousel not working with ASP.NET Blazor

I have been trying to make this owl carousel work.
I am not getting any error but the carousel if not loading. I tried the solution I found on StackOverflow for Bootstrap carousel but it did not work for me. I also tried to use pure CSS carousel but it will be static kind of thing and I want the carousel to work dynamically.
Index.razor
#page "/"
#using TBS.Data;
#inject IJSRuntime JsRuntime;
#*#inject IComponentContext context;*#
#inject NavigationManager UriHelper;
#inject MediaService MediaService;
#inject ContentService ContentService;
<div class="container hero-section">
<div class="owl-carousel owl-theme slide">
<div class="hero-image item">
<img src="images/here-image.png" alt="hero-img" class="img-fluid">
<div class="hero-details">
<h2>MATT RISINGER</h2>
<h6>Home Builder. Austin, TX.</h6>
<button>EXPLORE CHANNEL</button>
</div>
</div>
<div class="hero-image item">
<img src="images/here-image.png" alt="hero-img" class="img-fluid">
<div class="hero-details">
<h2>MATT RISINGER</h2>
<h6>Home Builder. Austin, TX.</h6>
<button>EXPLORE CHANNEL</button>
</div>
</div>
</div>
</div>
_Host.cshtml
#page "/"
#namespace TBS.Pages
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>The Build Show</title>
<base href="~/" />
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<script src="js/jquery-3.4.1.min.js"></script>
<link rel="stylesheet" href="style.css">
<environment include="Development">
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
</environment>
<environment exclude="Development">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
asp-fallback-href="css/bootstrap/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute"
crossorigin="anonymous"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" />
</environment>
<link href="css/site.css" rel="stylesheet" />
<link href="css/showvideo.css" rel="stylesheet" />
<link href="css/default.css" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" rel="stylesheet"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link href="https://cdn.syncfusion.com/ej2/17.2.35/material.css" rel="stylesheet" />
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-36173959-17"></script>
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/hls.js#latest"></script>
<script src="https://cdn.syncfusion.com/ej2/17.2.35/dist/ej2.min.js"></script>
<script src="https://cdn.syncfusion.com/ej2/17.2.35/dist/ejs.interop.min.js"></script>
<script type="text/javascript" src="js/indexedDb.Blazor.js"></script>
<script type="text/javascript" src="js/functions.js"></script>
</head>
<body>
<app>
#(await Html.RenderComponentAsync<App>(RenderMode.Server))
</app>
<script src="_framework/blazor.server.js"></script>
<script src="_content/BlazorStrap/blazorStrap.js"></script>
<script src="_content/BlazorStrap/popper.min.js"></script>
#*<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script>*#
<script type='text/javascript'>
(function ($) { window.fnames = new Array(); window.ftypes = new Array(); fnames[0] = 'EMAIL'; ftypes[0] = 'email'; fnames[1] = 'FNAME'; ftypes[1] = 'text'; fnames[2] = 'LNAME'; ftypes[2] = 'text'; fnames[3] = 'ADDRESS'; ftypes[3] = 'address'; fnames[4] = 'PHONE'; ftypes[4] = 'phone'; }(jQuery)); var $mcj = jQuery.noConflict(true);
</script>
<script src="js/custom.js">
</script>
<script src="js/owl.carousel.min.js"></script>
<script>
$('.slide').owlCarousel({
loop: true,
margin: 10,
nav: true,
dots: false,
autoplay: true,
responsive: {
0: {
items: 1
},
600: {
items: 1
},
1000: {
items: 1
}
}
});
$('.slide1').owlCarousel({
loop: true,
margin: 10,
nav: true,
dots: false,
responsive: {
0: {
items: 1
},
600: {
items: 2
},
1000: {
items: 3
}
}
});
$('.slide2').owlCarousel({
loop: true,
margin: 10,
nav: true,
dots: false,
responsive: {
0: {
items: 1
},
600: {
items: 2
},
1000: {
items: 3
}
}
});
$('.slide3').owlCarousel({
loop: true,
margin: 10,
nav: true,
dots: false,
responsive: {
0: {
items: 1
},
600: {
items: 2
},
1000: {
items: 3
}
}
});
</script>
</body>
</html>

I had a similar issue, i figured it out that to use JavaScript library you need to use JInterop. So after referencing all required library, i created a js file in my root folder wwwroot called main.js, and i added the reference to my index.html file like this
<script src="main.js"></script>
Inside this main.js file i created a function that contains all the javascript code i need to run my slider. So the code inside main.js file looks like this.
(function($) {
'use strict';
window.sliderFunctions = {
startSlider: function () {
/*============ All the code or function you need for your slider to run goes here ============*/
--code--
}
}}
Then i opened my app.razor file, then injected JSRuntime like so
#inject IJSRuntime JSRuntime
then still in my app.razor file, i added the following code
#code {
protected async override Task OnAfterRenderAsync(bool firstRender)
{
await JSRuntime.InvokeAsync<string>("sliderFunctions.startSlider", null);
//return base.OnAfterRenderAsync(firstRender);
}}
What simple happened is, this allows to run all javascript code after Blazor is done rendering.

Fullcalendar is not syncing with Google Calendar

I have done everything according to the documentation provided on https://fullcalendar.io/docs/google-calendar
I created a new calendar for this specific purpose.
I have purposely left the API key and calendarID blank
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='../fullcalendar.min.css' rel='stylesheet' />
<link href='../fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script src='../lib/moment.min.js'></script>
<script src='../lib/jquery.min.js'></script>
<script src='../fullcalendar.min.js'></script>
<script src='fullcalendar/gcal.js'></script>
<script>
$(function () {
$('#calendar').fullCalendar({
googleCalendarApiKey: '',
events: {
googleCalendarId: ''
}
});
});
</script>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
Solved Check comments for answer

Angular Material slider direction issues

I have an angular material slider that needs to reside inside a div with a dir="rtl" style. However, when ever I add the dir="rtl" tag the slider is getting all messed up (the mouse isn't capturing it correctly and coloring is not accurate).
Here's a full HTML example of the problem:
<html>
<head>
<link rel="stylesheet" href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.3/angular-material.css">
</head>
<body>
<div ng-app="MyApp" ng-controller="AppCtrl" dir="rtl">
<md-slider min="0" max="255" ng-model="value" aria-label="red" id="red-slider">
</md-slider>
Value: {{value}}
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-messages.min.js"></script>
<script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.3/angular-material.js"></script>
<script>
angular.module('MyApp', ['ngMaterial'])
.controller('AppCtrl', function ($scope) {
});
</script>
</body>
I've tried changing the direction of the slider itself and placing it inside another div dir="ltr" but without success.

<html>
<head>
<link rel="stylesheet" href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.3/angular-material.css">
<style>
[dir=ltr] md-slider .md-thumb {
left: auto;
right: auto;
}
[dir=ltr] md-slider .md-thumb-container {
left: 0;
right: auto;
}
</style>
</head>
<body>
<div ng-app="MyApp" ng-controller="AppCtrl" dir="rtl">
<div dir="ltr">
test
<md-slider min="0" max="255" ng-model="value" aria-label="red" id="red-slider">
</md-slider>
</div>
Value: {{value}}
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-messages.min.js"></script>
<script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.3/angular-material.js"></script>
<script>
angular.module('MyApp', ['ngMaterial'])
.controller('AppCtrl', function ($scope) {
});
</script>
</body>
when you override this class it seems to work

What's wrong in this code? I have difficulty finding out as i just started learning jQuery and jQuery UI

<!DOCTYPE html>
<html>
<head>
<title>jQuery Dialog Example</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
</head>
<script>
$(document).ready($(function() {
//Dialog box
$("#dialog").dialog({
autoOpen: false
});
//button to open dialog box
$("#button").click(function(event) {
$("#dialog").dialog("open");
});
});
</script>
<body>
//div containing info about the dialog box
<div id="dialog">
<p>This is supposed to be a calculator</p>
</div>
<input id="button" type="submit" value="Open">
</body>
</html>

Change $(document).ready($(function() { to $(document).ready(function() {
and also check if the braces are properly closed

React tutorial not loading base.css

I am having trouble with the React tutorial. After some help from stackoverflow I was able to get the server/API running, but now for some strange reason base.css is not loading.
base.css is in the css folder where it should be, and when I'm editing in Dreamweaver it automatically loads base.css just fine, so I'm really confused.
Here is my index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React Tutorial</title>
<!-- Not present in the tutorial. Just for basic styling. -->
<link rel="stylesheet" href="css/base.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/babel">
var Comment = React.createClass({
render: function() {
return (
<div className="comment">
<h2 className="commentAuthor">
{this.props.author}
</h2>
{this.props.children}
</div>
)
}
});
var CommentList = React.createClass({
render: function() {
return (
<div className="commentList">
<Comment author="Pete Hunt"> This is one comment</Comment>
<Comment author="Jordan Walke"> This is another comment</Comment>
</div>
);
}
});
var CommentForm = React.createClass({
render: function() {
return (
<div className="commentForm">
Hello, world! I am a CommentForm.
</div>
);
}
});
var CommentBox = React.createClass({
render: function() {
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList />
<CommentForm />
</div>
);
}
});
ReactDOM.render(
<CommentBox />,
document.getElementById('content')
);
</script>
</body>
</html>

The problem was I needed to add a leading slashing to the .css file reference.
became
The css was loaded and applied to the page.

Resources