Currently I'm using Netbeans to create a webpage. The code is listed below, and after a button is pushed, reads a csv file and displays the text file in one row of a table. The CSV file has 50 lines of data, and breaks between each line.
What I want to do, is rather than have the entire file contents in one row, for each line of the file to be in its own row.
I'm completely new to Jquery/Javascript and really not sure how to do this, if its even possible or whether I should be doing something completely different.
I dont necessarily need to stick to what I have below, but I'm stuck with doing this in either Javascript, HTML, jquery or json, and this is just what I have come up with so far that works.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/jquery.ui.core.js"></script>
<script type="text/javascript" src="js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="js/jquery.ui.accordion.js"></script>
<script type="text/javascript">
function contentDisp()
{
$.ajax({
url : "file.csv",
success : function (data) {
$("#contentArea").html(data);
}
});
}
</script>
</head>
<body>
<table width="100%" border=0>
<tr>
<td> </td>
<td><input type="button" value="View File" onClick="contentDisp();"></td></tr>
<tr>
<td> </td><td>
<textarea id="contentArea" rows="40" cols="60"></textarea></td></tr>
</table>
</body>
</html>
If I understand correctly it sounds like you want this:
$("#contentArea").html(data.replace(/\n/g, '<br />'));
This will replace newlines with the html tag equivalent.
Related
I've been learning HTML and CSS this semester and originally started to code my project in HTML and CSS, but in order for my project to work, I had to link HTML pages to each other. It ended up making a lot of HTML pages just to change one line of text. I've been trying to get a handle on JavaScript to make my project more efficient. My HTML code looks like this:
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>Oakwood</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0;">
<link rel=stylesheet type=text/css href=default.css>
</head>
<body>
<div id=back></div>
<div id=drdick></div>
<div id=choice></div>
<div class="typewriter">
<script src="run.js"></script>
<p id=text>While out running someone says “Hi” causing you to trip. He helps you up.</p>
</div>
<div id=move>
<button type="button" onclick="changeThis()">Next</button>
</div>
</body>
</html>
My Javascript Looks like this:
var quoteIndex = 0;
var quotes = [
"Thank you.",
"Are you ok?",
"Yes, I’m not normally this clumsy"
];
function changeQuote() {
++quoteIndex;
if (quoteIndex >= quotes.length) {
quoteIndex = 0;
}
document.getElementById("text").innerHTML = quotes[quoteIndex];
}
function showPic()
{document.getElementById("drdick").src="img/drdickab.png";}
function changeThis() {
changeQuote();
showPic();
}
when I test my code my quotes update how I want them to. My picture does not show up at all. Is there something I am missing when it comes to how HTML and Javascript interact? I have been looking through the forums to figure out what I have wrong, and I haven't been able to figure that out.
Your image is not displaying because you did not specify your image anywhere in your markup, and your javascript is also not enough. But try this inside your body tag:
<body>
<!--replace your button with this code.-->
<div id=move>
<button type="button" onclick="showMyImage();" value="Next"></button>
</div>
<!--I assumed you will display the image just below your button, note that initially your image is hidden and displayed on button click event-->
<div>
<img id="myImage" src="img/drdickab.png" style="visibility:hidden"/>
</div>
</body>
.
<!--There's really no need to have multiple scripts, just one will do the job-->
<script type="text/javascript">
function showMyImage(){
document.getElementById('myImage').style.visibility="visible";
}
</script>
I know this question may be stupid, but I'm new to JQuery and failed to guess (even after hard search at Google) Why My Function failed to Show me Alert on Click Event of Button, (I'm trying to do more tasks but for debugging purpose I'm showing alert).
<!DOCTYPE html>
<html>
<head>
<title>WebSite Title</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
$(document).ready(function(){
$('#foo').click(function(){
alert('ggg');
});
});
</script>
</head>
<body>
<input type="button" name="" value="Get Data" id="foo">
</body>
</html>
As #Pranav mentioned, you should separate the scripts, so each can work.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#foo').click(function() {
alert('ggg');
});
});
</script>
I'm Totally Agreed with Answers of above two users, You have to Put Your Code away from the tags referencing the Libraries, What you need to do is place your logical code may be of Javascript or JQuery in Another Script Tags
Good evening.
I am looking for a bit of help in a Code I found around, but I can't get towork as I would like:
This code, essentially, let's you insert in the Input the URL of an image (Let's say "http://i.blogs.es/e79516/nuevo-logo-google/650_1200.jpg") and once you left the input, the script automatically shows it up in the image below.
The problem, is that I would like to enter only the name of the archive, not the entire URL, but I don't know how or where to enter all the URL route and left only the dynamic part to change, since I am beginning with Js.
So, imagining I want to show only images already created and ubicated in "//localhost/ROL/images/Avatars/Characters/"NAME OF THE ARCHIVE".png", Which changes should I make to only enter the file name, without even the extension?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<script src="js/jquery-2.1.4.js"></script>
<script src="js/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="js/jquery-ui.css">
</head>
<body>
<tr>
<td valign="top">
Profile Picture:<br>
<span class="small3">(will be reduced to 50x50)</span>
</td>
<td>
<input size="100" id="newProfilePicture" name="profpic" value="/%profpic%/">
<br>
<img id="profilePicture" src="/%profimg%/">
</td>
</tr>
</body>
<script>
$('#newProfilePicture').blur(function() {
var newSrc = $('#newProfilePicture').val();
$('#profilePicture').attr('src',newSrc);
});
</script>
</html>
Thank you for the Attention
.blur(function(){
$('#profilePicture').prop('src',"i.blogs.es/e79516/nuevo-logo-google/"+$('#newProfilePicture').val()+".png");
});
Works but not necessary to save the value to a variable.
You also may want to use prop() instead of attr.
(Sorry I missed your OP question asking to tack on the ".png")
I have a table in html like below. What I want is to prevent user to direct to google.com when they click John via Javascript or Jquery. I tried it like below but it did not work. Where is my mistake?
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>
$(function() {
$(".myTDclass").click(function(event) {
event.preventDefault();
alert('prevented');
});
});
</script>
</head>
<body>
<table>
<tr class="myTRClass">
<td><a href='www.google.com' class='myTDclass'>John</a></td>
<td>Smith</td>
</tr>
</table>
</body>
</html>
onclick='false' is a solution, I know. But i need it in js or jquery. Any help would be appreciated.
There are several issues here. Firstly your jQuery code is, for some unknown reason, in a style tag when it should be in a script tag. Secondly, you haven't included jQuery in the page at all. Lastly the code itself needs to be in a document.ready event handler if you place it in the head of the document.
Once you fix those issues it should work fine. Try this:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>
$(function() {
$(".myTDclass").click(function(event) {
event.preventDefault();
alert('prevented');
});
});
</script>
</head>
I have the following (simplified) code:
<!DOCTYPE html SYSTEM "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js" />
<script language="javascript" type="text/javascript">
function testFunction() {
alert('It works');
}
</script>
</head>
<body>
<form method="post" action="test.html" onsubmit="testFunction()">
<input type="submit" value="Test" />
</form>
</body>
</html>
My testFunction() function works fine by it self, that is until I import jQuery with the line
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js" />
Now it fails and tells me that
Uncaught ReferenceError: testFunction is not defined
I am hoping this is a newbie mistake and that I am missing something obvious. Notice that I haven't even try to use jQuery yet.
You need to close the <script> tag fully.
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
Works great on jsfiddle after changing:
http://jsfiddle.net/PVYM9/
Also, in HTML5 you can shorten the doctype to just <!DOCTYPE html>, and you don't need to define type properties for your <script> tags. See jsfiddle for example.
You have to close the script tag in the right way
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
(note the closing </script> tag)
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> // close the script tag properly
<script type="text/javascript"> // there is no need of writing language="javascript"
function testFunction() {
alert('It works');
}
</script>
hey man there is no need of writing language="javascript" because type already specifies it!
Despite being valid XML, many HTML elements (such as script, textarea etc) don't work well in most browsers if you close them using a trailing slash (i.e. <element />). You need to create open and close tags for them to work (<element></element>). That seems to be true for XHTML as well.
Others, like your input tag, work fine the way it is. I don't know why some require a closing tag and others not, neither a list of those elements, I just know some of them from experience...