Develop Reference

selecting the dropdown from an page loaded through a div

I am loading a page through a div because of iframe restrictions. What I want to do is access the page contents and select the first item in the dropdown. If the id of the dropdown is called myDropdown or something like "ctl00_ctl65_g_549adf60_cb6b_4794_af15_99ce724b040f_FormControl0_V1_I1_D2", how do i access this to select.
$(document).ready(function() {
$("#load_home").on("click", function() {
$("#content").load("https://page.aspx");
});
});
<div id="topBar">
Rate!
</div>
<div id="content">
</div>

Try this script.
var interval;
$(document).ready(function () {
$("#load_home").on("click", function () {
$('.calc-loader').show();
$("#content").load("HtmlPage5.html");
interval = setInterval(function () {
console.log($('#content select option').length);
if ($('#content select option').length > 2) {
clearInterval(interval);
$('.calc-loader').hide();
$('#content select option:eq(3)').prop("selected",true);
$('#content select').trigger('change');
}
}, 1000);
});
});

Here is a modular findAndSelect() function using pure JS. Parameters are the string ID of the select, and the string value of the option you want to select.
Say your html is : <select id="sel"><option>option1</option></select> and you want to set #sel to 'option1', you call findAndSelect('sel','option1');
function findAndSelect (elementId, optionToSelect) {
function findRelevantIndex(elementId) {
var optionsArr = document.getElementById(elementId).options;
var optionsLen = optionsArr.length;
for (var i = 0; i < optionsLen; i++) {
if (optionsArr[i].text == optionToSelect) {
return i;
}
}
console.log('found no matching option as ' + optionToSelect);
return 0;
}
document.getElementById(elementId).selectedIndex = findRelevantIndex(elementId);
console.log('new selected index for ' + elementId + ' is ' + document.getElementById(elementId).selectedIndex);
}

You need to access it in the .load callback or delegate:
$(function() {
$("#load_home").on("click", function() {
$("#content").load("https://page.aspx",function() {
$("#myDropdown option:eq(2)").prop{"selected",true);
// if you have event handlers on the select, you want to trigger them
$("#myDropdown").change();
});
});
});
Delegation:
$("#content").on("change","#myDropdown",function() {
// delegated the change event to the container
});

search not functioning correctly after selection in multiselect

