Develop Reference

Display a form with multiple ng-repeat after all content has been loaded

I have a form with multiple ng-repeat block and other blocks without ng-repeat. How do I wait until the all content has been loaded before rendering the form
As an example
<form name="forms.confirmForm" ng-submit="submitForm()">
<div>
<div ng-repeat="phone in candidate.phones" style="position:relative">
-- write out some value
</div>
<div class="small-12">
<label>first name
</label>
<input name="firstName" type="text" />
<div ng-repeat="phone in candidate.email" style="position:relative">
-- write out some value
</div>
</div>
<div class="apply-bar">
<button class="button button-apply" type="submit">
apply
</button>
</div>
</form>
** The information comes from a model and it is loaded once . The ng-repeat is just taking parts of the model and iterating

use ng-if to check whether array items have been loaded.
<form name="forms.confirmForm" ng-submit="submitForm()"
ng-if="candidate.phones.length > 0 && candidate.email.length > 0">

There are two ways you can handle this.
You initialise your model (candiate) with an empty array of phones/email. In which case you don't need to do anything in the template as the ng-repeat will apply 0 times. Resulting in nothing being rendered.
You use ng-if to prevent rendering when you don't have your model(candidate) and/or ng-if to prevent your ng-repeat trying to render when your model doesn't have phone/emails.
Try this based on the second option;
<form name="forms.confirmForm" ng-submit="submitForm()">
<div ng-if="candidate"> <!--Prevent rendering if there is no candiate model-->
<div
ng-if="candidate.phones" <!--Prevent rendering if canidate doesn't have phones param-->
ng-repeat="phone in candidate.phones"
style="position:relative"
>
-- write out some value
</div>
<div class="small-12">
<label>first name
</label>
<input name="firstName" type="text"/>
<div
ng-if="candidate.email"
ng-repeat="phone in candidate.email"
style="position:relative"
>
-- write out some value
</div>
</div>
<div class="apply-bar">
<button class="button button-apply" type="submit">
apply
</button>
</div>
</div>
</form>

