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>
                  <!-- Controlling the multicombo value  scroll,height,width -->
                  <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
RockingAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
Element1910Connect With a Mentor Commented:
To get it to work in Chrome, replace your JS with this:

(function ($) {
    $.fn.multicolselect = function (options) {

        var obj = $(this);
        var defaults = {
            buttonImage: "selectbutton.gif", // Image to be used for the button
            valueCol: 1, // The column to be used to display value for the textbox
            hideCol: 0
        };

        var options = $.extend(defaults, options);

        return this.each(function () {
            obj.hide();

            if (navigator.appVersion.indexOf("MSIE") !== -1) {
                //if ($.browser.msie){
                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;'/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type='text' id='description' readonly='readonly'></div>");
                if ($("input#description").attr('id') == 'description') {
                    $("#description").css({
                        "background-color": "grey"
                    });
                }
                obj.css("background", "#fff");
                obj.css("position", "absolute");
                obj.css("z-index", "2000");
            } else {
                obj.before("<div style='border:1px solid black;width:50%'><input type='text' id='mltsel' value='' readonly='readonly'><input id='mltselbtn' width='30px' autopostback='false' type='image' src='" + options.buttonImage + "' style='position:absolute;margin-top:1px;clear:both;'/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type='text' id='description' readonly='readonly'></div>");
                if ($("input#description").attr('id') == 'description') {
                    $("#description").css({
                        "background-color": "grey"
                    });
                }
                obj.css("background", "#fff");
                obj.css("position", "absolute");
                obj.css("z-index", "2000");
            }

            obj.css("border", "1px solid");
            obj.prev().find("input[type='text']").val(obj.find("tr[title='def']").find("td:eq(" + options.valueCol + ")").text());


            if (obj.find('table').width() < obj.prev().find("input[type='text']").width()) {
                obj.width(obj.prev().find("input[type='text']").width());
            }

            obj.find('tr').hover(function () {
                $(this).css("background-color", "#0055aa");
                $(this).css("color", "#fff");
            }, function () {
                $(this).css("background-color", "#fff");
                $(this).css("color", "#000");
            });

            obj.find("tr").each(function () {
                $(this).find("td:eq(" + options.hideCol + ")").css("display", "none");
                $(this).find("th:eq(" + options.hideCol + ")").css("display", "none");
            });

            obj.find("td").each(function () {
                $(this).css("padding-right", "10px");
            });

            obj.find("th").each(function () {
                $(this).css("text-align", "left");
                $(this).css("padding-right", "10px");
            });

            obj.find('tr').click(function () {
                obj.prev().find("input[type='text']").val($(this).find("td:eq(" + options.valueCol + ")").text());
                codeDesciption = 2; //Declared to store the description of the code
                $("input#description").val($(this).find("td:eq(" + codeDesciption + ")").text());
                obj.hide();
            });

            obj.find('tr').click(function () {
                obj.hide();
            });

            obj.prev().find("input[type='text']").click(function () {
                obj.show();
            });

            obj.prev().find("input[type='image']").click(function () {
                obj.show();
                return false;
            });

        });

    };


})(jQuery);

Open in new window


If you look at the JS, there's an if/else statement that determines if the browser is IE or not...the IE code block had the &nbsp; contained within it, but the other browser check (the else statement) didn't. Which is why it didn't work in any other browser other than IE.
0
 
Element1910Commented:
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.
0
 
RockingAuthor Commented:
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.
0
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
Element1910Connect With a Mentor Commented:
Ahh, ok gotcha. One thing I did notice is that when you double click the arrow button, it'll work as expected...but anyways, to prevent the post back, I've updated your .js file to prevent postback on the image button click. Replace your .js with this:
(function ($) {
    $.fn.multicolselect = function (options) {

        var obj = $(this);
        var defaults = {
            buttonImage: "selectbutton.gif", // Image to be used for the button
            valueCol: 1, // The column to be used to display value for the textbox
            hideCol: 0
        };

        var options = $.extend(defaults, options);

        return this.each(function () {
            obj.hide();

            if (navigator.appVersion.indexOf("MSIE") !== -1) {
                //if ($.browser.msie){
                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;'/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type='text' id='description' readonly='readonly'></div>");
                if ($("input#description").attr('id') == 'description') {
                    $("#description").css({
                        "background-color": "grey"
                    });
                }
                obj.css("background", "#fff");
                obj.css("position", "absolute");
                obj.css("z-index", "2000");
            } else {
                obj.before("<div style='border:1px solid black;width:50%'><input type='text' id='mltsel' value='' readonly='readonly'><input id='mltselbtn' width='30px' autopostback='false' type='image' src='" + options.buttonImage + "' style='position:absolute;margin-top:1px;clear:both;'/><input type='text' id='description' readonly='readonly'></div>");
                if ($("input#description").attr('id') == 'description') {
                    $("#description").css({
                        "background-color": "grey"
                    });
                }
                obj.css("background", "#fff");
                obj.css("position", "absolute");
                obj.css("z-index", "2000");
            }

            obj.css("border", "1px solid");
            obj.prev().find("input[type='text']").val(obj.find("tr[title='def']").find("td:eq(" + options.valueCol + ")").text());


            if (obj.find('table').width() < obj.prev().find("input[type='text']").width()) {
                obj.width(obj.prev().find("input[type='text']").width());
            }

            obj.find('tr').hover(function () {
                $(this).css("background-color", "#0055aa");
                $(this).css("color", "#fff");
            }, function () {
                $(this).css("background-color", "#fff");
                $(this).css("color", "#000");
            });

            obj.find("tr").each(function () {
                $(this).find("td:eq(" + options.hideCol + ")").css("display", "none");
                $(this).find("th:eq(" + options.hideCol + ")").css("display", "none");
            });

            obj.find("td").each(function () {
                $(this).css("padding-right", "10px");
            });

            obj.find("th").each(function () {
                $(this).css("text-align", "left");
                $(this).css("padding-right", "10px");
            });

            obj.find('tr').click(function () {
                obj.prev().find("input[type='text']").val($(this).find("td:eq(" + options.valueCol + ")").text());
                codeDesciption = 2; //Declared to store the description of the code
                $("input#description").val($(this).find("td:eq(" + codeDesciption + ")").text());
                obj.hide();
            });

            obj.find('tr').click(function () {
                obj.hide();
            });

            obj.prev().find("input[type='text']").click(function () {
                obj.show();
            });

            obj.prev().find("input[type='image']").click(function () {
                obj.show();
                return false;
            });

        });

    };


})(jQuery);

Open in new window


All I did was add a "return false;" to the end of the image click function.
0
 
RockingAuthor Commented:
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;'/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type='text' id='description' readonly='readonly'></div>");

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


"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"  code is working in ie but not on chrome.
0
 
RockingAuthor Commented:
Excellent support provided,thanks a lot.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.