enter code hereHi
I am new to juice UI and jQuery in general, but wanted to used juice in my app. Now I downloaded the package via Nuget and install log was fine. And all scripts is located in the scripts folder and contents folder, in short all looks good.
Now problem is, when I add my control, tried both acordion and button I get "'jQuery' is undefined" and control is not working. Using IE script debugger I can see that it is when amplify is used:
SCRIPT5009: 'jQuery' is undefined
amplify.js, line 471 character 2
Refresh the page to see messages that may have occurred before the F12 tools were opened.
SCRIPT5009: 'jQuery' is undefined
juice.js, line 1 character 2
My code for testing is pretty clean:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<button id="_DefaultButton" runat="server">A Button Element</button>
<juice:button ID="Button1" TargetControlID="_DefaultButton" runat="server" />
</div>
</form>
</body>
</html>
Anybody any ideas?
I had similar issues, which was resolved by putting the script references into the scriptManager
<asp:ScriptManager runat="server">
<Scripts>
<asp:ScriptReference Path="~/Scripts/jquery-1.8.3.js"/>
<asp:ScriptReference Path="~/Scripts/jquery-ui-1.9.2.js"/>
</Scripts>
</asp:ScriptManager>
Set the paths to whatever script dependancies you are missing.
It was a mistake in references to jQuery code, hard coded in JuiceUI dll, looking for jQuery 1.8.0 instead of 1.8.2 .
Now it should work if you upgrade to 1.0.1
Related
I'm trying to build a project with Laravel and Vue. I'm using the Frontend Scaffolding as described here: https://laravel.com/docs/7.x/frontend
$ composer require laravel/ui
$ php artisan ui vue
This loads Bootstrap and creates some javascript files and SCSS files:
-->resources
|-->js
|-->app.js
|-->bootstrap.js
|-->sass
|-->_variables.scss
|-->app.scss
This also makes some changes to resources/views/welcome.blade.php
What I don't understand is where / how resources/sass/app.scss is used by Vue. I have tried changing some things in _variables.scss, like base font size and font family, but I don't see the results reflected anywhere. At the same time, the file is obviously being processed by npm run dev because if, for example, I introduce a syntax error, the npm run dev command will report it.
I'm sorry if this is insufficient details to answer my question, I'm trying my best. I'm not very experienced with Vue. If there's anything else you need to know, please ask in the comments.
Writing CSS
The npm run dev command will process the instructions in your webpack.mix.js file. Typically, your compiled CSS will be placed in the public/css directory:
npm run dev
The webpack.mix.js file included with Laravel's frontend scaffolding will compile the resources/sass/app.scss SASS file. This app.scss file imports a file of SASS variables and loads Bootstrap, which provides a good starting point for most applications. Feel free to customize the app.scss file however you wish or even use an entirely different pre-processor by configuring Laravel Mix.
What in a few words would be that you work in the resources/sass/app.scss file, then compile with npm run ... and you will have the resulting css in the /public/css/app.css file. You can change/configure that on the webpack.mix.js file.
Then you load the compiled file in some view, as you would with html and common css:
<link href="/css/app.css" rel="stylesheet" type="text/css" />
But if you want to take advantage of other laravel mix features, you can use the mix() method:
<link href="{{ mix('css/app.css') }}" rel="stylesheet" type="text/css" />
Typically the css is loaded into a blade template that has the <html>, <head> and <body> tags that you can use as a layout from which to extend your other views.
Ie:
/resources/views/layouts/app.blade.php
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ mix('js/app.js') }}" defer></script>
<!-- Styles -->
<link href="{{ mix('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
#yield('content')
</div>
</body>
</html>
/resources/views/home.blade.php
#extends('layouts.app')
#section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Home</div>
<div class="card-body">
#if (session('status'))
<div class="alert alert-success" role="alert">
{{ session('status') }}
</div>
#endif
You are in Home view!
</div>
</div>
</div>
</div>
</div>
#endsection
I arrived to deploy my spring boot application on tomcat, I followed this site https://www.mkyong.com/spring-boot/spring-boot-deploy-war-file-to-tomcat/
But I did changes to my html files:
my application name is : GestionRetardApp its version is '0.0.1'
before making changes in my html files, I have this file as example:
<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="layout/layout">
<head>
<meta charset="UTF-8" />
</head>
<body>
<div layout:fragment="content">
<center>
<form action="/searchByName">
<table>
<tr>
<td><select name="nomprenom" class="form-control">
<th:block th:each="p : ${rhEmployeesList}">
<option th:text="${p.nomPrenom}" th:value="${p.nomPrenom}"></option>
</th:block>
</select></td>
</tr>
</table>
<input type="submit" value="Rechercher">
</form>
</center>
</div>
</body>
</html>
I find my self forced to change <form action="/searchByName"> to
<form action="/GestionRetardApp-0.0.1/searchByName">
I did that for all the urls that I have!
Is there another way to keep my default code and don't make changes to my html files?
There are several ways to do it.....
1. use <base href="${pageContext.request.contextPath}/" />
Use a global javascript variable and append it with all network calls
pass the baseUrl as parameter to template. Then: <a th:href="${baseUrl + '/my/uri?maybe=' + someParam}".
Hope that helps.
You can make your application as default in tomcat.
Steps:
delete the ROOT directory
name your war file "ROOT.war" (capitals mandatory)
drop the ROOT.war file directly in the /webapps directory.
There are other ways, too please read How do I make my web application be the Tomcat default application?
I am developing a Magento 2.3 site which was working but has stopped. When I try to get a page up, I get a blank screen. Although it looks empty, it actually contains a little content:
<!doctype html>
<html lang="en">
<head >
<meta charset="utf-8"/>
<meta name="description" content="Blah Blah"/>
<meta name="keywords" content="More blah blah"/>
<meta name="robots" content="INDEX,FOLLOW"/>
<title></title>
<link rel="icon" type="image/x-icon" href="http://www.magento2.domain/pub/media/favicon/stores/1/3-ladies-bg.jpg" />
<link rel="shortcut icon" type="image/x-icon" href="http://www.magento2.domain/pub/media/favicon/stores/1/3-ladies-bg.jpg" />
<link href='https://fonts.googleapis.com/css?family=Prosto+One' rel='stylesheet' type='text/css' />
<!--xxxabb2c66c7681e8f658-->
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-xxxx-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-131267613-1');
</script> </head>
<body data-container="body" data-mage-init='{"loaderAjax": {}, "loader": { "icon": "http://www.magento2.domain/pub/static/version1551796553/frontend/_view/en_GB/images/loader-2.gif"}}' class="cms-index-index page-layout-1column">
</body>
</html>
If I look in the system log, I see the following errors:
[2019-04-30 21:24:48] main.INFO: Broken reference: the 'theme.active.editor' element cannot be added as child to 'after.body.start', because the latter doesn't exist [] []
[2019-04-30 21:24:48] main.INFO: Broken reference: the 'logger' element cannot be added as child to 'after.body.start', because the latter doesn't exist [] []
I've enabled error logging but I get nothing. Can anyone help?
Alternatively, can somebody point me to a good map (or similar) of how magento 2 builds a page so I can try and track down the error.
I have tracked down the issue to a problem with pub/generated/metadata/global.php. Even regenerating it causes the same problem. If I delete the file everything seems to work ok. I confess to not understanding why!
I now avoid this by not running bin/magento setup:di:compile. I simply run php bin/magento setup:static-content:deploy.
I think this error is due to a broken reference in some XML file. You have not mentioned in which page you are getting this error. But you can trace it as below:
First of all, rename your default.xml from below path:
app/design/frontend/Vendor/Theme_name/Magento_Theme/layout/default.xml
Flush all the cache and check(php bin/magento cache:flush)
If you don't find anything then rename your page(homepage, listing, detail page, etc) related file.
For example, if you are getting this error on the homepage then rename cms_index_index.xml.It can reside in your theme or any custom extension.
Hopefully, this information can help you with the issue.
remove everything under generated folder except .htaccess file
I am using Magento 2.3.2 version. In production mode generating generated directory using setup:di:compile is working fine. However, in developer mode doing same is making all pages on frontend blank but not empty (content inside body tag is empty) so I deleted the generated folder and let it be created automatically as I access the site pages. Doing this resolved the issue for me.
Just go to Magento directory and then delete file generated by di:compile is path :-
magento\generated\metadata\global.php delete this file then after refersh your page.
This is temporary solution for this error in local server.
I am using QUnit+Sinon.js which works well natively.
The problem was occured when I tried to build it into a continous integration process.
I am using js-test-driver framework to be able to run it in continous integration enviroment.
In the past I used it without Sinon.js and it wasn't any problem with that.
But after I included the Sinon.js plugin, it doesn't work at all.
When I tried to run my tests it says:
D:/my/project/url/contentTest.js:60: TypeError: qTest is not a function
Total 0 tests (Passed: 0 Fails: 0 Errors: 0)(0.00 ms)
My js-test-driver configuration:
server: http://localhost:9879
load:
# QUnit related files
- qunit/lib/equiv.js
- qunit/lib/QUnitAdapter.js
- qunit/plugin/sinon-1.6.0.js
- qunit/plugin/sinon-qunit-1.0.0.js
# Dependencies
- external/jquery/1.7.2/jquery.min.js
# Files under test
- content.js
# Tests
- contentTest.js
The interesting thing is that there is a QUnit index.html file which works well (when I open this html, every tests passes):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>my tests</title>
<link rel="stylesheet" href="./qunit/lib/qunit-1.11.0.css">
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<!-- core -->
<script src="./qunit/lib/qunit-1.11.0.js"></script>
<script src="./qunit/plugin/sinon-1.6.0.js"></script>
<script src="./qunit/plugin/sinon-qunit-1.0.0.js"></script>
<!-- dependencies -->
<script src="./external/jquery/1.7.2/jquery.min.js"></script>
<!-- under test -->
<script src="./content.js"></script>
<!-- tests -->
<script src="./contentTest.js"></script>
</body>
</html>
So it seems there is a conflict with js-test-driver and Sinon.js. If I remove all related Sinon.js tests and the included sinon plugins, then it works.
If I just remove the sinon related tests, it still failes.
If I don't remove sinon.js but remove all tests and create an emty test with an "ok(true)" assert, then it still fails with the same error message (contentTest.js:60: TypeError: qTest is not a function), however my test file is consists just 10 row (how it could be an error in 60.th line when my file consists only 10 line?).
Thank you all for any helps in advance!
Not a solution, but perhaps an approach to get more information: can you run the js-test-driver scripts locally from a shell? Does it produce similar error details? At the very least, this will give you more information and a shorter feedback loop.
There is an existing CK editor folder in my project. How can I find out it's version? Is it documented?
just make an alert as below in the config.js file, it gives the value
alert(CKEDITOR.version);
or you can see it directly in the file ckeditor_php4.php, for eg:
var $version = '3.6.3';
working demo :
alert(CKEDITOR.version);
console.log("CKEDITOR.version ==",CKEDITOR.version);
<head>
<meta charset="utf-8">
<title>CKEditor</title>
<script src="https://cdn.ckeditor.com/4.11.4/standard/ckeditor.js"></script>
</head>
<body>
<textarea id="editor1"></textarea>
<script>
CKEDITOR.replace( 'editor1' );
</script>
</body>
I checked version 3.6 and version info is located f.e. in:
/ckeditor/CHANGES.html
CKEditor Changelog
CKEditor 3.6.6.1
4.X uses mark down file:
/ckeditor/CHANGES.md
CKEditor 4 Changelog
====================
## CKEditor 4.4.1
CKEDITOR.version
running this in the console should tell you the version.
And as for the documentation, you can find it in this URL:
https://docs.ckeditor.com/ckeditor4/latest/api/CKEDITOR.html#property-version
In latest CKEditors there is a button in default panel "?". Click it and you'll see version number. Otherwise if button not exist you need to check source files. At the beginning they definitely should contain author data & version number.
CKEDITOR.version will give current version of CKEDITOR
alert(CKEDITOR.version);
console.log("CKEDITOR.version ==",CKEDITOR.version);
<head>
<meta charset="utf-8">
<title>CKEditor</title>
<script src="https://cdn.ckeditor.com/4.11.4/standard/ckeditor.js"></script>
</head>
<body>
<textarea id="editor1"></textarea>
<script>
CKEDITOR.replace( 'editor1' );
</script>
</body>
Look inside the ckeditor/ckeditor.js file. At the top of the file, you can find the version.