You can use ng-if in your div :
<div ng-if="candidate.phones">
<div ng-repeat="phone in candidate.phones" style="position:relative">
-- write out some value
</div>`

Jquery-ui selectable problems

I have a problem regarding jquery selectable , I have div that contains user information , this is my div
<div class="user-container" id="append_users">
<div class="fc-event draggable-user" ondblclick="sys.callUserProfile('+user.id+')" id="user_'+user.id+'"style="z-index: 9999;" onmousedown="sys.mouseDown()" onmouseup="sys.mouseLeave()">
<div class="container-fluid">
<input type="hidden" value="'+user.id+'" id="user_'+ user.id + '_value" class="userId">
<div class="row">
<div class="col-xs-3 avatar-col">
<img src="'+getUserImage(user.avatar)+'"width="100%">
</div>
<div class="col-xs-9 data-col">
<p class="fullName dataText" >'+user.fullName+'</p>
<p class="usr_Gender dataText" >Male</p>
<div style="position: relative"><li class="availableUnavailable"></li><li class="usr_profesion dataText" >AVAILABLE</li></div>
<p class="user_id" style="float:right;margin:3px">'+user.employee_id+'</p>
</div>
</div>
</div>
</div>
</div>
and I need the whole fc-event div to function as one , so the div with id="append_users" should contain the selectable class and the div with class fc-event should be considered as selection , I tried like this
( "#append_users" ).selectable();
but all childs take the ui-selectee class and it doesn't function at all, so what I want to do is the div with class fc-event should be considered as one, I hope i am clear, anyone please help

The documentation doesn't make it hugely clear, but from looking at the code and descriptions of the demos on the jQueryUI website (http://jqueryui.com/selectable/) it can be seen that the element you execute the "selectable" command against is intended to the container for the things you want to be selectable. It will automatically make all the child elements of that element into things which can be selectable. This is logical because generally you'd want to have several selectable items in a list and be able choose one or more items to select.
So if you want your "append_users" element to be selectable, you have to make the parent of that element the target of your "selectable" command. You haven't shown what the parent is, so for the purpose of example I'm going to assume it's just another <div>:
HTML:
<div id="selectable">
<div class="user-container" id="append_users">
<div class="fc-event draggable-user" id="user_1" style="z-index: 9999;">
<div class="container-fluid">
<input type="hidden" value="1" id="user_1_value" class="userId">
<div class="row">
<div class="col-xs-3 avatar-col">
<img src="https://i.imgur.com/db4KgSp.png" width="100px">
</div>
<div class="col-xs-9 data-col">
<p class="fullName dataText" >user.fullName</p>
<p class="usr_Gender dataText" >Male</p>
<div style="position: relative"><li class="availableUnavailable"></li><li class="usr_profesion dataText" >AVAILABLE</li></div>
<p class="user_id" style="float:right;margin:3px">user.employee_id</p>
</div>
</div>
</div>
</div>
</div>
</div>
JavaScript:
$("#selectable").selectable();
See http://jsfiddle.net/s6Lmy70b/2/ for a working demonstration.
(N.B. This is using very slightly adjusted markup compared to yours, just for demonstration and to make it easier to get it working, but the principle is the same regardless of the exact content being displayed)

submit bootstrap wizard form to sql database

I am developing my website using some free bootstrap template and I working with asp.net and c# to implement this website.
The template comes with form wizard template page that has 3 steps with some question in each step. And 3 buttons : next, prev, and finish.
The wizard page template use:
<!-- jQuery Smart Wizard -->
<script src="../vendors/jQuery-Smart-Wizard/js/jquery.smartWizard.js"></script>
I want to submit the form data into sql database but, i have no control on the finish button and also others buttons.
<!-- jQuery Smart Wizard -->
<script>
$(document).ready(function() {
$('#wizard').smartWizard();
$('.buttonNext').addClass('btn btn-success');
$('.buttonPrevious').addClass('btn btn-primary');
$('.buttonFinish').addClass('btn btn-default');
});
</script>
<!-- /jQuery Smart Wizard -->
This is my form:
<!-- Smart Wizard -->
<form class="form-horizontal form-label-left" id="add_project_form" runat="server" onsubmit="">
<div id="wizard" class="form_wizard wizard_horizontal">
<ul class="wizard_steps">
<li>
<a href="#step-1">
<span class="step_no">1</span>
<span class="step_descr">
Step 1<br />
<small>General Information</small>
</span>
</a>
</li>
<li>
<a href="#step-2">
<span class="step_no">2</span>
<span class="step_descr">
Step 2<br />
<small>Assign User</small>
</span>
</a>
</li>
<li>
<a href="#step-3">
<span class="step_no">3</span>
<span class="step_descr">
Step 3<br />
<small>Create Project</small>
</span>
</a>
</li>
</ul>
<div id="step-1">
<!-- Project Name -->
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="project_name">Project Name <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<asp:TextBox id="project_name" required="required" class="form-control col-md-7 col-xs-12" runat="server"></asp:TextBox>
</div>
</div>
<!-- PI name -->
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="pi_name">PI Name <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<asp:TextBox id="pi_name" required="required" class="form-control col-md-7 col-xs-12" runat="server"></asp:TextBox>
</div>
</div>
</div>
<div id="step-2">
<!-- Assign Developer dropdown -->
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Assign Developer</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<asp:DropDownList ID="developers_DropDownList" runat="server" Width="100px">
</asp:DropDownList>
</div>
</div>
</div>
<div id="step-3">
<p>
Click on 'Finish' to create the new database.
</p>
</div>
</div>
<!-- End SmartWizard Content -->
</form>
I know how to submit form data using the button "onclick" function in c#. but here, i dont have access on the buttons. how can i submit my form in this case?
I can show you the "jquery.smartWizard.js" file but it huge.
For clarification:
I don't know what is the proper way to submit the form in this case.
1- I s it ok to put the code of insert data into database in PHP file and call it from action=" " in the form tag?
2- Or can I put the code of insert data into database in c# function? in this case how can I call this function from my asp file and how to pass form data to this function?
3- Or can I use js function to insert data into database?
Remember: I don't have control of Finish button

Ok, I'm assuming this problem has been fixed but for anyone else having problems I'll try an cast a bit of light on the solution or at least a partial solution.
Firstly your intention was to insert data from an HTML form to a database.
Your HTML form looks like this:
<form class="form-horizontal form-label-left" id="add_project_form" runat="server" onsubmit="">
If you have a web application handling this form it should be making a "post" request to the backend like so:
<form class="whatever-your-using" id="whatever-you-like" action="/handle-html-form" method="post">
This will make a post to the server/app point to the route /handle-html-form which should have a function which takes the data from the form and save it to the database.
Obviously, you need to has a submit button in order to actually send the form. My approach was to download the smartWizard.js and had it to my own project
I then edited the file to suit my purpose. For example here is a small snippet of the code change.
Original smartWizard.js:
function SmartWizard(target, options) {
this.buttons = {
next : $('<a>'+options.labelNext+'</a>').attr("href","#").addClass("buttonNext"),
previous : $('<a>'+options.labelPrevious+'</a>').attr("href","#").addClass("buttonPrevious"),
finish : $('<a>'+options.labelFinish+'</a>').attr("href","#").addClass("buttonFinish")
};
My smartWizard.js:
function SmartWizard(target, options) {
this.buttons = {
next : $('<a>'+options.labelNext+'</a>').attr("href","#").addClass("buttonNext"),
previous : $('<a>'+options.labelPrevious+'</a>').attr("href","#").addClass("buttonPrevious"),
finish: $('<a>' + options.labelFinish + '</a>').attr({
type: 'submit',
name: 'buttonFinish',
value: 'Submit'
}).addClass('buttonFinish')
};
I've added the attributes for the submit button directly to the finishButton. This was the first solution i found to get around the problem.
Its worth mentioning that the whole of the HTML for the smartWizard must be nested inside a form element. Otherwise, all the element from each step of the wizard would be saved.
Here is a HTML example to clearify what im trying to say:
<form class="whatever" id="whatever" action="/handle-html-form" method="post">
<div class="form_wizard wizard_horizontal" id="wizard">
// Then all the steps below but still inside the form
Hope this helps

How to retrieve input text value from another tab view

I have four tabs and this input text is located in the second tab view. I have two buttons (back and next). When I'm in last tab, I want to retrieve value from this input text when pressing next button, but it always gives a null or undefined value, I don't know how to solve it. I have a text box with html code like this :
<div class="container-fluid add-report-field" style="background-color:white">
<div class="tabbable js-report-tab-container" >
<div class="tab-content">
<div class="tab-pane" id="tab1">
<div class="form-group">
<label>Report Title</label>
<input type="text" name="js-report-title-step-2" id="js-report-title-step-2" class="form-control js-report-title-step-2" placeholder="Report Title" value="Report Title">
</div>
</div>
</div>
</div>
I just try to retrieve it's value. I have tried this in my console.log :
console.log($("input[name=js-report-title-step-2]").val());
console.log($("#js-report-title-step-2").val());
console.log($("#js-report-title-step-2").text());
console.log($(".js-report-title-step-2").attr("value"));
console.log($("input:text").val());
but none of above ways work for me
What's the problem here...???
Note :
here is console.log($):

undefined means the collection is empty as .value property of an input can only be a DOMString and not undefined. You are probably querying the DOM before the element is added to the DOM. Either use the .ready method or make sure the element exists in the DOM when the code is executed, you can do this by putting the script tag after the target element.

Try it :
$(document).ready(function(){
$ele = $(".add-report-field").find("input[name=js-report-title-step-2]");
console.log($ele.val());
})
Final code :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="container-fluid add-report-field" style="background-color:white">
<div class="tabbable js-report-tab-container" >
<div class="tab-content">
<div class="tab-pane" id="tab1">
<div class="form-group">
<label>Report Title</label>
<input type="text" name="js-report-title-step-2" id="js-report-title-step-2" class="form-control js-report-title-step-2" placeholder="Report Title" value="Report Title">
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$ele = $(".add-report-field").find("input[name=js-report-title-step-2]");
console.log($ele.val());
})
</script>
</body>
</html>

To get value of input fields, you should use val(). In your case, because of getting undefined, you should make sure your code is in $(document).ready(function(){}) or more simply $(function(){}).
$(function(){
alert($('input').val());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="js-report-title-step-2" id="js-report-title-step-2" class="form-control js-report-title-step-2" placeholder="Report Title" value="Report Title">

Tag input not showing up

Why isn't the tag input showing up?
<div ng-controller="DrawingsController">
<tags-input ng-model="tags"></tags-input>
<div class="controls">
<label>Filter:</label>
<button class="filter" data-filter="all">All</button>
<button class="filter" data-filter=".name-{{name}}" ng-repeat="name in names">{{name}}</button>
</div>
<div class="test">
<div id="MixItUpContainer1" class="container">
<div class="mix name-{{drawing.name}}" data-myorder="{{drawing.value}}" ng-repeat="drawing in drawings">Value : {{drawing.name}}</div>
</div>
</div>
The tag input works on other pages but it's not showing up on this one.
JS Fiddle:
http://jsfiddle.net/ce1qzjv1/
Update:
This is my updated fiddle: jsfiddle.net/og19nL11/1
I want them to show up in their own value box like the others but it's not working

In the fiddle you posted, ngTagsInput is not referenced. You should add it as a dependency of your application.
var app = angular.module('app', ['ngTagsInput']);