ng-model to append element in dom not as string - javascript

I am trying to take value from inputbox and then dynamicaly append that value in DOM as html element , but ng-model append it as string .
for example ,
<p> para </p>
this should append as HTML element not string .
**Note :: I tried using ng-model but it render as a String hence i dont see any h1 element tag instead what i see is full " Hello "
Fiddle ::**
http://jsfiddle.net/simmi_simmi987/Z9vN8/
Code ::
<h1>Comment Box</h1>
<div class="col-md-6 col-md-offset-3">
<div class="well well-sm">
<form class="form-horizontal" action="" method="post">
<fieldset>
<legend class="text-center">Style Title Bar </legend>
<!-- Height input-->
<div class="form-group">
<label class="col-md-3 control-label" for="name">Title-Bar Height</label>
<div class="col-md-9">
<input type="text" placeholder="Title-Bar Height" class="form-control" ng-model="title_height">
</div>
</div>
<!-- Color input-->
<div class="form-group">
<label class="col-md-3 control-label" for="email">Title-Bar Color</label>
<div class="col-md-9">
<input type="text" placeholder="Title-Bar Color" class="form-control" ng-model="title_bgcolor">
</div>
</div>
<legend class="text-center">Style Box :</legend>
<!-- Message body -->
<div class="form-group">
<label class="col-md-3 control-label" for="message">Your comment</label>
<div class="col-md-9">
<textarea class="form-control" ng-model="dynamic_comment" name="message" placeholder="Please enter your comment here..." rows="5"></textarea>
</div>
</div>
<!-- Height input-->
<div class="form-group">
<label class="col-md-3 control-label" for="name">Box Height</label>
<div class="col-md-9">
<input type="text" placeholder="Box Height" class="form-control" ng-model="box_height">
</div>
</div>
<!-- Color input-->
<div class="form-group">
<label class="col-md-3 control-label" for="email">Box Color</label>
<div class="col-md-9">
<input type="text" placeholder="Box Color" class="form-control" ng-model="box_bgcolor">
</div>
</div>
<!-- Form actions -->
<div class="form-group">
<div class="col-md-12 text-right">
<button type="submit" class="btn btn-primary btn-lg">Submit</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
<div class="col-md-offset-3 col-md-7">
<div class="panel panel-default">
<div class="panel-heading" ng-style="{height:title_height,backgroundColor:title_bgcolor}">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body" ng-style="{height:box_height,backgroundColor:box_bgcolor}">
Reading Comment ::<br/>
{{dynamic_comment}}
</div>
</div>
</div>
</div><!-- row closed -->
</div> <!-- Container closed -->

You need to include ngSanitize (located in angular-sanitize.js) and then use ng-bind-html, as:
<span ng-bind-html="dynamic_comment"></span>
The sanitizer will forbid some elements and will complain while you are typing and the HTML content is incomplete (e.g. unclosed tags). You will have to handle this somehow.
Also check out ngBindHtml and the relevant SCE documentation.
See forked fiddle: http://jsfiddle.net/vH447/ (and check the external resources where angular-sanitize.js is included).

Related

Code below the textarea getting inside the textarea as its value?

I am implementing this Bootstrap Modal on click of a button. But on clicking the button, the modal appears on screen, every field is correctly displayed except the textarea field, the button code and file upload code below it, is getting inside of the textarea, why is it so ? Please check the following code for the Modal:
<div class="modal fade" id="myModalContactt" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content tuningModal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body tuningModalTwo">
<form action="/tuningModal/" style="padding: 0% 7%;">
<h3>GET IN TOUCH WITH US</h3>
<div class="row form-group">
<label>Your Name(required)</label>
<input type="text" class="form-control" id="name" name="name"/>
</div>
<div class="row form-group">
<label>Email(required)</label>
<input type="email" class="form-control" id="email" name="email"/>
</div>
<div class="row form-group">
<label>Phone Number</label>
<input type="text" class="form-control" id="phone" name="phone"/>
</div>
<div class="row form-group">
<label>Car Brand</label>
<input type="text" class="form-control" id="carBrand" name="carBrand"/>
</div>
<div class="row form-group">
<label>Model</label>
<input type="text" class="form-control" id="model" name="model"/>
</div>
<div class="row form-group">
<label>Your Message</label>
<textarea rows="10" class="form-control" id="message" name="message"/>
</div>
<div class="row form-group">
<label>Upload your software(Note:please upload in zip filetype)</label>
<input type="file" class="form-control-file" name="softUploadFile"/>
</div>
<div class="row form-group" style="margin-top:20px;margin-bottom:20px">
<button type="submit" class="btn btn-primary btn-block">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
And below is the code for the Button on which I've set the data-target and data-toggle to this Modal:
<div id="red_div2" class="row ">
<h2 id="redtext2" class="wow bounceInRight">QUESTIONS OR INTEREST IN ANY OF OUR PRODUCTS? </h2>
<button type="button" class="btn btn-info" id="AskYourQuestion" data-toggle="modal" data-target="#myModalContactt">
ASK YOUR QUESTION
<i class="fa fa-angle-double-right"></i>
</button>
</div>
And it is appearing like this in the browser:
Close textarea tag
<textarea rows="10" class="form-control" id="message" name="message"></texarea>
<textarea rows="10" class="form-control" id="message" name="message"/>
textarea is not a self-closing tag (also called a void element).
Self-closing tags allow the the close part on the tag itself, eg <input/> while non-self-closing tags must have an explicitly matching close tag, eg:
<textarea></textarea>
these are typically where there may be content inside the tag, eg
<textarea>appears inside the textarea</textarea>
More info from the spec: https://www.w3.org/TR/html5/syntax.html#writing-html-documents-elements
and https://stackoverflow.com/a/3558200/2181514

