This is a followup question. I've been trying to grab the selected text from multiple iframe using rangy. The code seems to be working for 1st iframe .
i want to grab elements using the same button., for div it works k. but in iframe we need to specify the iframe and when i tried the array of iframes ., that is not working
Use jQuery $.each:
$(function () {
$('button').click(function () {
$.each(iframe, function(idx, vl) {
var selection = rangy.getSelection(iframe[idx]);
alert(selection);
});
});
});
Demo: http://jsfiddle.net/cWV3G/
Here is the Working Fiddle
Try getting the the Rangy iframe selection object and access the FocusNode property and get the selected text from that iframe like this:
JS:
$(function () {
$('button').click(function () {
iframe.each(function(i){
if(rangy.getSelection(iframe[i]).focusNode!=null)
{
var selection = rangy.getSelection(iframe[i]).focusNode.data;
alert("Iframe - "+(i+1)+ " selected text : '" +selection+"'");
}
});
});
});
Related
This question already has answers here:
How to select an element inside "this" in jQuery?
(2 answers)
Closed 2 years ago.
Hi I'm trying to use jquery to autoupdate an input field which is wrapped around a contenteditable div. There are multiple such divs that is generated by the backend code, and I would like each input to update only if its parent's div's contenteditable has been updated. The html looks something like this:
<div class="to-change" contenteditable="true">
Text that can be edited
<input name="autoupdate">
</div>
I have tried using the following jquery code:
<script>
$( document ).ready(function() {
console.log( "ready!" );
$('.to-change').on("keyup", function() {
var input = $(this).text()
$('input:first-child').val(input)
})
});
</script>
The thing is when I try to change the text, every other such divs' input field will also be updated with the same text. How do I change the jquery code such that the input field will always take reference from its own parent div?
Thanks!
You can Select that element like this:
$(document).ready(function () {
console.log("ready!");
$('.to-change').on("keyup", function () {
var input = $(this).text()
$('.to-change > :first-child').val(input);
});
})
Or:
$(document).ready(function () {
console.log("ready!");
$('.to-change').on("keyup", function () {
var input = $(this).text()
$('.to-change > input').val(input);
});
})
">" Used for selecting Direct childs of an Element, You can find More about this selector in https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator
I have more similar elements in HTML which are being added continously with PHP. my question is the following:
With jQuery, I would like to add a click event to each of these <div> elements. When any of them is being clicked it should display it's content. The problem is that I guess I need to use classes to specify which elements can be clickable. But in this case the application will not be able to decide which specific element is being clicked, right?
HTML:
<div class="test">1</div>
<div class="test">2</div>
<div class="test">3</div>
<div class="test">4</div>
<div class="test">5</div>
jQuery try:
$("test").on("click", function()
{
var data = ???
alert(data);
});
UPDATE - QUESTION 2:
What happens if I'm placing <a> tags between those divs, and I want to get their href value when the DIV is being clicked?
I always get an error when I try that with this.
this refers to the element triggering the event. Note that it is a regular js element, so you'll need to convert it to a jQuery object before you can use jQuery functions: $(this)
$(".test").on("click", function()
{
var data = $(this).text();
alert(data);
});
Like this:
$(".test").on("click", function(event)
{
var data = $(event.target);
alert(data.text());
});
this variable contains the reference of current item
$(document).ready(function() {
$(".test").click(function(event) {
var data = $(this).text();
alert(data);
});
})
;
The class selector in jquery is $(".ClassName") and to access the value, use $(this) as such:
$(".test").on("click", function(){
var data = $(this).text();
alert(data);
});
You can use this inside the function which mean clicked div
DEMO
$(".test").on("click", function () {
alert($(this).html());
});
I have been trying to create a form which changes depending on the users entry. So far I have been successful in using a radio input to change which content is to be shown, but I am having trouble editing the JS to work with a drop down menu.
HTML
<div class="show-and-hide-content">
<select>
<option></option>
<option data-type="true">true</option>
<option data-type="false">false</option>
</select>
<div class="hidden content content-true">You have selected true.</div>
<div class="hidden content content-false">You have selected false.</div>
</div>
CSS
.hidden {
display:none;
}
Javascript
$(function () {
$('.show-and-hide-content').each(function (i) {
var $row = $(this);
var $selects = $row.find('select');
$selects.on('change', function () {
var type = $(this).attr('data-type');
$row
.find('.content').hide()
.filter('.content-' + type)
.show();
});
});
});
Working radio button JSFiddle
Non working drop down JSFiddle
I know that the JQuery is finding the right elements and is changing the display of them, but it never changes the display to make them visible. I think the problem may be that the JS isn't correctly getting the data-type variable from the option's.
I want the JQuery to work as intended and show the correct divs based on the users selection.
How can I amend the code to do this? Thanks for helping.
You now got:
var type = $(this).attr('data-type');
Since the function is called on the <select>, you select the data-type attribute of the <select> (which is defined), and not from the <option>.
So, you'll need to find the selected <option>:
var type = $(this).find('option:selected').attr('data-type');
Check the updated Fiddle.
[EDIT]
If you want to simplify your code, you could use this:
$(function () {
$('.show-and-hide-content select').on('change', function() {
$(this).parent().
find('.content').hide()
.filter('.content-' + $(this).find('option:selected').attr('data-type') ).show();
});
});
Demo.
Or change your select data-type to value and use
var type = $(this).val();
DEMO
Try this one
$(function () {
$('#select').on('change', function () {
var selctedval = $(this).val();
$('.content').hide();
$('.content-' + selctedval).show();
});
});
This will use whatever value you have in the "data-type" attribute and match it to the "content-" class that you have on the message. If there is no matching message then, no message will show.
$('.show-and-hide-content select').on('change', function(){
var selected = $(this).find('option:selected').data('type');
$('.content').addClass('hidden');
$('.content-' + selected).removeClass('hidden');
});
Here is a fiddle
I have an unordered list and I want to change the text on a button when a list item is clicked to the text in the list item. So far, I have:
$(document).ready(function() {
$('.List-item').on("click",function(){
$('#selectedOption').text("hi");
});
});
This will change the button text to hi when any list item is clicked. How can I get the button to display the list item text? Do I need to pass the list item into the function?
try:
$(document).ready(function() {
$('.List-item').on("click",function(){
$('#selectedOption').text($(this).text());
});
});
Because this will refer to what you click.
Also, you can use
event.target.innerText
to get the clicked li text without jQuery
.text will give you the text
$(document).ready(function() {
$('.List-item').on("click",function(){
alert( $('option:selected', this).text());
var txt = $('option:selected', this).text();
});
});
Try This:
$(document).ready(function() {
$('.List-item').on("click",function(){
$('#selectedOption').text($(this).text());
});
});
this refers to the object on which onclick is triggered.
You can try
$(document).ready(function() {
$('.List-item').on("click",function(){
$('#selectedOption').text($(this).text());
});
});
I am trying to mimic the HTML form present on this link: http://maati.tv/uploads/
I am making it to put on a company's Facebook page.
Now, the issue I am running into is that I am unable to display different fields depending upon the select radio button. I know it requires JavaScript. I've got the related script from this link: https://stackoverflow.com/a/14127709/1315163
$(".radioSelect").each(function () {
showSpecificFields(this);
});
$(".radioSelect").click(function () {
showSpecificFields(this);
});
function showSpecificFields(obj) {
if ($(obj).is(":checked")) {
var radioVal = $(obj).val();
$(".fieldsSpecific").each(function () {
if ($(this).attr('id') == radioVal) {
$(this).show();
} else {
$(this).hide();
}
});
}
}
Can anyone please help me with it? Rest of the code is in this jsFiddle: http://jsfiddle.net/DDJNc/2/
Thanks.
Your answer:
$(".radioSelect").each(function(){
showSpecificFields(this);
});
$(".radioSelect").click(function(){
showSpecificFields(this);
});
function showSpecificFields(obj){
if($(obj).is(":checked")){
var radioVal = $(obj).val();
$(".fieldsSpecific").not('.'+radioVal).each(function(){
$(this).hide();
});
$(".fieldsSpecific."+radioVal).each(function(){
$(this).show();
});
}
}
Check the HTML also
http://jsfiddle.net/DDJNc/4/
. (dot) css selector selects elements containing a given class. That class SHOULD BE present on your HTML for it to work!
Don't use the id attribute for that because you are trying to match a set of elements that belong to a class and not a single element.