How to reveal information when clicking on a button/text? - javascript

I have a table with 'see more' written on the side of the title "Trainee Insurance.."
I want people to be able to click see more and then information appears below the title
How do I do this?
Thanks!
James
<table height="20" width="775" cellpadding="0" cellspacing="0">
<tr>
<td>
<font face="lucidagrande" size="4" color="black">Trainee Insurance Broker - London</font>
<td align="right">
<font face="lucidagrande" size="2" color="red">See More...</font>
</td>
</tr>
</table>

With JQuery:
Give IDs to your 'See More' button and the content that is to be displayed:
$('#see_more').click( function() { $('#more_content').show(); });

You've got a bad case of 1990s HTML.
Here's the 1990s way to do it:
<div>Trainee Insurance Broker - London</div>
<div id="a1" style="display:none">### more information ###</div>
See More...
JS:
function showThis(id) {
document.getElementById(id).style.display='block'
}
A few tips:
don't use tables for layout. Use HTML + CSS
don't use inline font statement, use CSS
explore jQuery.

There might be other ways -- non-JavaScript ways -- but I have always used JavaScript to do this. Add an onclick handler to the "see more" td and, in that handler, set the more element to have display:inline style, something like this (untested):
<script type="text/javascript">
function show_more ( element_to_show ) {
var element_to_show = getRefToDiv( element_to_show );
element_to_show.style.display = "inline";
}
</script>
<table height="20" width="775" cellpadding="0" cellspacing="0">
<tr>
<td>
<font face="lucidagrande" size="4" color="black">Trainee Insurance Broker - London</font>
<td align="right" onclick="show_more('more');">
<font face="lucidagrande" size="2" color="red">See More...</font>
</td>
<td id="more" style="display:none;">The guy will see this when he clicks See More...</td>,
</tr>
</table>

I would use jQuery to show/hide the block of text whenever "See More...." is clicked.
http://api.jquery.com/show/
Of course, this assumes you're already familiar with jQuery. If you aren't, or you can't/won't use it, a quick Google search turned up http://www.cssnewbie.com/showhide-content-css-javascript/

Use display=none; in style and remove it on onclick event.

You will need to either; Have a hidden DIV that appears when you click 'see more'. Which will need to be Javascript or JQuery. OR Have some PHP to generate another row in the table.

If you want to load data in from a separate file you'll have to use AJAX. If you want to show an element that's already on the page when "See More" is clicked you can use regular javascript. Just add a new row to the table, give it an ID and hide it using inline styles. Then add a link around your "see more" text and give it an onclick handler that shows the hidden row. Like this:
<table height="20" width="775" cellpadding="0" cellspacing="0">
<tr>
<td><font face="lucidagrande" size="4" color="black">Trainee Insurance Broker - London</font></td>
<td align="right"><font face="lucidagrande" size="2" color="red">See More...</font></td>
</tr>
<tr id="showme" style="display: none">
<td colspan="2">More info appears here!!!</td>
</tr>
</table>

<script language="javascript">
$(document).ready(function(){
$('#see_more').click(function(){
$("#more_text").show();
});
$("#more_text").hide();
});
</script>
<table height="20" width="775" cellpadding="0" cellspacing="0">
<tr>
<td>
<font face="lucidagrande" size="4" color="black">Trainee Insurance Broker - London</font>
<td align="right" id="see_more">
<font face="lucidagrande" size="2" color="red">See More...</font>
</td>
</tr>
<tr><td id="more_text">This is more text here......</td></tr>
</table>

Related

Webpage vanishes when clicking button to send data to server with jQuery

