I have an iframe with a select control in it that I would like to add some options to. I am able to add options to the select inside the iframe using IE10+, Firefox, and Chrome, but my current solution does not work for IE8 and IE9.
I would like to find a way to add options to my select control. I have tried several solutions proposed on other stack overflow questions, but they do not seem to be working for me.
Here is the relevant part of my HTML view:
<!-- In the iframe -->
<div>
<div class="inline-block">SelectSomething: </div>
<select name="select-dialog" id="select-dialog" class="inline-block"></select>
</div>
Here is a snippet of my javascript code that tries to add options to the select control above:
// Grab select from iframe
var dialogSelect = document.getElementById('myFrame').contentWindow.document.getElementById('select-dialog');
var isIE8 = (isIE && getIEVersion() === 8);
if (isIE8)
{
dialogSelect.innerHTML = '';
// Attempt 1
var opt = new Option();
opt.innerHTML = 'Kobe';
opt.value = 'BlackMamba';
var opt2 = new Option();
opt2.innerHTML = 'RKelly';
opt2.value = 'PiedPiper';
dialogSelect.appendChild(opt);
dialogSelect.appendChild(opt2);
// Attempt 2
// var opt = dialogSatelliteSelect.options;
// opt[0] = new Option('Kobe', 'BlackMamba');
// opt[1] = new Option('R Kelly', 'PiedPiper');
console.log('innerHTML: ' + dialogSelect.innerHTML);
}
else
{
// The select is not populated with options in IE8 and IE9. This works with other browsers
dialogSelect.innerHTML = getOptions();
}
The console output for both attempts 1 and 2 are:
innerHTML: <OPTION value=BlackMamba selected>Kobe</OPTION><OPTION value=PiedPiper>RKelly</OPTION>
Even though the innerHTML contains the options I have created, I cannot select them using IE8/IE9. The drop down appears blank with nothing selected.
What do I need to do to have these options display in my select control? Is there some special step I need to take with IE8 to show the current options?
Related
let thankYouMain = document.querySelector(".thank-you-main-div");
let woocommerceTYBtn = document.querySelectorAll(
".woocommerce-MyAccount-downloads-file"
);
//get product title
let productTitle = document.querySelectorAll(".download-product a");
//get product price
let priceAmount = document.querySelectorAll(".woocommerce-Price-amount bdi");
//create elements for each product item
for (let i = 0; i < woocommerceTYBtn.length; i++) {
let thankYouInnerDiv = document.createElement("div");
thankYouInnerDiv.setAttribute("class", "thank-you-inner-div");
thankYouMain.append(thankYouInnerDiv);
let thankYouImg = document.createElement("img");
thankYouImg.setAttribute(
"src",
"https://slowtravellerss.com/wp-content/uploads/2022/04/IMG_0169.png"
);
thankYouImg.setAttribute("width", "300px");
let thankYouContent = document.createElement("div");
thankYouContent.setAttribute("class", "thank-you-content");
let thankYouDownloadBtn = document.createElement("a");
thankYouDownloadBtn.setAttribute("class", "thank-you-dw-btn");
thankYouDownloadBtn.textContent = "Download";
thankYouInnerDiv.append(thankYouImg, thankYouContent, thankYouDownloadBtn);
let thankYouProductTitle = document.createElement("a");
thankYouProductTitle.setAttribute("class", "thank-you-pd-title");
let thankYouProductDevider = document.createElement("span");
thankYouProductDevider.setAttribute("class", "thank-you-pd-devider");
let thankYouProductPrice = document.createElement("p");
thankYouProductPrice.setAttribute("class", "thank-you-pd-price");
thankYouContent.append(
thankYouProductTitle,
thankYouProductDevider,
thankYouProductPrice
);
//function to set href via get and set attributes
function settingAttr() {
thankYouDownloadBtn.setAttribute(
"href",
woocommerceTYBtn[i].getAttribute("href")
);
thankYouProductTitle.innerText = productTitle[i].innerText;
thankYouProductPrice.innerText = priceAmount[i].innerText;
}
settingAttr();
}
<div class="download-product">
This is the product title
</div>
<div class="woocommerce-Price-amount"><bdi>$99</bdi></div>
Download
<div class="thank-you-main-div">
</div>
I am trying to get data from one set of divs and show it in another div dynamically using getAttribute, setAttribute and innerText. The code is working fine on windows, mac and android devices. You can see the below code working just fine, But it does not work on iPhones. I tried using android and it works without any issue. This happens only on iphones. No idea how to fix this or find the issue. Does anyone have any suggestions?
This first part is to the point, but the latter section is "Meh. Take it if it makes sense." Sorry, I'm a bit of a snob. I have, uhm, "aesthetic" issues with what you're doing, but I'll separate that from the functionally-relevant issue.
The main bits
The main problem is that you're trying to use setAttribute for a structural, rendering-related attribute. I don't see why it'd be a "SHOULD NOT support" usage, but I'm not surprised it's a "MAY support" usage. In the following jsfiddle, I switch out your use of <element>.setAttribute for use of <element>.classList.add, and I confirm it's working as intended: https://jsfiddle.net/azpLj57f/1/ Note that the use of <element>.setAttribute for other attributes is retained...so far.
The opinionated fluff
I do hope you actually like this version of. It's going to look quite different, but I'll edit it to answer any questions you add in the comments: https://jsfiddle.net/q1my9c45/
this is my first question, so apologies if not written clearly.
I want to dynamically toggle a comment form after reply button is pressed. There are multiple comments (in below example three) to which a form (with different id) can be rendered separately.
I am able to do this with static id for form but not with dynamically defined id...
I have tried this static approach and this works fine.
var functs_t = {};
functs_t['fun_27'] = $('#reply_comment_id_27').click(function() {$('#form_comment_id_27').toggle('slow');});
functs_t['fun_23'] = $('#reply_comment_id_23').click(function() {$('#form_comment_id_23').toggle('slow');});
functs_t['fun_21'] = $('#reply_comment_id_21').click(function() {$('#form_comment_id_21').toggle('slow');});
However, I am having struggling with a dynamic approach.
var i;
var functs = {};
for (i=0; i<comment_qs_id_list.length; i++) {
var comment_id = comment_qs_id_list[i].toString();
var reply_comment_id = 'reply_comment_id_'+ comment_id;
var form_comment_id = $('#'+reply_comment_id).attr('name');
// works >>> toggles comment 27
functs['func_reply_comment_'+comment_qs_id_list[i]] = $('#reply_comment_id_'+comment_qs_id_list[i]).click(function() {$('#'+'form_comment_id_27').toggle('slow');});
// does not work
//functs['func_reply_comment_'+comment_qs_id_list[i]] = $('#reply_comment_id_'+comment_qs_id_list[i]).click(function() {$('#'+form_comment_id).toggle('slow');});
// works >> toggles everything (but what I want is to hide initially and only toggle after clicking reply button)
//$('#'+form_comment_id).toggle('slow');
};
Thanks so much!
I am switching on the firefox responsive design view from my xul based addon with the following code.
var mytmp = {};
Cu.import("resource://gre/modules/Services.jsm");
Services.prefs.setCharPref("devtools.responsiveUI.presets", JSON.stringify([{name:'tmp1', key: "234x899", width:300,height:300}]));
Cu.import("resource:///modules/devtools/responsivedesign.jsm", mytmp);
var win = window.bridge.myWindow;
mytmp.ResponsiveUIManager.toggle(win, win.gBrowser.tabContainer.childNodes[0]);
Following is the code which toggles the resolution
this.menulist.addEventListener("select", this.bound_presetSelected, true);
/**
* When a preset is selected, apply it.
*/
presetSelected: function RUI_presetSelected() {
if (this.menulist.selectedItem.getAttribute("ispreset") === "true") {
this.selectedItem = this.menulist.selectedItem;
this.rotateValue = false;
let selectedPreset = this.menuitems.get(this.selectedItem);
this.loadPreset(selectedPreset);
this.currentPresetKey = selectedPreset.key;
this.saveCurrentPreset();
// Update the buttons hidden status according to the new selected preset
if (selectedPreset == this.customPreset) {
this.addbutton.hidden = false;
this.removebutton.hidden = true;
} else {
this.addbutton.hidden = true;
this.removebutton.hidden = false;
}
}
},
I tried to access the menulist and do a event trigger myself but couldn't access it. How do I select the dropdown?
paa's answer does work but it creates a new custom entry in the screen presets but doesnt select an existing one. You can do so by triggering a click event on the preset select ui.
Like this
var win = window.bridge.myWindow;
var i = 3 // index of the preset to be selected
var responsiveUI= win.gBrowser.selectedTab.__responsiveUI;
$(responsiveUI.menulist.children[0].children[i]).trigger('click');
Assuming the responsive UI is turned on
gBrowser.selectedTab.__responsiveUI.setSize(320,480);
update:
I took as granted that you want to set an arbitrary size, but you actually ask about the presets. Is this still a valid answer?
I'm generating a 'select' element then populating it with options and inserting it into the DOM of my page. Everything's fine in FF, Chrome, Chromium etc. but in IE no options show in the drop-down list but highlights show under the cursor and when I click in the blank list the event handler gets triggered and processes correctly.
Here's the relevant HTML area:
<span id="spn_fyear" style="position:absolute; top:7px; left:200px; height:24px; cursor:pointer; color:#000000;" onclick="spn_fyear_onclick(this)">
<span id="spn_fyearno" style="position:absolute; top:0px; font:italic bold 17px sans-serif; color:#FFFEF2;"><?=$thisPage->getVar('start_year')?></span>
</span>
and here's the javascript in question:
function spn_fyear_onclick(_obj)
{
//make start year list
var lstto = document.getElementById('lst_year');
var topts = new Array();
var nopt = null;
for(i=0; i<lstto.options.length; i++)
{
topts[i] = lstto.options[i].text;
}
var lstf = document.createElement('SELECT');
lstf.id = "lst_fyear";
lstf.style.position = "absolute";
lstf.style.top = "-3px";
lstf.style.left = "1px";
lstf.style.fontFamily = "sans-serif";
lstf.style.fontWeight = "normal";
lstf.style.fontSize = "12px ";
lstf.style.width = "55px";
lstf.style.color = "#000000";
lstf.style.display = "inline";
lstf.onchange = lst_fyear_onchange;
for(i = 0; i < topts.length; i++)
{
if(topts[i] != 'undefined')
{
nopt = document.createElement('OPTION');
nopt.text = topts[i];
nopt.value = topts[i];
lstf.appendChild(nopt);
}
}
document.getElementById('spn_fyear').appendChild(lstf);
}
In this line: var lstto = document.getElementById('lst_year')
I'm creating a reference to an existing select object from which I copy the option data. lst_year gets populated by a php database query when the page first loads. I created the array (var topts = new Array()) in desperation in case IE has a quirk which copies attributes and properties but to no avail. Like I said - everything works like a dream in FF or Chrome both in Linux and Windoze but falls in a heap with IE. I've scoured MSDN etc. for some obscure behaviour but I'm stumped. Any suggestions would be greatly appreciated :)
Kind regards,
Jen
Most likely, your problem is here:
nopt = document.createElement('OPTION');
Try this method mentioned here:
JavaScript: add extra attribute after new Option()
(I've had a lot of problem with <option> elements and IE before until I started using the new Option constructor.
Iam working in an mvc application and using ckeditor 3.6.2 version. I have used the following code for getting selected html from ckeditor.
CKEDITOR.editor.prototype.getSelectedHtml = function () {
if (CKEDITOR.env.ie) {
this.focus();
selection = this.getSelection();
} else {
selection = this.getSelection();
}
if (selection) {
var bookmarks = selection.createBookmarks(),
range = selection.getRanges()[0],
fragment = range.clone().cloneContents();
selection.selectBookmarks(bookmarks);
var retval = "",
childList = fragment.getChildren(),
childCount = childList.count();
for (var i = 0; i < childCount; i++) {
var child = childList.getItem(i);
console.log(child);
retval += (child.getOuterHtml ?
child.getOuterHtml() : child.getText());
}
return retval;
}
};
I have an issue in chrome browser when I selected a text and call CKEDITOR.instances.editor1.getSelectedHtml().
For example, suppose in my editor there is a content <span style="color:red;">Welcome Note</span>. If I selected "Welcome Note" and call getSelectedHtml() method firefox,safari,IE8 returns "Welcome Note" with span tag, but chrome returns only the text "Welcome Note". If Iam trying to replace the selected content using CKEDITOR.instances.editor1.insertHtml("<div style='font-size:12px'>"+ CKEDITOR.instances.editor1.getSelectedHtml()+"</div>"), in chrome I lost the font color since getSelectedHtml() returns only the selected text. But this works fine with other browsers.
Note : If the content is "Welcome <span
style="color:red;">Note</span>" and the selected word is "Welcome
Note". In this case,this will be correct in chrome and other browsers.
Please suggest a proper solution.
There have been some similar cases that are documented on the CKEDITOR web site. In particular, take a look at this one:
http://cksource.com/forums/viewtopic.php?f=11&t=20202