I have two multiple selects in a page (select-cities & chosen-cities), and I can transfer options to and fro. I have given the search functionality to select-cities list. Everything functions as I need.
The problem is when i search in one searchbox and select a few options from the list and move on two the other search box with deleting the typed letters from the first search box, the second search box doesn't function. I am a neophyte hence don't know how to eradicate this problem. I guess it has to do something with the "keyup()" function.
I did the following steps:
1. first I typed e in #someinput box, and selected three options. 2. the values are now in chosen cities list. 3. Now i tried searching the second search box without deleting the content i typed in the first searchbox. this where the problem starts. It won't work.
here it the demo: http://jsfiddle.net/cs6Xb/131/
html:
<input id="someinput">
<br/>
<select class="select-cities" name="city" id="optlist" multiple="multiple">
<option>Frederiksberg</option>
<option>Vanløse</option>
<option>Glostrup</option>
<option>Brøndby</option>
<option>Roskilde</option>
<option>Køge</option>
<option>Gentofte</option>
<option>Hillerød</option>
<option>Tårnby</option>
<option>Vallensbæk</option>
</select>
</input>
<br/>
<input id="someinput1"/><br/>
<select class="chosen-cities" name="chosen-cities-name" id="optlist1" multiple="multiple"></select>
jQuery:
$(function () {
opts = $('#optlist option').map(function () {
return [[this.value, $(this).text()]];
});
opts1 = $('#optlist1 option').map(function () {
return [[this.value, $(this).text()]];
});
$('#someinput').keyup(function () {
var rxp = new RegExp($('#someinput').val(), 'i');
var optlist = $('#optlist').empty();
opts.each(function () {
if (rxp.test(this[1])) {
optlist.append($('<option/>').attr('value', this[0]).text(this[1]));
} else{
optlist.append($('<option/>').attr('value', this[0]).text(this[1]).addClass("hidden"));
}
});
$(".hidden").toggleOption(false);
});
$('#someinput1').keyup(function () {
var rxp = new RegExp($('#someinput1').val(), 'i');
var optlist = $('#optlist1').empty();
opts1.each(function () {
if (rxp.test(this[1])) {
optlist.append($('<option/>').attr('value', this[0]).text(this[1]));
} else{
optlist.append($('<option/>').attr('value', this[0]).text(this[1]).addClass("hidden"));
}
});
$(".hidden").toggleOption(false);
});
$('.select-cities').click(function () {
$('.select-cities option:selected').remove().appendTo('.chosen-cities');
opts = $('#optlist option').map(function () {
return [[this.value, $(this).text()]];
});
opts1 = $('#optlist1 option').map(function () {
return [[this.value, $(this).text()]];
});
});
$('.chosen-cities').click(function () {
$('.chosen-cities option:selected').remove().appendTo('.select-cities');
opts = $('#optlist option').map(function () {
return [[this.value, $(this).text()]];
});
opts1 = $('#optlist1 option').map(function () {
return [[this.value, $(this).text()]];
});
});
});
jQuery.fn.toggleOption = function( show ) {
jQuery( this ).toggle( show );
if( show ) {
if( jQuery( this ).parent( 'span.toggleOption' ).length )
jQuery( this ).unwrap( );
} else {
if( jQuery( this ).parent( 'span.toggleOption' ).length == 0 )
jQuery( this ).wrap( '<span class="toggleOption" style="display: none;" />' );
}
};

Issue was with
$(".hidden").toggleOption(false);
I changed the $(".hidden") selector based on corresponding optlist
$("#optlist .hidden").toggleOption(false);
and
$("#optlist1 .hidden").toggleOption(false);
Working Fiddle

Cannot select a dynamically added list item until it is clicked

