asked on

MultiColumnSelect combo box is not working in jsp

Hi,

I want to display multicolumn combo box in the html file for which i am using jquery.multicolselect.js.

The problem i am facing is when i click on the arrow button to display the list(option values) the page gets submitted.

I have attached the js file and jsp file please check and let me know the cause of the problem.

Thanks in advance.

Source code of the jsp file is given below

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript"
      src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript"
      src="${pageContext.request.contextPath}/resources/js/multiselectcombo/jquery.multicolselect.js"></script>
</script>
</head>
<script language="javascript" type="text/javascript">
      jQuery(document)
                  .ready(
                              function() {
                                    $("#datatable")
                                                .multicolselect(
                                                            {
                                                                  buttonImage : "${pageContext.request.contextPath}/resources/images/selectbutton.gif",
                                                                  valueCol : 1,
                                                                  hideCol : 0
                                                            });

                              });
</script>
<body>
      <form>
            <div>
                  
                  <div id="datatable"
                        style="overflow-y: auto; overflow-x: auto; height: 80px; width: 850px">

                        <%%>
                        <table border="1" cellspacing="0" width="100%">
                              <tr>
                                    <td>1</td>
                                    <td>1</td>
                                    <td>A1</td>
                              </tr>
                              <tr>
                                    <td>2</td>
                                    <td>2</td>
                                    <td>A2</td>
                              </tr>
                              <tr>
                                    <td>3</td>
                                    <td>3</td>
                                    <td>A3</td>
                              </tr>
                        </table>

                  </div>

            </div>

      </form>
</body>
</html>
jquery.multicolselect.js

Element1910

The arrow button shouldn't be used to try to make a selection or to expand the drop-down control. Click the textbox itself to expand the drop-down, then the button should be used only to submit after you've made your selection.

Rocking

ASKER

Click the textbox itself to expand the drop-down is working fine,but i want to give the look and feel of the combo therefore i need the arrow button functionality mandatory.

In fact it works fine if i remove the form tag from the jsp file and the on click of the arrow button the list is displayed.

Please suggest me why the form gets submitted since there is no action is defined in the form tag.

SOLUTION

Element1910

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Rocking

ASKER

Thanks a lot it's working now.

obj.before("<div style='width:360px;'><input type='text' id='mltsel' value='' readonly='readonly'><input id='mltselbtn' autopostback='false' type='image' src='" + options.buttonImage + "' style='position:absolute;margin-top:1px;clear:both;'/>       <input type='text' id='description' readonly='readonly'></div>");

It would be really nice if you help me to replace "       " by some code to get the space b/w two text boxes namely 'mltselbtn' & 'description'.

"       " code is working in ie but not on chrome.

ASKER CERTIFIED SOLUTION

Element1910

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Rocking

ASKER

Excellent support provided,thanks a lot.