display javascript inside html? - javascript

hi all im new to javascript and can't for the life of me get this to display in html
<html>
<head>
<body>
<script type="text/javascript" src="scripts/category.js"></script>
<select><script>
var makeModel = new DynamicOptionList("MAKE","MODEL","TYPE");
makeModel.addDependentFields("MAKE2","MODEL2","TYPE2");
makeModel.forValue("Ford").addOptions("Fiesta","Focus","Taurus"); // Add options if VALUE of option is selected
makeModel.forText("Honda").addOptions("Civic","Accord","Prelude"); // Add these options if TEXT of option is selected
makeModel.forValue("Ford").setDefaultOptions("Fiesta");
makeModel.forText("Honda").setDefaultOptions("Accord");
makeModel.forValue("Ford").forValue("Taurus").addOptions("2-door","4-door");
makeModel.forField("MODEL").setValues("Focus","Taurus");
makeModel.forField("TYPE").setValues("2-door");
makeModel.forField("MODEL2").setValues("Civic","Prelude");
makeModel.forValue("Toyota").addOptionsTextValue("Camry","10-CAMRY","Corolla","20-COROLLA","Celica","30-CELICA"); // Add options with values different from text
</script></select>
</body></head></html>
code from http://www.mattkruse.com/javascript/dynamicoptionlist/ example 3

at the first, you should know that, JavaScript is completely separate from Java!
so, by the way, if you want to write some JavaScript code inside html, you should use script tag inside your <body></body> tag like the example below:
<script type="text/javascript"> // your javascript code here! </script>
as an option, you can add external JavaScript file, and attach it to your script tag like example below:
<script type="text/javascript" src="example.js"></script>
for more information, check out this place.

The example you refer to makes use of an additional library called DynamicOptionList.js that you can find here.
According to the documentation you also need to initialize the library by calling initDynamicOptionLists() in the BODY onLoad attribute (or from somewhere else).

Related

JavaScript in laravel-dompdf

I am using laravel-dompdf to generate a PDF with a summary of results, consisting of tables and a few images, nothing to spectacular. I would like to print highcharts in the generated PDF as well. So first, I want to try a simple javascript code to see if it was working... but it isn't. I have enabled the "DOMPDF_ENABLE_JAVASCRIPT" => true, but so far no luck yet. The simple code which I want to print:
<div>foo</div>
<span id="insertHere"></span>
<div>bar</div>
<script>
var el = document.getElementById('insertHere');
el.innerHTML = '<div>Print this after the script tag</div>';
</script>
This only prints the foo and bar.. Could someone please help me out?
Dompdf (or more specifically Back-end that it uses for PDF rendering) doesn't really render javascript. What it does is - it parse everything inside <script type="text/javascript"></script> tag and adds it in the special section of the pdf file.
I'm not sure if this javascript is what you need, since you can work with the dom tree outside of the <script> tag. What you can do is write simple scenarios, for example like this one:
<div>foo</div>
<span id="insertHere"></span>
<div>bar</div>
<script type="text/javascript">
app.alert({cMsg:"Message", cTitle: "Title"});
</script>
Try to open generated file and you will see alert.
Here more complete guide on what you can do inside javascript section: Acrobat JavaScript Scripting Guide

How can I pass an html img element to a javascript included file?

This is a question from a noob in javascript. I tried to find something similar the last two days but I didn't find. I try to pass an html image element to an external javascript file which I include to the rest html code. The javascript fade in and fade out an image. Because I want to use different images everytime, thus I want to have a function in an external javascript file.
What I did so far:
PHP and HTML:
<?php
if ($success){
echo"<link rel='stylesheet' href='js/jquery-ui-1.11.4-smoothness.css'>
<script src='js/jquery-1.11.3.js'></script>
<script src='js/jquery-ui-1.11.4.js'></script>
<img id='tick' src='tick.png'>
<script type='text/javascript' src='js/success_failure_signs.js'>
success_failure(tick);
</script>";
}?>
Javascript file has this code:
function success_failure(tick){
var x = tick;
x.fadeIn();
x.fadeOut(1000);
}
The browser's console doesn't give any error.
It seems that the function success_failure doesn't get the image.
What is wrong on this code and how can I fix it?
Thank you in advance!
You haven't defined tick when you make your function call. Try this...
<script type="text/javascript" src="js/success_failure_signs.js">
</script>
<script type="text/javascript">
var tick = $("#tick");
success_failure(tick);
</script>
EDIT: I've also separated the inclusion of the script and your code to call it into two separate script tags.
maybe passing the image to the script is the wrong way of thinking here.
Most of the time with Javascript for web pages the JS gets the image from the HTML site itself.
You are already including jQuery so look into how to get an element from the page with jQuery.

