I have problems with sorting an table
and do not understand the displaytag...maybe they are easier ways to sort
using spring,hsql-db(later ms-sql)
I got "Nothing found to display" message from the id column
could someone explain me whats wrong?
<c:if test="${not empty msg}">
<div class="alert alert-${css} alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<strong>${msg}</strong>
</div>
</c:if>
<h1>All Users</h1>
<table class="table table-striped">
<thead>
<tr>
<th>#ID</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<c:forEach var="user" items="${users}">
<tr>
<td>
<!-- this do not work-->
<display:table name="user" export="true" id="row" >
<display:column sortable="true" title="ID" sortProperty="${user.id}" >
<c:out value="${user.id}"/>
</display:column>
</display:table>
${user.id}
</td>
<td>${user.name}</td>
<td>${user.email}</td>
<td>
<spring:url value="/users/${user.id}" var="userUrl" />
<spring:url value="/users/${user.id}/delete" var="deleteUrl" />
<spring:url value="/users/${user.id}/update" var="updateUrl" />
<button class="btn btn-info" onclick="location.href='${userUrl}'">Details</button>
<button class="btn btn-primary" onclick="location.href='${updateUrl}'">Update</button>
<button class="btn btn-danger" onclick="this.disabled=true;post('${deleteUrl}')" data-toggle="tooltip" title="${user.name}">Delete</button>
<button type="button" class="btn btn-warning" data-toggle="modal" data-target="#${user.name}" title="${user.name}">delete-test-button</button>
<!-- Modal delete Button-->
<div class="modal fade" id="${user.name}" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>delete User ${user.name} ?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" onclick="this.disabled=true;post('${deleteUrl}')"
data-toggle="tooltip" title="${user.name}" data-placement="left">OK</button>
<button type="button" class="btn btn-default" data-dismiss="modal">cancel</button>
</div>
</div>
</div>
</div>
</td>
</tr>
</c:forEach>
</table>
</div>
Related
I'm trying to use the jquery-bootgrid plugin, but running into some issues using a simple initialization.
The button pagination isn't styled properly and the pageSize/column selection button throws an error in the console when you click on the button:
a.default is not a constructor
This is my markup:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Dashboard </title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.min.css" />
</head>
<body>
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
<a class="navbar-brand col-md-3 col-lg-2 mr-0 px-3" href="#">BRANDING</a>
<button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-toggle="collapse" data-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search" />
<ul class="navbar-nav px-3">
<li class="nav-item text-nowrap"> <a class="nav-link" href="#">Sign out</a> </li>
</ul>
</nav>
<div id="content-container" class="container-fluid">
<div class="row">
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
<div class="sidebar-sticky pt-3">
<ul class="nav flex-column">
<li class="nav-item"> <a class="nav-link active" href="#">Menu Item 1 <span class="sr-only">(current)</span> </a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Menu Item 2</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Menu Item 3</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Menu Item 4</a> </li>
</ul>
</div>
</nav>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4">
<h1 class="h2 pt-3 pb-2 mb-3 border-bottom">Users</h1>
<!-- jquery-bootgrid starts here -->
<table id="grid-basic" class="table table-condensed table-hover table-striped">
<thead>
<tr>
<th data-column-id="id" data-type="numeric">ID</th>
<th data-column-id="email">Sender</th>
<th data-column-id="firstName">First Name</th>
<th data-column-id="lastName" data-order="desc">Last Name</th>
<th data-column-id="deactivated">Deactivated</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>user#domain.com</td>
<td>John</td>
<td>Smith</td>
<td>true</td>
</tr>
</tbody>
</table>
</main>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.5.4/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.fa.min.js"></script>
<script>
$(document).ready(function() {
$("#grid-basic").bootgrid();
});
</script>
</body>
</html>
I don't feel like I'm doing anything overly complicated here and I'm following the example in the documentation.
This leads me to believe it is a version conflict with bootstrap 4.5.
The problem is when I click on submit button on JSP page, Then it will go to the Controller but it did not bind JSP elements to Bean class elements. In the controller, I get the object of bean empty.
stock.jsp will dynamically add in index.jsp page
index.jsp
<!DOCTYPE html>
<%# taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Metalist Enterprises</title>
<link href="resource/vendor/bootstrap/css/bootstrap.min.css"
rel="stylesheet">
<link href="resource/vendor/metisMenu/metisMenu.min.css"
rel="stylesheet">
<link href="resource/dist/css/sb-admin-2.css" rel="stylesheet">
<link href="resource/vendor/morrisjs/morris.css" rel="stylesheet">
<link href="resource/vendor/font-awesome/css/font-awesome.min.css"
rel="stylesheet" type="text/css">
<script src="resource/vendor/jquery/jquery.min.js"></script>
<script>
function ajaxMethod(referPageName) {
var urlName = '';
if (referPageName == 'newInvoice')
urlName = referPageName;
else if (referPageName == 'inward')
urlName = referPageName;
else if (referPageName == 'outward')
urlName = referPageName;
else if (referPageName == 'search')
urlName = referPageName;
else
urlName = 'stock';
$.ajax({
url : urlName,
success : function(responseText) {
$('#page-wrapper').html(responseText);
}
});
}
</script>
<script>
$(document).on('click', 'input[name="divOptionsRadios"]', function() {
var varInwardStock = document.getElementById('inwardStock');
var varOutwardStock = document.getElementById('outwardStock');
if (varInwardStock.style.display === 'none') {
varInwardStock.style.display = 'block';
varOutwardStock.style.display = 'none';
} else {
varInwardStock.style.display = 'none';
varOutwardStock.style.display = 'block';
}
});
</script>
</head>
<body>
<div id="wrapper">
<nav class="navbar navbar-default navbar-static-top" role="navigation"
style="margin-bottom: 0">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span> <span
class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Metalist Enterprises</a>
</div>
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li class="sidebar-search">
<div class="input-group custom-search-form">
<input type="text" class="form-control" placeholder="Search...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div> <!-- /input-group -->
</li>
<li><a href="home"><i class="fa fa-dashboard fa-fw"></i>
Dashboard</a></li>
<li onclick="ajaxMethod('newInvoice')"><a href="#"><i
class="fa fa-table fa-fw"></i> New Invoice</a></li>
<li onclick="ajaxMethod('inward')"><a href="#"><i
class="fa fa-edit fa-fw"></i> Inward</a></li>
<li onclick="ajaxMethod('outward')"><a href="#"><i
class="fa fa-wrench fa-fw"></i> Outward</a></li>
<li onclick="ajaxMethod('search')"><a href="#"><i
class="fa fa-sitemap fa-fw"></i> Search</a></li>
<li onclick="ajaxMethod('stock');"><a href="#"><i
class="fa fa-files fa-fw"></i> Add Stock</a></li>
</ul>
</div>
<!-- /.sidebar-collapse -->
</div>
</nav>
</div>
<script src="resource/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="resource/vendor/metisMenu/metisMenu.min.js"></script>
<script src="resource/vendor/raphael/raphael.min.js"></script>
<script src="resource/vendor/morrisjs/morris.min.js"></script>
<script src="resource/data/morris-data.js"></script>
<script src="resource/dist/js/sb-admin-2.js"></script>
</body>
</html>
stock.jsp
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Stock</h1>
</div>
<div class="col-lg-6">
<div class="radio">
<label> <input type="radio" name="divOptionsRadios"
id="divOptionsRadios1" value="inward" checked='checked'>Inward
</label>
</div>
</div>
<div class="col-lg-6">
<div class="radio">
<label> <input type="radio" name="divOptionsRadios"
id="divOptionsRadios2" value="outward">Outward
</label>
</div>
</div>
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<div class="panel panel-default" id="inwardStock">
<!-- style="display: none;"> -->
<div class="panel-heading">Inward Stock</div>
<div class="panel-body">
<form action="saveStock" method="post">
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Invoice</label> <input class="form-control"
name="invoiceNumber" placeholder="Invoice">
</div>
</div>
<div class="col-lg-4">
<div class="form-group input-group">
<label>Date of Invoice</label><input type="text"
name="invoiceDate" class="form-control"
placeholder="Please select Date"> <span
class="input-group-addon">.00</span>
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<label>Name Of Company</label> <select class="form-control"
name="companyName">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label>Material Description</label>
<textarea class="form-control" rows="1"
name="materialDescription" placeholder="Description"></textarea>
</div>
</div>
<div class="col-lg-3">
<div class="form-group">
<label>Quantity</label> <input class="form-control"
path="quantity" placeholder="Quantity">
</div>
</div>
<div class="col-lg-3">
<div class="form-group">
<label>Rate</label> <input class="form-control" name="rate"
placeholder="Rate">
</div>
</div>
<div class="col-lg-3">
<div class="form-group">
<label>Tax</label> <input class="form-control" name="tax"
placeholder="Tax">
</div>
</div>
<div class="col-lg-3">
<div class="form-group">
<label>Amount</label> <input class="form-control" name="amount"
placeholder="Amount">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4">
<button type="submit" class="btn btn-default">Save</button>
<button type="reset" class="btn btn-default">Reset</button>
</div>
<div class="col-lg-4"></div>
</div>
</form>
</div>
</div>
<div class="panel panel-default" id="outwardStock"
style="display: none;">
<div class="panel-heading">Outward Stock</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-12">
<label>Please select</label>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="radio">
<label> <input type="radio" name="optionsRadios"
id="optionsRadios1" value="option1" checked>Inward
</label>
</div>
</div>
<div class="col-lg-6">
<div class="radio">
<label> <input type="radio" name="optionsRadios"
id="optionsRadios2" value="option2">Outward
</label>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<form role="form">
<div class="form-group">
<label>Please select</label>
<div class="radio">
<label> <input type="radio" name="optionsRadios"
id="optionsRadios3" value="option1" checked>Inward
</label>
</div>
<div class="radio">
<label> <input type="radio" name="optionsRadios"
id="optionsRadios4" value="option2">Outward
</label>
</div>
<!-- <div class="radio">
<label> <input type="radio" name="optionsRadios"
id="optionsRadios5" value="option3">Radio 3
</label>
</div> -->
</div>
<div class="form-group">
<label>Text Input</label> <input class="form-control">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="form-group">
<label>Text Input with Placeholder</label> <input
class="form-control" placeholder="Enter text">
</div>
<div class="form-group">
<label>Static Control</label>
<p class="form-control-static">email#example.com</p>
</div>
<div class="form-group">
<label>File input</label> <input type="file">
</div>
<div class="form-group">
<label>Text area</label>
<textarea class="form-control" rows="3"></textarea>
</div>
<div class="form-group">
<label>Checkboxes</label>
<div class="checkbox">
<label> <input type="checkbox" value="">Checkbox
1
</label>
</div>
<div class="checkbox">
<label> <input type="checkbox" value="">Checkbox
2
</label>
</div>
<div class="checkbox">
<label> <input type="checkbox" value="">Checkbox
3
</label>
</div>
</div>
<div class="form-group">
<label>Inline Checkboxes</label> <label class="checkbox-inline">
<input type="checkbox">1
</label> <label class="checkbox-inline"> <input type="checkbox">2
</label> <label class="checkbox-inline"> <input type="checkbox">3
</label>
</div>
<div class="form-group">
<label>Radio Buttons</label>
<div class="radio">
<label> <input type="radio" name="optionsRadios"
id="optionsRadios11" value="option1" checked>Radio 1
</label>
</div>
<div class="radio">
<label> <input type="radio" name="optionsRadios"
id="optionsRadios12" value="option2">Radio 2
</label>
</div>
<div class="radio">
<label> <input type="radio" name="optionsRadios"
id="optionsRadios13" value="option3">Radio 3
</label>
</div>
</div>
<div class="form-group">
<label>Inline Radio Buttons</label> <label class="radio-inline">
<input type="radio" name="optionsRadiosInline"
id="optionsRadiosInline1" value="option1" checked>1
</label> <label class="radio-inline"> <input type="radio"
name="optionsRadiosInline" id="optionsRadiosInline2"
value="option2">2
</label> <label class="radio-inline"> <input type="radio"
name="optionsRadiosInline" id="optionsRadiosInline3"
value="option3">3
</label>
</div>
<div class="form-group">
<label>Selects</label> <select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label>Multiple Selects</label> <select multiple
class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<button type="submit" class="btn btn-default">Submit
Button</button>
<button type="reset" class="btn btn-default">Reset
Button</button>
</form>
</div>
<!-- /.col-lg-6 (nested) -->
<div class="col-lg-6">
<h1>Disabled Form States</h1>
<form role="form">
<fieldset disabled>
<div class="form-group">
<label for="disabledSelect">Disabled input</label> <input
class="form-control" id="disabledInput" type="text"
placeholder="Disabled input" disabled>
</div>
<div class="form-group">
<label for="disabledSelect">Disabled select menu</label> <select
id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
<div class="checkbox">
<label> <input type="checkbox">Disabled
Checkbox
</label>
</div>
<button type="submit" class="btn btn-primary">Disabled
Button</button>
</fieldset>
</form>
<h1>Form Validation States</h1>
<form role="form">
<div class="form-group has-success">
<label class="control-label" for="inputSuccess">Input
with success</label> <input type="text" class="form-control"
id="inputSuccess">
</div>
<div class="form-group has-warning">
<label class="control-label" for="inputWarning">Input
with warning</label> <input type="text" class="form-control"
id="inputWarning">
</div>
<div class="form-group has-error">
<label class="control-label" for="inputError">Input with
error</label> <input type="text" class="form-control" id="inputError">
</div>
</form>
<h1>Input Groups</h1>
<form role="form">
<div class="form-group input-group">
<span class="input-group-addon">#</span> <input type="text"
class="form-control" placeholder="Username">
</div>
<div class="form-group input-group">
<input type="text" class="form-control"> <span
class="input-group-addon">.00</span>
</div>
<div class="form-group input-group">
<span class="input-group-addon"><i class="fa fa-eur"></i>
</span> <input type="text" class="form-control"
placeholder="Font Awesome Icon">
</div>
<div class="form-group input-group">
<span class="input-group-addon">$</span> <input type="text"
class="form-control"> <span class="input-group-addon">.00</span>
</div>
<div class="form-group input-group">
<input type="text" class="form-control"> <span
class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
pom.xml
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>MetalistEnterprises</groupId>
<artifactId>MetalistEnterprises</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>war</packaging>
<build>
<sourceDirectory>src</sourceDirectory>
<plugins>
<plugin>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.5.1</version>
<configuration>
<source>1.8</source>
<target>1.8</target>
</configuration>
</plugin>
<plugin>
<artifactId>maven-war-plugin</artifactId>
<version>3.0.0</version>
<configuration>
<warSourceDirectory>WebContent</warSourceDirectory>
</configuration>
</plugin>
</plugins>
</build>
<properties>
<spring.version>4.0.3.RELEASE</spring.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-context</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-tx</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-core</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-web</artifactId>
<version>${spring.version}</version>
<type>jar</type>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-beans</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-framework-bom</artifactId>
<version>${spring.version}</version>
<type>pom</type>
<scope>import</scope>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
</dependency>
</dependencies>
</project>
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
<display-name>MetalistEnterprises</display-name>
<servlet>
<servlet-name>mvc-dispatcher</servlet-name>
<servlet-class>
org.springframework.web.servlet.DispatcherServlet
</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>mvc-dispatcher</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
</web-app>
First Controller
#Controller
public class DefaultController {
#Autowired
IStockDetailsService iStockDetailsService;
#RequestMapping(value = "/stock")
public ModelAndView stockMethod(Model model) {
ArrayList<StockBean> stocksList = iStockDetailsService.getAllStocks();
model.addAttribute("stocksList", stocksList);
return new ModelAndView("stock");
}
Second Controller
#Controller
public class StockController {
#Autowired
IStockDetailsService iStockDetailsService;
#RequestMapping(value = "/saveStock")
public ModelAndView saveStock() {
System.out.println("saveStock method called");
iStockDetailsService.saveStock(stockBean);
return new ModelAndView("redirect:/home");
}
}
Bean
public class StockBean {
private Integer idStock;
private String invoiceNumber;
private Date invoiceDate;
private String companyName;
private String materialDescription;
private float rate;
private float amount;
private float tax;
Getter and Setters
}
mvc-dispatcher-servlet.xml
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:jee="http://www.springframework.org/schema/jee"
xsi:schemaLocation="
http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-3.0.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd
http://www.springframework.org/schema/jee
http://www.springframework.org/schema/jee/spring-jee-3.0.xsd">
<context:component-scan base-package="metalist.yashdeep.scrap" />
<context:annotation-config />
<mvc:resources mapping="/resource/**" location="/resource/" />
<mvc:annotation-driven />
<bean id="viewResolver"
class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix">
<value>/WEB-INF/view/</value>
</property>
<property name="suffix">
<value>.jsp</value>
</property>
</bean>
</beans>
This is not really a Serenity question but close to Selenium.
When the test run it checks the checkbox, visible on the page and the functionality expects underlying options to be visible once the checkbox is checked.
However, the test run does check the checkbox, however, the underlying options remain invisible.
When I put a breakpoint on it and do it manually, it does work perfectly, as expected.
Also, interestingly, if the automation script checks the checkbox and I again uncheck the checkbox using the script debugger, the underlying option becomes visible with checkbox unchecked - weird, isn't it?
What could be the possible reason?
Any help would be appreciated.
Code Block:
Case.chkbxNewPolicy.click(); //Here it selects the checkbox
Case.selectEntityType.selectByVisibleText(param.get("CaseType").toString()); //Here it is expected to enable the underlying objects
Case.editNewPolicyNum.type(param.get("PolicyNo").toString());
Case.editAdviserId.type(param.get("AdviserId").toString());
//HTML
</div>
<div id="createNewContainer" G360ComponentSpec="type:AdjustableContainer;fs:f;dc:f;cl:f;ic:f;" G360LayoutSpec="l:4;lip:t;lif:f;t:28;tip:t;tif:f;r:142;riw:t;rip:t;rif:f;ra:+-;b:23;bih:t;bip:t;bif:f;ba:+-;o:auto;lbpx:4;tbpx:28;wbpx:142;hbpx:23;efwpx:0;"
style="position:absolute; left:4px; top:28px; width:142px; height:23px; overflow:auto;">
<div id="component_25" G360ComponentSpec="type:FieldComponent;dt:1;format:input;fh:CheckBox;" G360LayoutSpec="l:0;lip:t;lif:f;t:2;tip:t;tif:f;r:135;riw:t;rip:t;rif:t;ra:+-;b:20;bih:t;bip:t;bif:t;ba:+-;o:hidden;lbpx:0;tbpx:2;wbpx:135;hbpx:20;efwpx:0;"
style="position:absolute; left:0px; top:2px; width:135px; height:20px; overflow:hidden;"><span class="fielderror" id="IS_NEWPOLICYerror"></span>
<input name="IS_NEWPOLICY" id="IS_NEWPOLICY" type="checkbox" value="true" onclick="displayPolicyEntry(this)" onchange="setDirtyFlag(true,this);">Create New Policy
<input type="hidden" name="IS_NEWPOLICYoriginal" id="IS_NEWPOLICYoriginal" value="false" />
<input type="hidden" name="IS_NEWPOLICYsemaphore" id="IS_NEWPOLICYsemaphore" value="write" />
<input type="hidden" name="IS_NEWPOLICYformatter" id="IS_NEWPOLICYformatter" value="Check Box:label=Create New Policy" />
</div>
</div>
<div id="SELECT_POLICY_DETAILS" G360ComponentSpec="type:AdjustableContainer;fs:f;dc:f;cl:f;ic:f;" G360LayoutSpec="l:9;lip:t;lif:f;t:50;tip:t;tif:f;r:762;riw:t;rip:t;rif:f;ra:+-;b:62;bih:t;bip:t;bif:f;ba:+-;o:auto;lbpx:9;tbpx:50;wbpx:762;hbpx:62;efwpx:0;"
style="position:absolute; left:9px; top:50px; width:762px; height:62px; overflow:auto;">
<div id="component_18" G360ComponentSpec="type:HtmlTextComponent;" G360LayoutSpec="l:25;lip:t;lif:f;t:5;tip:t;tif:f;r:94;riw:t;rip:t;rif:t;ra:+-;b:16;bih:t;bip:t;bif:t;ba:+-;o:hidden;lbpx:25;tbpx:5;wbpx:94;hbpx:16;efwpx:0;" style="background-color:#E6E6E6; position:absolute; left:25px; top:5px; width:94px; height:16px; overflow:hidden;">
<label for="">Policy Number</label>
</div>
<div id="component_19" G360ComponentSpec="type:HtmlTextComponent;" G360LayoutSpec="l:260;lip:t;lif:f;t:5;tip:t;tif:f;r:75;riw:t;rip:t;rif:t;ra:+-;b:16;bih:t;bip:t;bif:t;ba:+-;o:hidden;lbpx:260;tbpx:5;wbpx:75;hbpx:16;efwpx:0;" style="background-color:#E6E6E6; position:absolute; left:260px; top:5px; width:75px; height:16px; overflow:hidden;">
<label for="">Adviser ID</label>
</div>
<div id="component_20" G360ComponentSpec="type:HtmlTextComponent;" G360LayoutSpec="l:350;lip:t;lif:f;t:5;tip:t;tif:f;r:90;riw:t;rip:t;rif:t;ra:+-;b:16;bih:t;bip:t;bif:t;ba:+-;o:hidden;lbpx:350;tbpx:5;wbpx:90;hbpx:16;efwpx:0;" style="background-color:#E6E6E6; position:absolute; left:350px; top:5px; width:90px; height:16px; overflow:hidden;">
<label for="">Adviser Name</label>
</div>
<div id="component_107" G360ComponentSpec="type:HtmlTextComponent;" G360LayoutSpec="l:474;lip:t;lif:f;t:5;tip:t;tif:f;r:70;riw:t;rip:t;rif:t;ra:+-;b:16;bih:t;bip:t;bif:t;ba:+-;o:hidden;lbpx:474;tbpx:5;wbpx:70;hbpx:16;efwpx:0;" style="background-color:#E6E6E6; position:absolute; left:474px; top:5px; width:70px; height:16px; overflow:hidden;">
<label for="">Partner ID</label>
</div>
<div id="component_41" G360ComponentSpec="type:HtmlTextComponent;" G360LayoutSpec="l:565;lip:t;lif:f;t:5;tip:t;tif:f;r:80;riw:t;rip:t;rif:t;ra:+-;b:16;bih:t;bip:t;bif:t;ba:+-;o:hidden;lbpx:565;tbpx:5;wbpx:80;hbpx:16;efwpx:0;" style="background-color:#E6E6E6; position:absolute; left:565px; top:5px; width:80px; height:16px; overflow:hidden;">
<label for="">MP Number</label>
</div>
<div id="component_42" G360ComponentSpec="type:HtmlTextComponent;" G360LayoutSpec="l:654;lip:t;lif:f;t:5;tip:t;tif:f;r:102;riw:t;rip:t;rif:t;ra:+-;b:16;bih:t;bip:t;bif:t;ba:+-;o:hidden;lbpx:654;tbpx:5;wbpx:102;hbpx:16;efwpx:1;" style="background-color:#E6E6E6; position:absolute; left:654px; top:5px; width:102px; height:16px; overflow:hidden;">
<label for="">Fund Member ID</label>
</div>
<div id="container_18" G360ComponentSpec="type:XmlNodeContainer;fs:f;dc:f;cl:f;ic:f;" G360LayoutSpec="l:4;lip:t;lif:f;t:22;tip:t;tif:f;r:753;riw:t;rip:t;rif:f;ra:+-;b:33;bih:t;bip:t;bif:f;ba:+-;o:auto;lbpx:4;tbpx:22;wbpx:753;hbpx:33;efwpx:0;" style="position:absolute; left:4px; top:22px; width:753px; height:33px; overflow:auto;">
</div>
</div>
<div id="NEW_POLICY_DETAILS" G360ComponentSpec="type:AdjustableContainer;fs:f;dc:f;cl:f;ic:f;" G360LayoutSpec="l:4;lip:t;lif:f;t:53;tip:t;tif:f;r:732;riw:t;rip:t;rif:f;ra:+-;b:59;bih:t;bip:t;bif:f;ba:+-;o:auto;lbpx:4;tbpx:53;wbpx:732;hbpx:59;efwpx:35;"
style="position:absolute; left:4px; top:53px; width:732px; height:59px; overflow:auto;">
<div id="component_51" G360ComponentSpec="type:FieldNameComponent;" G360LayoutSpec="l:2;lip:t;lif:t;t:9;tip:t;tif:t;r:72;riw:t;rip:t;rif:t;ra:+-;b:16;bih:t;bip:t;bif:t;ba:+-;o:hidden;lbpx:2;tbpx:9;wbpx:72;hbpx:16;efwpx:46;" style="padding:1px; position:absolute; left:2px; top:9px; width:72px; height:16px; overflow:hidden;">
<label for="ENTITY_TYPE" style="margin-left:1px;margin-right:1px;">Entity Type</label>
</div>
<div id="component_23" G360ComponentSpec="type:FieldNameComponent;" G360LayoutSpec="l:122;lip:t;lif:t;t:9;tip:t;tif:t;r:93;riw:t;rip:t;rif:t;ra:+-;b:16;bih:t;bip:t;bif:t;ba:+-;o:hidden;lbpx:122;tbpx:9;wbpx:93;hbpx:16;efwpx:109;" style="padding:1px; position:absolute; left:122px; top:9px; width:93px; height:16px; overflow:hidden;">
<label for="POLICY_NUM" style="margin-left:1px;margin-right:1px;">Policy Number</label>
</div>
<div id="component_21" G360ComponentSpec="type:FieldNameComponent;" G360LayoutSpec="l:327;lip:t;lif:t;t:9;tip:t;tif:t;r:68;riw:t;rip:t;rif:t;ra:+-;b:16;bih:t;bip:t;bif:t;ba:+-;o:hidden;lbpx:327;tbpx:9;wbpx:68;hbpx:16;efwpx:24;" style="padding:1px; position:absolute; left:327px; top:9px; width:68px; height:16px; overflow:hidden;">
<label for="ADVISER_ID" style="margin-left:1px;margin-right:1px;">Adviser ID</label>
</div>
<div id="component_101" G360ComponentSpec="type:FieldNameComponent;" G360LayoutSpec="l:424;lip:t;lif:f;t:9;tip:t;tif:f;r:68;riw:t;rip:t;rif:t;ra:+-;b:17;bih:t;bip:t;bif:t;ba:+-;o:hidden;lbpx:424;tbpx:9;wbpx:68;hbpx:17;efwpx:116;" style="padding:1px; position:absolute; left:424px; top:9px; width:68px; height:17px; overflow:hidden;">
<label for="PARTNER_ID" style="margin-left:1px;margin-right:1px;">Partner ID</label>
</div>
<div id="component_53" G360ComponentSpec="type:FieldNameComponent;" G360LayoutSpec="l:426;lip:t;lif:t;t:9;tip:t;tif:t;r:173;riw:t;rip:t;rif:t;ra:+-;b:16;bih:t;bip:t;bif:t;ba:+-;o:hidden;lbpx:426;tbpx:9;wbpx:173;hbpx:16;efwpx:9;" style="padding:1px; position:absolute; left:426px; top:9px; width:173px; height:16px; overflow:hidden;">
<label for="FUND_ID" style="margin-left:1px;margin-right:1px;">MP Number</label>
</div>
<div id="component_55" G360ComponentSpec="type:FieldNameComponent;" G360LayoutSpec="l:618;lip:t;lif:t;t:9;tip:t;tif:t;r:102;riw:t;rip:t;rif:t;ra:+-;b:16;bih:t;bip:t;bif:t;ba:+-;o:hidden;lbpx:618;tbpx:9;wbpx:102;hbpx:16;efwpx:11;" style="padding:1px; position:absolute; left:618px; top:9px; width:102px; height:16px; overflow:hidden;">
<label for="FUND_MEMBER_ID" style="margin-left:1px;margin-right:1px;">Fund Member ID</label>
</div>
<div id="component_102" G360ComponentSpec="type:FieldComponent;dt:4;format:input;fh:none;" G360LayoutSpec="l:426;lip:t;lif:f;t:29;tip:t;tif:f;r:94;riw:t;rip:t;rif:t;ra:+-;b:22;bih:t;bip:t;bif:t;ba:+-;o:hidden;lbpx:426;tbpx:29;wbpx:94;hbpx:22;efwpx:88;"
style="position:absolute; left:426px; top:29px; width:94px; height:22px; overflow:hidden;">
<table width="100%" cellspacing="0px" cellpadding="0px">
<colgroup>
<col width="*" />
<col width="18px" />
</colgroup>
<tr>
<td>
<input type="text" value="" name="PARTNER_ID" id="PARTNER_ID" style="width:70px;height:15px;" onchange="TextValidate(this,null,128,null);" />
<input type="hidden" name="PARTNER_IDsemaphore" id="PARTNER_IDsemaphore" value="write" />
<input type="hidden" name="PARTNER_IDformatter" id="PARTNER_IDformatter" value="none" />
</td>
<td>
<div class="anchorNoLink" style="width:18px;position:relative;top:1px;">
<a id="PARTNER_IDerrora" href="javascript:alert('');" style="display:none;">
<img id="PARTNER_IDerrorimg" src="Images/fielderror.gif" alt="" title="" />
</a>
</div>
</td>
</tr>
</table>
</div>
<div id="component_52" G360ComponentSpec="type:FieldComponent;dt:4;format:input;fh:none;" G360LayoutSpec="l:3;lip:t;lif:t;t:30;tip:t;tif:t;r:117;riw:t;rip:t;rif:t;ra:+-;b:22;bih:t;bip:t;bif:t;ba:+-;o:hidden;lbpx:3;tbpx:30;wbpx:117;hbpx:22;efwpx:0;" style="position:absolute; left:3px; top:30px; width:117px; height:22px; overflow:hidden;">
<table width="100%" cellspacing="0px" cellpadding="0px">
<colgroup>
<col width="*" />
<col width="18px" />
</colgroup>
<tr>
<td>
<select name="ENTITY_TYPE" id="ENTITY_TYPE" style="width:99px;" tabindex="1" onchange="setDirtyFlag(true,this);policyTypeSelected();">
<option selected value="NA">--Please Select --</option>
<option value="C">Retail Life Insured</option>
<option value="M">Group Life Insured</option>
<option value="A">Adviser</option>
<option value="F">Fund</option>
<option value="P">Partner</option>
<option value="S">Special Member</option>
<option value="U">Function</option>
</select>
<input type="hidden" name="ENTITY_TYPEoriginal" id="ENTITY_TYPEoriginal" value="TkE*" />
<input type="hidden" name="ENTITY_TYPEsemaphore" id="ENTITY_TYPEsemaphore" value="write" />
<input type="hidden" name="ENTITY_TYPEformatter" id="ENTITY_TYPEformatter" value="none" />
</td>
<td>
<div class="anchorNoLink" style="width:18px;position:relative;top:1px;">
<a id="ENTITY_TYPEerrora" href="javascript:alert('');" style="display:none;">
<img id="ENTITY_TYPEerrorimg" src="Images/fielderror.gif" alt="" title="" />
</a>
</div>
</td>
</tr>
</table>
</div>
<div id="component_24" G360ComponentSpec="type:FieldComponent;dt:4;format:input;fh:none;" G360LayoutSpec="l:124;lip:t;lif:t;t:30;tip:t;tif:t;r:200;riw:t;rip:t;rif:t;ra:+-;b:22;bih:t;bip:t;bif:t;ba:+-;o:hidden;lbpx:124;tbpx:30;wbpx:200;hbpx:22;efwpx:0;"
style="position:absolute; left:124px; top:30px; width:200px; height:22px; overflow:hidden;">
<table width="100%" cellspacing="0px" cellpadding="0px">
<colgroup>
<col width="*" />
<col width="18px" />
</colgroup>
<tr>
<td>
<input type="text" value="" name="POLICY_NUM" id="POLICY_NUM" style="width:176px;height:15px;" tabindex="2" maxlength="30" onchange="TextValidate(this,null,30,null);" />
<input type="hidden" name="POLICY_NUMsemaphore" id="POLICY_NUMsemaphore" value="write" />
<input type="hidden" name="POLICY_NUMformatter" id="POLICY_NUMformatter" value="none" />
</td>
<td>
<div class="anchorNoLink" style="width:18px;position:relative;top:1px;">
<a id="POLICY_NUMerrora" href="javascript:alert('');" style="display:none;">
<img id="POLICY_NUMerrorimg" src="Images/fielderror.gif" alt="" title="" />
</a>
</div>
</td>
</tr>
</table>
</div>
<div id="component_22" G360ComponentSpec="type:FieldComponent;dt:4;format:input;fh:none;" G360LayoutSpec="l:329;lip:t;lif:t;t:30;tip:t;tif:t;r:90;riw:t;rip:t;rif:t;ra:+-;b:22;bih:t;bip:t;bif:t;ba:+-;o:hidden;lbpx:329;tbpx:30;wbpx:90;hbpx:22;efwpx:0;"
style="position:absolute; left:329px; top:30px; width:90px; height:22px; overflow:hidden;">
<table width="100%" cellspacing="0px" cellpadding="0px">
<colgroup>
<col width="*" />
<col width="18px" />
</colgroup>
<tr>
<td>
<input type="text" value="" name="ADVISER_ID" id="ADVISER_ID" style="width:66px;height:15px;" tabindex="3" maxlength="9" onchange="TextValidate(this,null,9,null);" />
<input type="hidden" name="ADVISER_IDsemaphore" id="ADVISER_IDsemaphore" value="write" />
<input type="hidden" name="ADVISER_IDformatter" id="ADVISER_IDformatter" value="none" />
</td>
<td>
<div class="anchorNoLink" style="width:18px;position:relative;top:1px;">
<a id="ADVISER_IDerrora" href="javascript:alert('');" style="display:none;">
<img id="ADVISER_IDerrorimg" src="Images/fielderror.gif" alt="" title="" />
</a>
</div>
</td>
</tr>
</table>
</div>
<div id="component_54" G360ComponentSpec="type:FieldComponent;dt:4;format:input;fh:none;" G360LayoutSpec="l:428;lip:t;lif:t;t:30;tip:t;tif:t;r:180;riw:t;rip:t;rif:t;ra:+-;b:22;bih:t;bip:t;bif:t;ba:+-;o:hidden;lbpx:428;tbpx:30;wbpx:180;hbpx:22;efwpx:0;"
style="position:absolute; left:428px; top:30px; width:180px; height:22px; overflow:hidden;">
<table width="100%" cellspacing="0px" cellpadding="0px">
<colgroup>
<col width="*" />
<col width="18px" />
</colgroup>
<tr>
<td>
<input type="text" value="" name="FUND_ID" id="FUND_ID" style="width:156px;height:15px;" tabindex="4" maxlength="8" onchange="TextValidate(this,null,8,null);" />
<input type="hidden" name="FUND_IDsemaphore" id="FUND_IDsemaphore" value="write" />
<input type="hidden" name="FUND_IDformatter" id="FUND_IDformatter" value="none" />
</td>
<td>
<div class="anchorNoLink" style="width:18px;position:relative;top:1px;">
<a id="FUND_IDerrora" href="javascript:alert('');" style="display:none;">
<img id="FUND_IDerrorimg" src="Images/fielderror.gif" alt="" title="" />
</a>
</div>
</td>
</tr>
</table>
</div>
<div id="component_56" G360ComponentSpec="type:FieldComponent;dt:4;format:input;fh:none;" G360LayoutSpec="l:617;lip:t;lif:t;t:30;tip:t;tif:t;r:114;riw:t;rip:t;rif:t;ra:+-;b:22;bih:t;bip:t;bif:t;ba:+-;o:hidden;lbpx:617;tbpx:30;wbpx:114;hbpx:22;efwpx:0;"
style="position:absolute; left:617px; top:30px; width:114px; height:22px; overflow:hidden;">
<table width="100%" cellspacing="0px" cellpadding="0px">
<colgroup>
<col width="*" />
<col width="18px" />
</colgroup>
<tr>
<td>
<input type="text" value="" name="FUND_MEMBER_ID" id="FUND_MEMBER_ID" style="width:90px;height:15px;" tabindex="5" maxlength="60" onchange="TextValidate(this,null,60,null);" />
<input type="hidden" name="FUND_MEMBER_IDsemaphore" id="FUND_MEMBER_IDsemaphore" value="write" />
<input type="hidden" name="FUND_MEMBER_IDformatter" id="FUND_MEMBER_IDformatter" value="none" />
</td>
<td>
<div class="anchorNoLink" style="width:18px;position:relative;top:1px;">
<a id="FUND_MEMBER_IDerrora" href="javascript:alert('');" style="display:none;">
<img id="FUND_MEMBER_IDerrorimg" src="Images/fielderror.gif" alt="" title="" />
</a>
</div>
</td>
</tr>
</table>
</div>
</div>
Two possible reason, either there are javascript errors while rendering the underlying options which can be viewed on jconsole, or you are not waiting for the underlying options to appear.
hi i'm trying to get the rate for a product i tried this :
<div class="pro-rate">
<span class="fa fa-star" data-rate="1" ><input type="hidden" name="evaluation" id="1" value="1"></span>
<span class="fa fa-star" data-rate="2" ><input type="hidden" name="evaluation" id="2" value="2"></span>
<span class="fa fa-star" data-rate="3" ><input type="hidden" name="evaluation" id="3" value="3"></span>
<span class="fa fa-star" data-rate="4" ><input type="hidden" name="evaluation" id="4" value="4"></span>
<span class="fa fa-star" data-rate="5" ><input type="hidden" name="evaluation" id="5" value="5"></span>
but it keeps give me only the value of 5 nothing else , how can i get each value as i want not only the last one ?
and here is the full form :
<form class="form-horizontal" action="{{action('onlyController#postIndex')}}" method="POST">
{!! csrf_field() !!}
#foreach($product as $pro)
<input type="hidden" name="product_id" value="{{$pro->id}}" />
<div class="form-group">
<label for="inputName" class="col-sm-2 control-label">الاسم </label>
<div class="col-sm-10">
<input type="text" class="form-control" name="username" id="inputName" placeholder="الاسم " required>
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-sm-2 control-label">الاميل </label>
<div class="col-sm-10">
<input type="email" class="form-control" name="email" id="inputEmail" placeholder="الاميل" required>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">نص التعليق </label>
<div class="col-sm-10">
<textarea class="form-control" rows="5" name="comment" maxlength="1000" required></textarea>
</div>
</div>
<div class="reviews">
<ul>
<li>
<label class="col-sm-2 control-label">التقييم </label>
<span>ردئ</span>
<div class="pro-rate">
<span class="fa fa-star" data-rate="1" ><input type="hidden" name="evaluation[]" id="1" value="1"></span>
<span class="fa fa-star" data-rate="2" ><input type="hidden" name="evaluation[]" id="2" value="2"></span>
<span class="fa fa-star" data-rate="3" ><input type="hidden" name="evaluation[]" id="3" value="3"></span>
<span class="fa fa-star" data-rate="4" ><input type="hidden" name="evaluation[]" id="4" value="4"></span>
<span class="fa fa-star" data-rate="5" ><input type="hidden" name="evaluation[]" id="5" value="5"></span>
</div>
<span>ممتاز</span>
</li>
</ul>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn ">ارسال </button>
</div>
</div>
#endforeach
</form>
how can i do it ?
use 'evaluation[]'
but evaluation will be an array on server
<div class="pro-rate">
<span class="fa fa-star" data-rate="1" ><input type="hidden" name="evaluation[]" id="1" value="1"></span>
<span class="fa fa-star" data-rate="2" ><input type="hidden" name="evaluation[]" id="2" value="2"></span>
<span class="fa fa-star" data-rate="3" ><input type="hidden" name="evaluation[]" id="3" value="3"></span>
<span class="fa fa-star" data-rate="4" ><input type="hidden" name="evaluation[]" id="4" value="4"></span>
<span class="fa fa-star" data-rate="5" ><input type="hidden" name="evaluation[]" id="5" value="5"></span>
$_POST['evaluation'] is going to be an array
$evaluation = $_POST['evaluation'];
foreach($evaluation as $val){
//do something with the values here
}
ok, well all seems to be working for me
<?php
if($_POST)
print_r($_POST['email']);
?>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
Name: <input type="text" name="name"><br>
E-mail: <input type="text" name="email"><br>
hidden <input type="hidden" name="email[]" value='hjdfkhds' ><br>
hidden: <input type="hidden" name="email[]" value='iufd'><br>
hidden: <input type="hidden" name="email[]" value='78642di'><br>
hidden <input type="hidden" name="email[]" value='uidynsx' ><br>
hidden <input type="hidden" name="email[]" value='qsqaaa'><br>
<input type="submit">
</form>
after I clicked submit. This is what I got
I am creating a responsive sharepoint visual webpart.
everything works fine and looks good but my mobile view is pretty much off.
the controls doesn't shrink to the lowest mobile size..
i tried many times but still i have the same issue..
<fieldset class="form-horizontal">
<div class="control-group">
<label class="control-label col-xs-8 col-md-3 " for="textinput">Name:
</label>
<div class="controls col-xs-8 col-md-7">
<asp:TextBox MaxLength="50" runat="server" ID="txtTitle" CssClass="form-control">
</asp:TextBox>
</div>
</div>
<div class="clearfix">
</div>
<!-- Select Basic -->
<div class="control-group">
<label class="control-label col-xs-8 col-md-3 " for="selectbasic">Ano:
</label>
<div class="controls col-xs-8 col-md-2">
<asp:DropDownList runat="server" ID="ddYear" CssClass="form-control">
</asp:DropDownList>
</div>
</div>
<div class="control-group">
<label class="control-label col-xs-8 col-md-3 " for="selectbasic">Mes:
</label>
<div class="controls col-xs-8 col-md-2">
<asp:DropDownList runat="server" ID="ddMonth" CssClass="form-control">
</asp:DropDownList>
</div>
</div>
<div class="clearfix">
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label col-xs-8 col-md-3 " for="textinput">Tema de Salud:
</label>
<div class="controls col-xs-8 col-md-7">
<asp:DropDownList runat="server" CssClass="form-control" ID="ddHealthTopic">
</asp:DropDownList>
</div>
</div>
<div class="clearfix">
</div>
<div class="control-group">
<label class="control-label col-xs-8 col-md-3 " for="textinput">Unidad administrativa:(por sus siglas en ingles entre paréntesis)
</label>
<div class="controls col-xs-8 col-md-7">
<asp:DropDownList runat="server" CssClass="form-control" ID="ddOrgUnit">
</asp:DropDownList>
</div>
</div>
</fieldset>
<br />
<div class=" col-xs-10 col-md-10">
<div class="input-group" >
<span class="input-group-btn">
<asp:Button CssClass="btn btn-primary" ToolTip="Buscar" runat="server" ID="btnSubmit" Text="Buscar" OnClick="btnSubmit_Click" />
</span>
</div>
</div>
Your code seems to be fine ....
Try to add (If its no there)
<meta name="viewport" content="width=device-width, initial-scale=1">
head section of your master page