how to parse json property in strut2 - struts2-json-plugin

the follow code is working when i save "name" property as simple string data,
but now I want save the "name" as JSON data, such as
{"en":"White Rice","cn":"白米","th":"ข้าวขาว"}, and display the name value according to locale language. How can I do?
<s:iterator value="categorylist">
<li class="mn_menu-active">
<a href="#">
<span><s:property value="name" /></span>
<div class="clear"></div>
</a>
<ul>
<s:iterator value="children">
<li>
<a href="#">
<span class="ms_txt"><s:property value="name" /></span>
<div class="clear"></div>
</a>
</li>
</s:iterator>
</ul>
</li>
</s:iterator>

Hear I implement a class to handle it.
package com.tsd.json;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts2.ServletActionContext;
import com.opensymphony.xwork2.ActionContext;
import com.opensymphony.xwork2.util.ValueStack;
import java.util.Locale;
import net.sf.json.JSONObject;
public class LocaleHandler {
public static String Locale(String name)
{
ValueStack stack = ActionContext.getContext().getValueStack();
String result="";
HttpServletRequest request = ServletActionContext.getRequest();
Locale locale = (java.util.Locale)request.getSession().getAttribute("WW_TRANS_I18N_LOCALE");
String jsonData =(String)stack.findValue(name);
JSONObject json=JSONObject.fromObject(jsonData);
if(locale ==null)
{
HttpServletResponse response=ServletActionContext.getResponse();
locale=response.getLocale();
}
if (locale instanceof Locale)
{
result= json.getString(locale.getLanguage()+"_"+locale.getCountry());
}
return result;
}
}
and modify the jsp as follow:
<s:iterator value="categorylist">
<li class="mn_menu-active">
<a href="#">
<span>
<%=LocaleHandler.Locale("name") %>
</span>
<div class="clear"></div>
</a>
<ul>
<s:iterator value="children">
<li>
<a href="#">
<span class="ms_txt"> <%=LocaleHandler.Locale("name") %></span>
<div class="clear"></div>
</a>
</li>
</s:iterator>
</ul>
</li>
</s:iterator>

Related

Warning: validateDOMNesting(...): <li> cannot appear as a descendant of <li>

