This is only for IE.
I have a function noted below it copies the content of the div when the div is clicked. It works fine. It used the getElementById.
I have 19 items I would like to use this for ... 'option1 - option19.
Instead of having to create 19 variables is there any other way of doing this...
I am totally a noob to this stuff....
function CopyToClip() {
var Cdiv = document.getElementById('option1');
Cdiv.contentEditable = 'true';
var controlRange;
if (document.body.createControlRange) {
controlRange = document.body.createControlRange();
controlRange.addElement(Cdiv);
controlRange.execCommand('Copy');
}
div.contentEditable = 'false';
}
I should mention that these id's are for Divs.
These divs are a show / hide based on a drop down selection.
The drop down has its on function to show the selected div.
The function is:
$(window).load(function () {
$(document).ready(function () {
$('.block').hide();
$('#option1').show();
$('#selectField').change(function () {
$('.block').hide();
$('#' + $(this).val()).fadeIn();
});
});
});
My HTML is:
<div class="col_1">
<h1>communication:</h1>
<div class="box">
<select id="selectField" style="padding-left: 20px;width:175px">
<option value="option1">Device Shipped to ASC</option>
<option value="option2">Device Received at ASC</option>
<option value="option3">ASC Shipped Device to Store</option>
<option value="option4">Device Pick-up Follow-up</option>
<option value="option5">Device Pick-up Final Reminder</option>
<option value="option6">Impress Phase Direct Feedback</option>
<option value="option7">Abandon Notice</option>
<option value="option8">Mailer Shipped to Client</option>
<option value="option9">Mailer Received by Client</option>
<option value="option10">Mailer Pick-up Notice</option>
<option value="option11">Mailer Final Pick-up Notice</option>
<option value="option12">Mailer Failed to Pick-up</option>
<option value="option13">Mailer Return Defective Device Notice</option>
<option value="option14">Mailer Final Return Defective Device Notice</option>
<option value="option15">Mailer Failed to Return Defective Device</option>
<option value="option16">Mailer Defective Device Received at ASC</option>
<option value="option17">Mailer Charges to Customer</option>
<option value="option18">Mailer Process Confirmation</option>
<option value="option19">Quote Un-replied</option>
</select>
<div id="option2" class="block" style="background-color:white" onClick="javascript:CopyToClip()"> blah </div>
Had I have 19 of this divs.
I don't know if this helps ... Sorry I am in way over my head on this one.
I had to hack things about a little, and your clipboard code will not work on all browsers:
JSFiddle: http://jsfiddle.net/THU5f/2/
function CopyToClip($div) {
var div = $div[0];
div.contentEditable = 'true';
var controlRange;
if (document.body.createControlRange) {
controlRange = document.body.createControlRange();
controlRange.addElement(div);
controlRange.execCommand('Copy');
alert("Copied: " + div.html());
}
div.contentEditable = 'false';
}
$(function () {
// Hide copy button
$('#copy').hide();
// Hide all content divs
$('.content').hide();
$('#selectField').change(function () {
// Show the copy button
$('#copy').show();
// Hide all content divs
$(".content").fadeOut();
// Show the select content div
$('#' + $(this).val()).fadeIn();
});
$('#copy').click(function(){
// Get the div the current selection points to
var $div = $('#' + $('#selectField').val());
// Copy the div to the clipboard
CopyToClip($div);
});
});
I added comments throughout. Hope this helps.
I've been working on similar thing lately. I was supposed to show/hide DIV depending on the selection. The HTML code is generated and there can be 1 to 8 selects generated, with each dependent div shown under the its select. I came up with this solution.
"Second half" of the code basically finds all select elements with given ID, loops trough them and depending on the selected value, shows or hides the div. I had to use this selectors: $('*[id*=delegate_form]') and $('*[id*=show_hidden_delegate'), because if I used $("#delegate_form") the code only affected the element with index 0. I have no idea why.
First half of the code handles the same situation on the read-only page.
Related
I have some javascript in one of my survey questions that changes the formatting of a certain field. It works great, but I would like to apply the same code to several other questions. Obviously, I can simply copy and paste onto each question, but is there any way to have the code set in a single location so that it is more maintainable? I've looked on a number of forums but haven't been able to find a solution. Thanks in advance for your help.
EDIT:
Here is the JavaScript code that I would like to be repeated for multiple questions:
{
/*Place your JavaScript here to run when the page is fully displayed*/
jQuery("#"+this.questionId+" select option:first-child").text("Select one");
jQuery("#"+ this.questionId + " option").each(function () {
if (jQuery(this).text().includes("\"\"")) {
jQuery(this).hide();
}else{
title = jQuery(this).text()
title = title.match(/".*"/)
if(title != null && title[0].length > 30){
newTitle = title[0].match(/^.{30}.*?\s/)[0]
if(newTitle != title){
newTitle = newTitle + "...\""
}
text = jQuery(this).text()
jQuery(this).text(text.replace(title[0],newTitle))
}
}
});
});
Basically, there is some embedded data preloaded for each contact, and several questions involve a dropdown menu that allows users to select which of their data elements was relevant to a project. This code ensures that blank or missing data does not get included in the dropdown, and also if the option is too many characters long, it gets truncated. Multiple questions include the same dropdown options, but differ in other ways.
Make your code a function and put it in the Qualtrics header. Call the function from each question where it applies.
In the header:
<script>
myFunction(qobj) {
jQuery("#"+qobj.questionId+" select option:first-child")...etc...
}
</script>
Then in your questions:
Qualtrics.SurveyEngine.addOnload(function() {
myFunction(this);
});
Add the same class to each of your question (I chose myQuestion class) then query it.
Loop through each select and find the option:first-child and then find the options and loop through each of them.
$('.myQuestion select').each(function(selectIndex, select){
// loop through each select
// for each select find all the options
$(this).find("option:first-child").text("Select one");
$(this).find('option').each(function(optionIndex, option){
console.log(`select (${selectIndex}) | option (${optionIndex})`);
// your code here
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="myQuestion">
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
<div class="myQuestion">
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
I'm trying to select a drop-down value using js. In my case, I need to select "DRAW PORTRAIT" drop-down option after the plugin loads.
I tried two methods but I'm not getting anywhere. This is a part of the frontend found in Bookly WordPress plugin. I added an id id="category" to the dropdown so that I can select a value.
HTML:
<div class="bookly-js-chain-item bookly-table bookly-box" style="display: table;">
<div class="bookly-form-group">
<label>Service Type</label>
<div>
<select id="categorydraw" class="bookly-select-mobile bookly-js-select-category">
<option value="">Select category</option>
<option value="6">DRAW PORTRAIT</option>
<option value="7">DRAW DUMMY FIGURE</option>
<option value="8">DESIGN WAX SCULPTURE</option></select>
</div>
</div>
</div>
Method 01
document.getElementById("categorydraw").value = "DRAW PORTRAIT";
Method 02
var objSelect = document.getElementById("categorydraw");
setSelectedValue(objSelect, "DRAW PORTRAIT");
function setSelectedValue(selectObj, valueToSet) {
for (var i = 0; i < selectObj.options.length; i++) {
if (selectObj.options[i].text== valueToSet) {
selectObj.options[i].selected = true;
return;
}
}
}
Please see the full code where the js doesn't work: https://jsfiddle.net/3z5hcv62/
I would really appreciate if someone can correct my cranky code. Thanks in advance!
One line of jQuery will allow you to select the item necessary:
$('#categorydraw option[value="7"').prop("selected", true);
https://jsfiddle.net/fLc1p5mq/
Edit: In order to activate on a WordPress page load, use:
jQuery( document ).ready(function() {
jQuery('#categorydraw option[value="7"').prop("selected", true);
});
First, i want to make sure. Do you want to select the value of the dropdown or set the value to the dropdown?. Maybe this will help your problem.
HTML
<!-- I set the "categories" id to the dropdown -->
<select class="bookly-select-mobile bookly-js-select-category" id="categories">
<option value="">Select category</option>
<option value="1">Cosmetic Dentistry</option>
<option value="2">Invisalign</option>
<option value="3">Orthodontics</option>
<option value="4">Dentures</option>
</select>
<p>
Selected value: <strong id="selected"></strong>
</p>
JavaScript
var dropdown = document.getElementById('categories');
var datas = [];
var select = 3;
/* Get value with text from dropdown */
for(var i=0;i<dropdown.options.length;i++) {
datas.push({
id: dropdown.options[i].value,
text: dropdown.options[i].text,
});
}
/* For set the value */
dropdown.value = select; // after page loaded,, default value will selected is "Orthodontics"
/* For select current value with the text */
var dataSelected = datas[select];
document.getElementById('selected').innerHTML = "ID: "+dataSelected.id+", TEXT: "+dataSelected.text;
The result will show like this https://jsfiddle.net/65jnzLko/1/
You can improve that code. Like selecting datas by id of the dropdown value.
Or if you just want to set the value for your dropdown, you can do this
// using pure js
document.getElementById('yourdropdown').value = 3 // or other values
// using jquery
$("#yourdropdown").val(5) // 5 can replace with other values
echo "<select name = error_type id='error_type$rowIndex' name='error_type$rowIndex' class='error_type'>
<option value= >Select Type</option>
<option value=Category1>Category1</option>
<option value=Category2>Category2</option>
</select>
</td><td>
<select disabled=disabled id='remarks$rowIndex' name='remarks$rowIndex' class='remarks'>
<option value= >Select Subtype </option>
<option rel='Category1' value='Subcategory1.1'>Subcategory1.1</option>
<option rel='Category1' value='Subcategory1.2'>Subcategory1.2</option>
<option rel='Category1' value='Subcategory1.3'>Subcategory1.3</option>
<option rel='Category2' value='Subcategory2.1'>Subcategory2.1</option>
<option rel='Category2' value='Subcategory2.2'>Subcategory2.2</option>
<option rel='Category2' value='Subcategory2.3'>Subcategory2.3</option>
</select>";
I have a php table which outputs 'n' number of rows,each row with 2 dropdowns. The above section of code works only for the first row of the Php table, but when the next row is changed, the first row's subcategory also changes.How do i make individual rows act independently.
the js is,
$(function(){
var $error_type = $(".error_type"),
$remarks = $(".remarks");
$error_type.on("change",function(){
var _rel = $(this).val();
$remarks.find("option").attr("style","");
$remarks.val("");
if(!_rel) return $remarks.prop("disabled",true);
$remarks.find("[rel="+_rel+"]").show();
$remarks.prop("disabled",false);
});
});
The cs is,
.remarks option{
display:none;
}
.remarks option.label{
display:block;
}
--EDIT--
$(function(){
var $error_type = $(".error_type"),
$remarks = $(".remarks");
$error_type.on("change",function(){
var $remarks = $(this).closest("tr").find(".remarks");
var _rel = $(this).val();
$remarks.find("option").attr("style","");
$remarks.val("");
if(!_rel) return $remarks.prop("disabled",true);
$remarks.find("[rel="+_rel+"]").show();
$remarks.prop("disabled",false);
});
});
This is going to resolve to all matching elements:
$remarks = $(".remarks");
You're doing that once when the page loads and then always operating on all of those elements. Instead, remove that line completely and find the specific element you're looking for when the event happens, using the source of the event as a starting point.
Perhaps something like this:
$error_type.on("change", function(){
var $remarks = $(this).closest("tr").find(".remarks");
// the rest of your handler code
});
The idea is that when the change event happens, you start from this (which is the element that triggered the event), traverse the DOM to a common parent element (given your HTML that's likely a <tr>), then finds the specific target .remarks element(s) contained specifically within that parent.
I have two selectmenus, one of which $('#parent') relates to certain options in the $('#members') menu (related through a data attribute in their HTML). I have a function to limit the choices in 'members' where they relate to the choice selected in the parent menu.
SCRIPT
$("#parent").selectmenu();
$("#members").selectmenu();
var allMembers = $('#members option'); // keep object list of all of the options for the select menu
$("#parent").on("selectmenuchange", function() {
var someMembers = [];
var id = $('#parent option:selected').data('id');
allMembers.each(function() {
if ($(this).data('parent-id') == id) {
someMembers.push($(this))
}
});
$('#members').empty().append(someMembers);
});
At the moment, this works, but only on the first selectmenuchange event - which is odd because using console.log() when the arrays are recreated in the function I can see that the correct have been selected each time, they just don't show in the menu on subsequent changes.
I can't figure out if this is a problem with selectmenuchange or empty().append()
HTML
<select name="members" id="members">
<option data-id="101" data-parent-id="1">Name1</option>
<option data-id="102" data-parent-id="1">Name2</option>
<option data-id="103" data-parent-id="1">Name3</option>
<option data-id="104" data-parent-id="2">Name4</option>
<option data-id="105" data-parent-id="2">Name5</option>
<option data-id="106" data-parent-id="3">Name6</option>
<option data-id="107" data-parent-id="3">Name7</option>
</select>
<select name="parent" id="parent">
<option data-id="1">Parent1</option>
<option data-id="2">Parent2</option>
<option data-id="3">Parent3</option>
</select>
Well the options were changing but it wasn't reflecting in the selectmenu created by plugin. So one of the way is you destroy it and re-initialize the selectmenu as below:
$('#members').html(someMembers).selectmenu('destroy').selectmenu();
DEMO
Instead of selectmenu('destroy') and re-initializing the select menu you can also use selectmenu('refresh'). Refreshing sounds nicer than destroying it each time.
I have updated the fiddle of Guruprasad Rao with the refresh:
fiddle
I have this code:
<select multiple="multiple" class="image-picker show-html">
<option data-img-src="http://placehold.it/125x200" value="1">SportField 1</option>
<option data-img-src="http://placehold.it/125x200" value="2">SportField 2</option>
<option data-img-src="http://placehold.it/125x200" value="3">SportField 3</option>
<option data-img-src="http://placehold.it/125x200" value="4">SportField 4</option>
</select>
And then using Image Picker Plugin I wrote this piece of code:
<script>
$(function() {
$("select").imagepicker({
show_label: true,
changed: function() {
},
clicked: function() {
},
selected: function() {
console.log(this.attr('value'));
}
})
});
</script>
What I need here and need some help from community is allow just some certain of choices. Right now the only choices allowed are:
SportField1-SportField2
SportField3-SportField4
SportField1-SportField2-SportField3-SportField4
What this means? When I pick the SportField1 I can select SportField2 meaning adjacent images but if you can see the latest allowed choice is the fourth SportField. How I can achieve this?
EDIT
Based on #Ruud suggestions I made the following changes, the HTML code is this one:
<select name="choice" id="choice">
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
<option value="5">AB</option>
<option value="6">CD</option>
<option value="7">ABCD</option>
</select>
<img src="http://placehold.it/125x200" data-id="A">
<img src="http://placehold.it/125x200" data-id="B">
<img src="http://placehold.it/125x200" data-id="C">
<img src="http://placehold.it/125x200" data-id="D">
<script>
$(function() {
$('choice').change(function() {
});
});
</script>
Now to explain a bit:
if I pick choice A in select then image with data-id=1 should get a line (this can be done by CSS)
if I pick choice B in select then image with data-id=2 should get a line (this can be done by CSS)
if I pick choice C in select then image with data-id=3 should get a line (this can be done by CSS)
if I pick choice D in select then image with data-id=4 should get a line (this can be done by CSS)
if I pick choice AB in select then image with data-id=1 and image with data-id=2 should get a line (this can be done by CSS)
if I pick choice CD in select then image with data-id=3 and image with data-id=3 should get a line (this can be done by CSS)
if I pick choice ABCD in select then all images should get a line (this can be done by CSS)
How I can achieve this on SELECT change?
The following function checks whether a particular image belongs in the current selection.
It does require you to use the picture IDs (e.g. ABCD) in the option's value; this seemed more logical to me than the 'magic numbers' 1-7.
function isSelected(selector, image) {
return selector.find(':selected').text().indexOf(image.data('id')) >= 0;
};
It wasn't clear to me what you meant by "image should get a line", so I just made a simple demo that applies a CSS class to the selected images.
Please note I added the hash in $('#choice'); choice is an id, not a tag name.
$(function() {
$('#choice').change(function() {
var choice = $(this); // = $('#choice');
var allImages = $('img');
var selectedImages = allImages.filter(function() { return isSelected(choice, $(this)); });
allImages.removeClass('myprecious');
selectedImages.addClass('myprecious');
});
});
FYC, here's a demo: http://jsfiddle.net/UrKBZ/