Solved

MultiColumnSelect combo box is not working in jsp

Posted on 2013-02-01
6
709 Views
Last Modified: 2013-02-04
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
0
Comment
Question by:Rocking
  • 3
  • 3
6 Comments
 
LVL 7

Expert Comment

by:Element1910
ID: 38845802
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
 

Author Comment

by:Rocking
ID: 38845947
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
 
LVL 7

Assisted Solution

by:Element1910
Element1910 earned 500 total points
ID: 38846022
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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 

Author Comment

by:Rocking
ID: 38846136
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
 
LVL 7

Accepted Solution

by:
Element1910 earned 500 total points
ID: 38849007
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
 

Author Closing Comment

by:Rocking
ID: 38851756
Excellent support provided,thanks a lot.
0

Featured Post

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article discusses how to create an extensible mechanism for linked drop downs.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

786 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question