I am having a issue with HTML and jQuery programming.
I am making a bulletin board with HTML and jQuery, with 2 textboxes and a button.
$(document).ready(function(e) {
$('save').click(function() {
const name = $('name').val();
const words = $('words').val();
$.post(
"http://localhost:8000/board_write",
{
name: words
},
function(data, status) {
}
)
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="0">
<tr>
<td class="vert" bgcolor="">
Name
</td>
<td>
<input class="name">
</td>
</tr>
<tr>
<td bgcolor="">
Anything you'd like to say
</td>
<td>
<textarea class="words" cols="40" rows="5" placeholder="please enter anything">
</textarea>
</td>
</tr>
<tr>
<td>
<input class="save" type="button" onclick="write()" value="Save">
</td>
</tr>
</table>
And, I also coded with jQuery to send the data of the two textboxes to localhost:8000, which is a node.js server to log the data to the console.
When I click the button, the page vanishes. What causes the situation? And, how can I solve the problem?
You have onclick = "document.write()"; that explicitly deletes the document . https://www.w3schools.com/jsref/met_doc_write.asp
Explanation: the code in onclick is scoped such: {window{document{element{}}}}; if you meant to implement a write() function, do so and invoke it by window.write(), or name it something differently to document.write. Otherwise, write() will de resolved to document.write().

Modifying embedded hyperlink in asp.net repeater

I am using an asp.net repeater and bind data from SQL through a data table. I would like to modify the hyperlink on the client side based on the DataRow. There can be several other hyperlinks in the table but I have to process the one in the second column alone. What is the best way to do that? Any code sample is highly appreciated.
<table border="0" cellpadding="2" cellspacing="0" width="100%" id="myTable">
<tr>
<td align="left">ID</td>
<td align="left">DESCRIPTION</td>
<td >STATUS</td>
</tr>
<tr>
<td>10</td>
<td>
<span style="color: Red; font-weight: bold">Server is Down</span>
Click here to continue.
</td>
<td>No Response</td>
</tr>
</table>
You could use the following jQuery to change all links in the 2nd column of the 2nd row:
$(document).ready(function() {
$('#myTable tr:nth-child(2) td:nth-child(2) a').each(function() {
var someValue = '/2';
$(this).prop('href', someValue + $(this).prop('href'));
});
});
The issue here is where you'd get that someValue from. You'll have to somehow add this to the output using your <asp:Repeater>.
You could place it as a data attribute inside the <td>, something like this:
Repeater output
...
<td data-id="2">
<span style="color: Red; font-weight: bold">Server is Down</span>
Click here to continue.
</td>
...
JS
var someValue = '/' + $(this).parent().data('id');

Call onclick and onchange programmatically don't work as expected

I'm working on writing a script to automate filling a form. Sample of the part I want to fill is here:
<tbody><tr>
<td class="UMenuTimeSheetFirstCell">
<div class="UMenuTimeSheetElement UMenuTimeSheetElementEditable" onclick="_UMenuTimeSheetEditClick(this);">
<div class="UMenuTimeSheetElementDisplayValue" title="Nessuna descrizione">0.00</div>
<input type="text" class="UMenuTimeSheetElementEditValue UMenuTimeSheetElementEditValueM" taskid="1769" refdate="1/7/2013" onchange="_UMenuTimeSheetEditChange(this);" oldvalue="0" value="0"><input type="text" class="UMenuTimeSheetElementEditValue UMenuTimeSheetElementEditValueH" taskid="1769" refdate="1/7/2013" onchange="_UMenuTimeSheetEditChange(this);" oldvalue="0" value="0"><input type="text" class="UMenuTimeSheetElementEditValueShow" onfocus="_UMenuTimeSheetCheckFocus(this);" onchange="_UMenuTimeSheetEditChangeShow(this);">
<div class="UMenuTimeSheetElementEditDescCont" style="left: 55px;">
<div class="UMenuTimeSheetElementEditMinutesMode">
<table cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>-</td>
<td class="UMenuTimeSheetElementEditMinutesModeSplitTitle">Ore</td>
<td class="UMenuTimeSheetElementEditMinutesModeSplit">+</td>
<td>-5<br>-10</td>
<td class="UMenuTimeSheetElementEditMinutesModeSplitTitle">Minuti</td>
<td>+5<br>+10</td>
</tr>
</tbody>
</table>
</div>
<div class="UMenuTimeSheetElementEditDesc">
<div>Descrizione:</div>
<textarea onchange="_UMenuTimeSheetEditChangeDesc(this);" oldvalue=""></textarea>
<div class="UMenuTimeSheetElementEditDescClose" onclick="_UMenuCancelPropagationOnClick(arguments[0], this); $(this).parents('.UMenuTimeSheetElementEditable').removeClass('UMenuTimeSheetElementEditMode');"></div>
</div>
</div>
</div>
</td>
<!-- more td tags -->
</tr></tbody>
I tried to do this to edit it
element=cell.getElementsByClassName("UMenuTimeSheetElementDisplayValue")[0]; //get the class where to place the value
e
element.innerText=timeWorkedToday;
_UMenuTimeSheetEditClick(element); //onclick
element.parentNode.onclick();
This didn't work. I also noticed that there are some changes that happens when I click on the textarea. When I press enter, some calculations are done in static labels in the page and the changes done in the element are reverted.
What is the right code to do to give the same results are if the user is inputting it?
UPDATE: jquery is acceptable to solve this problem.
If I understood you correctly, you want to place value timeWorkedToday into a div with class UMenuTimeSheetElementDisplayValue.
With jQuery use this sample code:
$(".UMenuTimeSheetElementDisplayValue").html(timeWorkedToday);
$(".UMenuTimeSheetElementDisplayValue").click();
I am assuming you can use jQuery as you tagged the question with jQuery
You should be calling click not onclick
element.parentNode.click();

Changing a Drop Down list using Javascript to select multiple images?

I have a Drop Down List in a web page, what it currently does is displays an individual image that is selected in the list.
What I want to achieve is if a sector is selected such as pubs for example, It will display a group of images of pubs instead of one individual image, anyone with any knowledge of doing this? If I select another option such as University it would display multiple images of University logos.
Also is there a way to add a mouse-click hyperlink to an image even if I am using it as a drop down list?
I presume this is possible but I cannot find much information on the subject.
Any assistance would be great.
My HTML code:
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%">
<form name="mygallery">
<p>
<select name="picture" size="1" onChange="showimage()">
<option selected value="gfx/Marstons.jpg">Marstons pubs</option>
<option value="gfx/NorthUni.jpg" href="http://www.northumbria.ac.uk/">Northumbria University</option>
</select>
</p>
</form>
</td>
</tr>
<tr>
<td width="100%">
<p align="center">
<img src="gfx/Marstons.jpg" name="pictures" width="99" height="100">
</td>
</tr>
</table>
My Javascript
function showimage() {
if (!document.images) return
document.images.pictures.src = document.mygallery.picture.options[document.mygallery.picture.selectedIndex].value
}
I am not sure what is your needs but you cannot add an href attribute directly over a select option.
If you want only add the url on you option to apply it on your img when it is selected by the user, you can use the data-* attributes provided by html5.
Here's an example with the code you provided on your request.
JS fiddle for a live test :http://jsfiddle.net/BVAkh/1/
Html part :
<html>
<head></head>
<body>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%">
<form name="mygallery">
<p>
<select name="picture" size="1" onChange="javascript:showimage()">
<option selected value="gfx/Marstons.jpg">Marstons pubs</option>
<option value="gfx/NorthUni.jpg" data-href="http://www.northumbria.ac.uk/">Northumbria University</option>
</select>
</p>
</form>
</td>
</tr>
<tr>
<td width="100%">
<p align="center">
<img src="gfx/Marstons.jpg" name="pictures" width="99" height="100" />
</p>
</td>
</tr>
</table>
</body>
</html>
Js part :
function showimage() {
if (!document.images) return;
var selectedItem = document.mygallery.picture.options[document.mygallery.picture.selectedIndex];
document.images.pictures.src = selectedItem.value;
if(selectedItem.getAttribute("data-href")) {
document.images.pictures.onclick = function() {
window.location.href = selectedItem.getAttribute("data-href");
}
}
else {
document.images.pictures.onclick = null;
}
}
But I think you should rethink about the image change. Maybe set an id to your p and change the content with an innerHTML. You will be able to add a <a></a> tag to your image if the data-href is provided.

IE7 issue with jQuery find?

The following code worked fine in IE7 until I started using IE9.js file. The IE9.js file adds an additional class "ie7_class82" to the already present classes which I added. The code below stopped working in IE7. Is there a known issue with not able to find matching classes with jQuery when multiple classes are present?
--------------HTML code skeleton-------------
<table cellspacing="0" cellpadding="0" bgcolor="#FFF" width="100%">
<thead>
---table rows here----
</thead>
<tbody>
<tr>
<td>
<table cellspacing="0" border="0" width="100%" style="float:left">
<thead>
<tr style="text-align:left;">
<td style="font-size:14px;font-weight:bold;text-align:left;padding:10px 5px">
<span><label class="quarterly">Quarterly</label></span>
<span style="padding:5px">|</span>
<span><label class="monthly">Monthly</label></span>
<span style="padding:5px">|</span>
<span><label class="daily">Daily</label></span>
</td>
</tr>
</thead>
<tbody>
---table rows here----
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table cellspacing="0" border="0" width="100%" style="float:left" class="quarterly">
---table rows here---
</table>
</td>
</tr>
<tr>
<td>
<table cellspacing="0" border="0" width="100%" style="float:left" class="monthly">
---table rows here---
</table>
</td>
</tr>
<td>
<table cellspacing="0" border="0" width="100%" style="float:left" class="daily">
---table rows here---
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
---------jQuery code--------------
$('table thead span label').click(function() {
$(this).parents('table').parents('table').find('table').hide();
$(this).closest('table').find('tbody tr').hide();
$(this).closest('table').show();
$(this).closest('table').find('tbody tr.' + this.className).show();
$(this).parents('table').parents('table').find('table.' + this.className).show();
});​
Note: Unfortunately no errors in IE7(and works fine in FF and Chrome). It is supposed to hide all the tables and show only the ones which match the class name that is present in the label tag. IE7 hides all the tables but fails to show the tables that match the class.
Updated code(that works in IE7, thanks to SO):
$('table thead span label').click(function() {
var classSelector = $.trim($(this).attr('class')).split(/\s+/g).join(',');
$('label:not('+classSelector+')').css('color','#00425f');
$(this).css('color','#d6c9b9');
$(this).parents('table').parents('table').find('table').hide();
$(this).closest('table').find('tbody tr').hide();
$(this).closest('table').show();
$(this).closest('table').find('tbody tr.' + classSelector).show();
$(this).parents('table').parents('table').find('table.'+ classSelector).show();
});
this.className returns the actual class attribute which, in ie7's case, because of the ie9.js file, contains more than one class.
This means that a selector like the one you use :
'table.' + this.className
will be translated into:
'table.yourClassName ie7_class82'
which is not a valid jquery (or css) selector.
I suggest you replace this.className with something like :
var classSelector = $.trim($(this).attr('class')).split(/\s+/g).join('.');
which means that :
'table.' + classSelector
will be translated into :
'table.yourClassName.ie7_class82.some-other-classes-if-any'
Like one comment mentioned, 'tbody tr.' + this.className will generate an invalid selector if this has more than one class.
It's a little confusing why you're trying to get a row that has a class equal to the label you're clicking on. Perhaps take a look at the DOM navigation methods of jQuery. Specifically parent and parents:
http://api.jquery.com/parent/
http://api.jquery.com/parents/
If you absolutely must do what you're trying to do, then the fix would be to replace spaces with periods in this.className. So you could modify your code to do this:
'tbody tr.' + this.className.replace(/ /g,'.')

Categories