read file content on form input in angularjs [duplicate] - javascript

This question already has answers here:
ng-model for `<input type="file"/>` (with directive DEMO)
(13 answers)
Closed 4 years ago.
I have a JSON file in my HDD, how can I read the content of this file when I select it with input field?
I have to read the content and send content as data in some API!
I need something like this :
<input type="file" id="dashboardExportedFile">
<button type="button" ng-click="importDashboard">Import</button>
<script>
$scope.importDashboard = function (
var content = $("#dashboardExportedFile").content
console.log(content);
};
</script>

I think you need a Filereader. Follow my Link to see an working example with .txt File. Hope u can use it:
[JSFiddle][1]
[1]: http://jsfiddle.net/alexsuch/6aG4x/

Related

Convert XML to HTML JS [duplicate]

This question already has an answer here:
Convert XML to HTML using jquery/javascript
(1 answer)
Closed 2 years ago.
I am a total 0 in JS but I got a task to write a simple function of converting XML to HTML
Example:
<Translation code="200" lang="de-en">
<text>Cat</text>
</Translation>
'Cat' should be in HTML
XML structure doesn't change but the content of text node does
Yeah I can google couple of hours how to get it or ask here and close the task, appreciate any help
The quickest is using jQuery
const xml = `<Translation code="200" lang="de-en">
<text>Cat</text>
</Translation>`
$("#content").text($(xml).find("text").text())
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content"></div>

JavaScript script to inset data from page to modal [duplicate]

This question already has answers here:
Thymeleaf attribute and modal
(3 answers)
Closed 4 years ago.
I know, that this question was asked many many times, but i try and code not working.
This function must parse data from my
<a id="dep-modal-pic" class="edit_dep modal-trigger" href="#modal3" th:attr="data-dep_id=${department.id}"> and put dep_id to modal input.
var bookId not working. when i give fixed value to this var it is work, but in my thymeleaf template every new field is new value because
<tr th:each="department : ${departments}">
<td class="dep_id" th:text="${department.id}">1</td>
<td th:text="${department.name}"></td>
</tr>
So, please, can you correct my code? I cant sleep, all day making this thing and still not working.
I need value dep_id to modal input
<input id="ids" name="ids" value="" type="text" class="validate">
$('#modal3').click(function(e) {
var bookId = $(e.relatedTarget).data('dep_id');
$(e.currentTarget).find('input[id="ids"]').val(bookId);
});
The click handler should be attached to #dep-modal-pic, something like:
$('#dep-modal-pic").click(...)
Update:
This is a duplicate of Thymeleaf attribute and modal
Please check my answer on the other post which is more clear

How to add a div ellement inside a file using js or jQuery? [duplicate]

This question already has answers here:
How to append div inside other div
(5 answers)
Closed 5 years ago.
I have 2 different files: "header.php" and "home.php".
In the file "header.php" i wrote this code:
<div class="slide-area"></div>
Now, in the file "home.php" i want to add some js or jQuery so i can force the code:
<div class="slide-area-child"></div>
that is already inside the file "home.php" to get applied in the file "header.php" between the div with the class "slide-area" so it will be like that:
<div class="slide-area"><div class="slide-area-child"></div></div>
I used this and worked fine:
$(function () {
$('<div class="slide-area-child"></div>').appendTo('.slide-area');
});

How do I capture the value of a file input in AngularJS? [duplicate]

This question already has answers here:
Directive to get files input with ng-model [duplicate]
(1 answer)
ng-model for `<input type="file"/>` (with directive DEMO)
(13 answers)
Closed 5 years ago.
I'm really new to AngularJS and I've found that ng-model doesn't work for a file type input tag. I want to be able to allow users to upload pictures to my app, but nothing I've tried so far has worked. I've tried to use both ng-file upload and angular-file upload, but they both require dependency injection and whenever I try that my entire app crashes. I've been reading that a new directive can be created, but I am so new to Angular that I'm not understanding how to do that. Any insight would be great!
postImage.html :
<div id="postimage container" >
<div >
<input type="file" name="image" np-model="$ctrl.image"/>
<button ng-click="$ctrl.upload($ctrl.image)">Upload</button>
</div>
postimage.js :
angular.module('main')
.component('postimage', {
controller: function () {
this.upload = function (data) {
console.log(data)
}
},
templateUrl: '../templates/postImage.html'
});

Save a javascript object in an HTML object [duplicate]

This question already has answers here:
Can I add a custom attribute to an HTML tag?
(18 answers)
Closed 3 years ago.
Is there any way to save a javascript tag in an HTML object? What I would like to do is something like this:
<div id="htmlTag">some text</div>
<script type="text/javascript">
htmlTag.something = {s:"a string",n:1,b:false,a:[3,2,1],f:function(){alert("hello")}}
</script>
I think your only problem is you're not getting the node.
document.getElementById("htmlObject").something = {hi: 1};
You can convert JS objects to JSON string with this plugin, if that is what you want to achieve.
var json_data = JSON.stringify(yourObj);
You can do this using the javascript function JSON.stringify()
Javascript
<div id="htmlTag">some text</div>
<script type="text/javascript">
document.getElementById('htmlTag').something = JSON.stringify({s:"a string",n:1,b:false,a:[3,2,1],f:function(){alert("hello")}});
</script>
Here is a JSFiddle : https://jsfiddle.net/LcrLeg8a/1/

Categories