call function with dijit.layout.ContentPane onload? - javascript

Is it call test() of sub.htm from index.htm by this code when doing very?
Thank you very much.
index.htm
<div dojoType="dijit.layout.ContentPane" id="subFrame" region="left" href="sub.htm">
<script type="dojo/connect" event="onLoad">
// this call test()
</script>
</div>
sub.htm
<script type="text/javascript">
function test() {
alert("success");
}
</script>
<table>
<tr>
<td></td>
</tr>
</table>

For what I know you can't call a javascript inside a content pane unless you use <script type="dojo/method">. try to replace the text/javascript type in sub htm with "dojo/method".

i think it should be fine if you swap the function into a variable declaration style:
var test = new function(){ alert("success") };

Related

how to Append defined functions to script tag of html

Hi: I want to append a js function something like function amb(){console.log("hello")} inside the script tag. But There is a problem in this. Because as the function is append to script tag it says function is not defined when i try to call. if you understand the problem or have any solution to it please help me. Thanks a lot...
<script id="append_here">
// the appended function goes in this script
</script>
<script>
a = `function amb() { console.log('hello')}`
document.getElementById('append_here').append(a)
</script>
<div id="a">
<button onclick="amb()"> amb</button>
</div>
You can't append content to a script and have the browser "re-parse" the script
You can create a new script tag, add the content, and append that to the body
<script>
const a = `function amb() { console.log('hello')}`;
const scr = document.createElement('script');
scr.textContent = a;
document.body.append(scr);
</script>
<div id="a">
<button onclick="amb()"> amb </button>
</div>
You can use eval aswell
<script id="append_here">
// the appended function goes in this script
</script>
<script>
a = `function amb() { console.log('hello')}`;
document.getElementById("append_here").append(eval(a));
</script>
<div id="a">
<button onclick="amb()">amb</button>
</div>

Javascript function to send parameter

Please tell me how to send div id as a parameter to javascript function onclick in a link of a page to open it via javascript. I want to send div id to open that particular link.
<a id="anchor22" href="http://www.friferie.dk/inspiration/%C3%98strig" onclick="MyFunction()>Ostrig</a>
<script type="text/javascript">
function MyFunction(anchor) {
document.getElementById('achor').click();
}
</script>
Use this way -
function myFunction(x) {
document.getElementById('showId').innerHTML = x.parentElement.id; // x.parentElement.id gets the parent div then its id value
}
<div id="div1">
Click Me <!-- pass this to the function -->
</div>
<br />Div's id: <span id="showId">
</span>
The above code was just for simplicity. For your sample code -
<div id="div1">
<a id="anchor22" href="http://www.friferie.dk/inspiration/%C3%98strig" onclick="MyFunction(this)>Ostrig</a>
</div>
<script type="text/javascript">
function MyFunction(anchor) {
alert(anchor.parentElement.id); // Will return div1
alert(anchor.id); // Will return anchor22
}
</script>

Print only certain part of the <div> content

I have the following JavaScript code to print a content
<script type="text/javascript">
function Print(print)
{
Popup($(print).html());
}
function Popup(data)
{
var mywindow = window.open("", "print");
mywindow.document.write("<html><head><title>Report</title>");
mywindow.document.write("</head><body>");
mywindow.document.write("<div align='center'>");
mywindow.document.write(data);
mywindow.document.write("</div>");
mywindow.document.write("</body></html>");
mywindow.print();
mywindow.close();
return true; }
</script>
And in my HTML I have the following code:
<html>
<body>
<p>Print</p>
<div id="print">
<h1>Report</h1>
<table>
<tr><th>Date</th><th>Remarks</th><th>Amount</th><th>Actions</th></tr>
<tr>
<td>10/11/2014</td>
<td>Hello</td>
<td>$14</td>
<td>Edit</td>
</tr>
</table>
</div>
</body>
</html>
I want to print only the first 3 columns. I do not want to print the 4th Column "Actions". When I try to print out the content by using the above code it prints all the 4 columns. Please help me with the following.
You can simply put the style to display none with id for that td's
Inside HTML:
....
<th id="act">Actions</th>
....
<td id="act">Edit</td>
Inside JS:
mywindow.document.write("<html><head><style>#act{display:none;}</style><title>Report</title>");
You can do that with jquery.
$(document).ready(function(){
$('.tabel').find(':nth-child(4)').hide();
});
JSFIDDLE HERE

how to pass the value of a button to angular js

I wanted to pass my button value to angular js through a function. I tried passing the function with the ng-model but it's not working in the case of a button. So can anyone help me with this thanks in advance
html:
<p align="center">
Category 1
</p>
angular js:
$scope.catFn1 = function () {
var sel1 = document.getElementById('select1').innerHTML;
alert(sel1);
sharedService.prepForBroadcast(sel1); //----- making the button value available through out the code
return dict1(sel1);
}
function dict1(sel1) {
alert(sel1);
$("#dictation1").click(function () {
window.location = "#pageeight";
});
}
I actually wanted to perform controller communication using factory method I just know to communicate by this method. So I need to pass my value through a function.All the answers are valued.
You can access current object via e.target property. From there you can grab value attribute.
Category 1
In controller:
$scope.catFn1 = function (e) {
var sel1 = e.target.getAttribute('data-value');
sharedService.prepForBroadcast(sel1);
return dict1(sel1);
}
plnkr = http://plnkr.co/edit/b1bFqZdoGVNyC5KOCkJp?p=preview
ng-click's value is an expression, see below:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
</head>
<body ng-app>
<p align="center">
<a href="#category1"
id="select1"
ng-model="select1"
data-transition="slidedown"
class="ui-btn ui-corner-all"
value="Category 1"
ng-click="catFn1();select1 = $event.target.attributes.getNamedItem('value').textContent">
Category 1
</a>
select1 = {{ select1 }}
</p>
</body>
</html>
First, its not a button its an anchor.
Try this:
Text
function test(control){
alert(control.innerHTML)
}

