Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

MultiColumnSelect combo box is not working in jsp

Posted on 2013-02-01
6
Medium Priority
?
726 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 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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 

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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
Suggested Courses

572 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