HTML Bootstrap Well issue when using html template

I am trying to import a HTML template into my index.html. The template will be placed into the wrapper div however, the wrapper div will no longer be inside of the "well" which was created in the parent div.
I need to have the template imported and be inside of the "well" instead of outside.
Thanks for the help.
index.html:
<div class="row">
<div id="parent" class=" well col-m-12">
<h4>Experiment parameters</h4>
<p>Full of input boxes which update both views above</p>
<div id="wrapper" class="col-md-2">
</div>
</div>
Template:
<template class="section-template">
<!--need to change this name-->
<section id="input" class="wrapper style1 fullscreen intro">
<div>
<form class="form-horizontal">
<div class="form-group">
<label for="inputKi" class="col-sm-3 control-label">|Ki|</label>
<div class="col-sm-6">
<input type="text" class="input-sm form-control" id="inputKi">
</div>
<label for="inputKi" class="col-sm-1 control-label">A</label>
</div>
</form>
<form class="form-horizontal">
<div class="form-group">
<label for="inputKf" class="col-sm-3 control-label">|Kf|</label>
<div class="col-sm-6">
<input type="text" class="input-sm form-control" id="inputKf">
</div>
<label for="inputKf" class="col-sm-1 control-label">A</label>
</div>
</form>
<form class="form-horizontal">
<div class="form-group">
<label for="inputE" class="col-sm-3 control-label">E</label>
<div class="col-sm-6">
<input type="text" class="input-sm form-control" id="inputE">
</div>
<label for="inputE" class="col-sm-1 control-label">meV</label>
</div>
</form>
<form class="form-horizontal">
<div class="form-group">
<label for="inputQ" class="col-sm-3 control-label">|Q|</label>
<div class="col-sm-6">
<input type="text" class=" input-sm form-control" id="inputQ">
</div>
<label for="inputE" class="col-sm-1 control-label">A</label>
</div>
</form>
</div>
</section>
</template>
This is what it looks like:

How can I read/write from a plain text in JavaScript

I don't know much about JS, I'm new in this world, I know about HTML and CSS but this time I was asked to make an aplication where I have to receive data from a plain text to my formulary using JS.
Here's my Plain Text data.txt:
Interfaces: test1,
IP: 192.168.1.1,
Mask : test,
Gateway : test,
DNS 1: test,
DNS 2: test,
Broadcast: test
Here's my Div:
<div class="col-md-12">
<div class="form-panel">
<h4><i class="fa fa-angle-right"></i> Formulario </h4>
<hr />
<form method="post">
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">Interfaces:</label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group ">
<label class="col-sm-3 col-sm-3 control-label">IP: </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">Mask : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label"> Gateway : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">DNS 1 : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">DNS 2 : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">Broadcast : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<br><br>
<div class="form-group">
<button type="submit" name="Save" class="btn btn-success btn-sm" " title="Save"><i class="fa fa-save"></i> Save</button>
</div>
</form>
</div>
That's the script I got from you guys, because I was looking for code to do it and that's what I got.
The point is the data that contains "data.tx" should be on my formulary and if I modify any field there and I hit "save" button it has to write on my plain text as well.
Is there a way to make it work? thanks!
Entire code bellow.
var mytext;
var connection = new XMLHttpRequest();
connection.open('GET', '/data.txt');
connection.onreadystatechange = function() {
mytext=connection.responseText;
}
connection.send();
<div class="col-md-12">
<div class="form-panel">
<h4><i class="fa fa-angle-right"></i> Formulario </h4>
<hr />
<form method="post">
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">Interfaces:</label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group ">
<label class="col-sm-3 col-sm-3 control-label">IP: </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">Mask : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label"> Gateway : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">DNS 1 : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">DNS 2 : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">Broadcast : </label>
<div class="col-sm-9">
<input type="text" class="form-control"
</div>
</div>
<br><br>
<div class="form-group">
<button type="submit" name="Save" class="btn btn-success btn-sm" " title="Save"><i class="fa fa-save"></i> Save</button>
</div>
</form>
</div>
</div>
I don't know i a more efficient solution exists, but below code is working.
Here is how I achieved it, using jQuery .load()
$(document).ready(function(){
// Load the file in an hidden div element.
$("#hiddenFileLoad").load("data.txt", function(){
// Callback executes when content is loaded
// Place the content in a var
var loadedText = $("#hiddenFileLoad").text();
console.log("loadedText:\n\n"+loadedText);
// Split into an array
var loadedTextSplitted = loadedText.split(",");
// Remove the label part for each
for (i=0;i<loadedTextSplitted.length;i++){
temp = loadedTextSplitted[i].split(": ");
loadedTextSplitted[i] = temp[1];
}
// Place each info in the HTML form
$(".form-panel").find("input").each(function(index){
$(this).val( loadedTextSplitted[index] );
});
}); // End of .load callback
});
I used and hidden div, in order to load the .txt file content, which I gave the "hiddenFileLoad" id.
I made absolutely no change to your HTML (except the hidden div add) and I used your txt file content.
I assume you know how to save to file...
I didn't make the save button to work.
Here is a live example on my server.