There are many similar problems, but I can't solve this background error warning. Strictly speaking, I'm still a novice. I know to change li, but I don't know where to start. Please help me. This error warning:
next-dev.js?3515:20 Warning: validateDOMNesting(...): <li> cannot appear as a descendant of <li>.
at li
at li
at ul
at div
at div
at Top (webpack-internal:///./components/header/Top.js:28:84)
at header
at Header (webpack-internal:///./components/header/index.js:18:11)
at div
at Home
at PersistGate (webpack-internal:///./node_modules/redux-persist/es/integration/react.js:39:5)
at Provider (webpack-internal:///./node_modules/react-redux/es/components/Provider.js:13:3)
at MyApp (webpack-internal:///./pages/_app.js:22:11)
at PathnameContextProviderAdapter (webpack-internal:///./node_modules/next/dist/shared/lib/router/adapters.js:62:11)
at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/#next/react-dev-overlay/dist/client.js:301:63)
at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/#next/react-dev-overlay/dist/client.js:850:919)
at Container (webpack-internal:///./node_modules/next/dist/client/index.js:62:1)
at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:172:11)
at Root (webpack-internal:///./node_modules/next/dist/client/index.js:347:11)
I hope something can help me correct him. Like obsessive-compulsive disorder, I can't face the red color of the back. This is my original code:
import styles from "./styles.module.scss";
import { MdSecurity } from "react-icons/md";
import { BsSuitHeart } from "react-icons/bs";
import { RiAccountPinCircleLine, RiArrowDropDownFill } from "react-icons/ri";
import Link from "next/link";
import { useState } from "react";
import UserMenu from "./UserMenu";
export default function Top() {
const [ loggedIn, setLoggedIn ] = useState(true);
const [visible, setVisible] = useState(false);
return (
<div className={styles.top}>
<div className={styles.top_container}>
<div></div>
<ul className={styles.top_list}>
<li className={styles.li}>
<MdSecurity />
<span>Buyer Prodtection</span>
</li>
<li className={styles.li}>
<span>Customer Service</span>
</li>
<li className={styles.li}>
<span>Help</span>
</li>
<li className={styles.li}>
<BsSuitHeart />
<Link href={"/profile/whishlist"}>
<span>Whishlist</span>
</Link>
</li>
<li
className={styles.li}
onMouseOver={() => setVisible(true)}
onMouseLeave={() => setVisible(false)}
>
{loggedIn ? (
<li className={styles.li}>
<div className={styles.flex}>
<img
src={"/"}
width={22}
height={22}
alt=''
/>
<RiArrowDropDownFill />
</div>
</li>
) : (
<li className={styles.li}>
<div className={styles.flex}>
<RiAccountPinCircleLine />
<span>Account</span>
<RiArrowDropDownFill />
</div>
</li>
)}
{visible && <UserMenu loggedIn={loggedIn} />}
</li>
</ul>
</div>
</div>
);
}
You cannot nest li tags in html.
For example
<ul>
<li>
<li></li>
</li>
</ul>
If you would like a nested list, you can do this
<ul>
<li>
<ul>
<li></li>
</ul>
</li>
</ul>

Hide and show specific div coming from api in next.js

I am working on a menu drop down in next.js project,
I made a method to hide and show the data of the sub menu,but I am not able to show the specific sub dropdown. Here is the code
import {useEffect, useState } from "react";
function Header({data}){
const [showMe, setShowMe] = useState(false);
function toggle(param){
console.log(param)
setShowMe(!showMe);
};
return(
<div className="mobile-header">
<div className="mobile-menu">
<div className="menu-icon">
<div className="wrapper">
<input type="checkbox" id="navigation" />
<label for="navigation">
+
</label>
<nav>
<ul>
<li className="menu-heading">
<span>Menu</span>
<span>
<label for="navigation">X</label>
</span>
</li>
{data.menus.map((post, index) => {
return (
<li className="menu-list" id={index}>
{post.title} <span onClick = {(event)=>toggle({index})} index={index} >+</span>
<ul style={{display: showMe?"block":"none"}} index={index} value={index} className="category-one">
{post.menu_columns.map((subItems, sIndex) => {
return <li index={sIndex}>
{subItems.title}
<span>+</span>
<ul className="category-two">
{subItems.menu_items.map((x) => {
return <li>
{x.title}
</li>
})}
</ul>
</li>;
})}
</ul>
</li>)})}
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
)
}
export default Header;
toggle is the function, which responsible to show and hide the data, there is a parameter passed in this function which provide the specific index value, how do we target the specific div by using the index value in this.

How do I show link text when sidebar is collapsed in Angular 9?

I know if i put title="link name" into the anchor tag, the description or title shows up. But I only want it to show, when the navbar is collapsed.
In the html file I have a lot more links but to save space I opted to show the rest.
.html template
<nav class="navbar-default navbar-static-side" role="navigation">
<div class="sidebar-collapse">
<ul class="nav nav-sb metismenu" id="side-menu">
<li class="nav-header" style="padding-top: 0px; padding-bottom: 0px;">
<div (click)="handleClick($event)">
<div class="profile-element" style="text-align: center;">
<img alt="image" style="max-width: 100%; max-height: 60px; text-align: center;" src="assets/images/nieto.jpg">
</div>
<div class="logo-element" style="text-align: center; color: #384C65">
SMS
</div>
</div>
</li>
<li class="nav-item mt-3" [ngClass]="{active: activeRoute('ReleaseNotes')}">
<a class="nav-link" title="ReleaseNotes" [routerLink]="['/ReleaseNotes']" style="color:#faec4c;">
<fa-icon style="padding-right: 5px;" [icon]="faExclamationTriangle"></fa-icon><span class="nav-label"> Release notes</span>
</a>
</li>
<li class="nav-item" [ngClass]="{active: activeRoute('Dashboard')}">
<a class="nav-link" [routerLink]="['/Dashboard']" style="color:greenyellow;">
<fa-icon style="padding-right: 5px;" [icon]="faChartLine"></fa-icon><span class="nav-label"> Dashboard</span>
</a>
</li>
<li class="nav-item" [ngClass]="{active: activeRoute('Agreements')}" *ngIf="globals.userHasAgreementAccess()">
<a class="nav-link" [routerLink]="['/Agreements']"><fa-icon [icon]="faFileSignature"></fa-icon><span class="nav-label"> Agreements</span></a>
</li>
<li class="nav-item" [ngClass]="{active: activeRoute('Appointments')}">
<a class="nav-link" [routerLink]="['/Appointments']"><fa-icon [icon]="faUsersCog"></fa-icon><span class="nav-label"> Appointments</span></a>
</li>
<li class="nav-item" [ngClass]="{active: activeRoute('Attachments')}">
<a class="nav-link" [routerLink]="['/Attachments']"><fa-icon [icon]="faPaperclip"></fa-icon><span class="nav-label"> Attachments</span></a>
</li>
I also shortened the ts file by a couple of lines to save space to show relevant info.
.ts file
import { Component } from '#angular/core';
import {Router} from '#angular/router';
import { GlobalsService } from 'src/app/app.globals.service';
import { faUsersCog, faUser, faCalendarCheck, faChartLine, faAlignJustify,faToolbox, faFileInvoiceDollar, faFileSignature, faPaperclip, faShoppingCart, faExclamationTriangle, faBug} from '#fortawesome/free-solid-svg-icons';
declare var jQuery:any;
#Component({
selector: 'navigation',
templateUrl: 'navigation.template.html',
})
export class NavigationComponent {
faUsersCog=faUsersCog; faUser=faUser;faCalendarCheck=faCalendarCheck;faChartLine=faChartLine;faAlignJustify=faAlignJustify;faToolbox=faToolbox; faShoppingCart=faShoppingCart;
faFileInvoiceDollar=faFileInvoiceDollar;faFileSignature=faFileSignature; faPaperclip=faPaperclip; faExclamationTriangle=faExclamationTriangle; faBug=faBug;
constructor(public globals: GlobalsService,private router: Router) {}
ngAfterViewInit() {
jQuery('#side-menu').metisMenu();
if (jQuery("body").hasClass('fixed-sidebar')) {
jQuery('.sidebar-collapse').slimscroll({
height: '100%'
})
}
}
}
You can conditionally add attributes in Angular, so you could only add the title attribute when the sidebar is collapsed.
<a class="nav-link" [attr.title]="isSidebarCollapsed ? 'Release Notes' : null">
Release notes
</a>
isSidebarCollapsed is a variable that you'll need to create in the NavigationComponent that you will need to set to true when the sidebar is collapsed, and false otherwise.

Laravel : change the class li if the user answered the survey

I want to change class for each class of if the user answered the survey before
I tried to use if condition but nothing changed
Controller :
public function home(Request $request)
{
$surveys = Survey::get();
foreach ($surveys as $survey) {
$user_id = auth()->user()->id;
$user_ip = request()->ip();
$hasAnswer = \App\Answer::where(['user_id'=>$user_id , 'survey_id' => $survey->id, 'last_ip'=>$user_ip])->exists();
}
return view('home', compact('surveys','hasAnswer'));
}
view blade :
<div class="col-12">
<ul class="list-group">
#forelse ($surveys as $survey)
#if($hasAnswer)
<li class="list-group-item list-group-item-success">
<div>
{{ link_to_route('detail.survey', $survey->title, ['id'=>$survey->id])}}
<i class="material-icons">send</i>
<i class="material-icons">edit</i>
<i class="material-icons">textsms</i>
</div>
</li>
#else
<li class="list-group-item">
<div>
{{ link_to_route('detail.survey', $survey->title, ['id'=>$survey->id])}}
<i class="material-icons">send</i>
<i class="material-icons">edit</i>
<i class="material-icons">textsms</i>
</div>
</li>
#endif
#empty
<p class="flow-text center-align">Nothing to show</p>
#endforelse
</ul>
</div>
Nothing changed even i tried to answer for some surveys but no class changed
public function home(Request $request)
{
$surveys = Survey::get();
$user_id = auth()->user()->id; // you don't need to iterate over and over again for the same value
$user_ip = request()->ip(); // you don't need to iterate over and over again for the same value
foreach ($surveys as $survey) {
$hasAnswer[] = \App\Answer::where(['user_id'=>$user_id , 'survey_id' => $survey->id, 'last_ip'=>$user_ip])->exists();
}
return view('home', compact('surveys','hasAnswer'));
}
blade file:
<div class="col-12">
<ul class="list-group">
#forelse ($surveys as $key => $survey)
#if($hasAnswer[$key])
<li class="list-group-item list-group-item-success">
<div>
{{ link_to_route('detail.survey', $survey->title, ['id'=>$survey->id])}}
<i class="material-icons">send</i>
<i class="material-icons">edit</i>
<i class="material-icons">textsms</i>
</div>
</li>
#else
<li class="list-group-item">
<div>
{{ link_to_route('detail.survey', $survey->title, ['id'=>$survey->id])}}
<i class="material-icons">send</i>
<i class="material-icons">edit</i>
<i class="material-icons">textsms</i>
</div>
</li>
#endif
#empty
<p class="flow-text center-align">Nothing to show</p>
#endforelse
</ul>
</div>
Note: the code is not tested.

How I can add bulma.css toggle navbar in Next.js?

I have added bulma.css in my Next.js project and all runs well, but navbar toggle doesn't work because need add some pure javascript code and React doesn't provide pure DOM events
Just add React Lifecycle event and put your code.
ORIGINAL example:
import React from "react";
class NavBar extends React.Component {
componentDidMount() {
const $navbarBurgers = Array.prototype.slice.call(
document.querySelectorAll(".navbar-burger"),
0
);
if ($navbarBurgers.length > 0) {
// Add a click event on each of them
$navbarBurgers.forEach(el => {
el.addEventListener("click", () => {
// Get the target from the "data-target" attribute
const target = el.dataset.target;
const $target = document.getElementById(target);
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
el.classList.toggle("is-active");
$target.classList.toggle("is-active");
});
});
}
}
render() {
return (
<nav className="navbar" role="navigation" aria-label="main navigation">
<div className="navbar-brand">
<a className="navbar-item" href="https://bulma.io">
<img
src="https://bulma.io/images/bulma-logo.png"
width="112"
height="28"
/>
</a>
<a
role="button"
className="navbar-burger burger"
aria-label="menu"
aria-expanded="false"
data-target="navbarBasicExample"
>
<span aria-hidden="true" />
<span aria-hidden="true" />
<span aria-hidden="true" />
</a>
</div>
<div id="navbarBasicExample" className="navbar-menu">
<div className="navbar-start">
<a className="navbar-item">Home</a>
<a className="navbar-item">Documentation</a>
<div className="navbar-item has-dropdown is-hoverable">
<a className="navbar-link">More</a>
<div className="navbar-dropdown">
<a className="navbar-item">About</a>
<a className="navbar-item">Jobs</a>
<a className="navbar-item">Contact</a>
<hr className="navbar-divider" />
<a className="navbar-item">Report an issue</a>
</div>
</div>
</div>
<div className="navbar-end">
<div className="navbar-item">
<div className="buttons">
<a className="button is-primary">
<strong>Sign up</strong>
</a>
<a className="button is-light">Log in</a>
</div>
</div>
</div>
</div>
</nav>
);
}
}
export default NavBar;
I had the same issue and in my case I can resolve it adding in the _app component this line
import 'bulma/css/bulma.css

Resources