Win a copy of Re-engineering Legacy Software this week in the Refactoring forum
or Docker in Action in the Agile forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

Unable to Apply style to the Select Box Through Ajax

 
ciminc cimin
Greenhorn
Posts: 3
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hello,

We are having two select boxes. In the Second Select Box, we are populating values based on the options selected in the first Select Box. The population into the Second Select Box is done through Ajax. We are using ResponseText to retrieve.

Following the is the Code for the Ajax Retrieval File.

=========================START OF FILE============================================

<%@page language="java" import="java.util.*,unoutil.ModelsBean" %>
<% String modelSes[]=(String[])session.getAttribute("model"); %>

<link rel="stylesheet" type="text/css" href="/css/multiselect/jquery.multiselect.css" />
<link rel="stylesheet" type="text/css" href="/css/multiselect/style.css" />
<link rel="stylesheet" type="text/css" href="/css/multiselect/prettify.css" />
<link rel="stylesheet" type="text/css" href="/css/multiselect/jquery-ui.css" />

<script type="text/javascript" src="/css/multiselect/jquery.js"></script>
<script type="text/javascript" src="/css/multiselect/jquery-ui.min.js"></script>
<script type="text/javascript" src="/css/multiselect/prettify.js"></script>
<script type="text/javascript" src="/css/multiselect/jquery.multiselect.js"></script>

<script type="text/javascript">

$(function(){

$("select#srch_model").multiselect();

});

</script>



<select size="6" multiple="multiple" name="srch_model" id="srch_model" style="width:200px; font-size:12px;" onchange="checkchanges();">

<%List modelsList=new ArrayList();
modelsList=(ArrayList)request.getAttribute("modelsList");
int tmp=0;
for(Object obj: modelsList){
tmp=0;
ModelsBean mb=(ModelsBean)obj;
if(mb.getModelName().equals("makes")){%>
<OPTGROUP LABEL="<%=mb.getModelID() %>">
<%}else{

if(modelSes!=null){
for(int j=0;j<modelSes.length;j++){

if(mb.getModelID().equals(modelSes[j])){tmp=1; %>

<option value="<%=mb.getModelID() %>" selected="selected"><%=mb.getModelName() %></option>
<% }}if(tmp==0){
if(mb.getModelName().indexOf("All ")!=-1){%>
<option value="<%=mb.getModelID() %>" selected="selected"><%=mb.getModelName() %></option>
<%}else{%>
<option value="<%=mb.getModelID() %>"><%=mb.getModelName() %></option>
<% }} }else{
if(mb.getModelName().indexOf("All ")!=-1){%>
<option value="<%=mb.getModelID() %>" selected="selected"><%=mb.getModelName() %></option>
<%}else{%>
<option value="<%=mb.getModelID() %>"><%=mb.getModelName() %></option>
<%}}}} %>
</OPTGROUP>
</select>

==========================END OF FILE===========================================




The situation is that We are able to apply the style (through CSS and JQuery to effectively change the Traditional Select Box into a Scrollable CheckList) to the first Select Box which is Static. We are able to fetch the values successfully into the select box, however we are unable to apply the Checklist Style for the Second Select Box, the option and the select tags of which are retrieved through Ajax. We have included the required CSS and Script Tags in both the pages.


Thanks!


 
ciminc cimin
Greenhorn
Posts: 3
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
The above issue has been solved. But there is another issue we are facing now. The loading of values of the second select box through ajax is not late, but because we are applying style to the select box in the second page and fetching the whole content(data and style to that select box), the models loading is very slow.

Kindly help me out. How can we ensure the data transfer is fast in ajax, thereby the delay is less.

We want:
a) second select box with values based on first select box's click
b) setting style to second select box

both to happen almost instantaneously.
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic