I am modifying a page that only worked in explorer 8, I have managed to get everything to display correctly in IE11 and chrome, although with some styles with the desire to improve them, the problem is that everything works correctly except when clicking on the buttons of the combos, IN ALL ! I have seen that it redirects me to its same action of the general window and at the same time with the one of the combo (I am working with struts), leaving the two threads suspended and this makes the application crash and the error that we have as an informative message appears. After several attempts I have decided to change the combo since I cannot disable the submit to see if I can correct this problem.
I have downloaded Select2, but I have a variety of files and I don't know exactly which one to choose and how to tweak or add things.
Here is the code for one of the combos:
$.widget("#ui.comboboxE", {
_create: function() {
var self = this;
var select = this.element.hide();
var input = $("<input size='80' id='cmbE' name='cmbE'>")
.insertAfter(select)
.autocomplete({
source: function(request, response) {
$.ajax({
url: "/t/t004_ESelect.do?sSortDir_0=ASC&iSortCol_0=0&cod_e_varios=" + request.term,
dataType: "json",
data: {
featureClass: "P",
style: "full",
maxRows: 12,
name_startsWith: request.term
},
success: function(data) {
response($.map(data.aaData, function(item) {
return {
id: item[0],
label: item[0]+ ' - '+item[2],
value: item[0]+ ' - '+item[2]
}
}))
}
})
},
delay: 0,
change: function(event, ui) {
fnChangeCombo(event, ui, this, '[name="descripcione"]',['[name="cod_e"]']);
limpiarL();
$('[name="descripcionl"]').val("");
$('[name="cod_l"]').val("");
},
select : function(event, ui) {
self._trigger("selected", event, {
item: select.find("[value='" + ui.item.id + "']")
});
$('[name="descripcione"]').val(ui.item.label);
$('[name="cod_e"]').val(ui.item.id);
},
minLength: 0
})
.addClass("ui-widget ui-widget-content ui-corner-left");
$("<button> </button>")
.attr("tabIndex", -1)
.insertAfter(input)
.button({
icons: {
primary: "ui-icon-triangle-1-s"
},
text: false
})
.removeClass("ui-corner-all")
.addClass("ui-corner-right ui-button-icon")
.click(function() {
if (input.autocomplete("widget").is(":visible")) {
input.autocomplete("close");
return;
}
input.autocomplete("search", "");
input.focus();
});
}
});
Fixed! (The part of the combo without using select2) Apparently if you don't specify the button type (in my case) this by default by jQuery appears as submit (I don't know why with IE8 without specifying it either it appeared as a button) that was why it always redirected me to the main window of the selected menu option and it did not load the combo without more in the same page in which I was. To fix it I changed the following line of code:
As you can see, unlike the code in the question, the only difference is that the comment is in capital letters, I put it here separately so that you can see it more easily: Now:
Before: