I have an autocomplete combo-box inside a div which opens up into a dialog box. In IE the line items are crammed together and text is not a all visible. You can get the source code, such as I have, directly from JQuery and experience the error such as I have.
For an explanation of use (in case you think it is necessary): This is a pop-up holding a combobox for email addresses. I'm after the dialog loads I use BindUsers to retrieve the list and use the success to build. I've experienced another issue here where I would add a null or "Enter an email" value and when I append the rest of the options the element I previously added is overwritten.
Also the alert which should fire, never fires....
If this isn't enough, you might shoot some ducks and not down vote every post you don't understand. I'm looking for a relatively quick response... Thanks. Link to src: http://ift.tt/1DNMHCN
function BindUsers(){
$.ajax({ url: '<%=Page.ResolveClientUrl("~/Chat_getCurrentTickets.aspx")%>',
data: { fetch: "GetUserList"},
async: false,
type: 'GET',
dataType: "json",
success: onBindUserSuccess,
error: function(){(alert('Error getting list of recipients'))}});
}
function onBindUserSuccess(data){
//opt.value = '-1';
//opt.text = 'Enter an email';
//$('#combobox').append(opt);
//$('#combobox').selectedIndex = -1;
for(var i=0;i< data.length;i++){
var opt = document.createElement('option');
if(data[i].OperatorName.trim() != ''){
opt.value = data[i].Email;
opt.text = data[i].OperatorName;
$('#combobox').append(opt);
}
}
}
(function( $ ) {
$.widget( "custom.combobox", {
_create: function() {
this.wrapper = $( "<span>" )
.addClass( "custom-combobox" )
.insertAfter( this.element );
this.element.hide();
this._createAutocomplete();
this._createShowAllButton();
},
_createAutocomplete: function() {
var selected = this.element.children( ":selected" ),
value = selected.val() ? selected.text() : "";
this.input = $( "<input>" )
.appendTo( this.wrapper )
.val( value )
.attr( "title", "" )
.addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" )
.autocomplete({
delay: 0,
minLength: 0,
source: $.proxy( this, "_source" )
})
.tooltip({
tooltipClass: "ui-state-highlight"
});
this._on( this.input, {
autocompleteselect: function( event, ui ) {
ui.item.option.selected = true;
this._trigger( "select", event, {
item: ui.item.option
});
},
autocompletechange: "_removeIfInvalid"
});
},
_createShowAllButton: function() {
var input = this.input,
wasOpen = false;
$( "<a>" )
.attr( "tabIndex", -1 )
.attr( "title", "Show All Items" )
.tooltip()
.appendTo( this.wrapper )
.button({
icons: {
primary: "ui-icon-triangle-1-s"
},
text: false
})
.removeClass( "ui-corner-all" )
.addClass( "custom-combobox-toggle ui-corner-right" )
.mousedown(function() {
wasOpen = input.autocomplete( "widget" ).is( ":visible" );
})
.click(function() {
input.focus();
// Close if already visible
if ( wasOpen ) {
return;
}
// Pass empty string as value to search for, displaying all results
input.autocomplete( "search", "" );
});
},
_source: function( request, response ) {
var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
response( this.element.children( "option" ).map(function() {
var text = $( this ).text();
if ( this.value && ( !request.term || matcher.test(text) ) )
return {
label: text,
value: text,
option: this
};
}) );
},
_destroy: function() {
this.wrapper.remove();
this.element.show();
}
});
})( jQuery );
//$( ".combobox" ).autocomplete({
// appendTo: "#dialog"
//});
$(function() {
$( "#combobox" ).combobox();
$("#combobox").change(function() {
alert($(this).val()); //To fetch the value
});
$( "#toggle" ).click(function() {
$( "#combobox" ).toggle();
});
});
<div id="dialog" title="Help Desk Email" style="display:none;" class="ui-front">
<div style="width:100%;">
<div>
<div style="width:100%;display:inline-block">
<input type="button" id="btnSend" value="Send" onclick="btnSendClickEvent()" style="margin:25px 25px 5px 5px" />
<label title="Select a recipient" id="RadCBTo" style="height:25px;margin-right:36px">To: </label>
<select id="combobox" >
<option value="" selected="selected">Insert or select and email address</option>
</select>
</div>
<div>
<label id="label2" style="height:20px;width:300px; margin:25px 5px 5px 80px">Subject: </label>
<input type="text" id="txtSubject" style="height:20px;width:550px;" />
<input type="hidden" id="tbTo" />
</div>
<div>
<textarea id="tdBody" aria-multiline="true" style="margin:25px 5px 5px 138px; width:inherit;" cols="90" rows="25"></textarea>
<label id="label1" style="background-color:red;"></label>
<input type="hidden" id="resolve"/>
</div>
</div>
</div>
</div>
This is what I get in chrome and not what I get in IE... That is the problem.
I have an autocomplete combo-box inside a div which opens up into a dialog box. In IE the line items are crammed together and text is not a all visible. You can get the source code, such as I have, directly from JQuery and experience the error such as I have.
For an explanation of use (in case you think it is necessary): This is a pop-up holding a combobox for email addresses. I'm after the dialog loads I use BindUsers to retrieve the list and use the success to build. I've experienced another issue here where I would add a null or "Enter an email" value and when I append the rest of the options the element I previously added is overwritten.
Also the alert which should fire, never fires....
If this isn't enough, you might shoot some ducks and not down vote every post you don't understand. Not every question needs code, its pretty obvious you don't know what the problem is and I'm looking for a relatively quick response instead of wasting half an hour formulating a question so people who had no idea what I was experience could try and get few up-votes.
Aucun commentaire:
Enregistrer un commentaire