I am having trouble getting basic databinding working.
It seems that I have to use .fetch for databinding to work. I feel this way isn't correct, plus the save method isn't called. Also the TabStrip has stopped working when using this method.
Is it always necessary to use the kendo application constructor at the end of each page? In another page if I use it the page does not show ???
I'm very new to Kendo.
The Json returned is
[{"JobID":8,"JobDescription":"Lets try these for apples","JobTemplateID":1,"JobTemplateName":"Standard Service","JobSignature":null,"JobNotes":null,"AssetName":null,"SiteName":"??? ","LocationName":"??? ","Priority":"???","JobLoggedOn":"2015-01-09T15:28:14","JobEstimatedStart":"2015-01-09T15:28:04.76","JobCompletedOn":null,"AssignedToName":"???"}]
and the code is
<!DOCTYPE html>
<html>
<head>
<title>Job Details</title>
<link rel="stylesheet" href="Content/Styles/Kendo/kendo.common.min.css" />
<link rel="stylesheet" href="Content/Styles/Kendo/kendo.default.min.css" />
<link rel="stylesheet" href="Content/Styles/Kendo/kendo.dataviz.mobile.min.css" />
<link rel="stylesheet" href="Content/Styles/Kendo/kendo.mobile.all.min.css" />
<script src="Scripts/Kendo/jquery.min.js"></script>
<script src="Scripts/Kendo/kendo.core.min.js"></script>
<script src="Scripts/Kendo/kendo.ui.core.min.js"></script>
<script src="Scripts/Kendo/kendo.mobile.button.min.js"></script>
<script src="Scripts/Kendo/kendo.mobile.listview.min.js"></script>
<script src="Scripts/Kendo/kendo.mobile.tabstrip.min.js"></script>
<script src="Scripts/Kendo/kendo.mobile.modalview.min.js"></script>
<script src="Scripts/Signature/jSignature.min.js"></script>
</head>
<body>
<div data-role="view" id="tabstrip-details" data-title="Details" data-layout="mobile-tabstrip">
<ul data-role="listview" data-style="inset" data-type="group">
<li>General Details
<ul>
<li>Site <span class="value" data-bind="text: jobDetails.SiteName"></span></li>
<li>Location <span class="value" data-bind="text: jobDetails.LocationName"></span></li>
<li>Asset <span class="value" data-bind="text: jobDetails.AssetName"></span></li>
<li>Priority <span class="value" data-bind="text: jobDetails.Priority"></span></li>
<li>Template <span class="value" data-bind="text: jobDetails.JobTemplateName"></span></li>
</ul>
</li>
<li>Dates and Assignee
<ul>
<li>Assigned To <span class="value" data-bind="text: jobDetails.AssignedToName"></span></li>
<li>Estimated Start <span class="value" data-bind="text: jobDetails.JobEstimatedStart"></span></li>
</ul>
</li>
</ul>
</div>
<div data-role="view" id="tabstrip-notes" data-title="Notes" data-layout="mobile-tabstrip">
</div>
<div data-role="view" id="tabstrip-steps" data-title="Steps" data-layout="mobile-tabstrip">
<ul data-role="listview" data-style="inset" data-type="group">
<li>Before Starting
<ul>
<li>
<label>
<input type="checkbox" />Step 1</label></li>
<li>
<label>
<input type="checkbox" />Step 2</label></li>
<li>
<label>
<input type="checkbox" />Step 3</label></li>
</ul>
</li>
<li>Step by Step
<ul>
<li>
<label>
<input type="checkbox" />Do This</label></li>
<li>
<label>
<input type="checkbox" />Do This</label></li>
<li>
<label>
<input type="checkbox" />Do This</label></li>
</ul>
</li>
</ul>
</div>
<div data-role="view" id="tabstrip-parts" data-title="Parts" data-layout="mobile-tabstrip">
</div>
<div data-role="view" id="tabstrip-photos" data-title="Photos" data-layout="mobile-tabstrip">
<input type="file" accept="image/*" capture>
<canvas></canvas>
</div>
<div data-role="view" id="tabstrip-done" data-title="Finish Job" data-layout="mobile-tabstrip">
<ul data-role="listview" data-style="inset" data-type="group">
<li>Completed On
<ul>
<li>
<label>
Date
<input type="date" data-bind="value: jobDetails.JobCompletedOn" />
</label>
</li>
<li>
<label>
Time
<input type="time" data-bind="value: jobDetails.JobCompletedOn" />
</label>
</li>
</ul>
</li>
<li>Sign Off
<ul>
<li>Signature <span class="value"><a data-role="button" data-rel="modalview" href="#modalview-sign">Sign Here</a></span></li>
</ul>
</li>
<li>Submit
<button data-bind="click: save">Job Done</button>
</li>
</ul>
</div>
<div data-role="layout" data-id="mobile-tabstrip">
<header data-role="header">
<div data-role="navbar">
<a class="nav-button" data-align="left" href="Home.html#JobList.html">Back</a>
<span data-role="view-title"></span>
</div>
</header>
<div data-role="footer">
<div data-role="tabstrip">
Details
Notes
Steps
Parts
Photos
Finish Job
</div>
</div>
</div>
<div data-role="modalview" id="modalview-sign" style="width: 90%; height: 70%">
<div data-role="header">
<div data-role="navbar">
<a data-align="right" data-click="closeModalView" data-role="button">Close</a>
</div>
</div>
<div id="signature"></div>
</div>
<style scoped>
.value {
float: right;
margin-top: 8px;
color: #bbb;
}
</style>
<script>
$("#signature").jSignature();
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "/api/job/getjob/8",
dataType: "json"
},
update: {
type: "POST",
url: "/api/job/SaveJob",
},
}
});
dataSource.fetch(function () {
var data = dataSource.data();
var job = data[0];
var viewModel = kendo.observable({
jobDetails: job,
save: function () {
this.dataSource.sync();
}
});
kendo.bind(document.body, viewModel);
});
var app = new kendo.mobile.Application(document.body);
</script>
<script>
function closeModalView() {
$("#modalview-sign").kendoMobileModalView("close");
}
</script>
</body>
</html>
Many thanks.
Related
I built an interactive resumé page that contains a form. I'm trying to send a message, using form in go and it isn't working. It's just keep taking back to the home page when I click on the submit button.
I want to receive a message when the user click the submit button.
I also want the sender to receive a confirmation that the message has been delivered.
This is my main.go file
package main
import (
"fmt"
"net/http"
"text/template"
)
func main() {
http.HandleFunc("/", routeIndexGet)
http.HandleFunc("/process", routeSubmitPost)
fmt.Println("server started at localhost:9000")
http.ListenAndServe(":9000",nil)
}
func `routeIndexGet`(w http.ResponseWriter, r *http.Request){
if r.Method == "GET" {
var tmpl = template.Must(template.New("form").ParseFiles("index.html"))
var err = tmpl.Execute(w, nil)
if err != nil {
http.Error(w, err.Error(), http.StatusInternalServerError)
}
return
}
http.Error(w, "", http.StatusBadRequest)
}
func routeSubmitPost(w http.ResponseWriter, r *http.Request) {
if r.Method == "POST" {
var tmpl = template.Must(template.New("result").ParseFiles("index.html"))
if err := r.ParseForm(); err != nil{
http.Error(w, err.Error(), http.StatusInternalServerError)
return
}
var name = r.FormValue("name")
var email = r.FormValue("email")
var subject = r.FormValue("subject")
var message = r.Form.Get("message")
var data = map[string]string{"name": name, "email":email, "subject": subject, "message":message}
if err := tmpl.Execute(w, data); err != nil {
http.Error(w, err.Error(), http.StatusInternalServerError)
}
return
}
http.Error(w, "", http.StatusBadRequest)
}
This is my index.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>MeetMe - Resume Website Template</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css" >
<!-- Fonts -->
<link rel="stylesheet" type="text/css" href="assets/fonts/font-awesome.min.css">
<!-- Icon -->
<link rel="stylesheet" type="text/css" href="assets/fonts/simple-line-icons.css">
<!-- Slicknav -->
<link rel="stylesheet" type="text/css" href="assets/css/slicknav.css">
<!-- Menu CSS -->
<link rel="stylesheet" type="text/css" href="assets/css/menu_sideslide.css">
<!-- Slider CSS -->
<link rel="stylesheet" type="text/css" href="assets/css/slide-style.css">
<!-- Nivo Lightbox -->
<link rel="stylesheet" type="text/css" href="assets/css/nivo-lightbox.css" >
<!-- Animate -->
<link rel="stylesheet" type="text/css" href="assets/css/animate.css">
<!-- Main Style -->
<link rel="stylesheet" type="text/css" href="assets/css/main.css">
<!-- Responsive Style -->
<link rel="stylesheet" type="text/css" href="assets/css/responsive.css">
</head>
<body>
<!-- Header Area wrapper Starts -->
<header id="header-wrap">
<!-- Navbar Start -->
<nav class="navbar navbar-expand-lg fixed-top scrolling-navbar indigo">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="main-navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
<span class="icon-menu"></span>
<span class="icon-menu"></span>
<span class="icon-menu"></span>
</button>
<img src="assets/img/logo.png" alt="">
</div>
<div class="collapse navbar-collapse" id="main-navbar">
<ul class="onepage-nev navbar-nav mr-auto w-100 justify-content-end clearfix">
<li class="nav-item active">
<a class="nav-link" href="#hero-area">
Home
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">
About
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">
Services
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#resume">
Resume
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#portfolios">
Work
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">
Contact
</a>
</li>
</ul>
</div>
</div>
<!-- Mobile Menu Start -->
<ul class="onepage-nev mobile-menu">
<li>
Home
</li>
<li>
about
</li>
<li>
Services
</li>
<li>
resume
</li>
<li>
Work
</li>
<li>
Contact
</li>
</ul>
<!-- Mobile Menu End -->
</nav>
<!-- Navbar End -->
<!-- Hero Area Start -->
<div id="hero-area" class="hero-area-bg">
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 text-center">
<div class="contents">
<h5 class="script-font wow fadeInUp" data-wow-delay="0.2s">Hi This is</h5>
<h2 class="head-title wow fadeInUp" data-wow-delay="0.4s">Omoyibo Oghenetega</h2>
<p class="script-font wow fadeInUp" data-wow-delay="0.6s">Back-end Web Developer</p>
<ul class="social-icon wow fadeInUp" data-wow-delay="0.8s">
<li>
<a class="facebook" href="#"><i class="icon-social-facebook"></i></a>
</li>
<li>
<a class="twitter" href="#"><i class="icon-social-twitter"></i></a>
</li>
<li>
<a class="instagram" href="#"><i class="icon-social-instagram"></i></a>
</li>
<li>
<a class="linkedin" href="#"><i class="icon-social-linkedin"></i></a>
</li>
<li>
<a class="google" href="#"><i class="icon-social-google"></i></a>
</li>
</ul>
<div class="header-button wow fadeInUp" data-wow-delay="1s">
Get a Free Quote
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Hero Area End -->
</header>
<!-- Header Area wrapper End -->
<!-- About Section Start -->
<section id="about" class="section-padding">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="img-thumb wow fadeInLeft" data-wow-delay="0.3s">
<img class="img-fluid" src="assets/img/gallery/FB_IMG.jpg" alt="">
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="profile-wrapper wow fadeInRight" data-wow-delay="0.3s">
<h3>Hi Guys!</h3>
<p>I build digital product for web and mobile and i also maintain existing web and mobile project</p>
<div class="about-profile">
<ul class="admin-profile">
<li><span class="pro-title"> Name </span> <span class="pro-detail">Omoyibo Oghenetega</span></li>
<li><span class="pro-title"> Age </span> <span class="pro-detail">23 Years</span></li>
<li><span class="pro-title"> Experience </span> <span class="pro-detail">1 Years</span></li>
<li><span class="pro-title"> Country </span> <span class="pro-detail">Nigeria</span></li>
<li><span class="pro-title"> Location </span> <span class="pro-detail">portharcourt, Rivers state</span></li>
<li><span class="pro-title"> e-mail </span> <span class="pro-detail">tomoyibo#gmail.com</span></li>
<li><span class="pro-title"> Freelance </span> <span class="pro-detail">Available</span></li>
</ul>
</div>
<i class="icon-paper-clip"></i> Download Resume
<i class="icon-speech"></i> Contact Me
</div>
</div>
</div>
</div>
</section>
<!-- About Section End -->
<!-- Services Section Start -->
<section id="services" class="services section-padding">
<h2 class="section-title wow flipInX" data-wow-delay="0.4s">What I do</h2>
<div class="container">
<div class="row">
<!-- Services item -->
<div class="col-md-6 col-lg-3 col-xs-12">
<div class="services-item wow fadeInDown" data-wow-delay="0.3s">
<div class="icon">
<i class="icon-grid"></i>
</div>
<div class="services-content">
<h3>Back-end Development</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse condi.</p>
</div>
</div>
</div>
</section>
<!-- Services Section End -->
<!-- Resume Section Start -->
<div id="resume" class="section-padding">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="education wow fadeInRight" data-wow-delay="0.3s">
<ul class="timeline">
<li>
<i class="icon-graduation"></i>
<h2 class="timelin-title">Education</h2>
</li>
<li>
<div class="content-text">
<h3 class="line-title">Bsc In Electrical engineering university</h3>
<span>2015 - 2020</span>
<p class="line-text">Expenses as material breeding insisted building to in. Continual so distrusts pronounce by unwilling listening. Thing do taste on we manor.</p>
</div>
</li>
<li>
<div class="content-text">
<h3 class="line-title">Higher Secondary School - French village international college</h3>
<span>2009 - 2014</span>
<p class="line-text">Expenses as material breeding insisted building to in. Continual so distrusts pronounce by unwilling listening. Thing do taste on we manor.</p>
</div>
</li>
<li>
<div class="content-text">
<h3 class="line-title">Secondary School - Labratory High School</h3>
<span>2005 - 2010</span>
<p class="line-text">Expenses as material breeding insisted building to in. Continual so distrusts pronounce by unwilling listening. Thing do taste on we manor.</p>
</div>
</li>
</ul>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="experience wow fadeInRight" data-wow-delay="0.6s">
<ul class="timeline">
<li>
<i class="icon-briefcase"></i>
<h2 class="timelin-title">Experience</h2>
</li>
<li>
<div class="content-text">
<h3 class="line-title">junior back - end Developer</h3>
<span>Jan 2020 - Present</span>
<p class="line-text">Expenses as material breeding insisted building to in. Continual so distrusts pronounce by unwilling listening. Thing do taste on we manor.</p>
</div>
</li>
<li>
<div class="content-text">
<h3 class="line-title">software developer</h3>
<span>Nov 2019 - Dec 2020</span>
<p class="line-text">Expenses as material breeding insisted building to in. Continual so distrusts pronounce by unwilling listening. Thing do taste on we manor.</p>
</div>
</li>
<li>
<div class="content-text">
<h3 class="line-title">software developer</h3>
<span>Mar 2015 - Oct 2016</span>
<p class="line-text">Expenses as material breeding insisted building to in. Continual so distrusts pronounce by unwilling listening. Thing do taste on we manor.</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Resume Section End -->
<!-- Portfolio Section -->
<section id="portfolios" class="section-padding">
</section>
<!-- Portfolio Section Ends -->
<!-- Contact Section Start -->
<section id="contact" class="section-padding">
<div class="contact-form">
<div class="container">
<div class="row contact-form-area wow fadeInUp" data-wow-delay="0.4s">
<div class="col-md-6 col-lg-6 col-sm-12">
<div class="contact-block">
<h2>Contact Form</h2>
<form id="contactForm">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control" id="name" name="name" placeholder="Name" required data-error="Please enter your name">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="text" placeholder="Email" id="email" class="form-control" name="email" required data-error="Please enter your email">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<input type="text" placeholder="Subject" id="msg_subject" class="form-control" required data-error="Please enter your subject">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<textarea class="form-control" id="message" placeholder="Your Message" rows="5" data-error="Write your message" required></textarea>
<div class="help-block with-errors"></div>
</div>
<div class="submit-button">
<button class="btn btn-common" id="submit" type="submit">Send Message</button>
<div id="msgSubmit" class="h3 text-center hidden"></div>
<div class="clearfix"></div>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="col-md-6 col-lg-6 col-sm-12">
<div class="footer-right-area wow fadeIn">
<h2>Contact Address</h2>
<div class="footer-right-contact">
<div class="single-contact">
<div class="contact-icon">
<i class="fa fa-map-marker"></i>
</div>
<p>portharcourt, rivers state</p>
</div>
<div class="single-contact">
<div class="contact-icon">
<i class="fa fa-envelope"></i>
</div>
<p>tomoyibo#gmail.com</p>
</div>
<div class="single-contact">
<div class="contact-icon">
<i class="fa fa-phone"></i>
</div>
<p>+(234) 813 685 9270</p>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<object style="border:0; height: 450px; width: 100%;" data="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d34015.943594576835!2d-106.43242624069771!3d31.677719472407432!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x86e75d90e99d597b%3A0x6cd3eb9a9fcd23f1!2sCourtyard+by+Marriott+Ciudad+Juarez!5e0!3m2!1sen!2sbd!4v1533791187584"></object>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section End -->
<!-- Footer Section Start -->
<footer class="footer-area section-padding">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="footer-text text-center wow fadeInDown" data-wow-delay="0.3s">
<ul class="social-icon">
<div class="container">
<div class="row">
<div class="col-lg-1 col-md-2 col-xs-2">
<div class="img-thumb wow fadeInLeft" data-wow-delay="0.3s">
<img class="img-fluid" src="assets/img/gallery/zuri.png"i4g.png" alt="">
</div>
</div>
<div class="col-lg-1 col-md-2 col-xs-2">
<div class="img-thumb wow fadeInLeft" data-wow-delay="0.3s">
<img class="img-fluid" src="assets/img/gallery/hng.png" alt="">
</div>
</div>
<!-- Services Section End -->
<u1>
<li>
<a class="facebook" href="#"><i class="icon-social-facebook"></i></a>
</li>
<li>
<a class="github" href="#"><i class="icon-social-github"></i></a>
</li>
<li>
<a class="instagram" href="#"><i class="icon-social-instagram"></i></a>
</li>
<li>
<a class="instagram" href="#"><i class="icon-social-linkedin"></i></a>
</li>
<li>
<a class="instagram" href="#"><i class="icon-social-google"></i></a>
</li>
</ul>
<p>Copyright © 2018 UIdeck All Right Reserved</p>
</div>
</div>
</div>
</div>
</footer>
<!-- Footer Section End -->
<!-- Go to Top Link -->
<a href="#" class="back-to-top">
<i class="icon-arrow-up"></i>
</a>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="assets/js/jquery-min.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/jquery.mixitup.js"></script>
<script src="assets/js/jquery.counterup.min.js"></script>
<script src="assets/js/waypoints.min.js"></script>
<script src="assets/js/wow.js"></script>
<script src="assets/js/jquery.nav.js"></script>
<script src="assets/js/jquery.easing.min.js"></script>
<script src="assets/js/nivo-lightbox.js"></script>
<script src="assets/js/jquery.slicknav.js"></script>
<script src="assets/js/main.js"></script>
<script src="assets/js/form-validator.min.js"></script>
<script src="assets/js/contact-form-script.min.js"></script>
<script src="assets/js/map.js"></script>
</body>
</html>
It seems there is no action attribute on your contactForm. Due to that, when you submit, it will submit to the page itself instead of the route you wanted it to submit to.
Consider adding an action attribute:
...
<form id="contactForm" action="/process">
<div class="row">
<div class="col-md-6">
<div class="form-group">
...
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" %>
Can someone help me out here - how do I take the following that I have put together and make each image panel where I have band logos the same height and width? Still very very new to uikit so having trouble following online docs.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>4WAPEX3</title>
<link rel="stylesheet" href="css/uikit.css" />
<script src="jquery/jquery-2.1.3.js">
</script> <script src="js/uikit.min.js">
</script>
</head>
<body>
<ul class="uk-grid uk-grid-width-small-1-2 uk-grid-width-medium-1-3 uk-grid-width-large-1-5" data-uk-grid-margin>
<li>
<div class="uk-panel uk-panel-box uk-panel-box-primary uk-text-center uk-text-large uk-text-bold ">
<div class="uk-panel-teaser">
<img src="images/metallica.jpg" alt="metallica" width="100%"/>
</div> Metallica
</div>
<li>
<div class="uk-panel uk-panel-box uk-panel-box-primary uk-text-center uk-text-large uk-text-bold">
<div class="uk-panel-teaser">
<img src="images/nin.jpg" alt="nine inch nails" width="100%"/>
</div> Nine Inch Nails
</div>
<li>
<div class="uk-panel uk-panel-box uk-panel-box-primary uk-text-center uk-text-large uk-text-bold">
<div class="uk-panel-teaser">
<img src="images/tbe.jpg" alt="the butterfly effect" width="100%"/>
</div> The Butterfly Effect
</div>
<li>
<div class="uk-panel uk-panel-box uk-panel-box-primary uk-text-center uk-text-large uk-text-bold">
<div class="uk-panel-teaser">
<img src="images/tool.jpg" alt="tool" width="100%"/>
</div> Tool
</div>
<li>
<div class="uk-panel uk-panel-box uk-panel-box-primary uk-text-center uk-text-large uk-text-bold">
<div class="uk-panel-teaser">
<img src="images/tfn.jpg" alt="twelve foot ninja" width="100%"/>
</div> Twelve Foot Ninja
</div>
</div>
</div>
</html>
</body>
Thanks
Site URL: www.coreautomotiveequipment.com Working on a site and using Magento commerce. When adding custom URL to the cmd-pages-homepage I'm having a problem getting the urls to work.
I type in the store URL in magento, however when clicking the link on the site something different pops up. I have the WYSIWYG disabled completely so I'm not sure why it is changing.
Also the tag for the Air compressor is showing up at the bottom of the page. Any help would be appreciated. Below is the code i have entered into the Magento content section:
<div class="col-left side-col">
<p class="home-callout"> </p>
{{block type="tag/popular" template="tag/popular.phtml"}}</div>
<div class="home-spot">
<p class="home-callout"> </p>
<p> </p>
</div>
<script src="{{skin url='js/camera.js'}}"> </script>
<script>
jQuery(function(){
jQuery('#camera_wrap').camera({
alignmen: 'topCenter',
height: '49.42%',
minHeight: '134px',
loader: false,
pagination: true,
loaderStroke: '2',
fx: 'simpleFade',
navigationHover:false,
pagination:false,
thumbnails: false
});
});
</script>
<div class="fluid_container_wrap">
<div class="fluid_container">
<div class="camera_wrap camera_orange_skin" id="camera_wrap">
<div data-link="{{store url=‘tirechangers.html'}}" data-src="{{skin url='images/camera/slides/slide11.jpg'}}"></div>
<div data-link="{{store url=‘lifts.html'}}" data-src="{{skin url='images/camera/slides/slide21.jpg'}}"></div>
<div data-link="{{store url=‘air-compressors.html'}}" data-src="{{skin url='images/camera/slides/slide31.jpg'}}"></div>
<div data-link="{{store url=‘nitrogen-machines.html'}}" data-src="{{skin url='images/camera/slides/slide41.jpg'}}"></div>
<div data-link="{{store url=‘used-equipment.html'}}" data-src="{{skin url='images/camera/slides/slide51.jpg'}}"></div>
</div>
</div>
</div>
<ul class="banner-block row">
<li class="span3">
<a href="{{store url=‘tirechangers.html'}}">
<img src="{{skin url='images/media/banners-11.jpg'}}" alt="" />
<p><span>Tire Changers</span></p>
</a>
</li>
<li class="span3">
<a href="{{store url='lifts.html'}}">
<img src="{{skin url='images/media/banners-21.jpg'}}" alt="" />
<p><span>Lifts</span></p>
</a>
</li>
<li class="span3”>
<a href="{{store url=‘air-compressors.html'}}">
<img src="{{skin url='images/media/banners-31.jpg'}}" alt="" />
<p><span>Air Compressors</span></p>
</a>
</li>
</ul>
<ul class="banner-block row">
<li class="span3">
<a href="{{store url=‘nitrogen-machine.html'}}">
<img src="{{skin url='images/media/banners-41.jpg'}}" alt="" />
<p><span>Nitrogen Machines</span></p>
</a>
</li>
<li class="span3">
<a href="{{store url=‘used-equipment.html'}}">
<img src="{{skin url='images/media/banners-51.jpg'}}" alt="" />
<p><span>Used Equipment</span></p>
</a>
</li>
<li class="span3">
<a href="{{store url=‘brake-lates.html'}}">
<img src="{{skin url='images/media/banners-61.jpg'}}" alt="" />
<p><span>Brake Lathes</span></p>
</a>
</li>
</ul>
pinterest js
<script type="text/javascript">
(function(d){
var f = d.getElementsByTagName('SCRIPT')[0], p = d.createElement('SCRIPT');
p.type = 'text/javascript';
p.async = true;
p.src = '//assets.pinterest.com/js/pinit.js';
f.parentNode.insertBefore(p, f);
}(document));
</script>
css files
<link rel='stylesheet' href='css/fab-sales.css' media='all' type='text/css' />
<link rel='stylesheet' href='css/basic.css' media='all' type='text/css' />
codes
{if isset($products)}
<!-- Products list -->
<ul id="product_list" class="clear">
{foreach from=$products item=product name=products}
{assign var=foo value=$product.link}
<li class="ajax_block_product {if $smarty.foreach.products.first}first_item{elseif $smarty.foreach.products.last}last_item{/if} {if $smarty.foreach.products.index % 2}alternate_item{else}item{/if} clearfix">
<div class="left_block">
{if isset($comparator_max_item) && $comparator_max_item}
<p class="compare">
<input type="checkbox" class="comparator" id="comparator_item_{$product.id_product}" value="comparator_item_{$product.id_product}" {if isset($compareProducts) && in_array($product.id_product, $compareProducts)}checked="checked"{/if} />
<label for="comparator_item_{$product.id_product}">{l s='Select to compare'}</label>
</p>
{/if}
</div>
<div class="center_block">
<div align="center" id="prodList">
<div class="product">
<div class="prodImgBlock filler" style="cursor:pointer"><a href="{$foo|escape:'htmlall':'UTF-8'}" class="product_img_link" title="{$product.name|escape:'htmlall':'UTF-8'}"><img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} />{if isset($product.new) && $product.new == 1}<span class="new">{l s='New'}</span>{/if}
</a></div>
<div class="newSocialCt">
<div class="newSocialToolBar"> <span style="left: 10px;" class="newSocialTool faveIt"> <span style="position: relative;top: 4px;display: none;" class="loader"> <img src="img/tmp/ajax-loader-white.gif"> </span></span> <span class="loaderCt newSocialTool"></span> <span class="newSocialTool pinItTool" style="float:left; margin-left:-10px; margin-right:5px;"> <img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" /> </span> <span class="newSocialTool" style="float:left; width:85px; margin-left:15px;">
<div id='basic-modal'> <a href='#' class='basic'><img alt="Share" src="img/tmp/tellafriend.png" border="0" /></a> </div>
</span> <span class="newSocialTool" style="float:none; margin-right:20px;">
<div class="fb-like" data-href="$foo" data-send="false" data-layout="button_count" data-width="450" data-show-faces="true"></div>
</span> </div>
</div> </div>
</div>
<div class="productCt">
<div class="productDet" id="0"><h4>{$product.name|escape:'htmlall':'UTF-8'|truncate:35:'...'}</h4>
<p class="product_desc"><a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}" >{$product.description_short|strip_tags:'UTF-8'|truncate:130:'...'}</a></p>
</div>
</div></div>
<div id="push" class="clear"></div>
<div id="basic-modal-content">
<div id="tellFriendBox">
<div class="popUpHd">
<h2>Tell A Friend!</h2>
</div>
<div class="error" id="tf"></div>
<form class="" id="" method="post" action="" enctype="multipart/form-data">
<div class="eachRow">
<div>Your Name
<label style="color:#FF0000">*</label>
:</div>
<div class='field'>
<input type='text' id="name" class="required email" name="name" size='33'/>
</div>
</div>
<div class="eachRow">
<div>Friends Email Address
<label style="color:#FF0000">*</label>
:</div>
<div class='field'>
<input type='text' id="email_id" class="required email" name="email" size='33'/>
</div>
</div>
<div class="eachRow">
<div>Matter:</div>
<div class='field'>
<textarea rows='4' cols='25' id="matter" class="required" name="matter" ></textarea>
</div>
</div>
<div class="eachRow">
<div class='field'>
<input class="button" type='submit' name="tellafriend" onclick="return TellFriend(); " value="Send Mail"/>
</div>
</div>
</form>
</div>
</div>
<div style='display:none'> <img src='img/tmp/x.png' alt='' /> </div>
***after putting following javascript code for validation smarty template getting blank
<script type="text/javascript">
function TellFriend()
{
var em = /^[a-zA-Z0-9._-]+#[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
if(document.getElementById("name").value == "")
{
document.getElementById("tf").innerHTML= "* Marks Fields are Mandatory ";
document.getElementById("name").focus();
return false;
}
if(document.getElementById("email_id").value == "")
{
document.getElementById("tf").innerHTML= "* Marks Fields are Mandatory ";
document.getElementById("email_id").focus();
return false;
}
if (document.getElementById("email_id").value.search(em) == -1)
{
document.getElementById("tf").innerHTML= "Invalid Email "+"</span>";
document.getElementById("email_id").focus();
return false;
}
}
</script>
need help..and after putting $foo as URL in pinterest..pinterest count button disappering..
You should enclose the javascript in {literal}{/literal} tags
There is the great article for undestand debug process: http://blog.belvg.com/showing-php-and-sql-errors-and-debugging-a-blank-white-page-in-prestashop.html