Solved

MultiColumnSelect combo box is not working in jsp

Posted on 2013-02-01
6
706 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 

Author Comment

by:Rocking
Comment Utility
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
Comment Utility
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
Comment Utility
Excellent support provided,thanks a lot.
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Suggested Solutions

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

762 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now