Loading External JavaScript file after view page is loaded in AngularJs - javascript

<div ng-app>
<form ng-submit="addTodo()">
<input type="text" ng-model="todoText" size="30"
placeholder="add new todo here" id="inputtext">
<input class="btn-primary" type="submit" value="add">
</form>
<script type="text/javascript" src="js/process1/Process1Controller.js"></script>
I want to load specified js file after html load since id of input textbox is used in js .
i have seen different thread and done many experiments for this like
$scope.$on('$viewContentLoaded', function(){
})
but issue not resolved

This is a hack, and not likely the proper way to do things, but try using ng-if to dynamically populate the items on the page:
//HTML
<script ng-init='myVariable = true' ng-if='myVariable' type="text/javascript" src="myJsToLoad.js"></script>
again, this is not the proper way to do things in angular, but it should work

As per my suggestion,
put the entire js code in a function, like below:
function loadmyjs(){
// put your entire related js code here...
}
And inside the current controller, call that js method like, When your id is created....
loadmyjs();

Related

jQuery document.ready() not firing for dynamically loaded content

I've got a PHP file (called aboutMe.php) that contains some HTML as follows:
<script type="text/javascript" src="/aboutMe.js"></script>
<div id="aboutme-gender" class="aboutme-block">
<div class="aboutme-question">My gender is:</div>
<div class="aboutme-error">Please select your gender.</div>
<div class="aboutme-answer">
<input id="gender-male" name="the-gender" type="radio" value="1" />
<label for="gender-male">Male</label>
<input id="gender-female" name="the-gender" type="radio" value="2" />
<label for="gender-female">Female</label>
</div>
</div>
The aboutme.js file contains a function as follows:
jQuery(document).ready(function($) {.....does stuff to the tags in the HTML});
This all works fine if the page is loaded directly. However when another page wants to load this dynamically as follows:
$("#load-aboutme-here").load("aboutMe.php");
...the document.ready() event doesn't fire and things don't get tagged.
I've seen similar posts but can't quite get what I need from them. Have done things like substitute the document.ready() for window.load() but then it doesn't even work at all when the aboutMe.php page is loaded directly.
Any ideas much appreciated - this is driving me nuts although I suspect it's an easy fix!
Thanks
Iain
Note that the document is the main page...not subsequent files you retrieve
The document was ready long before the ajax is done so any $(document).ready() that is called after it is ready will fire immediately. In your case it will fire before the elements exist
Move the script tag below the html that the code is referencing
<div id="aboutme-gender" class="aboutme-block">
.......
</div>
<script type="text/javascript" src="/aboutMe.js"></script>
If I understood your problem correctly, I believe you could just create a callback for the .load() function like so:
$("#load-aboutme-here").load("aboutMe.php", null, function()
{
// Code to be executed when aboutMe.php is loaded.
// i.e. The code in aboutMe.js
});

Displaying results on separate page

I have a beginner question. What is the easiest way to take data from a form on one html page and display it on another when the user clicks submit? I have two functions, a Submit() that calls the display() function (the display function displays the data on the page). I first displayed the result on the index.html page but realized it was too cluttered so I opted to print the results to a separate html page. However, I cannot recall the proper way of doing this. I tried putting location.href='results.html' inside my display() function by it didn't work.
You can use just HTML + Javascript to achieve this.
Just create a form with method="get". So the values will be passed by querystring to the another page.
Example:
index.html
<html>
<form method="get" action="results.html">
<input type="text" name="age" />
<input type="submit" value="Send" />
</form>
</html>
results.html
<html>
<h1></h1>
<script>
document.querySelector("h1").innerHTML = window.location.search.substring(1);
</script>
</html>
Whilst technically this is possible using HTML5 local storage, the best solution to your question is to use a server side language such as PHP, which you can read up on here as a beginners tutorial, or in more detail on the PHP Manual
Hope this helps
Here is an example. Write your html page (e.g. "index.html") like
<html>
<head>
<title>form with output</title>
</head>
<body>
<form target="out" action="tst.php">
<input type="text" name="a">
<input type="text" name="b">
<input type="submit" name="sub" value="OK">
</form>
</body>
</html>
and, assuming you have PHP available on your webserver you can write a second (php) script (filename: "tst.php") like this
<?php
echo json_encode($_REQUEST);
?>
(The php script simply outputs all passed variables as a JSON string). The important thing that will redirect your form's output into a separate window is the target="out" part in the <form> tag.

Echoing data from an iframe to the parent page

