Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

MultiColumnSelect combo box is not working in jsp

Posted on 2013-02-01
6
Medium Priority
?
720 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 2000 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
The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

 

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 2000 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

RHCE - Red Hat OpenStack Prep Course

This course will provide in-depth training so that students who currently hold the EX200 & EX210 certifications can sit for the EX310 exam. Students will learn how to deploy & manage a full Red Hat environment with Ceph block storage, & integrate Ceph into other OpenStack service

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

704 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