I have a webpage that I have the JavaScript in a separate file from my HTML file. I have imported
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
in my HTML file but when I attempt to work in my js file to make some updates after a while away I get the following error
ERROR: '$' is not defined.[no-undef]
ERROR: 'document' is not defined. [no-undef]
Example where the above errors are references in my js code:
$(document).ready(function () {
$("#screenNum").hide();
...
}
The document Renders in the browser with no issues and the JS functions as designed and when I look at the developer tools in the browser there are no errors. I would like to get rid of these errors so that I can focus on actual errors.
It has been a couple years since I have worked on this document and I wanted to make some enhancements to it and am just now getting back to it. I do not recall this error when I last worked in it in Dreamweaver and do not know what I am missing.
All the similar questions I have looked at similar to this seem to deal with when the JavaScript is in the HTML document and not in a separate file.
Thank you, Tim Hunter, adding the below code worked perfectly.
/* global $, document*/
I need to dynamically render partial with certain names. In the back end, I set the following:
render.js
const myPartialFunction = _.constant('site/myPartial');
And in the hbs template, I try to get the value of myPartialFunction
page.hbs
{{> (myPartialFunction)}}
It renders the partial correctly, but I got the following error:
The partial undefined could not be found
However the following doesn't cause error
page2.hbs
{{> site/myPartial}}
Though using {{> (myPartialFunction)}} works, getting error every time the page is rendered is very annoying
How can I solve this problem?
I just upgraded an existing project to the latest version of jhipster. When logging in I get a Javascript error message: Cannot read property 'preventDefault' of undefined. I can see that in the login.controller.js a new line is added event.preventDefault(); (the problem is caused by this line) is added, which wasn't there in the previous version. I don't know where to look for a solution (my Angular knowledge is very limited). Can anyone give me a hint of where to look? Thanks!
The problem is not in login.controller.js, it's in account/login/login.html. Maybe you have customized this view template and did not update it. It should include this form definition:
<form class="form" role="form" ng-submit="login($event)">
I am trying to use an "Infinite Ajax Scrolling" Orchard module.
https://gallery.orchardproject.net/List/Modules/Orchard.Module.Orchard.jQuery.Ias
I installed the module through admin interface. I made necessary modifications described on the given link. Also, I had to do an extra modification that is described in the comments.
The infinite scrolling thing is just not functioning. I created about 30 blog posts in order to test it. When I scroll through blog posts through public website, first page og blog posts is loaded and when I scroll to the bottom, nothing happens. Pager is not visible (expected), but no new content is appended to the bottom of the list (not expected).
When I scroll through blog posts using Admin interface and I scroll down sufficiently, Chrome console reports couple of things:
Uncaught Error: Syntax error, unrecognized expression: <!DOCTYPE html>
<html lang="en-US" class="static orchard-blogs">
<head>
<meta charset="utf-8" />
<title>Proba - Manage Infinite Blog</title>
<link href="/OrchardLocal/Modul...<omitted>...l> jquery-1.9.1.js:4421
Sizzle.error jquery-1.9.1.js:4421
tokenize jquery-1.9.1.js:5076
select jquery-1.9.1.js:5460
Sizzle jquery-1.9.1.js:3998
jQuery.fn.extend.find jquery-1.9.1.js:5576
jQuery.fn.jQuery.init jquery-1.9.1.js:196
jQuery jquery-1.9.1.js:62
jQuery.fn.jQuery.init jquery-1.9.1.js:201
jQuery jquery-1.9.1.js:62
(anonymous function) jquery.ias.min.js:210
fire jquery-1.9.1.js:1037
self.fireWith jquery-1.9.1.js:1148
done jquery-1.9.1.js:8074
callback
A moment after:
GET http://localhost:30321/modules/orchard.jquery.ias/styles/images/loader.gif 404 (Not Found) jquery-1.9.1.js:6469
jQuery.extend.buildFragment jquery-1.9.1.js:6469
jQuery.extend.parseHTML jquery-1.9.1.js:531
jQuery.fn.jQuery.init jquery-1.9.1.js:149
jQuery jquery-1.9.1.js:62
get_loader jquery.ias.min.js:266
show_loader jquery.ias.min.js:279
paginate jquery.ias.min.js:167
scroll_handler jquery.ias.min.js:99
jQuery.event.dispatch jquery-1.9.1.js:3074
elemData.handle jquery-1.9.1.js:2750
In the admin interface I checked Blog properties and it seems to be configured fine. All default values are in place for [Container, Item, Pager, NextAnchor], and these values are also present in the html file I'm viewing when reported errors occur.
EDIT (after justrhysism's answer)
After implementing justrhysism's answer, I focused on why infinite scrolling works in the dashboard but not in front-end.
When I opened a list of blog posts in dashboard, I located .pager element.
<ul class="pager">
<li class="first"><span>1</span></li>
<li>2</li>
<li class="last">></li>
</ul>
I opened a list of blogs in front-end, and also located .pager element.
<ul class="pager" shape-id="92" style="display: none;">
<li class="first" shape-id="92"><span shape-id="93">1</span></li>
<li shape-id="92">2</li>
<li shape-id="92">></li>
<li class="last" shape-id="92"></li>
</ul>
Then I inspected javascript in charge for triggering async loading of content.
function paginate(curScrOffset, onCompleteHandler)
{
urlNextPage = $(opts.next).attr("href"); // evaluates to $(".zone-content .pager .last a").attr("href")
...............
}
And found out that the urlNextPage variable always gets set to undefined in front-end view.
Problem
I've come across this before. It's a document parsing error. There is a whitespace character (of some description) at the top of the document which Orchard returns instead of the <! which is expected. Somebody with more knowledge of AJAX and document parsing could better describe this.
Solution
To fix this, find the view Document.cshtml within Orchard's Core (located in src\Orchard.Web\Core\Shapes\Views) and copy it to your Theme's View directory.
In this file, look to Line 10 where <!DOCTYPE html> starts. Above this, remove the line break between the closing brace } and the DOCTYPE declaration.
Before:
}
<!DOCTYPE html>
After:
}<!DOCTYPE html>
This should fix your issue.
The Infinite Ajax Scrolling module for Orchard CMS is on Github
https://github.com/grapto/js.Ias
In response to my last edit where urlNextPage was being set to undefined.
I changed the NextAnchor selector in Blog properties:
From default value of ".zone-content .pager .last a" ----> To ".zone-content .pager a".
Also I went into Orchard.jQuery.Ias module -> Scripts/jquery.ias.min.js
Changed paginate function.
Old:
function paginate(curScrOffset, onCompleteHandler)
{
urlNextPage = $(opts.next).attr("href");
....
New:
function paginate(curScrOffset, onCompleteHandler)
{
if ($(opts.pagination).find(".last span").length)
return; // if span element exists in .last element, that means we are on the last page
urlNextPage = $(opts.next).last().attr("href");
....
It works fine now, both in dashboard and in front-end. This is not a very reliable solution, because I made an assumption that last anchor tag in .pager will always lead to the next page. That assumption is based merely on my observations of module's behavior.
How to bind Style Properties in winJS ? ?
<div data-win-bind="background: bindingClass;">
this doesnt seem to work
But
<div data-win-bind="innerHTML: bindtext;">
This seem to work even textContent seem to Bind.
Nice one . Clear topic winJs :)
Here's the code
<div data-win-bind="style.background: bindingColor; innerHTML : bindingText">
So both can be accomodated :)