-/src
|-/lib
| |- address.svelte
|
|-/routes
| |-/test
| | |- +page.svelte
| |- +page.svelte
I'm trying to load address component from /routes/test/+page.svelte. I'm using svelte kit to develop my service, and this file tree is built for example.
The address.svelte is like so. It's suppose to run external js file when I press the input square.
<svelte:head>
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
window.onload = function() {
document.getElementById("address").addEventListener("click", function() {
new daum.Postcode({
oncomplete: function(data) {
document.getElementById("address").value = data.address;
}
}).open();
});
}
</script>
</svelte:head>
<div class="field">
<div class="container">
<div class="card">
<div class="content">
<h1>IGIS</h1>
<h2>Address Here</h2>
<br/>
<form>
<div>
<label class="label" for="address">소재지(주소)</label>
<br/>
<input class="input" id="address" type="text" name="address" placeholder=" " readonly required>
</div>
<button type="submit">Submit</button>
</form>
</div>
</div>
</div>
</div>
and /routes/test/+page.svelte is like so
<script>
import Address from "$lib/address.svelte";
</script>
<Address></Address>
However when I click the input square, the external js doesn't seems to be loading. How am I suppose to do it?
You should write the login that use external js file inside onMount instead.
<script>
import { onMount, onDestroy, beforeUpdate, afterUpdate } from 'svelte';
onMount(async () => {
// your code here
});
</script>
Related
I'm using ng-switch to switch between two functionalities on my webapp, downloading and uploading (controlled by two buttons). When the user wants to download, I use a textbox and submit button to pass the search query to an $http POST request in my js file.
This is the HTML code:
<button class="btn" name="search" ng-click="name = 'download'">Search & Download</button>
<button class="btn" name="upload" ng-click="name = 'upload'">Upload & Index</button>
<div ng-switch="name">
<div ng-switch-when="download">
<input type="text" ng-model="docsterm" my-enter="postData()" placeholder="Search">
<br><br>
<uib-accordion close-others="oneAtATime">
<div uib-accordion-group class="panel-default" heading={{result._source.filename}} ng-repeat="result in results.data.hits.hits">
<span ng-bind-html="highlight(result._source.attachment.content, docsterm)"></span>
<br><br>
<button class="btn">Preview</button>
<!-- Create the download button -->
<button class="btn" ng-click="download(result._source.data, result._source.filename, result._source.attachment.content_type)"><i class="fa fa-download"></i>
<!-- <textarea id="textbox">Type something here</textarea> <button id="create">Create file</button> <a download="info.txt" id="downloadlink" style="display: none">Download</a> -->
<br>
<!--
<ul uib-pagination boundary-links="true" total-items="results['hits']['total']" ng-model="currentPage" items-per-page="5" class="pagination-sm" previous-text="‹" next-text="›" first-text="«" last-text="»"></ul>
-->
</div>
</uib-accordion>
</div>
<div ng-switch-when="upload">
<!-- Multiple files -->
<button class="btn" ngf-select ng-model="files" ngf-multiple="true">Select Files</button>
<button class="btn" ng-click="submit()">Submit</button>
</div>
</div>
This is my js code:
docsApp.controller('docsController', function ($scope, $http, $sce) {
$scope.docsterm = "";
$scope.results = "";
$scope.currentPage = 1;
$scope.content = "";
$scope.content_type = "";
$scope.postData = function(docsterm) {
$http({
url: 'http://192.168.100.30:9200/my_index4/_search?q=' + $scope.docsterm,
method: "POST"
})
.then(function(response) {
$scope.results = response;
// $scope.content_type = response.data.
console.log($scope.results);
/*console.log($scope.content);
console.log($scope.content_type);*/
},
function(response) { // optional
$scope.results = "No results found."
});
}
However, docsterm is not being passed through to the js file.
In the console, I can see the $http request being sent is:
http://192.168.100.30:9200/my_index4/_search?q=
It should be:
http://192.168.100.30:9200/my_index4/_search?q=whateverDocstermIs
Of note, the exact download function code works fine when it is not nested inside the ng-switch, which leads me to believe that ng-switch is causing some issues.
Any ideas? Thanks!
My guess, it's because ng-switch behaves like ng-if - it creates its own scope.
To reach the scope of the controller you need to have $parent. before the model
<input type="text" ng-model="$parent.docsterm" my-enter="postData()" placeholder="Search">
Here is an example of this (with and without $parent)
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "download"
$scope.foo = function() {
console.log("Works:", $scope.docsterm);
console.log("Doesn't work:", $scope.docsterm2);
}
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-switch="name">
<div ng-switch-when="download">
<input type="text" ng-model="$parent.docsterm">
<input type="text" ng-model="docsterm2">
<button ng-click="foo()">Click</button>
</div>
<div ng-switch-when="upload">
...
</div>
</div>
</div>
</body>
</html>
I am editing the file, here i can change the filename as well as i can add another file for versions, If I have chosen the file, filename edit field should be disabled immediately. I have tried this following code, but its not get disabled until i type something in filename field.
My View code:
<div class="ipfield">
<label class="plclabel">Choose file</label>
<input type="file" class="txt_box" id="newfile"
onchange="angular.element(this).scope().fileNameChanged()">
</div
<div class="ipfield" >
<label class="plclabel">File Name</label>
<input type="text" class="txt_box" ng-disabled="filechoosen" ng-
model="filenameedit" id="filenameedit">
</div>
My app.js
In my controller I have wrote function:
$scope.filechoosen = false
$scope.fileNameChanged = function() {
$scope.filechoosen= true
}
Is there any mistake in my code.
Can you please try with $scope.$apply() inside the click function
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div class="ipfield">
<label class="plclabel">Choose file</label>
<input type="file" class="txt_box" id="newfile"
onchange="angular.element(this).scope().fileNameChanged()">
</div
<div class="ipfield" >
<label class="plclabel">File Name</label>
<input type="text" class="txt_box" ng-disabled="filechoosen" ng-
model="filenameedit" id="filenameedit">
</div>
</div>
</body>
</html>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.filechoosen = false
$scope.fileNameChanged = function() {
$scope.filechoosen= true
$scope.$apply()
}
});
</script>
as below
try ng-change insted of onchange
<input type="file" class="txt_box" id="newfile"
onchange="angular.element(this).scope().fileNameChanged()">
to
<input type="file" class="txt_box" id="newfile"
data-ng-change="fileNameChanged()">
The user #sqren (https://stackoverflow.com/users/434980/sqren) has made a custom directive which will help to solve this since angularjs doesn't have any ng-change support for file.
view.html
<input type="file" custom-on-change="uploadFile">
controller.js:
app.controller('myCtrl', function($scope){
$scope.uploadFile = function(event){
var files = event.target.files;
};
});
directive.js:
app.directive('customOnChange', function() {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var onChangeHandler = scope.$eval(attrs.customOnChange);
element.on('change', onChangeHandler);
element.on('$destroy', function() {
element.off();
});
}
};
});
He has also created a JSFiddle which help you to understand this.
The answer credit goes to #sqren, I am just mentioning it over here.
More information on the actual answer can be seen here - https://stackoverflow.com/a/19647381/1723852
I am using this sample form to send data. I currently watch under the console. But I really need to send these information to another page called result.html and I want to know how to do that. Currently I am using the following code in the main page... Here is the code
<!-- File: chapter4/two-forms-databinding.html -->
<html ng-app="notesApp">
<head><title>Notes App</title></head>
<body ng-controller="MainCtrl as ctrl">
<form ng-submit="ctrl.submit1()">
<input type="text" ng-model="ctrl.username">
<input type="password" ng-model="ctrl.password">
<input type="submit" value="Submit">
</form>
<form ng-submit="ctrl.submit2()">
<input type="text" ng-model="ctrl.user.username">
<input type="password" ng-model="ctrl.user.password">
<input type="submit" value="Submit">
</form>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js">
</script>
<script type="text/javascript">
angular.module('notesApp', [])
.controller('MainCtrl', [function() {
var self = this;
self.submit1 = function() {
// Create user object to send to the server
var user = {username: self.username, password: self.password};
console.log('First form submit with ', user);
};
self.submit2 = function() {
console.log('Second form submit with ', self.user);
};
}]);
</script>
</body>
</html>
I want to know how should be the code in the result.html page to grab the parameters sent by these forms. Please help me I am really new to angularjs.
<!-- File: chapter4/two-forms-databinding.html -->
<html ng-app="notesApp">
<head><title>Notes App</title></head>
<body ng-controller="MainCtrl as ctrl">
<form ng-submit="ctrl.submit1()">
<input type="text" ng-model="ctrl.username">
<input type="password" ng-model="ctrl.password">
<input type="submit" value="Submit">
</form>
<form ng-submit="ctrl.submit2()">
<input type="text" ng-model="ctrl.user.username">
<input type="password" ng-model="ctrl.user.password">
<input type="submit" value="Submit">
</form>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js">
</script>
<script type="text/javascript">
angular.module('notesApp', [])
.controller('MainCtrl', [function() {
var self = this;
self.submit1 = function() {
// Create user object to send to the server
self.user = {username: self.username, password: self.password};
console.log('First form submit with ', self.user);
};
self.submit2 = function() {
console.log('Second form submit with ', self.user);
};
}]);
</script>
</body>
</html>
I'm very new to AngularJS, and new to client side programming.
Context:
I'm implementing a contact form with support for multiple phone numbers and addresses.
It look like this:
<form name="contactInsertForm" ng-controller="contactInsertController as contactCtrlr" ng-submit="contactInsertForm.$valid && contactCtrlr.save()">
<input type="text" name="name" />
<phones-editor></phones-editor>
<addresses-editor></addresses-editor>
<input type="submit" />
</form>
phonesEditor and addressesEditor are custom Angular directives which implement support for adding, removing and editing phones and addresses. The controllers and modules look like this:
Addresses:
(function () {
var app = angular.module("AddressesEditorModule", []);
app.directive("addressesEditor", function () {
return {
restrict: "E",
templateUrl: "/addressesEditorTemplate.html",
controller: function ($scope) {
this.addresses = [
// this will hold addresses.
];
// ...
}
}
})();
Phones:
(function () {
var app = angular.module("PhonesEditorModule", []);
app.directive("phonesEditor", function () {
return {
restrict: "E",
templateUrl: "/phonesEditorTemplate.html",
controller: function ($scope) {
this.phones = [
// this will hold phones.
];
// ...
}
}
})();
And the templates:
Addresses:
<!-- list already added addresses -->
<div ng-repeat="address in addressesEditorCtrlr.addresses">
<p>{{address.address}}</p>
<p>{{address.city}}</p>
</div>
<form name="addressInsertForm" ng-submit="addressInsertForm.$valid && addressesEditorCtrlr.add()">
<!-- inputs for each of the address fields -->
<input type="submit" value="Add" />
</form>
Phones:
<!-- list already added phones -->
<div ng-repeat="phone in phonesEditorCtrlr.addresses">
<p>{{phone.number}}</p>
<p>{{phone.areaCode}}</p>
</div>
<form name="phoneInsertForm" ng-submit="phoneInsertForm.$valid && phonesEditorCtrlr.add()">
<!-- inputs for each of the phone fields -->
<input type="submit" value="Add" />
</form>
As you may have noticed, the generated at the browser HTML looks like this:
<form>
<input type="text" name="name" />
<phones-editor>
<!-- list already added phones -->
<div ng-repeat="phone in phonesEditorCtrlr.addresses">
<p>{{phone.number}}</p>
<p>{{phone.areaCode}}</p>
</div>
<form name="phoneInsertForm" ng-submit="phoneInsertForm.$valid && phonesEditorCtrlr.add()">
<!-- inputs for each of the phone fields -->
<input type="submit" value="Add" />
</form>
</phones-editor>
<addresses-editor>
<!-- list already added addresses -->
<div ng-repeat="address in addressesEditorCtrlr.addresses">
<p>{{address.address}}</p>
<p>{{address.city}}</p>
</div>
<form name="addressInsertForm" ng-submit="addressInsertForm.$valid && addressesEditorCtrlr.add()">
<!-- inputs for each of the address fields -->
<input type="submit" value="Add" />
</form>
</addresses-editor>
</form>
The problem:
I have two form's inside a form. The nested forms work correctly, adding and validating values it should be doing, and refusing to add invalid phones/addresses.
But when I click the submit button at the outer form, it will interpret the inner forms input fields and will raise errors if these fields have invalid values.
How can I use AngularJS form handling and avoid this situation? Is this possible at all?
you would need a directive if you want child form as isolate form. Have a look at answers from this SO question. please have a look at fiddle attached in this answer. I am putting the fiddle link here for you to js-fiddle to see it in action.
putting below code just because SO doesnt accept only fiddle links...
<form name="parent">
<input type="text" ng-model="outside"/>
<ng-form name="subform" isolate-form>
<input type="text" ng-model="inside"/>
</ng-form>
</form>
Working on Angular 1.6
const isolatedFormDirective = () => {
return {
restrict: 'A',
require: '?form',
link: ($scope, $element, $attrs, ctrl) => {
ctrl && ctrl.$$parentForm && ctrl.$$parentForm.$removeControl(ctrl);
}
}
}
app.directive('isolatedForm', isolatedFormDirective);
This article has exactly what you are looking for.
The basic gist is that you want to use the ngForm directive inside your form tag.
<div ng-form="outerForm">
<input type="text" ng-model="main.outerFormText"/>
<div ng-form="innerForm">
<input type="text" ng-model="main.innerFormText" required/>
<button type="button" ng-click="main.submit('innerForm')"
ng-disabled="innerForm.$invalid">Inner Submit</button>
</div>
<button type="button" ng-click="main.submit('outerForm')"
ng-disabled="outerForm.$invalid">Outer Submit</button>
</div>
Example plnkr
I am a novice developer of angularJs.
Working on some tutorials and facing the following problem now.
This is my view.
<!DOCTYPE html>
<html lang="en" ng-app="eventsApp">
<head>
<title>Event Registry</title>
<meta charset="utf-8"/>
<link type="text/css" rel="stylesheet" href="css/app.css"/>
<link type="text/css" rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body ng-cloak>
<div id="container">
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li> Add Event
</ul>
</div>
</div>
<div ng-controller="EditEventController">
<div class="container">
<h1>New Event</h1>
<hr/>
<form name="editEventForm">
<fieldset>
<label for="eventname">Event Name :</label>
<input id="eventname" type="text" ng-model="event.name" placeholder="Enter your Event Name"/>
<label for="eventdate">Event Date :</label>
<input id="eventdate" type="text" ng-model="event.date" placeholder="format is (dd/mm/yy)..."/>
<label for="eventtime">Event Time : </label>
<input id="eventtime" type="text" ng-model="event.time" placeholder="Enter the start time and end time"/>
<label for="eventlocation">Event Location :</label>
<input id="eventlocation" type="text" ng-model="event.location.address" placeholder="Enter the location of the event"/>
<br/>
<input id="eventstate" type="text" class="input-small" ng-model="event.location.state" placeholder="Enter the state of the location of the event"/>
<input id="eventcountry" type="text" class="input-small" ng-model="event.location.country" placeholder="Enter the country of the location of the event"/>
<br/>
<label for="eventImageUrl">Image Url:</label>
<input id="eventImageUrl" type="url" class="input input-xlarge" ng-model="event.imageUrl" placeholder="enter the image url"/>
</fieldset>
<img ng-src="{{event.imageUrl}}" src=""/>
<br/>
<br/>
<button type="submit" class="btn btn-primary" ng-click="savestatus(event,editEventForm)">Save</button>
<button type="button" class="btn btn-default" ng-click="reset()">Cancel</button>
</form>
</div>
</div>
</div>
<script src="lib/jquery-1.9.1.min.js"></script>
<script src="lib/jquery-ui.js"></script>
<script src="lib/underscore-min.js"></script>
<script src="lib/bootstrap.min.js"></script>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-sanitize.js"></script>
<script src="lib/angular/angular-resource.js"></script>
<script src="js/services/services.js"></script>
<script src="js/services/EventData.js"></script>
<script src="js/services/GravatarUrlBuilder.js"></script>
<script src="js/controllers/controllers.js"></script>
<script src="js/controllers/EventController.js"></script>
<script src="js/controllers/EditEventController.js"></script>
<script src="js/controllers/EditProfileController.js"></script>
<script src="js/app.js"></script>
<!--<script src="js/filters.js"></script>-->
</body>
</html>
and my controller is
angular.module('eventsApp.controllers').controller('EditEventController',function EditEventController($scope,eventData){
$scope.event={};
$scope.savestatus=function(event,form){
if(form.$valid){
eventData.save(event).
then(function(response){
console.log("success :",response);
},
function(response){
console.log("failure:",response);
});
};
} ;
$scope.reset=function(){
window.location='../app/EventList.html';
}
});
and the app.js file is
angular.module('eventsApp', [ 'ngSanitize' ,'eventsApp.controllers', 'eventsApp.services','ngResource'
])
and the services file i am using is:
angular.module('eventsApp.services').factory('eventData',function($resource,$q){
var resource= $resource('data/eventData/:id.json',{id:'#id'});
return{
getEventItem:function(){
var deferred=$q.defer();
resource.get({id:1},
function(eventItem){
deferred.resolve(eventItem);
},
function(response){
deferred.reject(response);
});
return deferred.promise;
} ,
save:function(event){
var deferred=$q.defer();
event.id=999;
resource.save(event,
function(response){
deferred.resolve(response);
},
function(response){
deferred.reject(response);
}
);
return deferred.promise;
}
};
}
) ;
When i am trying to save the input text details on click of the savestatus() button
I am unable to save them as a json file on the disk as shown in the tutorial I am referring to..
Whenever I have tried to save it I am getting the following error...
POST http://localhost:8000/app/data/eventData/999.json 501 (Not Implemented) angular.js:7073
failure: Object {data: "", status: 501, headers: function, config: Object}
I encountered this problem and solved my case. Here's how I did:
You have to modify your back-end (in my case: web-server.js
from angular-seed project, running with NodeJs) in order
to accept 'POST' method requests.
Then, when a POST request will be sent, you
must catch it (a simple 'if' would do the trick) and call a function
to handle it.
Finally, you have to write this function which will
catch the request data and do what you want with it (e.g. create a
JSON file and copy the data into it).
If you're also using NodeJs and maybe the web-server.js from angular-seed, here's what I've done : modified Web-server.js
Hope it will help you or someone else to avoid 501 errors!