How to redirect output string of script src file to a variable in javascript

I have looked for a couple of hours for what seemed like an easy question and have tried several things I've found here and elsewhere, but cannot answer this. I run a radio station and the servers outputs the name of the current song in a short script. The script is
<script type="text/javascript" src="http://cdn.voscast.com/stats/display.js?key=33d86e1438d74956b30a556c434a952e&stats=songtitle"></script>
and works fine. What I want is something that is the equivalent of the Linux > or >> operator so I can store the data that gets put to my screen into a variable instead, so I can use it elsewhere. Sorry if this is so basic, but I've tried a number of different things and just need some specific simple code to fix this. Thanks
Try something like this using jQuery. It is a complete solution to your question.
<html>
<head>
<!-- This includes the jQuery library you need to extract the song name -->
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<!-- This is the script you want the song name from -->
<script type='text/javascript' src="https://cdn.voscast.com/stats/display.js?key=33d86e1438d74956b30a556c434a952e&stats=songtitle"></script>
</head>
<body>
<script type='text/javascript'>
$(window).load(function(){
$('div').filter(function() {
return /^.{13}/.test(this.id);
}).each(function() {
$(this).hide(); // Hide the song name here
// Assign the name to a variable as you requested
var songName = this.innerHTML;
// Just for a demonstration
alert( songName );
// Do what you like with the song name here ...
});
});
</script>
</body>
</html>
When the JavaScript file loads, it prints a div and populates it with the name of a song. The div id looks to be a randomly generated 13-character string. You can access that div using a jQuery selection filter - the /^.{13}/.test(this.id) part.

How do I load a specific javascript file or javascript code into an HTML document?

Here's what I'm trying to do;
I have this HTML code:
<div id="background-color-random">
DIV CONTENT
</div>
And this javascript:
$(document).ready(function() {
var colors = ["#FFA347", "#FF5050", "#FF66FF", "#6699FF", "#00FF99"],
selectedColor = colors[Math.floor(Math.random()*colors.length)]
header = $("div#background-color-random");
header.css("background-color", selectedColor);
});
I want to impliment this on an HTML page. I know that you can load up a *.js file by using the script tags with src="..". But that doesn't seem to work.
The javascript creates a random color and then applies that to the background of a given 'div' in the HTML.
Now, I'm not good with javascript, so please be patient with me and simple answers are needed :)
I need to be able to get the javascript to load when requested from the HTML and then apply itself to the div with id="..".
You have a syntax error (missing a comma):
selectedColor = colors[Math.floor(Math.random()*colors.length)]
header = $("div#background-color-random");
Should be
selectedColor = colors[Math.floor(Math.random()*colors.length)],
header = $("div#background-color-random");
You are using jQuery, not pure javascript. That's a good thing...
but you also must add the jQuery library in your head tags, like this:
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
You also need to put semi-colons (or commas, as RobM has corrected me, if between var assignments) at the end of each instruction. See line 3 in your code example.
If you want your js/jQuery code in a separate file, you can load the script code like this (again, usually done in the <head> tags):
<script src="filename.js" type="text/javascript"></script>
Or, you can include the js/jQ in the <head> tags of your document, like this:
<script type="text/javascript">
$(document).ready(function() {
var colors = ["#FFA347", "#FF5050", "#FF66FF", "#6699FF", "#00FF99"],
selectedColor = colors[Math.floor(Math.random()*colors.length)],
header = $("div#background-color-random");
header.css("background-color", selectedColor);
});
</script>
If including the script as an external file, you leave out the <script></script> wrapper from that file.

JavaScript, load component/call method only if needed

I am searching for a way to clean my HTML views from script-tags.
Example:
(A view with a script tag)
<script type="text/javascript">
$jQuery().ready(function() {
call.a.method();
}
</script>
I would like to remove this script tag and put it into a class - this class should initizalize on the document ready event and execute the method which belongs to the called view.
How could I realize something like that? Is there some best practice?
Short version of my intention:
1.) Remove script tags from html files and put this code into some methods/functions
2.) Only call the method/function that belongs to a view if I call the view:
Example:
www.url.com/testview.html
Execute: obj.views.testview();
How could I realize something like a mapping and is it possible to identify the called file/view?
must move it in to a script file :)
something.js
JS Code:
$jQuery().ready(function() {
call.a.method();
}
html code
<script src="scripts/jquery-1.6.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="scripts/something.js" type="text/javascript" charset="utf-8"></script>

Categories

Resources