Unable to select the text in android phonegap - javascript

I want to get selected text from android phonegap. I have some text in htmlpage when i selected some text i want to get it back and change the color of selected text.But i am unable to select text. My text data is in div.Please help me. Here is my code.
<body>
<div data-role="page">
<div data-role="content">
</div>
<div id="log">
</div>
</body>
<script>
$.ajax({
type:'GET',
url: 'http://10.0.2.2:7080/example/TranscriptVieww',
dataType:'text',
success: function(data){
$( "#log" ).append(data);
},
error: function(){
alert("There was an error loading the data.");
}
});
</script>

This will work in a browser but not sure about mobile webview. Give it a shot:
function GetSelectedText () {
if (window.getSelection) {
var range = window.getSelection ();
//range is the selected text
}
}
Wait... Are you talking about user selected text, programmatically selected text, or just all the text from the "log" div? The above will work for user selected and programmatically selected text but not getting all content from a div. If you just want all content from the log div just do a simple innerHTML call:
var selectedText = document.getElementById('log').innerHTML;

you can use this javascript method to get selected content from any page.
var selectedText = getselectedcontent();
alert(selectedText);
--------------------------------
function getselectedcontent() {
var selection = window.getSelection();
var range = selection.getRangeAt(0);
if (range) {
var div = document.createElement('div');
div.appendChild(range.cloneContents());
return div.innerHTML;
} else {
return "";
}
}

Related

How to copy without losing selection javascript?

I am using a code in which it inserts a text containing the url of the current page after the person copies the selection (ctrl-c) and does this in a hidden part of the page, however when the person presses ctrl-c the selection some, would you have some way to copy and include the url of the current page without losing the selection? Sorry for the english, it was translated via google translator
<!DOCTYPE html>
<html>
<head>
<script>
function addLink() {
//Get the selected text and append the extra info
var selection = window.getSelection(),
pagelink = '<br /><br /> Read more at: ' + document.location.href,
copytext = selection + pagelink,
newdiv = document.createElement('div');
//hide the newly created container
newdiv.style.position = 'absolute';
newdiv.style.left = '-99999px';
//insert the container, fill it with the extended text, and define the new selection
document.body.appendChild(newdiv);
newdiv.innerHTML = copytext.replace(/\n/g, "<br />");
selection.selectAllChildren(newdiv);
//remove a novadiv
window.setTimeout(function () {
document.body.removeChild(newdiv);
}, 100);
}
document.addEventListener('copy', addLink);
</script>
</head>
<body>
<div id='perg'>Text to copy</div>
</body>
</html>
Not sure this is what you want. I actually created a div (displayed) that is just static and not dynamically created like you have for demo purposes. If I understand correctly you want to keep the current selection selected while copying the text and the location href to that div ? If you want the text you actually can use .toString(), and in your code, when you use selection.selectAllChildren you are deselecting the text that you copied from. Hard to undestand really exactly what you are asking.
<!DOCTYPE html>
<html>
<head>
<script>
function addLink() {
let hiddendiv = document.getElementById('copiedstuff');
let selection = window.getSelection();
let selectiontext = window.getSelection().toString();
pagelink = '<br /><br /> Read more at: ' + document.location.href;
copytext = selectiontext + pagelink;
hiddendiv.innerHTML = copytext.replace(/\n/g, "<br />");
}
document.addEventListener('copy', addLink);
</script>
</head>
<body>
<div id='perg'>Text to copy</div>
<div id='perg1'>Something Else</div>
<div style = "margin-top:20px;border:1px solid black;">
<div id='copiedstuff'></div>
</div>
</body>
</html>

HTML content is not being cleared by innerHTML, just added to the bottom of previous loaded content

For a university project, I'm displaying jobs in Leeds using mainly JavaScript and JSON. The idea is that the JSON part-time file is shown on page load, then a user can select a different job category and then it loads the new JSON file and replaces the HTML.
I believe my code is almost there, I've attempted to figure out how to call a function again as my previous code had lots of repetition. However, instead of replacing the innerHTML when an option is selected, it just adds the new content to the bottom of the previous option's HTML. I can't figure out why this is?
I've attempted to clear the ID before the function starts again but this doesn't work. Perhaps I'm not calling my functions correctly?
Any help would be greatly appreciated!
window.onload = function() {
var jobURL = "";
//Run function
loadJobs();
//If dropdown is changed
function change(){
var jobType = document.getElementById("jobtype");
var selectedValue = jobType.options[jobType.selectedIndex].value;
if (selectedValue == "part") {
var jobURL = "https://example.com/reed_parttime.php";
}
if (selectedValue == "temp") {
var jobURL = "https://example.com/reed_temp.php";
}
if (selectedValue == "graduate") {
var jobURL = "https://example.com/reed_graduate.php";
}
return jobURL;
}
document.getElementById("jobtype").onchange = change;
//Show jobs function
function loadJobs() {
document.getElementById("results").innerHTML = "";
var URL = change();
$.getJSON(URL, function(data) {
data.results.forEach(function(jobinfo) {
HTMLTemplate += `
<div class="row">
<a href="${jobinfo.jobUrl}" target="_blank">
<p>${jobinfo.jobTitle}</p>
<p>${jobinfo.employerName}</p>
<p>${jobinfo.jobDescription}</p>
</a>
</div>
`;
});
document.getElementById("results").innerHTML = HTMLTemplate;
});
}
//Repeat function again when button is clicked
document.getElementById("submitBtn").addEventListener("click", loadJobs);
}

