I have tried using JavaScript and jQuery with my HTML file, but it is not working properly. Here is my code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body {white-space: nowrap;}
h1 {white-space: nowrap;}
</style>
<script src="jquery.js"type="text/javascript"></script>
<title>SolicitueCotizaciones</title>
</head>
<body>
<script>
function myFunction() {
$("input[type='button'][value='Agregar Pieza']").before("<p>new text</p>")};
</script>
<br/> Descripcion:
<br/>
<textarea id="improve" rows="3" cols="20"></textarea>
</p>
<div class="divider"/>
<div style="align-items:left"></div>
<p>
</p>
<p>
<input type="button" value="+Agregar Pieza" onclick="myFunction()">
</p>
</body>
</html>
I have also tried copying code from tutorial websites that work properly but when I run them in my computer, they stop working. Can anyone help me figure out what's happening and what I should do to solve it?
EDIT: What I'm trying to achieve is to add the new text above the "+agregar pieza" button and below the text input box labeled "descripcion" once you press the "+agregar pieza" button, but this never happens. I have tried the corrections that were posted in the comments, and I edited the code above to include them. However, as of this edit, it is still not working at all. I would like to use the .before command from jquery to achieve the desired result, but if there is a better way to do this, I would like to know.
First, jQuery is not native to your browser, you need to load it before using it. The tutorials should help you here.
Second, your code is not correct, it should be something closer to this:
$("input[type='button'][value='Agregar Pieza']").before("<p>new text</p>");
Live demo: http://jsfiddle.net/wKhap/
It isn't working because you need to import jQuery before using it. In order to do so, you need to add this tag:
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
Add this before any other references to scripts that use jQuery.
Related
This seems like it should be pretty basic, and I can't figure out why it isn't working. I have a super simple page so far and I want to select the paragraphs with JS:
Here's my HTML:
<!DOCTYPE html>
<html>
<head>
<script src="misc.js" type="text/javascript"></script>
</head>
<body>
<p id="first">Just one paragraph.</p>
<p id="second">Two, actually.</p>
</body>
</html>
And my JS:
var paras = document.getElementsByTagName('p');
console.log(paras.length);
I expect the console log to show 2 but I'm seeing 0. I read the documentation pretty closely and I can't figure out what I'm doing wrong here.
At the time you run the script, there are no paragraphs in the document.
Either move the script element so it appears after the paragraphs, or put the code in a function and then call that function later (e.g. when the load event fires).
I am new to angularJS. So, may be I am asking very naive question. I have downloaded angularjs 1.3.16 and tried to make a very basic example, which is as given below. When I run in browser(chrome) it doesn't show any thing, while I am expecting, Input text box as well as Hello2 printed by its side.
<html>
<head>
<script src="../angular-1.3.16/angular.min.js" />
</head>
<body ng-app>
<input type="text">
Hello {{2}}
</body>
</html>
I don't know, what wrong am I doing ? Please help me out. Moreover, any more things that I should keep in mind, while developing angularjs code to avoid silly errors, then let me know.
You didn't close your script tag
Try like this
<script src="../angular-1.3.16/angular.min.js" ></script>
Demo
You need to close the script tag. Make sure you are using a valid version with valid path
<script src="../angular-1.3.16/angular.min.js" ></script>
Demo
Use ng-init like as
close the tag as below
<script src="../angular-1.3.16/angular.min.js" ></script>
This good for writing script
<body ng-app ng-init="firstName='Hello2'">
<input type="text">
{{ firstName }}
</body>
DEMO
Add App name in ng-app and close the script tag.
e.g.
<script src="../angular-1.3.16/angular.min.js"> </scrpt>
<body ng-app="myApp">
So i have been struggeling to use highlight.js in a text area since obviously this doesn't work:
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<link rel="stylesheet" href="styles/default.css">
<script src="highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<form>
JavaScript Injection: <br>
<pre>
<code>
<textarea name="js_execute" cols="50" rows="10" "></textarea>
</code>
</pre>
<input type="button" name="Inject_Execute_Button" value = "Inject" onclick="executeJS()" >
</form>
<script type="text/javascript">
function executeJS()
{
alert("Wohoo");
}
</script>
<style type ="text/css">
</style>
</body>
</html>
I'm pretty sure there's an easy answer to this so i won't explain it in too detail but at the end i would prefer to have code typed into the textarea highlighted in JavaScript.
You might want to look at http://ace.c9.io/, which does syntax highlighting, but is specifically aimed at editing.
Note however that it does not use textarea either, probably for the same reasons mentioned by #isagalaev.
The simple answer is that highlight.js won't work in a textarea because its content is not part of the page and it simply can't have any styles by itself. If you want a text editor in a browser with highlight.js you probably should look into contenteditable so you could call hljs.highlight() on its content on every change. However I'm not aware of any successful implementation of this.
I understand from the usage page that it will highlight the code inside the <pre><code> tags. Not from any other container.
In your example, it would highlight the html of the textarea itself, as it is inside the <pre><code> tags, and not de contents of the textarea.
Here is the code:
<span class='maincaptionsmall'>
Test
</span>
For some reasons of ajax and jquery codes in my page, I can't use HREF as Link, I mean, I can't use something like this following code:
<span class='maincaptionsmall'>Test</span>
So, How can i use jquery to get this css element maincaptionsmall and it will set it to href link ?
Even I can't use <div> too, I should use everything as <span> Please give me an example that how to use jquery to set css element as href link.
Thanks in advance
For getting .maincaptionsmall this DOM using jQuery use below code,
$('.maincaptionsmall')
and for wrapping innerText you can use wrapInner
$('.maincaptionsmall').wrapInner('');
Live Demo
Edit
You need to wrap code inside document.ready and also your document is not properly structured.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() // you are missing this
{
$('.maincaptionsmall').wrapInner('');
});
</script>
</head>
<body>
<span class='maincaptionsmall'>Test</span>
</body>
</html>
I've been trying to figure out how to get a jquery dialog box to work. For the life of me, I can't get it to work. Here is some html with in-line javascript I've written:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function showDialog() {
$('#dialogBox').dialog();
}
</script>
</head>
<body>
<input type="button" value="Click me" onclick="showDialog();" />
<div id="dialogBox">
<p>This is the text of my dialog box.</p>
</div>
</body>
</html>
When I click the button in Internet Explorer, it says Object doesn't support this property of method. What am I doing wrong?
As far as I know, the dialog() function is part of jQuery UI, and it doesn't look like your code references the UI library. Try adding something like
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/jquery-ui.min.js" type="text/javascript"></script>
in the <head> below where you reference the jQuery library. This will pull in the Google-hosted version of the source.
I would imagine that the Google-hosted version includes lots of things you don't need, so you might be able to speed up loading times by downloading your own copy and only selecting the components that you need.
you can try to use this to open,
function showDialog() {
jq('#dialogBox').dialog('open');
}
or to close
function showDialog() {
jq('#dialogBox').dialog('close');
}