I have written a small JQuery plugin that creates a dropdown box based on bootstrap. I have written it to where a data attribute supplies a url that produces the list items. After the ajax call, Jquery loops through the list items and inserts them into the dropdown menu. Here is what I do not understand, the plugin takes a div with the class of .combobox and appends the required html to make the combobox. It uses two functions, _create() and _listItems(). _create() actually adds the html and calls on _listItems() to make the ajax call and it returns the list items to be appended. Looks like this:
;(function ( $, window, document, undefined ) {
var Combobox = function(element,options) {
this.$element = $(element);
this.$options = $.extend({}, $.fn.combobox.defaults, options);
this.$html = {
input: $('<input type="text" placeholder="[SELECT]" />').addClass('form-control'),
button: $('<div id="test"/>').addClass('input-group-btn')
.append($('<button />')
.addClass('btn btn-default input-sm')
.append('<span class="caret"></span>'))
}
this.$list_type = this.$element.attr('data-type');
this.$url = this.$element.attr('data-url');
this.$defaultValue = this.$element.attr('data-default');
this._create();
this.$input = this.$element.find('input');
this.$button = this.$element.find('button');
this.$list = this.$element.find('ul')
this.$button.on('click',$.proxy(this._toggleList,this));
this.$element.on('click','li',$.proxy(this._itemClicked,this));
this.$element.on('mouseleave',$.proxy(this._toggleList,this));
if(this.$defaultValue) {
this.selectByValue(this.$defaultValue);
}
}
Combobox.prototype = {
constructor: Combobox,
_create: function() {
this.$element.addClass('input-group input-group-sm')
.append(this.$html.input)
.append(this._listItems())
.append(this.$html.button);
},
_itemClicked: function(e){
this.$selectedItem = $(e.target).parent();
this.$input.val(this.$selectedItem.text());
console.log(this.$element.find('[data-value="W"]'))
this._toggleList(e);
e.preventDefault();
},
_listItems: function() {
var list = $('<ul />').addClass('dropdown-menu');
$.ajax({
url: this.$url,
type: 'POST',
data: {opt: this.$list_type},
success:function(data){
$.each(data,function(key,text){
list.append($('<li class="listObjItem" data-value="'+text.id+'">'+text.value+'</li>'));
})
}
})
return list
},
selectedItem: function() {
var item = this.$selectedItem;
var data = {};
if (item) {
var txt = this.$selectedItem.text();
data = $.extend({ text: txt }, this.$selectedItem.data());
}
else {
data = { text: this.$input.val()};
}
return data;
},
selectByValue: function(value) {
var selector = '[data-value="'+value+'"]';
this.selectBySelector(selector);
},
selectBySelector: function (selector) {
var $item = this.$element.find(selector);
if (typeof $item[0] !== 'undefined') {
this.$selectedItem = $item;
this.$input.val(this.$selectedItem.text());
}
else {
this.$selectedItem = null;
}
},
enable: function () {
this.$input.removeAttr('disabled');
this.$button.children().removeClass('disabled');
this.$button.on('click',$.proxy(this._toggleList,this));
},
disable: function () {
this.$input.attr('disabled', true);
this.$button.children().addClass('disabled');
this.$button.off('click',$.proxy(this._toggleList,this));
},
_toggleList: function(e) {
if(e.type == 'mouseleave') {
if(this.$list.is(':hidden')) {
return false;
} else {
this.$list.hide();
}
} else {
this.$list.toggle();
e.preventDefault();
}
}
}
$.fn.combobox = function (option) {
return this.each(function () {
if (!$.data(this, 'combobox')) {
$.data(this, 'combobox',
new Combobox( this, option ));
}
});
};
$.fn.combobox.defaults = {};
$.fn.combobox.Constructor = Combobox;
})( jQuery, window, document );
The problem is that after the items are appended to the DOM, everything is selectable accept the list items. I currently have an .on() statement that binds the click event with the list item. To test this out I have used console.log(this.$element.find('[data-value="W"]') and it does not return an element, however if I place that same console log in the click callback of the list item it will return the element and it is selectable. Am I doing something wrong?
EDIT
I have pasted the entire plugin to save on confusion.

Custom styled checkbox not working properly

Currently I'm using multiple blocks of the following code as my custom styled checkbox:
<div class="row-fluid">
<div class="span12 card card-even">
<div>
<h3><label class="checkbox">
<i class="icon-check-empty"></i>
<input type="checkbox" value="1" />
</label></h3>
</div>
</div>
</div>
The JS:
jQuery.fn.extend({
shinyCheckbox: function() {
var setIcon;
setIcon = function($el) {
var checkbox, iclass;
checkbox = $el.find("input[type=checkbox]");
iclass = "";
if (checkbox.is(":checked")) {
iclass = "icon-ok";
} else {
iclass = "icon-check-empty";
}
return $el.find("i[class^=icon-]").removeClass("icon-check").removeClass("icon-check-empty").addClass(iclass);
};
this.find("input[type=checkbox]").change(function() {
return setIcon($(this).parents("label.checkbox"));
});
return this.each(function(i, el) {
return setIcon($(el));
});
}
});
$(document).ready(function() {
return $("label.checkbox").shinyCheckbox();
});
Im able to achieve my requirement by styling the icon-check-empty & icon-check classes but when i click any checkbox only the first checkbox gets activated.
How can i use the this keyword to solve the issue such that the correct checkbox is activated?

This is the way I'd do it, based on your code:
jQuery.fn.extend({
shinyCheckbox: function () {
var setIcon = function ($el) {
var checkbox = $el.find("input[type=checkbox]"), checked = checkbox.is(':checked');
checkbox.val(+checked);
return $el.find("i[class^=icon-]").removeClass("icon-check-empty icon-ok").addClass(function () {
return checked ? "icon-ok" : "icon-check-empty";
});
};
this.find("input[type=checkbox]").on('change', function () {
return setIcon($(this).closest("label.checkbox"));
});
return this.each(function (i, el) {
return setIcon($(el));
});
}
});
$(document).ready(function () {
$("label.checkbox").shinyCheckbox();
});
The main issue was that you weren't removing the icon-ok class, only the icon-check class. I also cleaned the code up a little.
Here it is working: http://jsfiddle.net/W88fk/1/

you can try
jQuery.fn.extend({
shinyCheckbox: function() {
return this.each(function() {
var el=$(this),checkbox = el.find("input[type=checkbox]");
checkbox.change(function() {
var iclass = checkbox.is(":checked")?"icon-ok":"icon-check-empty";
el.find("i[class^=icon-]").removeClass().addClass(iclass);
var cval= checkbox.is(":checked")?0:1;
checkbox.val(cval);
});
});
}
});
$(document).ready(function() {
$("label.checkbox").shinyCheckbox();
});
toogle class and value http://jsfiddle.net/rWFMm/1/

Cant add a Jquery plugin inside a loop

Hi I have a JQuery plugin that takes an array of Orders and creates rows for each Order in the array. No issues here. However if one of these Orders meets a condition it should add a textbox in one of the TD cells. When I debug I can see it adding the textBox but when the next row is created which requires a textBox the previous textbox gets removed. i have this inside a close so not sure what to do. So the result is I only get textboxes in the last row.
If I add the textBox as html it works fine but I want it as a plugin as I need to bind several events KeyUp/Down MouseWheel, Click. etc
The textbox plugin control (gep_inputcontrol) just creates the html and binds events, nothing fancy.
Any help appreciated.
var _table = $('#orderTable', this);
for (var i = 0; i < params.orders.length; i++) {
var row = createRow(params.orders[i]);
_table.append(row);
}
function createRow(order){
var unmatchedStake = (order.requestedStake - order.matchedStake);
var partMatched = (unmatchedStake > 0);
var tr = $(String.format('<tr id="order_{0}" class="{1}"/>' ,order.orderId, ((i % 2) == 0) ? 'gep-altrow' : 'gep-row'));
tr.append(String.format('<td class="gep-icon gep-status">{0}</td>', order.orderStatusId));
tr.append(String.format('<td class="gep-selectionname">{0} {1} {2}</td>', GBEUtils.getEventName(order.eventClassifierFullName()), gep._settings.resources.general.polarity[order.polarityId], order.selectionName()));
tr.append(String.format('<td class="gep-odds betSlipRowPrice">{0}</td>', order.averageMatchedPrice));
tr.append(String.format('<td class="gep-unmatched betSlipRowStake">{0}</td>', com.base.formatDecimal(order.requestedStake - order.matchedStake,2)));
tr.append(String.format('<td class="gep-matched">{0}</td>', com.base.formatDecimal(order.matchedStake,2)));
tr.append(String.format('<td class="gep-action"><span class="gep-icon"/></td>', order.orderStatusId));
//var tablerow = $(String.format('#order_{0}',order.orderId), _table);
//(function (_table, tr, i, unmatchedStake, tablerow) {
if(unmatchedStake > 0)//part matched
{
$('.gep-unmatched', tr).gep_inputcontrol({
type:'STAKE',
ccSymbol:clientObject.state.ccSymbol,
value: unmatchedStake,
decimalValue:unmatchedStake,
onMouseWheeled: function(e, ev){
gep.inputControlWheeled(e, ev);
gep.calculateRowProfit(e, false);
return false;
},
onArrowClicked: function(e){
gep.onArrowClick(e);
return false;
}
});
//$('.gep-unmatched', tr).html($('.gep-unmatched', tr).html());
$('.gep-odds', tr).gep_inputcontrol({
type:'PRICE',
value:order.requestedPrice,
decimalValue:order.requestedPrice,
onMouseWheeled: function(e, ev){
gep.inputControlWheeled(e, ev);
gep.calculateRowProfit(e, false);
return false;
},
onArrowClicked: function(e){
gep.onArrowClick(e);
return false;
}
});
$('.gep-action .gep-icon', tr).addClass("gep-icon-delete");
$('.gep-icon-delete', tr).bind("click", function(){
alert("delete");
toggleCurrentBetSlipBet(this);
return false;
});
}
// })(_table, tr, i, unmatchedStake, tablerow);
return tr;
}
The textbox plugin creates a table with input box and two anchor tags.
/********************
GEP.gep_inputcontrol // stake input, price input box
********************/
(function ($) {
var _templatePrice = $('<table class="gep-inputcontrol" cellpadding="0" cellspacing="0"><tr><td rowspan="2"><input type="text" size="5" class="gep-inputcontrol-price" /></td><td><a tabindex="-1" href="javascript:void(0);" class="gep-inputup"></a></td></tr><tr><td> <a tabindex="-1" href="javascript:void(0);" class="gep-inputdown"></a> </td></tr></table>');
var _templateStake = $('<table class="gep-inputcontrol" cellpadding="0" cellspacing="0"><tr><td rowspan="2"><span class="gep-ccsymbol" /> <input type="text" size="5" class="gep-inputcontrol-stake" /> </td> <td> <a tabindex="-1" href="javascript:void(0);" class="gep-inputup"></a></td></tr><tr><td> <a tabindex="-1" href="javascript:void(0);" class="gep-inputdown"></a> </td></tr> </table>');
var _template;
var _settings = null;
var _instance;
var methods = {
init: function (options) {
_settings = options;
//options.type = 'STAKE'or 'PRICE'
_template = (options.type == 'STAKE')? _templateStake: _templatePrice;
$('.gep-ccsymbol',_template).html(options.ccSymbol);
this.html(_template);
$('input', this).attr('value', options.value);
$('input', this).attr('initialvalue', options.decimalValue);
$('input', this).attr('decimalValue', options.decimalValue);
$('input', this).bind("mousewheel", function (ev) {
_settings.onMouseWheeled.call(null, this, ev.originalEvent);
});
$('.gep-inputup', this).bind("click", function (e) {
_settings.onArrowClicked.call(null, this);
});
$('.gep-inputdown', this).bind("click", function (e) {
_settings.onArrowClicked.call(null, this);
});
_instance = this;
return this;
},
show: function (params) {
alert("show" + params);
},
hide: function () {
// GOOD
},
update: function (content) {
// !!!
}
};
$.fn.gep_inputcontrol = function (method) {
// Method calling logic
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist on jQuery.gep_inputcontrol');
}
};
})(jQuery);
To elaborate a bit more, I did some small unit tests
This works..
$('.gep-odds', clientObject.liveBetsPane).gep_inputcontrol({
type: 'PRICE',
value: 5,
decimalValue: 5,
onMouseWheeled: function (e, ev) {
gep.inputControlWheeled(e, ev);
gep.calculateRowProfit(e, false);
return false;
},
onArrowClicked: function (e) {
gep.onArrowClick(e);
return false;
}
});
This does NOT work...(Only puts TEXT box in last row) But I need to do it this way as I need values of each row.
$('.gep-odds', clientObject.liveBetsPane).each(function () {
$(this).gep_inputcontrol({
type: 'PRICE',
value: 5,
decimalValue: 5,
onMouseWheeled: function (e, ev) {
gep.inputControlWheeled(e, ev);
gep.calculateRowProfit(e, false);
return false;
},
onArrowClicked: function (e) {
gep.onArrowClick(e);
return false;
}
});
});

I removed dollar from the template and it worked fine.
var _templatePrice = $('<table cla...
is now
var _templatePrice = '<table cla...
Although it sets the html for the last row it was moving for the other rows.
Thanks to me.... :)