How to use setup menu(values) behavior of Semantic ui to populate a dropdown with values from database

See also questions close to this topic

• How to clear user uploaded images if the limit of files exceeded in jquery

  I have a simple form where a user can upload multiple images. I only want the user to upload 4 images at once, so I did the following:

  $("#myfile").on("change", function() {
      if ($("#myfile")[0].files.length > 4) {
          alert("You can select only 4 images");
      } 
  });

  <input type="file" id="myfile" class="form-control" name="pimage[]" multiple="multiple">

  This gives an alert when the user uploads more than 4 images but doesn't stop them from submitting the form.

  Can anyone please tell me how to clear the user uploaded images if the limit exceeds or disable the submit button?
• Some iphone device not able play audio browser jquery

  My jquery audio script perfecly play audio, but some iphone device has no audio playing, can anyone tell me the problem,

   <script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.1/howler.min.js" integrity="sha512-L6Z/YtIPQ7eU3BProP34WGU5yIRk7tNHk7vaC2dB1Vy1atz6wl9mCkTPPZ2Rn1qPr+vY2mZ9odZLdGYuaBk7dQ==" crossorigin="anonymous"></script>   
  
  let autoplay = true;
      let soundID;
      var sound = new Howl({
          src: ['<?php echo base_url(); ?>assets/mp3/<?php echo $nama_musik; ?>'],
          autoplay: autoplay,
          loop: true,
      });
  
      soundID = sound.play();
  
• Whenever I try to add email on mysql server. My page is not responding. why?

  I am a little bit confused. see the code below.

  $('#submit').click(function() {
      $('#showdata').html($('#senddata').serialize()); /*Print all data that passed from form.*/
      $.ajax({
          url: "save.php",
          /* Here data store on mysql server without email and response to welcome.php. */
          type: "POST",
          /* if i want to add proper email format then data store in mysql but not response on welcome.php. */
          data: $('#senddata').serialize(),
          success: function(r) {
              alert("ok");
              $('#senddata').trigger('reset');
              window.location = 'welcome.php'; /*This is welcome page*/
          }
      })
  })
  

  I want to submit a form using the ajax post method. If I write any name instead of email then data is stored on the server and responding welcome.php. Whenever I write any name email then data is stored on the server but responding welcome.php. Here is 'save.php' code.

  <?php
  include('./config.php');
  print_r($_POST);
      $name=$_POST['name'];
      $email=mysqli_real_escape_string($con,$_POST['email']);
      $pwd=$_POST['password'];
      $vill=$_POST['address'].$_POST['city'].$_POST['state'].$_POST['zip'];
      $insertdata="INSERT INTO `persons`(`name`,`email`,`pwd`,`vill`)VALUE('$name','$email','$pwd','$vill')";
      print_r($insertdata);
      if(mysqli_query($con,$insertdata)){
          echo "data added";
      }else{
          echo "not added";
      }
  
  ?>
  

  Note: if I put my button <button class="btn btn-primary" id="submit">sign up</button> outside form then everting is right.
