Semantic UI - Accordion - Not working - javascript

Help me please, i have this libs:
<title>Semantic UI</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script scr="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.js"></script>
<script scr="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/components/accordion.js"></script>
and this is the html code:
<div class="ui container">
<div class="ui styled accordion">
<div class="title">
<i class="dropdown icon"></i>
Hello
</div>
<div class="content">
contenido 1
</div>
</div>
</div>
and js:
<script>
$('.ui.accordion').accordion();
</script>
What am I missing to work fine this element ? Am I need some scripts to add ? I have a browser console error:
TypeError: $('.ui.accordion').accordion is not a function. (In '$('.ui.accordion').accordion()', '$('.ui.accordion').accordion' is undefined)

you're script tags have the typo for the attribute src on your script tag. In your example, its spelled scr, so the page is never actually loading your libraries. So change:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script scr="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.js"></script>
<script scr="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/components/accordion.js"></script>
TO:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/components/accordion.js"></script>

You forgot to put accordion module.
Simple add after semantic.min.js:
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/components/accordion.js"></script>

Related

Add a JS click event on a CoreUI element on .c-class-toggler

Question
How can I add an additional click event on a CoreUI element.
As far as my debugging goes, the main problem is that CoreUI a lot of event.stopPropagation(); uses. This seems to destroy any further added click event.
Workaround
A hack I found was to comment out line 2293 in the coreui.js.
It's interesting, as this seams to be changed with Version 3.3.0. Even more confusing is, that version "3.2" (really 3.2.2) on https://unpkg.com has already this changes (s. code snippet below).
Example
In the code snippet you can see that the menu opens/closes correctly but the additional click event doesn't get trigger.
$(document).ready(function () {
// Trigger when sidebar change, only works with hack of coreui.js
$(document).on('click', '.c-class-toggler', function (event) {
console.log('hello world!');
});
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<link href="https://unpkg.com/#coreui/coreui#3.2/dist/css/coreui.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/1.5.0/css/perfect-scrollbar.min.css" rel="stylesheet"/>
<body class="c-app">
<div id="sidebar" class="c-sidebar c-sidebar-fixed c-sidebar-lg-show">
<div class="c-sidebar-brand d-md-down-none">
<a class="c-sidebar-brand-full h4" href="#">
Example
</a>
</div>
<ul class="c-sidebar-nav ps m-4">
<li class="c-sidebar-nav-item"><h3>Menu<h3></li>
</ul>
</div>
<div id="app" class="c-wrapper">
<header class="c-header c-header-fixed px-3">
<button class="c-header-toggler c-class-toggler d-lg-none" type="button" data-target="#sidebar" data-class="c-sidebar-show">
Menu
</button> <pre class="ml-2 mt-4"><- additional click event is not working</pre>
<button id="test" class="c-header-toggler c-class-toggler mfs-3 d-md-down-none" type="button" data-target="#sidebar" data-class="c-sidebar-lg-show" responsive="true">
Menu
</button>
<ul class="c-header-nav ml-auto">
</ul>
</header>
<div class="c-body">
<main class="c-main">
<div class="container-fluid">
<div class="card">
<div class="card-body">
<h2>Content</h2>
</div>
</div>
</div>
</main>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/1.5.0/perfect-scrollbar.min.js"></script>
<script src="https://unpkg.com/#coreui/coreui#3.2/dist/js/coreui.min.js"></script>
</body>
Note: It seems like I'm not the only one with this issue: https://github.com/coreui/coreui/issues/155
I just run again over my question, the whole thing works also without my described hack.
The trick is to hook on existing JS events.
The debugger console normal show you the exciting events, eg. in case of the sitebar there is a classtoggle event you can hook on (s. example in jsfiddle or below).
One issue withe coreui is that the events have often different names to the normal bootstrap events.
$(document).ready(function () {
// Triggers when existing sidebar events are called
$('#sidebar').on('classtoggle', function (event) {
console.log('hello world!');
$('.working').append('!');
});
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<link href="https://unpkg.com/#coreui/coreui#3.2/dist/css/coreui.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/1.5.0/css/perfect-scrollbar.min.css" rel="stylesheet"/>
<body class="c-app">
<div id="sidebar" class="c-sidebar c-sidebar-fixed c-sidebar-lg-show">
<div class="c-sidebar-brand d-md-down-none">
<a class="c-sidebar-brand-full h4" href="#">
Example
</a>
</div>
<ul class="c-sidebar-nav ps m-4">
<li class="c-sidebar-nav-item"><h3>Menu<h3></li>
</ul>
</div>
<div id="app" class="c-wrapper">
<header class="c-header c-header-fixed px-3">
<button id="test" class="c-header-toggler c-class-toggler mfs-3 d-md-down-none" type="button" data-target="#sidebar" data-class="c-sidebar-lg-show" responsive="true"> Menu
</button>
<button class="c-header-toggler c-class-toggler d-lg-none" type="button" data-target="#sidebar" data-class="c-sidebar-show">
Menu
</button> <pre class="working ml-2 mt-4"><- additional click event works when hooked to existing events</pre>
</header>
<div class="c-body">
<main class="c-main">
<div class="container-fluid">
<div class="card">
<div class="card-body">
<h2>Content</h2>
</div>
</div>
</div>
</main>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/1.5.0/perfect-scrollbar.min.js"></script>
<script src="https://unpkg.com/#coreui/coreui#3.2/dist/js/coreui.min.js"></script>
</body>

why can't I execute code from an embedded file in jsp?

Good day to all time of day, there was such a problem:
in index.jsp passing the answer.jsp, here's the code:
index.jsp
<head>
<meta charset="UTF-8">
<title>Lab 2</title>
<link rel="stylesheet" href="css/graphic.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/table.css">
</head>
<body>
<div class="hero">
<jsp:include page="jsps/hero.jsp"/>
</div>
<div class="graphic">
<jsp:include page="jsps/graphic.jsp"/>
</div>
<div class="form-container">
<jsp:include page="jsps/forms.jsp"/>
<button id="checkButton">Проверить</button>
<div id="outputContainer">
<span class="outputStub notification">Результаты отсутствуют</span>
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/checkboxHandler.js"></script>
<script src="js/formValidator.js"></script>
<script src="js/graphicValidator.js"></script>
<script src="js/session.js"></script>
<script src="js/table.js"></script>
</body>
answer.jsp
<%# page contentType="text/html;charset=UTF-8"%>
<div class="table">
<div class="table-header">
<div>X</div>
<div>Y</div>
<div>R</div>
<div>Входит ли в ОДЗ?</div>
</div>
<div class="table-content">
<script>
console.log("1111111111")
AddInSession(${x}, ${y}, ${r}, ${result ? "<div style=\"color: green\">Да</div>" :
"<div style=\"color: red\">Нет</div>"})
</script>
<div class="table-row" id="table-row">
</div>
<script>Table()</script>
</div>
</div>
I need to pass values through the context and I did it, and I also need to return an answer.jsp, here is the code for one of the servlets
ServletContext context = getServletContext();
context.setAttribute("x", object.getX());
context.setAttribute("y", object.getY());
context.setAttribute("r", object.getR());
context.setAttribute("result", object.getResult());
getServletContext().getRequestDispatcher("/jsps/answer.jsp").forward(request, response);
The browser sees the js code, but does not execute it. My concern is not so much that my methods are not being executed, but that console.log is also not producing results.
Can someone explain what I'm doing wrong?
P.S in index.jsp code is being executed

Calling a form in a JSP page in another JSP page div through javascript

I am currently working on Spring tool Suite. And I have the following project structure.
I am trying to display the form that I have created in my tableSelectForm.jsp in a properties panel div that I have in my veditor.jsp view. I am trying to append the form by creating an iframe through javascript from the veditor.js script that I have under resources/js/taro/Customscripts and set the link to the tabelSelectForm.jsp and then append the iframe to the div in the veditor.jsp.
tabelSelectForm.jsp
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<form class="form-horizontal" id="tabelSelectForm">
<fieldset>
</head>
<body>
<!-- Form Name -->
<legend>Table Selection</legend>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-6 control-label"> Select a Table out of the options to start querying from that table</label>
<br>
<label class="col-md-4 control-label" for="streamSelect">Table</label>
<div class="col-md-4">
<select id="streamSelect" name="streamSelect" class="form-control">
<option value="voidopt">Select an option</option>
</select>
</div>
</div>
<!-- Button (Double) -->
<div class="form-group">
<label class="col-md-4 control-label" for="tableFormConfirmButton">Confirm</label>
<div class="col-md-8">
<button id="tableFormConfirmButton" name="tableFormConfirmButton" class="btn btn-primary">Confirm</button>
<button id="tableFormCancelButton" name="tableFormCancelButton" class="btn btn-danger">Cancel</button>
</div>
</div>
</fieldset>
</form>
</body>
</html>
veditor.jsp
...
<script src="resources/js/taro/Customscripts/veditor.js" type="text/javascript"></script>
...
<!--Container/Canvas-->
<div id="container" class="container">
</div>
<div style="float: left" class="property" id="propertypane">
<h1 class="toolbox-titlex" id="toolbox-titlex">Properties</h1>
<div class="panel" id="lot"></div>
</div>
veditor.js
...
function callTableForm(newAgent, i, e, mouseTop, mouseLeft,elemType)
{
$(".property").show();
$(".property").show();
var iframe = document.createElement('iframe');
iframe.frameBorder=0;
iframe.width="inherit";
iframe.height="inherit";
iframe.id="randomid";
document.getElementById("lot").appendChild(iframe);
$("property").show();
$(".toolbox-titlex").show();
$(".panel").show();
$( "#randomid" ).load( "/tableSelectForm.jsp" );
}
I am currently getting an output as shown here. Under the properties panel, I showld be able to display the form in tableSelectForm.jsp.
I doubt that I am encountering this error due to the incorrect link that I've set in the iframe as var link = "/tableSelectForm.jsp" in my veditor.js
This is the error that I am encountering.
And this is the Project structure along with the modified veditor.js script function.
I would really appreciate a solution to change this path so that I could diplay the form under the properties.
Thanks in advance.
This is will you need jquery.load, this is a better solution than using iframes.
$( "#result" ).load( "/your_jsp_page_html_conten.jsp" );

How to respond to "shown.bs.collapse" event?

I search on the web, but unfortunately, nothing works for me.
I tried many different ways to respond to "shown.bs.collapse" event, but it never fires.
I tried by replacing ".collapse" by "#divi", or by changing the place of the event binding from the bottom to the top, but nothing did it.
Here is my current code :
<button data-toggle="collapse" data-target="#divi">Click</button>
<div id="divi" class="collapse">
Masqued
</div>
<script>
$(".collapse").on("shown.bs.collapse", function() {
alert("test");
});
</script>
I just wrote a new simple html file thanks to the answer of Jaganathan Bantheswaran :
<script>
$(".collapse").on("shown.bs.collapse", function() {
alert("test");
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<button data-toggle="collapse" data-target="#divi">Click</button>
<div id="divi" class="collapse">
Masqued
</div>
And it doesn't works too.
Same code works fine with the bootstrap version 3.3.7. Which version of bootstrap you are in?
Update 1
In your code sample, The event linking for shown.bs.collapse has to go down to the page. Because the none of the libs would be loaded at that time of event registration.
$(".collapse").on("shown.bs.collapse", function() {
alert("test");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<button data-toggle="collapse" data-target="#divi">Click</button>
<div id="divi" class="collapse">
Masqued
</div>

How do you get the Kendo UI Barcode to render in Kendo Mobile app

I am trying to figure out how to use a jQuery plugin with the Kendo UI template.
I have an index.html that calls a views/home.html file. Then there is a home.js file that controls some functionality for the home.html using a model.
I am trying to use a jQuery barcode plugin. We are dynamically getting data from our service and outputting the data (although right now I am just trying to hardcode values). How would I get the jQuery plugin to work with the Kendo UI template code.
My code is below.
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="styles/main.css" rel="stylesheet" />
<script src="cordova.js"></script>
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/kendo.mobile.min.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/home.js"></script>
<div data-role="layout" data-id="main">
<div data-role="header">
<div data-role="navbar">
<!--Need to add back button and mail center buttons-->
<span data-role="view-title"></span>
<a data-role="button" data-align="right" href="views/messagecenter.html" class="nav-button"><i class="fa fa-envelope-o"></i></a>
<i class="fa fa-bars"></i>
</div>
</div>
</head>
home.html
<div data-role="view" data-layout="main" data-model="app.MemberInfo" data-title="Home" >
<div id="MemberCardHeader">
<div data-template="memberTemplate" data-bind="source: MemberInfo">
<!--Member card x-kendo-template id="memberTemplate" renders here-->
</div>
</div>
</div>
<script type="text/x-kendo-template" id="memberTemplate">
<div id="memberCard">
<!--Barcode should render here-->
<div id="Barcode"></div>
</div>
</script>
home.js
var app = app || {};
app.MemberInfo = (function (){
/*Barcode code*/
/*HOW DO I GET THIS TO WORK WITH KENDO UI CODE ABOVE*/
$("#Barcode").kendoBarcode({
value:"288288",
type:"ean8"
});
}());
you can instantiate the widget in the init event of the view:
http://docs.telerik.com/kendo-ui/api/javascript/mobile/ui/view#events-init.

Categories