How can I create an HTML range slider and add it within a variable type in Javascript?

I am trying to display a range slider after every title and content is printed out. However, whenever I try to add the range slider in my javascript code, it gets displayed as an input box and javascript does not recognize it as a range slider html option. What can I do to display the range slider after every title and content is displayed? I've included the parts of my code that allows the list to be posted using HTML and Javascript.
<ul id="list-posts">
<!--
list of posts
<li>
<H3>Title
<p>Content
-->
</ul>
function getPosts(){
var query = new Parse.Query(Post);
query.find({
success: function(results){
var output = "";
var content = "";
for(var i in results){
var title = results[i].get("title");
var content = results[i].get("content");
//var range = [Range(0f, 100f)];
//console.log("Title:"+title);
output += "<li>";
output += "<h3>MAC Address: "+title+"</h3>";
output += "<p>Location: "+content+"</p>";
output += "</li>";
output += "<input type=range/>"; //This is the part that isn't recognized and is displayed as just an input type and not the HTML type of range slider
}
$("#list-posts").html(output);
}, error: function(error){
console.log("Query Error:"+error.message);
}
});
}
getPosts();

JQuery how to click html element to copy into text area?

Is it possible to click text in a list to add into a text box. I have made a JSON api that gets a list of people in the database. I then have a form that has a text field and displays the list of people. I would like to click a particular person and add it to the text box.
main.js
var ajax_call = function() {
var $people = $('#people');
$.ajax({
type: 'GET',
url: '/all/api',
success: function(people) {
$.each(people, function(i, person) {
$people.empty()
});
$.each(people, function(i, person) {
$people.append('<li>name: ' + person.first_name+', last: '+ person.last_name + '</li>');
});
}
});
$("#people").on("click", "li", function() {
var content = $(this).html();
//$("#testbox").val(content); //replace existing name in textbox
$("#testbox").val($("#testbox").val() + content + "\n"); //add new name to textbox
});
};
var interval = 800;
setInterval(ajax_call, interval);
form.html
<form id="textbox" action="" method="post">{% csrf_token %}
{{ form.as_p }}
<input type="submit" value="create" />
</form>
<ul id="people"></ul>
Try this "click" function attached to the ul but filtered by the li's (this allows the list to remain dynamic), it allows you to add the individual names (two versions one that overwrites the existing textfield info and the second that appends to it): DEMO
$("#people").on("click", "li", function() {
var content = $(this).html();
//$("#testbox").val(content); //replace existing name in textbox
$("#testbox").val($("#testbox").val() + content + "\n"); //add new name to textbox
});
I think the answer to your question is pretty easy.
In your code you have the line
$("#people").keyup(function() {
Which is probably not what you wanted to do, cause now you are waiting for a keyup (release of a key) event on a list. First of all your question stated that you want the user to click and not to press a button and second you want the list items not the list itself.
So IMO you have to change that part to something like:
$("li","#people").click(function(){
var content = this.html();
$("#testbox").val(content);
});
Try this :
replace this
$("#people").keyup(function() {
var content = $('#people').html();
$("#testbox").val(content);
});
with this
$("#people").click(function() {
var content = $('#people').html();
$("#testbox").val(content);
});
If I have understood your question right away then
$("#people").click(function(){
var content = $('#people').html();
$("#testbox").val(content);
});
should do the work. But I think you should use something like custom attribute instead of id as there can be only one id for a specific tag.

<div> with contentEditable doesn't change immidiately, only the second time

I've got 2 <div>'s, both contentEditable with values from a database.
It works displaying them and changing them BUT only the second time.
e.g. :
Clicking on the #stuff div
alerts me the value from the DB ( something like "Weather's ok" )
I change it to "New Value"
Clicking outside the div
Function alerting me the value from #stuff div ( still "Weather's okay" )
Clicking again inside the div and it now alerts me "New Value"
This leads to having to go into the div twice for it to accept the changes..
I tried it manualy to open save.php with the parameters and it saved directly!
I'm pretty sure this is something basic what I'm missing but I cant figure it out yet..
HTML :
<div id="test-container" style="border: 1px solid green;">
<div id="editable" contentEditable="true">
<?php echo $rst["content"]; ?>
</div>
<div id="stuff" contentEditable="true">
<?php echo $rst["stuff"]; ?>
</div>
<button id="save">Save Changes</button>
</div>
JS Function(s) :
var content = "";
var from = "";
/*
The code below shows the save button if anywhere in the editable div is clicked,
and hide the button if anywhere outside the div is clicked.
*/
$("#editable, #stuff").click(function (e) {
content = $(this).html();
from = (this.id);
alert(content);
$("#save").show();
e.stopPropagation();
});
$(document).click(function() {
alert(content);
$("#save").hide();
});
/*
The code below gets the data from the content variable and posts to the send.php file.
If the data is posted successfuly, the PHP file recieves the data and inserts to database, where the field is based on the form variable.
*/
$("#save").click(function (e) {
$.ajax({
url: 'save.php',
data: {
content: content,
from : from
}
});
});
The problem I found in your code is:
after the keyboard input DOM is updated not variable.
Try this:-
var content = "";
var from = "";
$("#editable, #stuff").click(function (e) {
content = $(this).html();
from = $(this.id);
console.log(content);
e.stopPropagation();
});
$(document).click(function() {
console.log(content);
});
$("#editable, #stuff").keyup(function(){
content = $(this).html();
from = $(this.id);
});
click here for the working fiddle

Categories