Datepicker is working if I use it on page "localhost:4444/test" , "localhost:4444/test2" and "localhost:4444/dummy" but if I change the URL to "localhost:4444/test1/test2" then it is not working. I have verified it on multiple times. If there is a child page then datepicker pop-up is not getting displayed.
I tried it even on a basic page without models.
Here I am using thymeleaf, webjars/bootstrap, webjars/jquery, webjars/bootstrap-datepicker.
I am new to frontend , let me know if I am missing anything here or for additional info.
Edit1: In all scenarios at least it is showing up, just problem with pop up
Edit2:
controller:
#RequestMapping("/test") [working]
public String testPage( ){
return "helper/calender_test";
}
#RequestMapping("/test2/dummy") [not-working]
public String dummyPage(){
return "helper/calender_test";
}
helper/calender_test:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8"/>
<meta content="IE=edge" http-equiv="X-UA-Compatible"/>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<link rel="stylesheet" th:href="#{/webjars/bootstrap/4.5.3/css/bootstrap.min.css}" type="text/css"/>
<link rel="stylesheet" th:href="#{/webjars/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker3.standalone.css}" type="text/css"/>
<link rel="stylesheet" th:href="#{/webjars/font-awesome/5.15.1/css/all.css}" type="text/css"/>
<title>Test</title>
</head>
<body>
<div class="container">
<div class="input-group date" id='example'>
<input class="form-control" type='text' placeholder= "date" />
<span class="input-group-addon">
<span class="input-group-text">
<i class='far fa-calendar-alt'></i>
</span>
</span>
</div>
</div>
<script th:src="#{/webjars/jquery/3.5.1/jquery.min.js/}" type="text/javascript"></script>
<script th:src="#{/webjars/bootstrap/4.5.3/js/bootstrap.min.js}" type="text/javascript"></script>
<script th:src="#{webjars/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.js}" type="text/javascript"></script>
<script>
$('#example').datepicker({
format: 'dd/mm/yyyy',
todayHighlight: true,
autoclose: true,
clearBtn: true,
endDate: '0d',
startDate: '-5y'
});
</script>
</body>
</html>
I have found the root cause. There was one missing slash before the bootstrap-datepicker.js link. After giving the proper path it worked.
Related
I'm trying to link a css file into this blade header.blade.php
It doesn't work, and nothing I've tried so far would work, except if i put the into the same file of the *.blade.php that I'm using.
:::layouts/header.blade.php:::
#section('header')
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Help</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
<!-- Styles -->
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<!-- Scripts -->
<script src="{{ asset('js/jquery.js') }}"></script>
</head>
<body>
#stop
////eof////
:::master.blade.php:::
#extends('layouts/header')
<div class="flex-center position-ref full-height">
#if (Route::has('login'))
<div class="top-right links">
#auth
Home
#else
Login
Register
#endauth
</div>
#endif
<div class="content">
<div class="title m-b-md">
Master
</div>
<div class="links">
About
Work
</div>
</div>
</div>
#yield('footer')
Make sure your css file is in your 'public' directory, ie: 'public/css/styles.css'
Then try:
<!-- Styles -->
<link href="{{ url('css/styles.css') }}" rel="stylesheet" type="text/css" />
Include this code in your header.blade.php
<link rel="stylesheet" href="{!! asset('css/styles.css') !!}" media="all" type="text/css">
The problem wasn't the asset or url link
it was #section('header') and #stop in the first file -- layouts/header.blade.php.
Because using extend doesn't yield the content, yet it extends the html page -- I must've removed those from the html (or php) file (that is).
Best regards.
One other question.. to append to the current answer:
I've noticed that using #extends appends the HTML instead of inserting at the point where the function is called.
How to prevent this and so the html from the calling file goes where it's supposed to go (at the function call)?
SOLUTION
use #include instead
I am trying to make a simple login page with dojo, I have a button at the moment but it doesn't use the dojo theme. The css works when I copy everything from the theme of claro and make a local css file but it doesn't work when i try to load it from the link.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>Button test</title>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css ">
</head>
<script src="lib/dojo/dojo.js"></script>
<body class="claro">
<script>
require(["dijit/form/TextBox", "dijit/form/SimpleTextarea", "dojo/parser", "dojo/domReady!"]);
</script>
</body>
<body class="claro">
<button id="Button" data-dojo-type="dijit/form/Button"
data-dojo-props="
iconClass: 'dijitIconNewTask',
showLabel: false,
onClick: function(){ console.log('Second button was clicked!'); }">
Login
</button>
</html>
In brackets now I can only code jQuery inside the lines of my html file.
But now I want to code jQuery in another file, but of course I stall want that it interact with the html, for example that I can still target the divs:
$(".navbar")
HTML File :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Test</title>
<meta name="description" content="Test">
<link rel="stylesheet" href="main.css">
<script src="https://code.jquery.com/jquery.js"></script>
<script type="text/javscript" src="Javascript.js"</script>
</head>
<body>
<div class="navbar">
<p>Hello</p>
</div>
</body>
JS File :
$(document).ready(function(){
$(".navbar").click(function(){
$(".navbar").hide();
});
});
Apparently the reason why I can't have the jQuery-code in another file is a glitch in Brackets.
I've created a simple layout using grails default layout pattern.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title><g:layoutTitle default="my website" /></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="${resource(dir: 'images', file: 'favicon.ico')}" type="image/x-icon" />
<link rel="stylesheet" href="${resource(dir: 'css', file: 'main.css')}" type="text/css" />
<g:layoutHead />
<r:layoutResources />
</head>
<body id="mainContainer">
<g:render template="/templates/headerTemplate"></g:render>
<g:render template="/templates/menuTemplate"></g:render>
<g:layoutBody />
<r:layoutResources />
</body>
</html>
Now so far as I understand the <g:layoutBody /> renders the body content. (Please correct me if I'm mistaken). Now I've applied custom styling to the <body> tag of each pages. But that styling is not being applied to my rendered view. Eg. I've an image which I want to apply to the body. But that is not being applied. When I insert a div inside the body and apply the same image to it, its getting applied to it.
<!DOCTYPE html>
<html>
<head>
<meta name="layout" content="mainLayout"/>
<title>Match List</title>
<script type="text/javascript" src="${resource(dir:'js',file:'matchDetailsJS.js')}"></script>
</head>
<body class="myclass"> </body>
</html>
My css file is getting included as my styling is being applied to other elements.
What am I missing? Is something wrong with my g:layout? I tried finding in the documentation but so far did'nt find anything much.
Let me know if my question is not clear.
Thanking you!!
I suspect this is because the layout needs to understand you have properties that you wish to supply for the body tag. The Grails documentation has a good example about using page property to specify an onload attribute of the body tag.
Here is the example modified for your needs.
layout
<title><g:layoutTitle default="my website" /></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="${resource(dir: 'images', file: 'favicon.ico')}" type="image/x-icon" />
<link rel="stylesheet" href="${resource(dir: 'css', file: 'main.css')}" type="text/css" />
<g:layoutHead />
<r:layoutResources />
</head>
<body id="mainContainer" class="${pageProperty(name:'body.class')">
<g:render template="/templates/headerTemplate"></g:render>
<g:render template="/templates/menuTemplate"></g:render>
<g:layoutBody />
<r:layoutResources />
</body>
how can I use elrte Editor inside asp.net website?(any example)
Elrte Editor is pure javascript solution (more clear jQuery), so for accessing any of it features you have to use some javascript in your asp.net web-site.
First of all you should add some required folder with all it insertions to you project. You can find it inside installation package - elrte-1.2.zip. You have to copy to your project next folders: css, js, images with all subfolders and it content.
Secondly add some reference into your asp page like here:
<!-- jQuery and jQuery UI -->
<script src="js/jquery-1.4.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-ui-1.8.7.custom.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/smoothness/jquery-ui-1.8.7.custom.css" type="text/css" media="screen" charset="utf-8"/>
<!-- elRTE -->
<script src="js/elrte.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/elrte.min.css" type="text/css" media="screen" charset="utf-8"/>
<!-- elRTE translation messages -->
<script src="js/i18n/elrte.ru.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$().ready(function () {
var opts = {
cssClass: 'el-rte',
// lang : 'ru',
height: 450,
toolbar: 'complete',
cssfiles: ['css/elrte-inner.css']
}
$('#editor').elrte(opts);
})
<style type="text/css" media="screen">
body { padding:20px;}
</style>
For accessing content of this editor we can use some javascript api that was prepared to us by developers of this editor. So, lets see it here and we will find out that for getting editor content, for example, we can use next expression:
var content = $('selector').elrte('val');
So, lets add some page and editor interoperability into our page.
Add some button and textbox to your page:
<asp:Button ID="btnSend" runat="server" OnClientClick= "ViewText();" Text="View text" />
<asp:TextBox ID="txtText" runat="server">test</asp:TextBox>
and add next javascript, also:
function ViewText() {
var content = $('#editor').elrte('val');
alert(content);
var MyLabel = $('#txtText');
MyLabel[0].value = content;
}
After implementing this functionality you can get editor's content as well using javascript alert function and setting your textbox value, which can be accessed in your server code, actually.
Full asp.net page code in my case was:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>elRTE</title>
<!-- jQuery and jQuery UI -->
<script src="js/jquery-1.4.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-ui-1.8.7.custom.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/smoothness/jquery-ui-1.8.7.custom.css" type="text/css" media="screen" charset="utf-8"/>
<!-- elRTE -->
<script src="js/elrte.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/elrte.min.css" type="text/css" media="screen" charset="utf-8"/>
<!-- elRTE translation messages -->
<script src="js/i18n/elrte.ru.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$().ready(function () {
var opts = {
cssClass: 'el-rte',
// lang : 'ru',
height: 450,
toolbar: 'complete',
cssfiles: ['css/elrte-inner.css']
}
$('#editor').elrte(opts);
})
function ViewText() {
var content = $('#editor').elrte('val');
alert(content);
var MyLabel = $('#txtText');
MyLabel[0].value = content;
}
</script>
<style type="text/css" media="screen">
body { padding:20px;}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="editor" runat="server">
</div>
<asp:Button ID="btnSend" runat="server" OnClientClick= "ViewText();" Text="View text" />
<br />
<asp:TextBox ID="txtText" runat="server">test</asp:TextBox>
</form>
</body>
</html>