Parsleyjs 2 and Bootstrap 3 input text field with addon obscuring on errors

I am currently trying to implement Parsleyjs 2.2 to work nicely with Bootstrap 3.3. But I am experiencing some problems with getting the errors displayed beneath the text-field with an addon (input-group-addon).
I have tricked a bit with the HTML/CSS to get the kind of responsive behaviour that I wanted, but here is the underlying HTML/JS:
$('.signupForm').parsley({
successClass: 'has-success',
errorClass: 'has-error',
classHandler: function(el) {
return el.$element.closest(".form-group");
},
errorsWrapper: '<span class="help-block"></span>',
errorTemplate: "<span></span>"
});
<form class="signupForm" method="post" accept-charset="utf-8" action="" data-parsley-validate="">
<div class="form-group">
<label class="control-label" for="subdomainInput">Subdomain</label>
<div class="input-group">
<span class="input-group-addon" id="subddomainAddon">https://</span>
<input type="text" class="form-control input-lg" id="subdomainInput" required="">
<span class="input-group-addon" id="subddomainAddon">.domain.com</span>
<!-- <span class="help-block">Errors appears here</span> -->
</div>
<!-- <span class="help-block">Errors should be here</span> -->
</div>
<div class="container-fluid">
<div class="row">
<span class="form-group">
<div class="col-sm-1">
<label for="nameInput" class="inlineLabel">Name</label>
</div>
<div class="col-sm-5">
<input type="text" class="form-control" id="nameInput" placeholder="John Doe" required="">
</div>
</span>
<div class="form-group">
<div class="col-sm-1">
<label for="emailInput" class="inlineLabel">Email</label>
</div>
<div class="col-sm-5">
<input type="text" class="form-control" id="emailInput" placeholder="john#example.com" required="">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<br/>
<button type="submit" class="btn btn-danger">Register</button>
</div>
</div>
</div>
You were soo close! You need to set the errors container to the .form-group as well.
errorsContainer: function(el) {
return el.$element.closest('.form-group');
},

Bootstrap form shrinks as screen expands.

I want to make the inputs the same width as the modal. currently at "md" fit the modal but once the screen expands to "lg" the inputs shrink to half the size of the modal. Am I using the col-lg-12 correctly?
<form class="form-horizontal" action="" method="post">
<fieldset>
<legend class="text-center">Contact me</legend>
<!-- Name input-->
<div class="form-group">
<label class="col-md-3 control-label" for="name">Name</label>
<div class="col-md-9 col-lg-12">
<input id="name" name="name" type="text" placeholder="Your name" class="form-control">
</div>
</div>
<!-- Email input-->
<div class="form-group">
<label class="col-md-3 control-label" for="email">Your E-mail</label>
<div class="col-md-9 col-lg-12">
<input id="email" name="email" type="text" placeholder="Your email" class="form-control">
</div>
</div>
<!-- Message body -->
<div class="form-group">
<label class="col-md-3 control-label" for="message">Your message</label>
<div class="col-md-9 col-lg-12">
<textarea class="form-control" id="message" name="message" placeholder="Please enter your message here..." rows="5"></textarea>
</div>
</div>
<div class="modal-footer">
<!-- Form actions -->
<div class="form-group">
<div class="col-md-12 text-right">
<button type="submit" class="btn btn-default btn-md">Close</button>
<button type="submit" class="btn btn-primary btn-md">Submit</button>
</div>
</div>
</div>
</fieldset>
</form>
Have a look on this. LINK
Also take note of the lines <div class="col-md-9 col-lg-12"> change to <div class="col-md-12 col-lg-12">

Categories