We Keep Coding

AngularJD: Blank Items appearing in ng-repeat on first button click, items appear when clicking button again

I am working on a pretty web application that connects to a RESTful API. My HTML has a "View Employees" button that when clicked, makes an API call to grab all the employees for that company. I am checking the return for the API, and it's getting the entire list, but the page is only rendering the first employee and then blank spaces for the rest. Things get stranger when I go to a different company and click on their View Employees button, because the employees for that company appear, AND one of the blank spaces in the previous company suddenly renders properly. I'm reading the return from the API, and it has all the information I need in a properly formatted way. I'm really confused.
Anyone have any idea what's going on? Here's my HTML. If you need more code please let me know.
<div ng-if="sigFigCtrl.companies[$index].employees.length > 0">
<div class="employee-box" ng-repeat="employee in sigFigCtrl.companies[$index].employees">
<span class="glyphicon glyphicon-edit pull-right" ng-click="sigFigCtrl.toggleEmployeeEdit($index)"></span>
<span class="glyphicon glyphicon-remove pull-right" ng-click="sigFigCtrl.deletePerson(employee._id, $index, sigFigCtrl.companies[$parent.$index].employees)"></span>
<div ng-if="!sigFigCtrl.companies[$index].editEmployee">
<div ng-if="sigFigCtrl.companies[$index].employees.length > 0">
<p><b>Name:</b> {{employee.name}}</p>
<p><b>Email:</b> {{employee.email}}</p>
</div>
</div>
<div ng-if="sigFigCtrl.companies[$index].editEmployee">
<form name="editPersonForm" ng-submit="sigFigCtrl.editPerson(employee._id, $index)">
<div class="form-group">
<div class="col-md-12">
<input type="text" ng-model="sigFigCtrl.editPersonName" id="name" placeholder="Name of Employee" class="form-control" required></input>
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<input type="text" ng-model="sigFigCtrl.editPersonEmail" id="name" placeholder="Email of Employee" class="form-control" required></input>
</div>
<button>SUBMIT</button>
</form>
</div>
</div>
</div>
</div>
Thank you in advance.

Bootstrap modal is blocked

I have written a code to show popup using a bootstrap modal.
It worked, but all element is blocked. I don't know what wrong with my code.
Here is my code:
<div id="add_data_Modal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add data</h4>
</div>
<div class="modal-body">
<form method="post" name="insert_form" id="insert_form">
<label>Số thuê bao</label>
<input type="text" name="name" id="name" class="form-control" />
<br />
<label>Speed number</label>
<input type="text" name="spd_number" id="spd_number" class="form-control" />
<br />
<label>Dial number</label>
<input type="text" name="dial_number" id="dial_number" class="form-control"/>
<br />
<input type="submit" name="insert" id="insert" value="ADD" class="btn btn-success"/>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

You can solve your issue,following this link.
bootstrap modal examples
As if have different css files,check that css files also.because some times you added classes or ID can be override.

Please check your code, I think the cause may be due to your code redundant or missing a close tag. Usually missing or excess div tags.

Bootstrap document indicate: Whenever possible, place your modal HTML in a top-level position to avoid potential interference from other elements.You’ll likely run into issues when nesting a .modal within another fixed element.
If you realy can't find error, don't know whether parent container of id="add_data_Modal" against the Bootstrap's rules. Try below code:
$('#add_data_Modal').appendTo('body');
Using jquery to place your modal HTML to body. In case you can sure your modal HTML in a top-level position.
Update--------
If someone using Angular this works - sort of. But... this has a nasty side effect as well: Because Angular re-renders the view every time it's accessed, a new #add_data_Modal element is created each and everytime.
This behavior causes duplication of the the elements and on occasion causes the wrong data to come up.
Fix this by clearing out the modal before append to body like below:
$('#"body>#add_data_Modal').remove();
$('#add_data_Modal').appendTo('body');

Textarea above bootstrap modal doesn't get focus

I have a chat, which has a textarea part for typing. Works good.
I open a modal, the textarea still remains above, due to z-index. However it doesn't get focus when I click with the mouse. Looks like it's disabled.
It doesn't work also if I open the chat after I opened the modal.
Any ideas?
The chat window has absolute positioning.

For some reason that I don't know, Boostrap don't permit do that.
I make some think like this using Bulma ( a pure css lib ):
<div class="container" id="app">
<div class="modal">
<div class="modal-background"></div>
<div class="modal-content">
<!-- Any other Bulma elements you want -->
<table>
<tr>
<td>Jhon</td>
<td>Hi</td>
</tr>
</table>
<input type="text" class="input" />
</div>
<button class="modal-close"></button>
</div>
<textarea style="position:absolute;z-index: 9999" name="" id="" cols="30" rows="2"></textarea>
<br /><br /><br />
<p>
<button class="button" id="showModal">Show</button>
</p>
</div>
OBS: Bulma don't have JavaScript code, and you should make the transition of classes yourself.
JavaScript:
$("#showModal").click(function() {
$(".modal").addClass("is-active");
});
$(".modal-close").click(function() {
$(".modal").removeClass("is-active");
});
http://codepen.io/edgardleal/pen/GWWKoO?editors=1010

