I am trying to create rows dynamically in a table using thymeleaf and spring boot.
I've looked at following urls but couldn't make it working for me.
http://forum.thymeleaf.org/I-have-problem-in-binding-the-list-of-objects-contained-inside-a-object-on-the-form-using-thymeleaf-td3525038.html#a3526497
http://stingh711.github.io/dynamic-form-with-springmvc-and-thymeleaf.html
when I click on the addCourse button, its not even going to StudentController.
please can someone help?
Student.html
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="layout">
<head>
<title>Students</title>
</head>
<body>
<div layout:fragment="content">
<form th:object="${student}" th:action="#{/student/create}" action="#" method="post">
<div class="row">
<div class="col-md-offset-3 col-md-6">
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Add New Student</h3>
</div>
<div class="panel-body">
<input type="text" th:field="*{studentId}" class="form-control" placeholder="Student Id" />
<div style="clear: both; display: block; height: 10px;"></div>
<input type="text" th:field="*{firstName}" class="form-control" placeholder="First Name" />
<div style="clear: both; display: block; height: 10px;"></div>
<input type="text" th:field="*{lastName}" class="form-control" placeholder="Last Name" />
<div style="clear: both; display: block; height: 10px;"></div>
<input type="text" th:field="*{city}" class="form-control" placeholder="City" />
<div style="clear: both; display: block; height: 10px;"></div>
<input type="submit" class="btn btn-success pull-right"
value="Save">
</div>
</div>
</div>
</div>
<!-- start of detail section -->
<div class="row" style="margin-bottom: 50px;">
<div class="col-md-offset-2 col-md-8">
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Student Courses</h3>
</div>
<div class="panel-body">
<table class="table table-bordered table-striped table-hover">
<thead>
<tr class="btn-success">
<th>Course</th>
<th>End Date</th>
</tr>
</thead>
<tbody>
<tr th:each="studentCourse, rowStat : *{studentCourses}">
<td></td>
<td><input type="text" class="form-control" th:field="*{studentCourses[__${rowStat.index}__].courseId}" placeholder="Course" /></td>
<td><input type="text" class="form-control" th:field="*{studentCourses[__${rowStat.index}__].endDate}" placeholder="End Date"/>
<span class="col-sm-1 row-delete-button">
<button class="btn btn-default" th:value="*{studentCourses[__${rowStat.index}__].studentCourseId}" name="removeStudentCourse">
<i class="glyphicon glyphicon-trash icon-white"></i>
</button>
</span>
</tr>
</tbody>
</table>
<button class="btn btn-success btn-add" type="submit" name="addCourse">
<i class="glyphicon glyphicon-plus gs"></i> <b> Add</b>
</button>
</div>
</div>
</div>
<!-- end of detail -->
</form>
</div>
</body>
</html>
StudentController
#RequestMapping(value="/Student", params = {"addCourse"})
public String addCourse(Student student, BindingResult result) {
System.out.println("add new course");
student.getCourseList().add(new StudentCourse());
return "Student";
}
js.html (locatated # templates/fragments)
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<script th:src="#{/webjars/jquery/2.1.4/jquery.min.js}"></script>
style.html (locatated # templates/fragments)
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<link rel="stylesheet" th:href="#{/webjars/bootstrap/3.3.4/css/bootstrap.min.css}" />
Related
I'm trying to fill a table in a jsp with a List I put in the model from a Spring controller but the table is not being filled. This is the page:
<%# page import="cl.onvision.dte.be.utils.*" %>
<%
String order = request.getParameter("o");
String search = request.getParameter("s");
String strTitulo = "Gestor usuarios";
%>
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<title>Administrador / Inicio</title>
</head>
<body>
<!-- Header layer -->
<div class="container">
<div class="row" style="background-color: rgb(255,130,0); padding: 10px">
<div class="col-sm-3"><img src="/img/index/slogan150.png" /></div>
<div class="col-sm-4"></div>
<div class="col-sm-5 text-right text-white">
<!--a href="/login/salir">Salir</a-->
<%#include file="/views/include/bannerSesion.jsp"%>
</div>
</div>
</div>
<!-- Menu layer -->
<div class="container">
<ul class="nav nav-tabs nav-justified">
<li class="nav-item"><a class="nav-link" href="/admin/inicio">Inicio</a></li>
<li class="nav-item"><a class="nav-link" href="/admin/usuarios">Gestion Usuarios</a></li>
<li class="nav-item"><a class="nav-link" href="/admin/contrib">Gestion Contribuyentes</a></li>
<li class="nav-item"><a class="nav-link" href="/admin/alertas">Alertas</a></li>
<li class="nav-item"><a class="nav-link active" href="/admin/ciudades">Ciudades</a></li>
</ul>
</div>
<br />
<!-- Search & button upper-layer -->
<div class="container">
<div class="row">
<div class="col-sm-6">
<b>Búsqueda:</b>
<input type="text" class="input-sm" style="height:25px" id="s" value="<%= (search==null)? "": search %>"
maxlength="20" size="20" autofocus />
<input type="hidden" id="o" value="<%= (order==null)? "": order %>" />
</div>
<div class="col-sm-6 text-right">
<button data-toggle="modal" data-target="#modaladd" class="btn btn-sm btn-success">
<i class="material-icons" style="font-size:22px">person_add</i>
</button>
</div>
</div>
</div>
<div style="height:10px"></div>
<!-- Data list -->
<div class="container">
<div class="table-responsive">
<table class="table table-striped table-hover table-bordered table-condensed table-sm">
<thead>
<tr>
<th style="text-align:center">#</th>
<th style="text-align:center">Nombre usuario</th>
<th style="text-align:center">Region</th>
<th style="text-align:center">Acciones</th>
</tr>
</thead>
<tbody>
<c:forEach var="ciudad" items="${ciudades}">
<tr>
<td style="text-align:center"><c:out value="${ciudad.id}"/></td>
<td style="text-align:center"><c:out value="${ciudad.nombre}"/></td>
<td style="text-align:center"><c:out value="${ciudad.region}"/></td>
<td class="pl-5">
<a href="/admin/usuario/eliminar/${ciudad.id}/">
<button class="btn btn-sm btn-primary"><i class="material-icons"
style="font-size:16px">remove_circle</i></button>
</a>
<a href="javascript:leerDatos(${ciudad.id});">
<button class="btn btn-sm btn-warning"><i class="material-icons"
style="font-size:16px">border_color</i></button>
</a>
</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
<a href="#" id="axls" style="display:none;" donwload>a</a>
<!-- Modal 'add user' form-->
<div class="modal" id="modaladd">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header bg-info text-white">
<h2 class="modal-title">Agregar nuevo usuario</h2>
</div>
<!-- Modal body -->
<form method="post" action="/admin/usuario/agregar">
<div class="modal-body">
<div class="row" style="margin-bottom:10px">
<div class="col-sm-4"><label for="nom">Nombre de usuario:</label></div>
<div class="col-sm-8">
<input type="text" class="form-control input-sm" name="nomusu" id="nom" maxlength="40"
required />
</div>
</div>
<div class="row" style="margin-bottom:10px">
<div class="col-sm-4"><label for="run">RUN:</label></div>
<div class="col-sm-8">
<input type="text" class="form-control input-sm" name="runusu" id="run" maxlength="40"
required />
</div>
</div>
<div class="row" style="margin-bottom:10px">
<div class="col-sm-4"><label for="cla">Nueva clave:</label></div>
<div class="col-sm-8">
<input type="password" class="form-control input-sm" name="cla1usu" id="cla"
maxlength="20" required />
</div>
</div>
<div class="row" style="margin-bottom:10px">
<div class="col-sm-4"><label for="cla2">Repita la clave:</label></div>
<div class="col-sm-8">
<input type="password" class="form-control input-sm" name="cla2usu" id="cla2"
maxlength="20" required />
</div>
</div>
<div class="row" style="margin-bottom:10px">
<div class="col-sm-4"><label for="com">Comentarios:</label></div>
<div class="col-sm-8">
<textarea class="form-control input-sm" name="comentusu" id="com" rows="3"
cols="80"></textarea>
</div>
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<input type="submit" class="btn btn-success" value="Agregar nuevo usuario" />
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancelar</button>
</div>
</form>
</div>
</div>
</div>
<!-- Modal 'update user' form-->
<div class="modal" id="modalupdate">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header bg-info text-white">
<h2 class="modal-title">Modificar usuario</h2>
</div>
<!-- Modal body -->
<form method="post" action="/admin/usuario/modificar">
<div class="modal-body">
<input type="hidden" name="uid" id="uid" value="" />
<div class="row" style="margin-bottom:10px">
<div class="col-sm-4"><label for="unom">Nombre de usuario:</label></div>
<div class="col-sm-8">
<input type="text" class="form-control input-sm" name="unomusu" id="unom" maxlength="40"
readonly />
</div>
</div>
<div class="row" style="margin-bottom:10px">
<div class="col-sm-4"><label for="urun">RUN:</label></div>
<div class="col-sm-8">
<input type="text" class="form-control input-sm" name="urunusu" id="urun" maxlength="40"
readonly />
</div>
</div>
<div class="row" style="margin-bottom:10px">
<div class="col-sm-4"><label for="ucom">Comentarios:</label></div>
<div class="col-sm-8">
<textarea class="form-control input-sm" name="ucomentusu" id="ucom" rows="3"
cols="80"></textarea>
</div>
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<input type="submit" class="btn btn-success" value="Modificar datos" />
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancelar</button>
</div>
</form>
</div>
</div>
</div>
</body>
<script>
function ordenarDatos(campo) {
url = 'gestionUsuarios.jsp?o=' + campo + '&s=' + $('#s').val();
document.location.href = url;
return null;
}
/*function descargarXls()
{
url1 = '${pageContext.request.contextPath}/ExtraerXlsUsuarios.do';
$.ajax( {url: url1,
success: function(result)
{
//$('#axls').attr('href', "../" + result);
location.href = "../" + result; //$('#axls').attr('href');
} });
}*/
$('#s').keypress(function (event) {
if (event.which == 13) {
document.location.href = 'gestionUsuarios.jsp?o=' + $('#o').val() + '&s=' + $('#s').val();
return null;
}
}
);
function leerDatos(id) {
$.post("/admin/usuario/ver/" + id + "/", function (obj) {
obj = JSON.parse(obj);
$('#uid').val(obj.id);
$('#unom').val(obj.nom);
$('#urun').val(obj.run);
$('#ucom').val(obj.com);
$('#modalupdate').modal('show');
obj = null;
});
}
/*$().ready( function()
{
v = $('#s').val();
$('#s').val('');
$('#s').val(v);
});*/
</script>
</html>
I'm putting the list into the model right, as you can see in the chrome developer tools:
I can't see the problem here, I need help trying to figure out why the table is not being filled.
Try including the <%#taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> athe top of your code. Also, make sure your object name ciudades is spelled as it is in your controller.
Well my problem was thwo things:
I'm using tomcat as webapp which doesn't bring JSTL embeddeb. So I had to add the dependency in the pom.xml.The version is important if you want to use EL's.
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
</dependency>
I had to add the taglib on top of the JSP to access the <c:> tags. Thanks to #Morteza Bandi for the heads up.
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
I'm trying to submit a POST request to a controller but controller does not respond to my request and no error has been thrown as well, however GET request works fine.
I'm using
<button type="submit" class="btn btn-primary">Submit</button>
to send my request at the controller and this the controller that will handle my request>>
#GetMapping("/flexfieldkeysegment/{keyFlexFieldSegmentId}")
public String editCategoryForm(#PathVariable Integer keyFlexFieldSegmentId, Model model) {
String tenantName=getCurrentTenant().getUser().getTenantName();
FlexFieldKeySegment segment = keySegment.findFlexFieldKeySegmentById(tenantName, keyFlexFieldSegmentId);
model.addAttribute("keySegment",segment);
return viewPrefix+"edit_flexfield_key_segment";
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
layout:decorate="~{layout}">
<body>
<div layout:fragment="content">
<br /> <br /> <br />
<div class="col-md-6 col-md-offset-3">
<h3 class="sub-title theme-font"></h3>
<div class="panel panel-primary theme-font">
<div class="panel-heading">
<h3 class="panel-title">Accounting Flexfield Key Segment</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-12">
<form th:action="#{/flexfieldkeysegment/{keyFlexFieldSegmentId}(keyFlexFieldSegmentId=${keySegment.keyFlexFieldSegmentId})}"
th:object="${keySegment}" method="post"
enctype="multipart/form-data">
<p th:if="${#fields.hasErrors('global')}" th:errors="*{global}"
th:class="text-red">Incorrect data</p>
<!-- text input -->
<div class="form-group"
th:classappend="${#fields.hasErrors('keyFlexFieldSegmentCode')}? 'has-error'">
<label>Flexfield Segment Code <span style="color: red;">*</span></label>
<input type="text" class="form-control"
name="keyFlexFieldSegmentCode"
th:field="*{keyFlexFieldSegmentCode}"
placeholder="Enter Flexfield Key Segment Code" />
<p th:if="${#fields.hasErrors('keyFlexFieldSegmentCode')}"
th:errors="*{keyFlexFieldSegmentCode}" th:class="text-red">Incorrect
data</p>
</div>
<div class="form-group"
th:classappend="${#fields.hasErrors('name')}? 'has-error'">
<label>Flexfield Key Segment Name<span
style="color: red;">*</span></label> <input type="text"
class="form-control" name="name" th:field="*{name}"
placeholder="Enter Flexfield Key Segment Name" />
<p th:if="${#fields.hasErrors('name')}" th:errors="*{name}"
th:class="text-red">Incorrect data</p>
</div>
<div class="form-group"
th:classappend="${#fields.hasErrors('description')}? 'has-error'">
<label>Description<span style="color: red;">*</span></label> <input
type="text" class="form-control" name="description"
th:field="*{description}"
placeholder="Enter Flexfield Key Segment Description" />
<p th:if="${#fields.hasErrors('description')}"
th:errors="*{description}" th:class="text-red">Incorrect
data</p>
</div>
<div class="form-group"
th:classappend="${#fields.hasErrors('separatorId')}? 'has-error'">
<label for="segment_separator">Segment Separator <span
style="color: red;">*</span></label> <select name="name"
id="separator" th:field="*{separatorId}"
th:data-validation-message="#{msg.flexfieldkeysegment.separator.mandatory}"
class="form-control dropdown">
<option th:value="''" th:text="'Select'"></option>
<option th:each="separator : ${segment_separator}"
th:text="${separator.separatorName}"
th:value="${separator.separatorId}"></option>
</select>
<p th:if="${#fields.hasErrors('separatorId')}"
th:errors="*{separatorId}" th:class="text-red">Incorrect
data</p>
</div>
<div class="form-group">
<div style="width: 30%; float: left; margin-right: 3%;">
<input type="checkbox" th:field="*{freezeFlexfieldDefinition}"
th:value="${freezeFlexfieldDefinition}" /> <label>Freeze
Flexfield Definition</label>
</div>
<div style="width: 30%; float: left; margin-right: 3%;">
<input type="checkbox" th:field="*{crossValidateSegment}"
th:value="${crossValidateSegment}" /> <label>Cross
Validate Segment</label>
</div>
<div style="width: 30%; float: left; margin-right: 3%;">
<input type="checkbox" th:field="*{freezeRollUpGroup}"
th:value="${freezeRollUpGroup}" /> <label>Freeze
Rollup Group</label>
</div>
<div style="width: 30%; float: left; margin-right: 3%;">
<input type="checkbox" th:field="*{allowDynamicInsert}"
th:value="${allowDynamicInsert}" /> <label>Allow
Dynamic Insert</label>
</div>
<div style="width: 30%; float: left; margin-right: 3%;">
<input type="checkbox" th:field="*{active}"
th:value="${active}" /> <label>Active</label>
</div>
</div>
</form>
</div>
</div>
<div class="box-footer">
<button type="button" class="btn btn-warning"
onclick="window.history.go(-1); return false;">
<span class="glyphicon glyphicon-arrow-left"></span> Back
</button>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Instead of #GetMapping, use #PostMapping. Also, annotate the 'Model' POJO with #RequestBody
#PostMapping("/flexfieldkeysegment/{keyFlexFieldSegmentId}")
public String editCategoryForm(#PathVariable Integer keyFlexFieldSegmentId, #RequestBody Model model) {
String tenantName=getCurrentTenant().getUser().getTenantName();
FlexFieldKeySegment segment = keySegment.findFlexFieldKeySegmentById(tenantName, keyFlexFieldSegmentId);
model.addAttribute("keySegment",segment);
return viewPrefix+"edit_flexfield_key_segment";
}
I want this form to send email but i don't work, i don'y know where is the problem but i think the problem is in the model, also this form has a select function i cannot make it work when i choose something in the select option to send it with email
This is the controller
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Offer extends CI_Controller {
public function __construct() {
parent::__construct();
$this->load->model('admin_model');
$this->load->helper(array('form', 'url', 'text'));
}
public function index() {
$this->load->view('header.php');
$this->load->view('offer.php');
$this->load->view('footer.php');
}
public function sendOffer(){
if(isset($_POST['companyname']) && isset($_POST['sendername']) && isset($_POST['email']) && isset($_POST['number']) && isset($_POST['interest']) && isset($_POST['message'])){
$data['companyname'] = $_POST['companyname'];
$data['sendername'] = $_POST['sendername'];
$data['email'] = $_POST['email'];
$data['number'] = $_POST['number'];
$data['interest'] = $_POST['interest'];
$data['message'] = $_POST['message'];
$data['created_at'] = date("Y-m-d H:i:s");
$this->admin_model->sendOfferEmail($data);
$this->db->insert('offer',$data);
$true = "Message Sent Successfully ...";
$this->session->set_flashdata('true', $true);
redirect(base_url()."offer");
}else{
$error = "Failed To Send, Please check all inputs and try again !!!";
$this->session->set_flashdata('error', $error);
redirect(base_url()."offer");
}
}
}
This is the model
public function sendOfferEmail($data){
$MailTo = "menna.ashour#thetranslationgate.com";
$subject = "The Translation Gate Website offer".$data['created_at'];
$headers = "MIME-Version: 1.0" . "\r\n";
$headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";
//$headers .= "Cc: amr.hussein#europelocalize.com". "\r\n";
$headers .= 'From: The Translation Gate Website'."\r\n";
$message = '<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Falaq| Site Manager</title>
<style>
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333;
}
section#unseen
{
overflow: scroll;
width: 100%
}
</style>
<!--Core js-->
</head>
<body>
<div class="panel-body">
<div class="adv-table editable-table ">
<div class="clearfix">
<div class="btn-group">
<span class=" btn-primary" style="">
</span>
</div>
</div>
<div class="space15"></div>
<table class="table table-striped table-hover table-bordered" id="" style="overflow:scroll;border: 1px solid;width: 100%;text-align: center">
<tbody>
<tr>
<td style="background-color: #ddd;">Company Name</td>
<td style="background-color: #f9f9f9;">'.$data['companyname'].'</td>
</tr>
<tr>
<td style="background-color: #ddd;">Full Name</td>
<td style="background-color: #f9f9f9;">'.$data['sendername'].'</td>
</tr>
<tr>
<td style="background-color: #ddd;">Email</td>
<td style="background-color: #f9f9f9;">'.$data['email'].'</td>
</tr>
<tr>
<td style="background-color: #ddd;">Phone Number</td>
<td style="background-color: #f9f9f9;">'.$data['number'].'</td>
</tr>
<tr>
<td style="background-color: #ddd;">Message</td>
<td style="background-color: #f9f9f9;">'.$data['message'].'</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>';
mail($MailTo,$subject,$message,$headers);
}
public function getInterest($interest){
$result = $this->get_where('interest',array('id' => $interest))->row();
if(isset($result->name)){
return $result->name;
}else{
return '';
}
}
}
?>
This is the view
<section id="pageBar">
<div class="container">
<div class="row">
<h1 class="page-title pull-left">Offers</h1>
<ol class="breadcrumb pull-right">
<li>Home</li>
<li>Offers</li>
</ol>
</div>
</div>
</section>
<!-- Page-Bar -->
<!-- Login Form -->
<div id="login">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 col-xs-offset-0">
<form class="login-form" method="post" action="<?=base_url()?>offer/sendOffer" enctype="multipart/form-data">
<div class="form-group input-block">
<label for="name">Company Name</label>
<input type="text" name="companyname" class="form-control" id="companyname" required>
</div>
<div class="form-group input-block">
<label for="name">Full Name</label>
<input type="text" name="sendername" class="form-control" id="sendername" required>
</div>
<div class="form-group input-block">
<label for="email" style="top: 24px; font-size: 16px;">Email</label>
<input type="email" name="email" class="form-control" id="email" required="" autocomplete="off">
</div>
<div class="form-group input-block">
<label for="name" style="top: 24px; font-size: 16px;">Phone Number</label>
<input type="text" name="number" class="form-control" id="number" required="" autocomplete="off">
</div>
<div class="select-group">
<select class="form-control selectpicker" >
<option disabled="disabled" selected="" value="">Interest</option>
<option value="1">Arabic</option>
<option value="2">DTP</option>
<option value="3">Both</option>
</select>
</div>
<div class="">
<textarea name="message" id="message" class="form-control" rows="6" placeholder="Message" required="" autocomplete="off"></textarea>
</div>
<div class="text-center">
<button type="submit" class="btn btn-gray">
Submit
</button>
</div>
</form> </div>
</div>
</div>
</div>
You have disabled to blank value the select box.So you are not able select.
Remove disabled="disabled" from select box.
For mail service turn on development mode and check the error you got.
I want to scroll to bottom of the page on page-load automatically in laravel 5.2, i tried soo much but i couldn't figure out were i went wrong, I have attached my view code below.Can u go through it please and let me know were i went wrong. Actually i'm not good at design soo please help me on it.
my code:
#section('content')
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="col-md-3 col-sm-6 col-xs-12 profile_left">
<!-- start Support Tickets -->
<ul class="list-unstyled user_data">
<li>
<div class="panel panel-success">
<div class="panel-heading"><span class="glyphicon glyphicon-filter"></span><strong> Ticket Information</strong></div>
<div class="panel-body">
<!-- Modal -->
<table class="table table" style="color: #009933;">
#if(!empty($tickets))
<tr>
<td style="font-weight: bold; ">
<small>
{{$tickets->subject}}
</small>
</td>
</tr>
<tr>
<td style="font-weight: bold; ">
<small>
#if ($tickets->status === 'open')
<span class="label label-success">{{$tickets->status}}</span>
#elseif ($tickets->status === 'ongoing')
<span class="label label-warning">{{$tickets->status}}</span>
#elseif ($tickets->status === 'closed')
<span class="label label-default">{{$tickets->status}}</span>
#endif
</small>
</td>
</tr>
<tr>
<td style="font-weight: bold; ">
<small>
<p style="font-family: 'Times New Roman', Times, serif; ">Agent: {{\App\User::where('_id',$tickets->user_assigned)->value('username') }}</p>
</small>
</td>
</tr>
<tr>
<td style="font-weight: bold; ">
<small>
<p style="font-family: 'Times New Roman', Times, serif; ">Priority:
#if ($tickets->priority === 'Low')
<span class="label label-info">{{$tickets->priority}}</span>
#elseif ($tickets->priority === 'Medium')
<span class="label label-primary">{{$tickets->priority}}</span>
#elseif ($tickets->priority === 'High')
<span class="label label-danger">{{$tickets->priority}}</span>
#endif</p>
</small>
</td>
</tr>
<tr>
<td style="font-weight: bold; ">
<small>
<p style="font-family: 'Times New Roman', Times, serif; ">Last_Updated: {{$tickets->updated_at}}</p>
</small>
</td>
</tr>
#endif
</table>
</div>
</div>
</li>
<li>
<div class="panel panel-success">
<div class="panel-heading">
<span class="glyphicon glyphicon-dashboard"></span><strong> Support</strong>
</div>
<div class="panel-body">
<!-- Modal -->
<table class="table table-striped">
<tr>
<td><span class="glyphicon glyphicon-home"></span> My Support Tickets</td>
</tr>
<tr>
<td><span class="glyphicon glyphicon-open"></span> Submit Tickets</td>
</tr>
</table>
</div>
</div>
</li>
</ul>
<!-- end of Support Tickets -->
</div>
<div class="col-md-9 col-sm-9 col-xs-12">
<center>
<h2 style="color: #00BCD4;">My Ticket Feedback/<small>Your Comments History</small></h2>
</center>
<hr style="height:2px;border-width:0;color:gray;background-color:gray">
#if($tickets->status === 'closed')
#if(Auth::user()->_id === $tickets->user)
<div class="alert alert-warning" role="alert">
<center>
<p style="font-weight: bold; color:#FF9966; ">This Ticket is closed. You can reply to reopen this ticket.</p>
</center>
</div>
<div class="panel panel-success">
<div class="panel-heading">
<form action = "/reopentick/<?php echo $tickets->id; ?>" method = "post">
<input type = "hidden" name = "_token" value = "<?php echo csrf_token(); ?>">
<input type="hidden" name="ticket_id" value="<?php echo $tickets->id; ?>">
<input type="hidden" name="status" value="open">
<span class="glyphicon glyphicon-pencil"></span>
<input type = 'submit' value = "Reply To Reopen Ticket" class="btn btn-link btn-xs" style="font-weight: bold; color:#009933; " />
<span class="glyphicon glyphicon-plus pull-right"></span>
</form>
</div>
</div>
#endif
#endif
<table class="table table-striped">
<tr><td>
<div class="panel-group">
#if($tickets->user == Auth::user()->_id)
<div class="panel panel-info">
#else
<div class="panel panel-success">
#endif
<div class="panel-heading">
<span class="glyphicon glyphicon-user">
<strong>
{{ \App\User::where('_id',$tickets->user)->value('username') }}
</strong>
</span>
<span class="glyphicon glyphicon-time pull-right">
{{ $tickets->created_at }}</br>
</span>
</div>
<div class="panel-body">
<p> Hello,</br>
{!! $tickets->message !!}</br>
<b>...</b></br>
Thank you,</br>
{{ \App\User::where('_id',$tickets->user)->value('username') }}
</p>
</div>
</div>
</div>
</td></tr>
<tr>
#foreach($anstickets as $t)
<td class="answer_block">
<div class="panel-group">
#if($t->user_id == Auth::user()->_id)
<div class="panel panel-info">
#else
<div class="panel panel-success">
#endif
<div class="panel-heading">
<span class="glyphicon glyphicon-user ">
<strong>
{{ \App\User::where('_id',$t->user_id)->value('username') }}
</strong>
</span>
<span class="glyphicon glyphicon-time pull-right">
{{ $t->created_at }}</br>
</span>
</div>
<div class="panel-body">
<p>Hi,</p>
{!!$t->comments!!}</br>
</div>
</div>
</div>
</td>
</tr>
#endforeach
</table>
#if(($tickets->status === 'ongoing')||($tickets->status === 'open'))
#if(Auth::user()->_id === $tickets->user)
<div class="panel panel-danger">
<div class="panel-heading">
<form action = "/closetick/<?php echo $tickets->id; ?>" method = "post" >
<input type = "hidden" name = "_token" value = "<?php echo csrf_token(); ?>">
<input type="hidden" name="ticket_id" value="<?php echo $tickets->id; ?>">
<input type="hidden" name="status" value="closed">
<input type = 'submit' value = "Close Ticket" class="btn btn-link btn-xs" style="font-weight: bold; color:#CC0000; "/>
<span class="glyphicon glyphicon-remove-sign pull-right"></span>
</form>
</div>
</div>
#endif
<br>
#if(Auth::user()->_id === $tickets->user)
<b><h1> Response</h1></b>
#else
<b><h1> Solution</h1></b>
#endif
<form action = "/tickanswert/<?php echo $tickets->id; ?>" method = "post" onsubmit="return form_submit()">
<input type = "hidden" name = "_token" value = "<?php echo csrf_token(); ?>">
<input type="hidden" name="user_id" value="<?php echo Auth::user()->id; ?>">
<input type="hidden" name="ticket_id" value="<?php echo $tickets->id; ?>">
<div class="form-group">
<textarea class="form-control" name="comments" rows="14" required></textarea>
</div>
<br>
<div class="form-group">
<div class="col-md-6 col-md-offset-4">
<button type="submit" name="submit" class="btn btn-primary btn-lg">
<i class="fa fa-btn fa-ticket"></i> SUBMIT
</button>
</div>
</div>
</form>
#endif
</div>
</div>
#endsection
#section('additional-scripts')
<script>
$( document ).ready(function() {
$('html,body').animate({
scrollTop: $('.answer_block').children('.panel-group').last().offset().top},
'slow');
alert("Hello! I am an alert box!!");
});
</script>
#endsection
Laravel cannot scroll to bottom of page. But Javascript can:
<script>
$(document).ready(function() {
$('html,body').animate({scrollTop: document.body.scrollHeight},"slow");
})
</script>
I've two jsp pages 1.view.jsp,2.popup.jsp (it is a popup page).the popup.jsp will be loaded when I click the 'add icon' on my view.jsp. Just I want to know how to load values on my 'view.jsp' (without refreshing the page) when 'submit' button is clicked on my 'popup.jsp' using Ajax.
view.jsp
<body>
<div class="st-content">
<jsp:include page="/WEB-INF/jsp/settings/adminmenu.jsp" />
<div class="width1">
<div class="mgmt-menu-bar font-new">
<div class="margin-left10 margin-top line-height1 ">
<a href="executeIndustry">
<div class="menunew cursor red">
<i class="icon-list icon-grey1"></i> Industry</div>
</a>
<a href="viewDepartment">
<div class="menunew cursor" ><i class="icon-list icon-grey1"></i> Department</div>
</a>
<a href="addViewDesignation">
<div class="menunew cursor" ><i class="icon-list icon-grey1"></i> Designation</div>
</a>
</div>
</div>
<div class="mgmt-content-right">
<div class="width2 margin-left10">
<div class="content-table-full">
<div class="content-h bold margin-left margin-top">Industry
<div class="top-right-icon2 cursor" data-toggle="tooltip" title="Add Industry" onclick="TINY.box.show({iframe:'addPageIndustry.action',boxid:'frameless',width:456,height:200, fixed:false,maskid:'bluemask',maskopacity:40})" >
<i class="icon-plus icon-grey1"></i>
</div>
</div>
<s:form action="executeIndustry" name="paginationForm" id="paginationForm">
<s:hidden name="industryId" id="industryId"/>
<s:if test="%{success!=null}" >
<div id="error" style="color:#048350;margin-top: 10px" >
<s:property value="success"/>
<br/>
</div>
</s:if>
<s:if test="%{error!=null}" >
<div id="error" style="color: #FF0000;margin-top: 10px">
<s:property value="error"/>
<br/>
</div>
</s:if>
<table width="100%" cellpadding="0" cellspacing="0" class="margin-bottom margin-top table-display">
<tr class="row-header">
<td >
Industry </td>
<td width="450">Created Date</td>
<td width="200">Action</td>
</tr>
<s:if test="%{industrylist!= null && industrylist.size > 0}">
<s:iterator value="industrylist">
<tr class="row1">
<td > <s:property value="industryName"/></td>
<td> <s:date name="createdDate" format="dd/MM/yyyy hh:mm:ss a"/></td>
<td>
<i class="icon-edit icon-grey1 cursor" title="Edit" data-toggle="tooltip" onclick="TINY.box.show({iframe:'editIndustry.action?editid=<s:property value="industryId"/>',boxid:'frameless',width:456,height:200, fixed:false,maskid:'bluemask',maskopacity:40})"></i>
<i title="Delete" data-toggle="tooltip" onclick="deletethis('<s:property value="industryId"/>')" class="icon-minus-sign icon-grey1 cursor"></i>
</td>
</tr>
</s:iterator>
</s:if>
<s:else>
<tr class="row1">
<td colspan="4" align="center">No industries were found</td>
</tr>
</s:else>
<s:hidden name="deleteid" id="deleteid"></s:hidden>
</table>
<div class="width2">
<s:if test="%{industrylist.size()>0}">
<%# include file="/WEB-INF/jsp/pagenation/pagination.jsp" %>
</s:if>
</div>
</s:form>
</div>
</div>
</div>
</div>
</div>
<jsp:include page="/common/commonfooter.jsp" />
<script type="text/javascript" src="shared/scripts/js/pagination.js"></script>
</div>
popup.jsp
<body>
<div class="pop-box">
<s:if test="%{edit!=1}" >
<s:form action="addIndustry" method="post" id="FormOne" name="FormOne" target="_top" cssClass="validate">
<span style="margin-left:10px;" class="heading-st2">Add Industry</span>
<div class="popup-style">
<div class="row-form">
<span class="red">*</span>Industry
</div>
<div class="row-form ">
<s:textfield name="industryName" id="industryName" cssClass="input-xlarge required-field" oncopy="return false" onpaste="return false" oncut="return false" onkeypress="return isNumberKey(event)" maxlength="60" />
</div>
<div class="row-form">
<button type="submit" class="btn btn-success ">Submit <i class="icon-ok icon-white"></i></button>
<span class="help-inline"></span>
</div>
</div>
</s:form>
</s:if>
<s:else>
<s:form action="updateIndustry" method="post" id="FormOne" name="FormOne" target="_top" cssClass="validate">
<s:hidden name="industryId"/>
<span style="margin-left:10px;" class="heading-st2">Edit Industry</span>
<div class="popup-style">
<div class="row-form">
<span class="red">*</span>Industry
</div>
<div class="row-form ">
<s:textfield name="industryName" id="industryName" cssClass="input-xlarge required-field" oncopy="return false" onpaste="return false" oncut="return false" onkeypress="return isNumberKey(event)" maxlength="60" />
</div>
<div class="row-form">
<button type="submit" class="btn btn-success ">Submit <i class="icon-ok icon-white"></i></button>
<span class="help-inline">
</span>
</div>
</div>
</s:form>
</s:else>
</div>
$(document).ready(function(){
var frm = $('#myform');
frm.submit(function (ev) {
$.ajax({
type: frm.attr('method'),
url: frm.attr('action'),
data: frm.serialize(),
success: function (data) {
alert("submitted");
},
error:function(data){
alert("error");
}
});
window.scrollTo(0,0);
ev.preventDefault();
});
The above jquery ajax helps you to accompany your action submittion without refreshing...