• JSP Form submit never reaches servlet/controller

  I am creating a website in which i need to use request Object to achieve crud functionality against a database using MVC pattern. Website is hosted locally with WildFly 26.0.1. However, every time i click a submit button on the website i only get "not found" on a new page. I have a few .jsp pages and a servlet + a bunch of backend code. The following is my form in employee.jsp:

  <form action=Controller method="get">
    Employee ID :<br> <input type="text" name="empId" id="empId"> <br>
    First name :<br> <input type="text" name="fName" id="fName"> <br>
    Last name :<br> <input type="text" name="lName" id="lName"> <br>
    Salary :<br> <input type="text" name="salary" id="salary"> <br>
    Store ID :<br> <input type="text" name="storeId" id="storeID"> <br><br>
    
    <input type="submit" value="Find" class="button black padding-large large margin-top">
    <input type="submit" value="Create" class="button black padding-large large margin-top"> 
    <input type="submit" value="Update" class="button black padding-large large margin-top"> 
    <input type="submit" value="Delete" class="button black padding-large large margin-top">      
    </form>
  

  and this is a snippet of the servlet code in Controller.java:

  @WebServlet("/Controller")
  public class Controller extends HttpServlet {
  private static final long serialVersionUID = 1L;
  
  @EJB
  FacadeLocal facade;
  
      protected void doGet (HttpServletRequest request, HttpServletResponse response) 
              throws ServletException, IOException { 
          
          System.out.println("reached doGet");
          
          String method = request.getParameter("submit");
          
          System.out.print(method);
          
          if(method.equals("Create")) {
              createEmp(request, response);
          }
  
  private void createEmp(HttpServletRequest request, HttpServletResponse response) 
              throws ServletException, IOException { 
          
          System.out.print("create emp called");
          
          String empId = request.getParameter("empId");
          String fName = request.getParameter("fName");
          String lName = request.getParameter("lName");
          int salary = Integer.parseInt(request.getParameter("salary"));
          String storeId = request.getParameter("storeId");
          
          Employee e = new Employee(empId, fName, lName, salary, storeId);
          
          facade.createEmp(e);
      
  

  I believe all my backend code should work, it's just that for some reason, the doGet is never called and thus my createEmp and facade functions don't do anything. I've experimented with different variations of calling a doPost/super/init first but to no avail.

  My web.xml looks like this:

  <?xml version="1.0" encoding="UTF-8"?>
  <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
  xmlns="http://xmlns.jcp.org/xml/ns/javaee" 
  xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee 
  http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd" id="WebApp_ID" version="4.0">
   <display-name>MyWebProject</display-name>
    <welcome-file-list>
      <welcome-file>index.html</welcome-file>
      <welcome-file>index.jsp</welcome-file>
      <welcome-file>index.htm</welcome-file>
      <welcome-file>default.html</welcome-file>
      <welcome-file>default.jsp</welcome-file>
      <welcome-file>default.htm</welcome-file>
    </welcome-file-list>
    <servlet>
    <servlet-name>Controller</servlet-name>
  <jsp-file>/home.jsp</jsp-file>
  </servlet>
  <servlet-mapping>
  <servlet-name>Controller</servlet-name>
  <url-pattern>/src.main.webapp.*.jsp</url-pattern>
  </servlet-mapping>
  </web-app>
  

  What can I do to try and solve this?
• Regex for allowing words which have only first letter as uppercase?

  I am trying to make a regex which will validate if all the words have their first letter as upper case. ex like Fruits is allowed but fruits is not allowed. also United States is allowed but United states is not allowed.

  also, i don't want to allow only spaces and dots.

  i have created the regex for not allowing only space and dots separately but i want them to be in one regex with the upper requirement is their any way to achieve this ??

  I'll add what i have tried so far.

  please, any help is appreciated.

  
      $.validator.addMethod("first_letter", function(value,element)
      {
          return this.optional(element) || ^[A-Z].*i.test(value);  // 1.) this is what i am trying to check if first letter of every word is uppercase or not  and can this be combined with the 2.) validation i.e "characters" 
      }, "First Letter Should be Capital !!");
  
      $.validator.addMethod("characters", function(value,element)
      {
          return this.optional(element) || /^[a-zA-Z.*\s]*$/i.test(value);  // 2.) For only Allowing Alphabets
      }, "Only Characters are Allowed !!");
      
      $.validator.addMethod("dot", function(value,element)
      {
          return this.optional(element) || /^[^.]*$/i.test(value);  // 3.) For Not Allowing Dot Characters
      }, "Dot chatarcters are not Allowed !!");
      
      $.validator.addMethod("only_space", function(value,element)
      {
          return this.optional(element) || /^[.*\S.*]/i.test(value); // 4.) For Not Allowing Only Spaces
      }, "Only Spaces are not Allowed !!");
  
  

  All the validations

      $.validator.addMethod("characters", function(value,element)
      {
          return this.optional(element) || /^[a-zA-Z.*\s]*$/i.test(value);
      }, "Only Characters are Allowed !!");
      
      $.validator.addMethod("dot", function(value,element)
      {
          return this.optional(element) || /^[^.]*$/i.test(value);
      }, "Dot chatarcters are not Allowed !!");
      
      $.validator.addMethod("only_space", function(value,element)
      {
          return this.optional(element) || /^[.*\S.*]/i.test(value);
      }, "Only Spaces are not Allowed !!"); 
  
      $.validator.addMethod("first_letter", function(value,element)
      {
          return this.optional(element) || ^[A-Z][a-z]*(?: [A-Z][a-z]*)*$/ i.test(value);
      }, "First Letter Should be Capital !!");    // your answer , if i am using it as it is then also its not working and other validations above it are also not working.
  
  $.validator.addMethod("characters", function(value,element)
      {
          return this.optional(element) || /^[A-Z][a-zA-Z.*\s] (?: [A-Z][a-z]*)*$/i.test(value);
      }, "Only Characters are Allowed !!");    // what i tried 
  
  $.validator.addMethod("first_letter", function(value,element)
      {
          return this.optional(element) || /^([A-Z] [a-z] * (([A-Za-z]\s)?[a-z]*)*)(\s+\S+\s*)*$/i.test(value);
      }, "First Letter Should be Capital !!");    // I also tried like this.
  
  
• Send data from Servlet for JSP with JSTL

  I can't display a list that was passed as an attribute to my servlet. I followed the JSTL documentation specifications but I didn't get exit, what could be wrong in my code?

  My JSP

  <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
      pageEncoding="ISO-8859-1"%>
  <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
  
  <!DOCTYPE html>
  <html>
  <head>
  <meta charset="ISO-8859-1">
  <title>Insert title here</title>
  </head>
  <body>
  
  <c:forEach var="item" items="${lista}">
  
  <ul>
  <li>Nome: ${item.getNome()}</li> 
  </ul>
  
  </c:forEach>
  
  </body>
  </html>
  

  My Servlet

  @WebServlet("/listar")
  public class ListarUsuariosServlet extends HttpServlet {
      private static final long serialVersionUID = 1L;
      
      
      public ListarUsuariosServlet() {
          super();
      }
            
      @Override
      protected void service(HttpServletRequest request, HttpServletResponse response) throws  ServletException, IOException {
  
          String valor = "2";
          
          List<Usuario> users = UsuarioDAO.getPagination(valor);
      
          RequestDispatcher rd = request.getRequestDispatcher("teste2.jsp");
          request.setAttribute("lista", users);
          rd.forward(request, response);
          
      }
  
  }
  
• How to calculate age from date of birth

  I have a user registration form where all user data is stored in database.

  I am listing all user data in the UI in a member listing page. In there I have to calculate the age of the user based on their date of birth. I tried by calculating using JSTL, but still I am not getting an answer.

  This is what I tried:

  <fmt:parseDate value="${user.dateofbirth}" var="parseddate" type="date"  pattern="yyyy-MM-dd" />
    <jsp:useBean id="now" class="java.util.Date" />
      <td class="dataField">
        <fmt:formatDate value="${parseddate}"  type="date" pattern="MMMM dd yyyy "/> 
      </td>
      <c:set var="today" value="<%=new java.util.Date()%>" /> 
      <fmt:parseNumber type="date" value="${today}" />
      <td>
        <c:out value="${today-parseddate}"></c:out>
      </td>
            
  

  I am new to JSTL. Can anyone please help me with this?
• How to get the difference between two dates in days?

  I am trying to get the difference between two dates i.e manufacturing date and expiring date. but i getting the correct difference only when the months are same like if the manufacturing date is 5th may 2022 and expiring date is 20th may 2022 i am getting the difference as 20 which is correct. But if the manufacturing date is 15th may 2022 and expiring date is 20th june i am getting the result as 5 which is wrong.

  can anyone help regarding this ??

  Any help is Appreciated.

  I'll put the code which i have tried below

  <fmt:parseDate value = "${product.pro_manufacture_date}" type = "date" pattern = "yyyy-MM-dd" var = "formatedDate1"/>
  <td> <fmt:formatDate value = "${formatedDate1}" type = "date" pattern = "MMMM dd,yyyy"/> </td>
                          
  <fmt:parseDate value = "${product.pro_exp_date}" type = "date" pattern = "yyyy-MM-dd" var = "formatedDate2"/>
  <td> <fmt:formatDate value = "${formatedDate2}"  type = "date" pattern = "MMMM dd,yyyy"/> </td>
                          
  <td> <c:out value = " ${formatedDate2.date - formatedDate1.date }  "/> </td>
  
  
  
• I can't install " npm install semantic-ui-react semantic-ui-css", what should I do?

  C:\reactcamp\camp-project> npm install semantic-ui-react semantic-ui-css
  npm ERR! code ERESOLVE
  npm ERR! ERESOLVE unable to resolve dependency tree
  npm ERR!
  npm ERR! While resolving: camp-project@0.1.0
  npm ERR! Found: react@18.1.0
  npm ERR! node_modules/react
  npm ERR!   react@"^18.0.0" from the root project
  npm ERR!
  npm ERR! Could not resolve dependency:
  npm ERR! peer react@"^16.8.0 || ^17.0.0" from semantic-ui-react@2.1.2
  npm ERR! node_modules/semantic-ui-react
  npm ERR!   semantic-ui-react@"^2.1.2" from the root project
  npm ERR!
  npm ERR! Fix the upstream dependency conflict, or retry
  npm ERR! this command with --force, or --legacy-peer-deps
  npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
  npm ERR!
  npm ERR! See C:\Users\zekis\AppData\Local\npm-cache\eresolve-report.txt for a full report.
  
  npm ERR! A complete log of this run can be found in:
  npm ERR!     C:\Users\zekis\AppData\Local\npm-cache\_logs\2022-05-01T18_07_14_536Z-debug-0.log
  
• how to style menu.item on semantic ui React <input> search bar precisely

  The code is the menu style of semantic ui available for React including a search input i want to increase the size of the search input and also change the color.

  <Menu secondary>
              <Menu.Item>
                <img alt="logo" src={logo} 
                 active={activeItem === 'home'}
                 onClick={this.handleItemClick}
                />
              </Menu.Item>
              <Menu.Item>
                  <Input icon='circle outline' iconPosition='left' placeholder='Search...' />
              </Menu.Item>
              <Menu.Menu position='right'>
                
                <Menu.Item
                  name='logout'
                  active={activeItem === 'logout'}
                  onClick={this.handleItemClick}
                />
              </Menu.Menu>
            </Menu>