clicking subscribe on mailchimp embedded code constantly gives undefined error

I've been having an awful awful time all day trying to get mailchimp in my website.
I have literally copied and pasted the embedded code from the mailchimp website and when I click the subscribe button i'm treated to:
404 Not Found
The requested document was not found on this server. Web Server at
class.travel
I have literally NO idea what is going on. And can't find anything on Google to boot.
Could anyone please point me in the right direction as to why this is happening?
Here's the form I'm using at my website http://class.travel Again, this is just copied and pasted from mailchimp. Is there some sort of API Key or JS files I need to include and it's just not stated on their website????
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-081711.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="//class.us9.list-manage.com/subscribe/post?u=820adca0d3bcdd8bb18d6c2a9&id=9768ebd530" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h2>Subscribe to our mailing list</h2>
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address <span class="asterisk">*</span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div class="mc-field-group">
<label for="mce-FNAME">First Name </label>
<input type="text" value="" name="FNAME" class="" id="mce-FNAME">
</div>
<div class="mc-field-group">
<label for="mce-LNAME">Last Name </label>
<input type="text" value="" name="LNAME" class="" id="mce-LNAME">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;"><input type="text" name="b_820adca0d3bcdd8bb18d6c2a9_9768ebd530" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->
Also, P.S. Web Noob, reporting in.

Sorry Future on-lookers. I never figured it out.
But putting it in an iframe made it work, for some godly unknown reason.

Loading Placeholder tag in FORM when variables are set

I have a simple user settings form written in HTML5 which commits user defined settings to local storage.
I want it so that if someone access the settings page again, and the user settings are defined the placeholders and/or values prefill the form with those settings.
I have tried using window.load, document.ready at the end and the beginning, but I can only get the form to load thre values if I click reload. I need these value to prefil if the page is visited.
Here is my version of the form which loads the values if you RELOAD the page
Script first
function loadUserSettings() {
$("#full_name").attr("placeholder", db_user.full_name);
$("#mobile_number").attr("placeholder", db_user.mobile_number);
$("#email_address").attr("placeholder", db_user.email_address);
$("#full_name").attr("value", db_user.full_name);
$("#mobile_number").attr("value", db_user.mobile_number);
$("#email_address").attr("value", db_user.email_address);
}
and now the form
<body>
<div data-role="page" data-control-title="Settings" data-theme="b" id="settings" class="global_page">
<div data-theme="b" data-role="header" data-position="fixed" class="global_topbar">
<a data-role="button" data-transition="flip" href="index.html" data-icon="back" data-iconpos="left" class="ui-btn-left global_button">
Back
</a>
<a data-role="button" data-transition="flip" href="help_settings.html" data-icon="info" data-iconpos="left" class="ui-btn-right global_button">
Help
</a>
<h3 class="global_header">
Settings
</h3>
</div>
<div data-role="content" style="padding: 1%">
<form id="postSettings" action="" class="global_form">
<div data-role="fieldcontain" data-controltype="textinput" class="full_name">
<label for="full_name">
Name
</label>
<input name="full_name" id="full_name" type="text" data-mini="true"/>
</div>
<div data-role="fieldcontain" data-controltype="textinput" class="email_address">
<label for="email_address">
Email Address
</label>
<input name="email_address" id="email_address" type="email" data-mini="true"/>
</div>
<div data-role="fieldcontain" data-controltype="textinput" class="global_text_input">
<label for="mobile_number">
Mobile Number
</label>
<input name="mobile_number" id="mobile_number" type="tel" data-mini="true"/>
</div>
<input id="store_posting" type="submit" data-icon="plus" data-iconpos="left" value="Store Information" class="global_button" onclick="dbGoUser()"/>
</form>
</div>
</div>
</body>
<script language="JavaScript">
document.ready = loadUserSettings();
</script>
I have managed a workaround using a function that I attach to my settings buttons which basically
function loadSettingsPage() {
window.location.href = "settings.html";
}
and this works everytime prefilling the placeholders / values no problem, however I am using a datatransition link of 'FLIP' which is lost using the above function.
SO ideally I want to either fix injection of the placeholders when I click a normal link (which I suspect is just a page refresh type option that does not loop) or make my loadSettingsPage use the JQuery flip transition.
Thanks in advance for any assistance.

OK, I was able to get around the issue with some custom functions. I had to lose the flip effect, and move to a simple fade but I ended up using
function fadeIn() {
$("body").hide();
$("body").fadeIn(500);
}
function loadPageSettings(urlvar) {
$("body").fadeOut(500, function(){ window.location.href = urlvar; });
}
for the custom functions
All hyperlinks used something like this
<a id="home_new_journey" data-role="button" onclick="loadPageSettings('journey_info.html')" data-icon="plus" data-iconpos="left" class="global_button">New Journey</a>
and at the footer of every page I just had
<script language="javascript">
window.onload = fadeIn();
</script>
So now I have pages loading properly with all dynamic content an a consistent fading effect.