I upgraded the jquery library from 1.4.2 to 3.4.0 Have a drop down. .val() is returning the selected value as expected, but .text() is returning is entire object. Need to know how to get the displayed text for the selected option.
$('#properties').change(function(){
var selected_id=$('#properties option:selected').val();
var selected_value=$('#properties option:selected').text();
$('#idresult').text(selected_id);
$('#textresult').text(selected_value);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<select id="properties" style="width: 100%; height: 80px;" size="6">
<option value="1">Country</option>
<option value="3">City</option>
<option value="4">Metro Area (Only U.S.)</option>
<option value="2">State/Province</option>
<option value="5">Zip Code (Only U.S.)</option>
</select>
<div id="textresult"></div>
<div id="idresult"</div>
it is working fine when I tried it on jsfiddle and stackoverflow code snippet. But in my code, it is not giving the below values. Any ideas what might have gone wrong. It works fine when I switch back jquery to 1.4.2
selected_id is 1 as expected.
selected_value is k.fn.init [option, prevObject: k.fn.init(1)].
Expecting it to be "Country"
Related
can you help me figure out how to show a notification for specific variants?
If customer selected "IPhone 14" show notification "Thats a Pre-order" and hide this message if the customer changes to "IPhone 13".
{% if selected variant.name contains '14' %}
{p} Thats a Pre-order {/p}
{% endif %}
The main Problem is, that the URL does not change by selecting the variant. Otherwise i could simply check the URL. But in my Case the URL is always the same..
You have a misunderstanding on how liquid works.
Liquid finish executing before the DOM is loaded. (a.k.a the moment you see the page liquid is finished and no code will be processed after that).
What you are describing is interacting with the DOM elements (select or radio buttons) and expecting liquid to execute some code after the variant is changed, which is not possible.
Long story short you need to use Javascript to handle this logic, not liquid.
You can use js to show an specific text for some options and then hide it with all other options, something like this:
$(document).on('change', '.js-variant-id-text', function() {
let
variant_id = this.value,
variant_text = $('.single-product-text[data-variant="' + variant_id + '"]');
variant_text.show()
//get all single product text div's, if it isn't a variant text, hide it.
$(".single-product-text").not(variant_text).hide()
})
.single-product-text {
display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="{{option_name}}" id="select-{{option_name}}" class="js-variant-id-text">
<option class="js-variant-radio" value="placeholder" disabled selected>Select one</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<div class="single-product-text single-option-selector" data-variant="1" style="">Some text for option 1</div>
<div class="single-product-text single-option-selector" data-variant="2" style="">Some text for option 2</div>
<div class="single-product-text single-option-selector" data-variant="3" style="">Some text for option 3</div>
I'm trying to use tooltipster jQuery plugin, but it doesn't work for or tag :
I've just tried this simple code :
<div id="my-tooltip">
This div has a tooltip with HTML when you hover over it!
</div>
--> div works fine
<select id="my-tooltip" name="select">
<option value="value1">Valeur 1</option>
<option value="value2" selected>Valeur 2</option>
<option value="value3">Valeur 3</option>
</select>
--> select doesn't work
<span id="my-tooltip">
test with span
</span>
--> span doesn't work
Could you please help me ?
here is my page
thank you all !
From looking at your code and site the issue is due to your multiple use of the id my-tooltip. IDs should only be used once to identify one node. A simple test can be done to prove this using jQuery, try running this on the page:
jQuery('#my-tooltip')
You'll see that only one node is returned, this is the one that has your initialised tooltip.
To fix this you'll need to change your nodes to use classes, i.e.
<div class="my-tooltip">
This div has a tooltip with HTML when you hover over it!
</div>
<select class="my-tooltip" name="select">
<option value="value1">Valeur 1</option>
<option value="value2" selected>Valeur 2</option>
<option value="value3">Valeur 3</option>
</select>
<span class="my-tooltip">test with span</span>
In your tooltipster setup, you'll want to have the following selector and options enabled:
jQuery('.my-tooltip').tooltipster({
// Original setup
content: jQuery('<span><img src="/../../../popup.png" /> <strong>This text is in bold case !</strong></span>')
// Additional options
multiple: true,
contentAsHTML: true
});
I hope this helps! :)
I have a shared view that is going to be called for each item in a collection. In this view I want to have a dropdown list that will contain the Id, Text and image url of the information selected item. When an Item is selected I want to show the image in an image tag.
I got to this code
<select id="themes" onchange="javascript:document.getElementById('themePlaceHolder').src=this.options[this.selectedIndex].getAttribute('data-url')">
<option value="" data-Url="" >Select a theme</option>
#foreach(Theme theme in Model.Themes) {
<option value="#theme.Id" data-url="#theme.Url" >#theme.Name</option>
}
</select>
<img id="themePlaceHolder" src="" />
This works perfectly when my collection has only one element, but if it has 2 or more, I have issues with the ID used to identify the image tag because it is duplicated.
Is there anyway to generate the ID so it isn't duplicated but still reference it on my onchange element?
Try with jQuery:
Pseudo code:
<select class="themes">
<option value="" data-Url="" >Select a theme</option>
#foreach(Theme theme in Model.Themes) {
<option value="#theme.Id" data-url="#theme.Url" >#theme.Name</option>
}
</select>
<img id="themePlaceHolder" src="" />
$(".themes").change(function(){
// to get selected text
$(this + " option:selected").text();
// to get selected value
$(this).val();
// Now do what ever you want using this value
});
I'm trying to test a registration form with Selenium IDE, but am having trouble with select elements from the Chosen library:
http://harvesthq.github.io/chosen/
I wonder if you can help me with the commands to select an option (could be any option by the way). I couldn't get past opening the dropdown with a simple mouseDown. Here's a sample webpage with both a single and multi select (download source files from the repository above.
<html>
<head>
<link rel="stylesheet" href="chosen/public/chosen.min.css">
<link rel="stylesheet" href="chosen/public/chosen.jquery.min.css">
<script src="jquery-1.10.2.min.js"></script>
<script src="chosen/public/chosen.jquery.min.js"></script>
</head>
<body>
<select multiple class="chzn-select" style="width: 150px;">
<option value="Test 1">Test 1</option>
<option value="Test 2">Test 2</option>
<option value="Test 3">Test 3</option>
</select>
<br><br>
<select class="chzn-select" style="width: 150px;">
<option value="Test A">Test A</option>
<option value="Test B">Test B</option>
<option value="Test C">Test C</option>
</select>
<script type="text/javascript">
$(".chzn-select").chosen();
</script>
</body>
</html>
Ok I did manage to crack it myself and it was as simple as:
Command: clickAt
Target: css=#id_country_chzn_o_1
(chooses the first item on a list of countries, use Firebug to find out what your ids are called)
Following steps solves this issue:
Step 01.
Command: clickAt
Target: id=iNationality_chosen
Step 02.
Command: clickAt
Target: css=div[id='iNationality_chosen'] div ul li:nth-child(2)
Note 01: iNationality_chosen here you can replace the id with your element ID
Note 02: li:nth-child(2) here you can provide any number that you a wish to select. 2 will be selecting the second child (option list).
I have same problem before. The solution is pretty simple and normal. This is the best practice for Select command in Selenium IDE. Here it is:
Command : Choose select as your Command
Target : Select your element ID you want to point at
Value : Set your value using this format index=1 // this is the most important thing, and then you can change the number to your prefered number
For example:
Command: select
Target: id=province
Value: index=2
Good luck!
I had a similar issue using selenium api and robotframework. The element wasn't clickable because chosen adds a display:none. I solved it by executing a jquery javascript which removes the style attribute.
In robotframework style:
Execute Javascript $("#id").removeAttr("style");
Where id is the id of the select.
I have an ASP.Net MVC app, and when a user clicks a certain link, I do the following:
var orderID = returnStatus["Data"];
var url = '#Url.Content("~/OrderEntry/OrderDetail")?orderID=' + orderID;
window.location.href = url;
This works great, however, when I click the back button, my html dropdown changes from:
Zone: <select id="Zones" name="Zones" style="width: 150px"><option value="1">Zone 1</option>
<option value="2">Zone 2</option>
<option value="3">Zone 3</option>
<option value="4">Zone 4</option>
</select>
to this:
Zone: <select id="Zones" name="Zones" style="width: 150px"><option value="QUOTE">Quote</option>
<option value="SUBM">Submitted</option>
<option value="INPRD">In Production</option>
<option value="CANC">Cancelled</option>
<option value="COM">Complete</option>
<option value="CH">Credit Hold</option>
</select>
These statuses are defined in a dropdown later in the code, and I'm not sure why they have moved up to this dropdown?
Both of these dropdowns are populated from the model. It's almost as if the model is trying to re-generate this html, but the values are somehow incorrect?
Here is the Razor syntax:
Zone: #Html.DropDownList("Zones", Model.Zones, new { style = "width: 150px" } )
This doesn't appear to happen in Firefox or Chrome.
Apparently it had to do with the fact that my ID was called "Zones". I changed this ID to AcctManagerZones and everything is working fine now.
Edited: It appears this wasn't exactly the answer either. It apparently has to do with the way IE caches the page. I still got the same thing, until I turned page caching off, then it worked.