I have a hidden iframe where the submission of a form is handled. It goes like this:
<iframe name="foo" style="display:none;"></iframe>
So, I was wondering, if it is possible that after the stuff has happened that needs to be within the iframe, I can use javascript or something to print out data on the parent page? Thanks
EDIT: here is my form code.
<form id="bar" name="bar" method="post" target="foo" action="include/database.php">
<input type="text" name="betamount">
<input type='text' name="multipler">
<input type="checkbox" name="hilo" value="High" checked>
<input type="submit" name="submit" value="Bet">
</form>
<iframe name="foo" style="display:none;"></iframe>
Database.php handles these POST requests inside the iframe. Now, there is this one thing inside database.php which goes like this
$betamount = $_POST['betamount'];
$multiplier = $_POST['multiplier'];
$payout = (int)$betamount*(int)$multiplier;
What I want to do is, I want to use AJAX or something to echo out the 'payout' variables inside a div present on index.php
For the purposes of my answer, I'm assuming that the actions you are doing in server side cannot be replaced by a simple client-side one (using javascript).
If you are expecting a return, why don't you use AJAX directly, without iframes? Simply post the data to your php page, and return it asynchronously.
JsFiddle: http://jsfiddle.net/ericwu91/28U8n/
HTML Code:
<input type="text" id="amount" name="betamount">
<input type='text' id="multiplier" name="multipler">
<input type="checkbox" name="hilo" value="High" checked>
<button onclick="submit();return false;">Submit</button>
JS Code:
var yourData = {multiplier:$("#multiplier").val(),betamount:$("#amount").val()};
$.post("yourUrl.php",yourData,function(result){
//Success: Use the "result" parameter to retrieve the data returned from server
alert(result);
});
I'm using jQuery's ajax post method. Documentation here: http://api.jquery.com/jquery.post/
The perks of doing it this way is that it does exactly what you wanted to, but simplifies it by using an almost-native javascript property (asynchronous responses).
EDIT: I forgot to put the real jsfiddle link... And after I pasted all the HTML and JS code, I realized how useless the fiddle is, as it won't return any respose at all... xD

Android submit https login form which uses jquery

I am trying to see if it is all possible to login to a website after which I will make calls to extract some data. I am doing the latter from one website which doesn't require a login as so:
doc = Jsoup.connect("https://pilotweb.nas.faa.gov/PilotWeb/notamRetrievalByICAOAction.do?method=displayByICAOs").data("retrieveLocId", params[0])
.data("formatType", "ICAO").data("reportType", "RAW").data("actionType", "notamRetrievalByICAOs")
// .userAgent("Mozilla")
// .cookie("auth", "token")
.timeout(6000).post();
This is working perfectly so I want to do the same thing on this other website but I need to login first.
So I have stripped the webpage down to the barest amount to try and see what is required to make the login work and I have the following:
<script src="https://www.airservicesaustralia.com/naips/Scripts/2012.1.214/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="https://www.airservicesaustralia.com/naips/Scripts/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
<form action="https://www.airservicesaustralia.com/naips/Account/LogOn" id="frmLogon" method="post">
<input name="UserName" value="login_goes_here" />
<input name="Password" value="password_goes_here"/>
<input type="hidden" value="Submit" data-type="submit" />
</form>
<script src="https://www.airservicesaustralia.com/naips/Scripts/napis/naips.js?v0.0076" type="text/javascript"></script>
If I press the submit button now the login succeeds. However, I have now run out of knowledge about how this whole thing works in terms of the scripts. So my question at this stage is, is it even possible to construct a call from within Android to get a successful login such that I can then use the same style of jsoup.connect I am currently using?
I am thinking I have to look at the naips.js script and perhaps find out what it is finally using to submit but I'm not sure. Any help would be appreciated.
Gavin...
I actually solved this by looking at the element information in Chrome. I could see the submit button that the javascript was creating and then I just manually put that into the HTML and then could remove all the scripts

Why is a value not getting copied to the clipboard in javascript?

I'm using Google App Engine Go SDK and I want to put some basic javascript code into my HTML templates that will use parameters passed from the application. The template looks like this:
<script type="text/javascript">
function CopyToClipboard()
{
CopiedTxt = document.selection.createRange();
CopiedTxt.execCommand("Copy");
}
</script>
[...]
<form name="Form1">
<input type="hidden" name="link" value="{{.Link}}">
<input type="button" onClick="CopyToClipboard()" value="Copy to clipboard" />
</form>
What the code is supposed to do is copy the {{.Link}} value into the clipboard. But instead of getting things like http://example.com in the clipboard, I get {{.Link}}, even though the page source of the executed template clearly reads
<input type="hidden" name="link" value="http://example.com">
How can I make the javascript work properly with the GAE Golang template?
This has nothing to do with app engine, templates, or go. The problem is that .execCommand() will not generally work. Clipboard access is not something that can be done successfully through javascript. You must use a flash plugin.

Categories

Resources