I have a very simple form using angularjs that validates a number field test.html ...
http://plnkr.co/edit/mfxdTxGUXLZswzl1nyF2?p=preview
<div ng-app="myApp">
<script>
angular.module('myApp', [])
.controller('myController', ['$scope', function($scope) { }]);
</script>
<form name="myForm" ng-controller="myController">
<input name="numberField" ng-model="myModel" type="number" value="" />
<p ng-show="myForm.numberField.$error.number">Not valid number!</p>
</form>
</div>
</html>
I want to put that form into a different html page...
<html>
<div id="test">
<!--I want my angular js number element to go here-->
</div>
</html>
Normally when I do something like this I use javascript and make a request to the page and use innerhtml to place the form where i want it, something like this...
<script>
var xRequest1;
xRequest1=new XMLHttpRequest();
xRequest1.onreadystatechange=function ()
{
if((xRequest1.readyState==4) && (xRequest1.status==200))
{
document.getElementById("test").innerHTML=xRequest1.responseText;
}
}
xRequest1.open("post","test.html",true);
xRequest1.send();
</script>
However this is not working, any idea how I can do this? or is this even possible? Ive never worked with angularjs before. Thanks in advance!
If you are building angular app from scratch then, you should
consider, putting ng-app in the main index and using ng-include as
#Ronnie pointed out.
But, If you are forced to integrate angular, in one place on legacy
code, you can manually bootstrap angular app, after, filling the
div#test in the ajax callback using angular.boostrap :
Here is a working demo using your exemple.
var xRequest1;
xRequest1=new XMLHttpRequest();
xRequest1.onreadystatechange=function ()
{
if((xRequest1.readyState==4) && (xRequest1.status==200))
{
document.getElementById("test").innerHTML=xRequest1.responseText;
// bootstrap your app here ...
angular.bootstrap(document.getElementById('test'), ['myApp']);
}
}
xRequest1.open("get","test.html",true);
xRequest1.send();
Related
I'm trying to put text on my page. can I input a text file?
<div class="container">
<input type="file" src="pone.txt">
</div>
like this well not like this as this don't work, please help, thanks a newbie.
you can use an iframe inside of a paragraph to do it, like i am showing below
<p><iframe src="name_of_your_text_file.txt"></iframe></p>
</body>
You can use the embed HTML element.
<embed src="phone.txt">
MORE INFORMATION ON EMBED TAG
If you have access to a server side scripting language, it would be a little neater to do:
<div>
<?php include('phone.txt'); ?>
</div>
If you want to use jQuery you can do it via:
$(function () {
$.get('/phone.txt', function (data) {
consile.log(data);
});
});
You cannot easily do that with HTML alone. You have to employ some JavaScript.
<!DOCTYPE html>
<html>
<body>
<input type='file' name='pone' id='pone'>
<pre id='sameOutput'> </pre> //this will render the text file as it is in the file directly on the webpage.
<script type='text/javascript'>
document.getElementById('pone').addEventListener('change', function (){
var myfile= new FileReader();
myfile.onload = function (){
document.getElementById('sameOutput'). textContent = myfile.result;
}
myfile.readAsText(this.files[0]);
})
</script>
</body>
</html>
Im new to HTML and i have this loader code i got from : https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_loader5
I adjust it to have a button and when i click on this button it sends an internal GET request to my code /clients.
I want the same code to work but without the button.
I want the loader to finish load and then redirect to the /clients page because now it is depended on the button click.
my code:
</head>
<body onload="myFunction()" style="margin:0;">
</body>
<div id="loader"></div>
<div style="display:none;" id="myDiv" class="animate-bottom">
<h2>Pres OK.</h2>
<form method="get" action="/clients">
<button>OK</button>
</form>
</body>
</div>
simply removing the button line is not doing anything, just showing blank page and in my code i see
its not redirecting to /clients
how can i do this ?
EDIT:
SOLVED by changing myFunction like #Bert Maurau
suggested
<script>
var myVar;
function myFunction() {
myVar = setTimeout(function(){ window.location.href = '/clients' }, 1000);
}
So you basicly want to redirect the user if your "loading" is done?
I see you're calling the myFunction() on page load.
You could add a basic
setTimeout(function(){ window.location.href = '/clients' }, 1000);
at the end of the function to redirect the user to /clients after one second.
(or when your loading function has done processing the data.
myFunction() {
// do stuff here
// ...
// wait for a second
const timeout = setTimeout(() => {
// redirect to clients
window.location.href = '/clients';
}, 1000);
}
You could submit your form from myFunction().
<script>
function myFunction() {
document.getElementById("form_id").submit();
}
</script>
This function would be called when the page is finished loading and would submit the form without anybody pushing the button. You could even remove the button entirely.
Solution:
</head>
<body onload="myFunction()" style="margin:0;">
Remove the extra closing tag for BODY
<div id="loader"></div>
<div style="display:none;" id="myDiv" class="animate-bottom">
<h2>Pres OK.</h2>
<form method="get" action="/clients">
<button>OK</button>
</form>
</body>
</div>
You can use the below Jquery Script
<script>
$(document).ready(function(){
if($('#loader').hasClass('d-none') || $('#loader').css('display') == 'none'){
// or any other check to ensure that the loader is finished.
$('form').submit();
}
})
</script>
Please feel free to ask if you need more clarification.
I have got a problem when using nicEditor for my textarea editors in mvc project.
Here is the 2 view pages that I have created.From the First View I pass route values to the Second view
<ul class="mar">
#foreach (var item in Model)
{
<li class="mar" style="list-style-type:none">
<div style="display:inline-block;font-size:small">
<a id="arrow_#item.thread.MessageID" class="glyphicon glyphicon-triangle-right" style="text-decoration:none;cursor:pointer;color:dimgray" onclick="toggle(#item.thread.MessageID)"></a>
<h3 class="mar" style="display:inline-block;">#item.thread.Title</h3>
</div>
<li>
</ul>
Second View
#Scripts.Render("~/bundles/jquery")
<script type="text/javascript" src="~/Scripts/nicEdit.js"></script>
<script type="text/javascript">
bkLib.onDomLoaded(function() { nicEditors.allTextAreas() });
</script>
<h2>GetMessage</h2>
<textarea style="width:900px"></textarea>
Here second view displays the niceditor(textarea) without its images inbuild with the nicEditor
When I remove the passing parameters from the First View,then it works Fine..
I need to know Why it happens like that???
Use the developer tools of your browser and watch the network view, why the nicEditoricons.gif not loaded, is a path problem. Use the option iconsPath to set the right one.
And please, take a look in the manual of nicedit.
var NicEditconfig = {
iconsPath : '/img/nicEditorIcons.gif',
buttonList : ['bold','italic','underline','ol','ul']
};
You need to configure the path manually
First, check the console to find the current request path. If the request path is wrong, then configure it
HTML
<textarea id="textAreaNiceEditor" style="width: 100%;">
Some Initial Content was in this textarea
</textarea>
JS Code
<script src="~/Content/NiceEditor/nicEdit.js"></script>
<script type="text/javascript">
//<![CDATA[
bkLib.onDomLoaded(function () {
new nicEditor({ iconsPath: '../../../Content/NiceEditor/nicEditorIcons.gif' }).panelInstance('textAreaNiceEditor');
});
//]]>
</script>
'../../../Content/NiceEditor/nicEditorIcons.gif'
Change this path value based on your gif location.
Make sure that you use are using same textarea id in JS code. Above case the id value is textAreaNiceEditor
I have a large application that I want to convert from NATIVE to IFRAME sandbox now that NATIVE is deprecated. The general flow of the application is as follows: The user fills out a form on the beginning page and presses a Begin button. The beginning page is then hidden, and based upon values from the first page, the user is then shown a new page. My problem when using IFRAME is that the new page is never shown. It works as expected in NATIVE mode. I have created a simplified script that exhibits the problem. Please help me understand what I am forgetting or doing wrong.
Code.gs
function doGet() {
Logger.log('enter doget');
var html = HtmlService.createTemplateFromFile('BeginHeader').evaluate()
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
return html;
}
function include(filename) {
Logger.log('enter include');
Logger.log(filename);
var html = HtmlService.createHtmlOutputFromFile(filename).getContent();
Logger.log(html);
return html;
}
Javascript.html
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js">
</script>
<script
src="https://apis.google.com/js/api.js?onload=onApiLoad">
</script>
<script>
function showForm(hdr) {
console.log('enter showform');
console.log(hdr);
console.log('hiding first page');
document.getElementById('beginDiv').style.display = 'none';
var el = document.getElementById('recordDiv');
el.innerHTML = hdr;
console.log('showing new page');
el.style.display = 'block';
}
function oops(error) {
console.log('entered oops');
alert(error.message);
}
</script>
<script>
$(document).ready(function() {
console.log('begin ready');
$("#beginForm").submit(function() {
console.log('enter begin submit');
//console.log('hiding first page');
//document.getElementById('beginDiv').style.display = 'none';
console.log('including page 2');
google.script.run
.withSuccessHandler(showForm)
.withFailureHandler(oops)
.include('Page2');
});
});
</script>
BeginHeader.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<div id="beginDiv" style="display:block">
<p>Click on Begin. </p>
<form id="beginForm">
<input type="submit" value="Begin">
</form>
</div>
<!-- results of content being filled in -->
<div id="recordDiv"></div>
<?!= include('Javascript'); ?>
</body>
</html>
Page2.html
<!DOCTYPE html>
<html>
<body>
<p> This is page 2. </p>
</body>
</html>
There is no point in ever using a button of the "submit" type, unless you want to force the form to make an HTTP Request, and reload the application. That's what a "submit" type button does. It causes the page to be reloaded. The "submit" type button is meant to work together with a form in a certain way. It causes a GET or POST request to happen. That's what the problem is. So, you'll need to reconfigure things a little bit.
Just use a plain button.
<input type="button" value="Begin" onmouseup="gotoPg2()">
I created a gotoPg2() function to test it:
<script>
window.gotoPg2 = function() {
console.log('enter begin submit');
//console.log('hiding first page');
//document.getElementById('beginDiv').style.display = 'none';
console.log('including page 2');
google.script.run
.withSuccessHandler(showForm)
.withFailureHandler(oops)
.include('Page2');
};
</script>
If you use that, they you don't need the $(document).ready(function() { etc. code anymore. And, if you don't need that code, then you don't need to load jQuery.
Unless you are using jQuery for other things, then you don't need:
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js">
</script>
The NATIVE mode was probably blocking the intended usage of the "submit" request. That's why the code in NATIVE was working. IFRAME allows things to work as they are built and intended to work, which means that the page was probably trying to be reloaded, and an error was occurring. I was getting a 404 page error in the browser console.
I'm building my first AngularJS dynamic form, built based on information received from a JSON file using AngularJS directive.
Everything works, my issue is that the JSON code is getting displayed while the page is loaded - once the page is loaded the JSON code disappears.
Am I doing something wrong?
Check http://plnkr.co/edit/v4jOwuF6jmZfORlNbvIB?p=preview to see the behavior, click on "Stop"/"Start" multiple times to see the behavior.
HTML code:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="angular.js#*" data-semver="1.4.0-beta.2" src="https://code.angularjs.org/1.4.0-beta.2/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="ViewCtrl">
<div ng-repeat="page in form.form_pages">
<div ng-repeat="field in page.page_fields" class="form-group">
<field-directive field="field" ng-form="subForm"></field-directive>
</div>
</div>
</body>
js code:
'use strict';
angular.module('myApp',[])
.controller('ViewCtrl', ['$scope', function($scope) {
var jsonStr='{"form_id":"1","form_name":"My Test Form","form_pages":{"1":{"page_id":1,"page_title":"My First Tab","page_hide":false,"page_fields":{"1":{"field_id":1,"field_title":"First Name","field_type":"textfield","field_value":"","field_required":true,"field_disabled":false},"2":{"field_id":2,"field_title":"Last Name","field_type":"textfield","field_value":"","field_required":true,"field_disabled":false},"3":{"field_id":3,"field_title":"Gender","field_type":"textfield","field_value":"0","field_required":true,"field_disabled":false},"4":{"field_id":4,"field_title":"Email Address","field_type":"textfield","field_value":"","field_required":true,"field_disabled":false},"5":{"field_id":5,"field_title":"Password","field_type":"textfield","field_value":"","field_required":true,"field_disabled":false},"6":{"field_id":6,"field_title":"Birth Date","field_type":"textfield","field_value":"1981-01-10T06:00:00.000Z","field_required":true,"field_disabled":false},"7":{"field_id":7,"field_title":"Your browser","field_type":"textfield","field_value":"2","field_required":false,"field_disabled":false},"8":{"field_id":8,"field_title":"Additional Comments","field_type":"textarea","field_value":"","field_required":true,"field_disabled":false},"9":{"field_id":9,"field_title":"I accept the terms and conditions.","field_type":"textfield","field_value":"0","field_required":true,"field_disabled":false}}}}}';
$scope.form = JSON.parse(jsonStr);
}])
.directive('fieldDirective',function($http, $compile) {
var linker = function(scope, element) {
// GET template content from path
var templateUrl = "textfield.html";
$http.get(templateUrl).success(function(data) {
element.html(data);
$compile(element.contents())(scope);
});
}
return {
template: '<div>{{field}}</div>',
restrict: 'E',
scope: {
field: '='
},
link: linker
};
})
textfield.html - the html template:
<div class="row" ng-form="subForm" ng-class="{'has-success': subForm[field.field_id].$invalid}">
<div class="col-sm-5">{{field.field_title}}:</div>
<div class="col-sm-7">
<input type="text"
placeholder="{{field.field_title}}"
ng-model="field.field_value"
value="{{field.field_value}}"
ng-required="field.field_required"
ng-disabled="field.field_disabled"
class="form-control"
id = "{{field.field_id}}"
name = "{{field.field_id}}" >
<div ng-show="subForm[field.field_id].$touched && subForm[field.field_id].$error && subForm[field.field_id].$invalid">Field '{{field.field_title}}'
<span ng-show="subForm[field.field_id].$error.required"> is required.</span>
</div>
</div>
</div>
Thank you.
http://plnkr.co/edit/YC9p0UluhHyEgAjA4D8R?p=preview
Basically instead of adding the loaded template into the element then compiling it in place I just compile the string then insert the compiled element directly
element.append($compile(data)(scope));
Seems you can still see a delay but this might be the async loading of the template causing that, would need to debug in the network panel and do some profiling or logging to see exactly what's going on.
Edit
Made a fork of the plnkr to show one with the template inlined so there's no delay fetching it with $http http://plnkr.co/edit/Tnc3VOeI8cELDJDHYPTO?p=preview instead just grabbing it synchronously from the template cache and using ng-template in a script block to have it loaded in advance.