I'm trying to hide and show HTML Elements by using javascript. It all works well, but the result isn't longer available then 1 Second. After one second, the element, that is displayed by default appears and the element that should be shown is hidden.
Here below I posted my sample code. I created an element called selected, that keeps a value, that tells which paragraph is actually shown. If I click on next, I want the next Paragraph to be shown.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<selected id="displayedResults" value="0">
</selected>
<div>
<p id="results_0" style=""> Result 0 </p>
<p id="results_1" style="display: none;"> Result 1 </p>
<p id="results_2" style="display: none;"> Result 2 </p>
<p id="results_3" style="display: none;"> Result 3 </p>
<p id="results_4" style="display: none;"> Result 4 </p>
<p id="results_5" style="display: none;"> Result 5 </p>
<a onclick="previousResults()" href="">Previous</a>
<a onclick="nextResults()" href="">Next</a>
</div>
<script type="text/javascript">
function previousResults()
{
var index = document.getElementById("displayedResults").getAttribute("value");
var rslString = "results_";
if(index>0)
{
document.getElementById(rslString.concat(index)).style.display='none';
index=index-1;
document.getElementById(rslString.concat(index)).style.display='block';
document.getElementById("displayedResults").setAttribute("value",index);
}
}
</script>
<script type="text/javascript">
function nextResults()
{
var index = document.getElementById("displayedResults").getAttribute("value");
var rslString = "results_";
if(index<5)
{
document.getElementById(rslString.concat(index)).style.display='none';
index++;
document.getElementById(rslString.concat(index)).style.display='block';
document.getElementById("displayedResults").setAttribute("value",index);
}
}
</script>
</body>
</html>
Your links are reloading the page when you click on them, so you're seeing the results of your JavaScript, then the page reloads and it resets back to the starting state. The simplest solution would be to modify your HTML for the <a> elements to this:
<a onclick="previousResults(); return false;" href="">Previous</a>
<a onclick="nextResults(); return false;" href="">Next</a>
The return false will prevent the default behaviour of that action - in this case following the link - thereby preventing the page reload.
In addition to that, there's no <selected> element in HTML. You'd be better served by using a hidden input, so replace this:
<selected id="displayedResults" value="0">
</selected>
with
<input type="hidden" id="displayedResults" value="0"/>
<selected id="displayedResults" value="0"></selected>
That ain't gonna work ;-)
- Edit: Oke, yes it can work but it's not valid HTML...
<select id="displayedResults">
<option value="0">zero</option>
</select>
It is because your page is reloading in each click. Change that anchor tag to another tag like span or something..
<span onclick="previousResults()">Previous</span>
<span onclick="nextResults()">Next</span>
add
return false;
on each function
use jquery than traditional javascript
to hide result 1
$('#results_1').hide();
to unhide just use
$('#results_1').show();
please tell what you are trying to achieve. I think you are doing it in a complex way.
The page is reloaded once you click the previous and next link. So please do as follows :
<a onclick="previousResults()" href="javascript:">Previous</a>
<a onclick="nextResults()" href="javascript:">Next</a>
Add return false; in the onclick attributes, in order to prevent the browser refreshing the page.
See http://jsfiddle.net/xZSyz/
Related
I need some help, I am stuck at this problem.
I have an api that I am calling, it brings in a list of information, I output the data into a textarea, on click I only want to select THIS textarea (not the others), and copy the content into my clipboard.
This is what I wrote:
function copyText() {
$(this).find('.api-text').select();
document.execCommand('copy');
}
But this is not working, when I replace this with '.api-text' and remove the find(), it selects ALL results with that class.
All the help is appreciated!
UPDATE:
Here is a jsFiddle with a rough example of what I am seeing.
https://jsfiddle.net/ax6na18u/
I found the solution after googling a suggestion from Rajesh on event.target or "(this)".
Rajesh's original code worked, just had to tie it in correctly in the HTML with $event.target:
<button class="btn btn-primary" (click)="copyText($event.target)">Copy to Clipboard</button>
The $event.target was the route of all evil!
As suspected, issue is in navigating to textarea.
First, your this is not pointing to button. Second, even if it was, you do not have an element with class api-txt in it.
You should try one of these approaches:
Go to nearest parent(li) that encapsulates both button and textarea and find textarea.
$(el).closest('li').find('.api-txt').select();
If the structure is going to remain like this where textarea and button will be on same level, you can search at this level.
$(el).siblings('.api-txt').select();
Sample
function copyText(el) {
//$(el).closest('li').find('.api-txt').select();
// or
$(el).siblings('.api-txt').select();
document.execCommand('copy');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul *ngIf="results">
<li *ngFor="let result of results | slice:0:9">
<a href="{{ result.latest }}" target="_blank">
{{ result.name }}
</a>
<textarea name="apiurl" class="api-txt">{{ result.latest }}</textarea>
<br>
<button class="btn btn-primary" onclick="copyText(this)">Copy to Clipboard</button>
</li>
</ul>
Is there a way for JavaScript to find the page that an ID is on and return a link to that page?
For example, if I had a paragraph tag with id="test" on a page called test.html could I get a JavaScript variable to be set to a link to test.html because it has an id="test" on it.
I have probably explained this really badly but I was just wondering if it was possible.
Thanks.
Example of code on test.html
<p id="test"></p>
It is not perfect but I have found a way (kind of) to do this.
HTML:
<input id="tosearch" type="text">
<button id="search" type="button" onclick="getsearch()">Search IDs</button>
<p id="searchout"></p>
<script src="search.js">
</script>
<p hidden id=".id">examplepage.html</p>
<p hidden id=".id2">examplepage2.html</p>
JavaScript:
function getsearch() {
var search = document.getElementById("tosearch").value;
search = "." + search;
var page = document.getElementById(search).innerHTML;
page = page.link(page);
document.getElementById("searchout").innerHTML = page;
}
This allows you to search for an id and returns a link to the page with the id but you have to manually put all the ids and links in.
Currently, I am working on mac OS X cocoa application.
I am making one application using a web view. In my demo app, I have set two buttons and one webview. Both buttons load the same file. The first time I get clicked div id, but after the second time load of the web view, I am not getting div id. I am using web-kit for interface method to call an obj-c method from javascript. I have applied many solutions but I am not able to track its an issue. Please give me a solution as soon as possible.here is the screenshot which displays clicked div id in console first time
I have used below code for web view implementation
<body>
<div class="xxx">
<table class="xxx">
<tr>
<td class="xxx"><img alt="userimg" src="sdfasdf.jpg" /></td>
<td>
<div class="xxx">
<div class="xxx">
<div class="msg" id="1" onClick="window.objcConnector.MsgDivClicked_(this.id)">Hiiiiiiiii</div>
</div>
<div class="xxx">
<div class="xxx" id="2" onClick="window.objcConnector.MsgDivClicked_(this.id)">Heyy</div>
</div>
<div class="xxx">
<div class="xxx" id="3" onClick="window.objcConnector.MsgDivClicked_(this.id)">Hello</div>
</div>
<div class="xxx">Sat,7 Nov.7:38 PM</div>
</div>
Objective-c
+ (BOOL)isSelectorExcludedFromWebScript:(SEL)aSelector
{
if (aSelector == #selector(MsgDivClicked:)) return NO;
return YES;}
-(void)MsgDivClicked:(id)object
{
NSLog(#"%# Div Clicked",object);
}
Scope of this in javascript is pretty tricky, especially when binding DOM events. Instead of explicitly passing the param in your onClick function, we can use the natural click event to get the data you want:
You have:
<div class="msg" id="1" onClick="window.objcConnector.MsgDivClicked_(this.id)">
If we remove the parameter, the function call will have a scope where this is the element clicked. We could also substitute a parameter e which would be the MouseEvent of the click. Then we could get the element via e.target.
<div class="msg" id="1" onClick="window.objcConnector.MsgDivClicked_()">
Since you're calling an ObjectiveC function and not a JavaScript one, I'm not really sure how the natural scoping works. So instead, lets let a tiny bit of JS do the trick:
<script type="text/javascript">
function objCClickHandler (e) {
window.objcConnector.MsgDivClicked_(this.id)
}
</script>
<div class="msg" id="1" onClick="objCClickHandler()">
You could also get rid of all the onClick handlers and just do this all in a script tag:
<script type="text/javascript">
Array.from(document.querySelectorAll('.msg')).map(msg => {
msg.addEventLister('click', e => {
window.objcConnector.MsgDivClicked_(e.target.id)
})
}
</script>
Any element that you give a class of 'msg' to would then be wired up to click through to your app.
MY HTML is something like this:
<div id="paj_container" class="container">
<div class="three_paj_els">
<div id="1" class="a_paj_element">
<input type="hidden" class="listed_hidden_img" value="http://google.com/whatever.png" />
</div>
<div id="2" class="a_paj_element">
<input type="hidden" class="listed_hidden_img" value="http://google.com/whatever2.png" />
</div>
<div id="3" class="a_paj_element">
<input type="hidden" class="listed_hidden_img" value="http://google.com/whatever3.png" />
</div>
</div>
</div>
To spare you flipping through more code, pretend each of the .a_paj_element divs is a separate page in my JQuery pagination.
To decrease page load time my plan is to shove the images on the pagination into those hidden input types' values. When the page is visible, JQuery will grab those values and use the replace with function to replace them with tags so the images load as you flip through the pagination pages instead of all at once. Here's what I've been trying to do to achieve this:
var currentPage = $('.three_paj_els:visible');
currentPage.children('.listed_hidden_img').each(function() {
var the_image_SRC = $(this).val();
$('.listed_hidden_img').replaceWith('<img src="'+the_image_SRC+'" />');
});
Basically I'm trying to get the .listed_hidden_imgs replaced only in the current visible .three_paj_els
I've done this with before with lightboxes/modals to decrease load time on pages with high resolution pictures it works well on that so I figured that this would work in this application too.
Thanks a bunch for reading this far and thanks in advance to anyone who can help correct my code.
-Mike
var the_image_SRC = $(this).attr('src');
Take the following page:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"/>
</head>
<body>
<div class="hashtag">#one</div>
<div class="hashtag">#two</div>
<form accept-charset="UTF-8" action="/home/index" method="post">
<textarea id="text-box"/>
<input type="submit" value ="ok" id="go" />
</form>
<script type="text/javascript">
$(document).ready(function() {
$(".hashtag").click(function() {
var txt = $.trim($(this).text());
$("#text-box").append(txt);
});
});
</script>
</body>
</html>
The behavior I would expect, and that I want to achieve is that when I click on one of the divs with class hashtag their content ("#one" and "#two" respectively) would be appended at the end of the text in textarea text-box.
This does happen when I click on the hash tags just after the page loads. However when I then also start editing the text in text-box manually and then go back to clicking on any of the hashtags they don't get appended on Firefox. On Chrome the most bizarre thing is happening - all the text I type manually gets replaced with the new hashtag and disappears.
I probably am doing something very wrong here, so I would appreciate if someone can point out my mistake here, and how to fix that.
Thanks.
2 things.
First, <textarea/> is not a valid tag. <textarea> tags must be fully closed with a full </textarea> closing tag.
Second, $(textarea).append(txt) doesn't work like you think. When a page is loaded the text nodes inside the textarea are set the value of that form field. After that, the text nodes and the value can be disconnected. As you type in the field, the value changes, but the text nodes inside it on the DOM do not. Then you change the text nodes with the append() and the browser erases the value because it knows the text nodes inside the tag have changed.
So you want to set the value, you don't want to append. Use jQuery's val() method for this.
$(document).ready(function(){
$(".hashtag").click(function(){
var txt = $.trim($(this).text());
var box = $("#text-box");
box.val(box.val() + txt);
});
});
Working example:
http://jsfiddle.net/Hhptn/
Use the val() function :)
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div class="hashtag">#one</div>
<div class="hashtag">#two</div>
<form accept-charset="UTF-8" action="/home/index" method="post">
<textarea id="text-box"></textarea>
<input type="submit" value ="ok" id="go" />
</form>
<script type="text/javascript">
$(document).ready(function(){
$(".hashtag").click(function(){
var txt = $.trim($(this).text());
$("#text-box").val($("#text-box").val() + txt);
});
});
</script>
</body>
</html>
Does that help?
The reason append does not seem to work is because the value of the textarea is made up of the child node, but by treating it as multiple seperate nodes the screen won't update, according to my Firebug. Firebug will show me the updated child nodes, but NOT the text I typed manually into the textarea, whereas the screen shows me the manually typed text but not the new nodes.
You can reference by value of textarea.
$(document).ready(function () {
window.document.getElementById("ELEMENT_ID").value = "VALUE";
});
function GetValueAfterChange()
{
var data = document.getElementById("ELEMENT_ID").value;
}
works fine.
if(data.quote) $('textarea#message').val($('textarea#message').val()+data.message +' ').focus();