Can't make JavaScript work, is it an ID issue?

I'm trying to get a message to appear when a user clicks the image that's in a the "lifeCalculatorButton" ID, but I can't figure out how to make it work. I know that the html doc is referencing the js doc fine, so that's not the issue. Any ideas?
<html>
<head>
<link rel="Stylesheet" type="text/css" href="apps.css" />
<script type="text/javascript" src="apps.js"></script>
<title>my apps</title>
</head>
<body>
<div id="breaks">
<a href="http://info" > <img src="homeicon.png" /> </a>
<br>
<br>
<br>
<br>
<br>
<div id="appTable" style="float: left">
<table border="0" id="appTable">
<tr>
<td>life calculator</td>
</tr>
<tr>
<td>punny!</td>
</tr>
<tr>
<td>drink roulette (on its way!)</td>
</tr>
</table>
</div>
<div id="arrowTable" style="float: left">
<table border="0">
<tr>
<td id="lifeCalculatorButton"><img src="arrow1.png" width="45"</td>
</tr>
<tr>
<td id="punnyButton"><img src="arrow1.png" width="45"/></td>
</tr>
<tr>
<td id="drinkRouletteButton"><img src="arrow1.png" width="45"/></td>
</tr>
</table>
</div style="clear: both">
<div id="content">
my apps :)
</div>
And here's the JavaScript:
var foo = document.getElementById('lifeCalculatorButton');
foo.onClick = function (){
document.getElementById('content').innerHTML = 'foo';
};
Try changing the onclick event to all lowercase.
var foo = document.getElementById('lifeCalculatorButton');
foo.onclick = function (){
document.getElementById('content').innerHTML = 'foo';
};
EDIT
The below code works in both Firefox and IE. I've changed the event from foo.onClick to foo.onclick. Make sure your javascript block is at the end of the page or the call to getElementById will return null. Also, you should close the unclosed <img> tag and remove the style="clear: both" from the second to last closing </div> near the bottom of your page.
<html>
<head>
<link rel="Stylesheet" type="text/css" href="apps.css" />
<title>my apps</title>
</head>
<body>
<div id="breaks">
<img src="homeicon.png" />
<br /><br /><br /><br /><br />
<div id="appTable" style="float: left">
<table border="1" id="appTable">
<tr><td>life calculator</td></tr>
<tr><td>punny!</td></tr>
<tr><td>drink roulette (on its way!)</td></tr>
</table>
</div>
<div id="arrowTable" style="float: left">
<table border="1">
<tr><td id="lifeCalculatorButton"><img src="arrow1.png" width="45"/></td></tr>
<tr><td id="punnyButton"><img src="arrow1.png" width="45"/></td></tr>
<tr><td id="drinkRouletteButton"><img src="arrow1.png" width="45"/></td></tr>
</table>
</div>
<div id="content">
my apps :)
</div>
</body>
</html>
<script type="text/javascript">
var foo = document.getElementById('lifeCalculatorButton')
foo.onclick = function (){
document.getElementById('content').innerHTML = 'foo';
};
</script>
EDIT
If you are using an external javascript file you must use the window.onload event handler to register your handler to ensure the page has completely loaded.
window.onload = function () {
var foo = document.getElementById('lifeCalculatorButton')
foo.onclick = function (){
document.getElementById('content').innerHTML = 'foo';
};
};
First, you seem to have a typo here:
<td id="lifeCalculatorButton"><img src="arrow1.png" width="45"</td>
The <img> tag is not closed properly.
You also have to either move the <script> include at the bottom of your document or attach to the window load event to make sure that your script is executed after the elements in question appear in the DOM:
window.onload = function () {
var foo = document.getElementById("lifeCalculatorButton");
// ...
};
It may be overkill but this could be a good excuse to introduce yourself to jQuery or similar framework. It makes this kind of work trivial to implement. See this fiddle for a working examlpe using jQuery.
If you don't want to use jQuery your javascript looks ok as this fiddle works.
As others have said make sure you are not assigning the event handler until after the DOM is loaded. This is done in the pure javascript fiddle above using the following code
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
var foo = document.getElementById('Clickable');
foo.onclick = function (){
alert("See It Works");
};
}//]]>
On a side note following a comment above, the cursor will not change on hover as the browser is still interpreting the element as what ever it is, in this case, a table cell. The only difference is that it now has an event assigned to it. To have the cursor change you will need to do this using CSS.
Does it need to be the td that holds the id? Why not use an a tag to wrap around the image (and as suggested close the img tag correctly with />). Apply the onclick to the a tag and call a function with a return false afterwords to bypass normal behavior... and obviously, in your onclick you can call whatever function u want

Categories

Resources