Underscore and bootstrap datetimepicker - javascript

I am trying to get bootstrap datetimepicker to work from https://github.com/Eonasdan/bootstrap-datetimepicker on my webapp. Due to the fact that I am using templates, I cant have the script tags needed to initialize the datetimepicker inside the template script tags.
$("#datetimepicker1").datetimepicker(); //where should this go
<script type="text/template" id="manage-todos-template">
<div id="user-info">
Signed in as <%= Parse.User.current().get("username") %> (Log out)
</div>
<br>
<div>
<textarea name="styled-textarea" maxlength="50" id="styled" onfocus="this.value=''; setbg('#e5fff3');" onblur="setbg('white')">Enter promo here </textarea>
</div>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"> </span>
</span>
</div>
</div>
</div>
<button href="#" class="submitPromo">Submit</button>
</script>
//render
render: function() {
$('#datetimepicker1').datetimepicker();
}

This is a common pattern where you need to initialize some third part component on top of your rendered html. What you basically need to do is first render your HTML and then call your third party component on the appropriate element. Keep in mind that if you haven't yet attached your view's element to the DOM (as is often the case when you are rendering a view) you can still traverse it's el using $el.find.
For example
render: function () {
var template = _.template($('#mytemplate').html());
this.$el.html(template);
this.$el.find('#datetimepicker1').datetimepicker();
return this;
}
And a link to a sjbin

Related

Find div before button

Im trying addClass to wizard-step when button clicked, but still no luck :/
<div class="mt-4">
<div class="wizard-steps">
<div class="wizard-step">
<div class="wizard-step-icon">
<i class="far fa-user"></i>
</div>
</div>
<form class="wizard-content mt-2" id="regForm">
<fieldset>
<div class="form-group row">
<div class="col-lg-4 col-md-6 text-right">
<button type="button" onclick="step0(this);" class="btn">Next</button>
</div>
</div>
</fieldset>
</form>
</div>
JavaScript:
<script>
function step0(element) {
$(element).prev('div').find('.wizard-step').addClass('wizard-step-active');
}
</script>
Can anyone please help me !
prev is used to retrieve a previous sibling element. The .wizard-step you want to target is a child of a sibling to a parent of the button being clicked. As such you need to use closest() instead.
Also note that onclick (and all the other onX attributes) are not good practice and should be avoided. As you're already using jQuery you can attach your event unobtrusively, like this:
jQuery($ => {
$('.btn').on('click', function() {
$(this).closest('.wizard-steps').find('.wizard-step').addClass('wizard-step-active');
});
});
.wizard-step-active { color: #C00; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mt-4">
<div class="wizard-steps">
<div class="wizard-step">
<div class="wizard-step-icon">
<i class="far fa-user">User icon</i>
</div>
</div>
<form class="wizard-content mt-2" id="regForm">
<fieldset>
<div class="form-group row">
<div class="col-lg-4 col-md-6 text-right">
<button type="button" class="btn">Next</button>
</div>
</div>
</fieldset>
</form>
</div>
Alternatively, instead of calling find() from the shared parent, you could select the form and use prev():
$('.btn').on('click', function() {
$(this).closest('.wizard-content').prev('.wizard-step').addClass('wizard-step-active');
});
Either is fine, it just depends on how your HTML is structured as to which fits best for this use case.
You don't want the div immediately before the button, but the one containing the relevant item(s). So instead of $(element).prev('div') write $('.mt-4').
Your this parameter is referring your button, not your div.
You can do this without Jquery, just using your function like this:
function step0() {
const element = document.getElementsByClassName('wizard-step');
element.classList.add('wizard-step-active');
}
So, you don't need to pass this as a parameter to step0 function.

auto complete on editable divs angular js

I am not able to perform the auto suggestion functionality on divs with contenteditable attribute. Also when I write mass-autocomplete to divs, it is showing an error message like "mass-autocomplete not allowed on element div".
The following is code I have written. Could you please give the solution for this?
$scope.getClients = {
suggest: suggest_Client
};
<div class="row">
<div class="col-xs-12">
<div class="marginTB15" mass-autocomplete>
<div class="reach_box" contenteditable="true" ng-model="user.communities" mass-autocomplete-item="getNetworks">
<span class="form-control-feedback form-control-feedback_left_textbox"><img src="images/icon7.png" ></span>
<div class="reach"></div>
</div>
</div>
</div>
</div>
Seems that you using the mass-autocomplete directive incorrectly, it need so have an <input> tag as a element. Consider just having 2 blocks inside your div - one is a normal autocomplete:
<div mass-autocomplete>
<input ng-model="user.communities" mass-autocomplete-item="getNetworks">
</div>
while another one is a static end result of the autocompletion - say <div>{{user.communities}}</div>. And those two will be toggled by click for example. By this you wont' need content-editable at all.
So full code may look like this:
//controller
$scope.stateEdit = false;
$scope.toggleWidgetState = function(){
$scope.stateEdit = !$scope.stateEdit;
}
$scope.getClients = {
suggest: suggest_Client,
on_select:toggleWidgetState //here we put our widget back to read-only state
};
//other logic to handle mass-autocomplete
//template
<div class="row">
<div class="col-xs-12">
<div mass-autocomplete ng-show="stateEdit">
<input ng-model="user.communities" mass-autocomplete-item="getNetworks">
<ul> <li>Cardiologist Connect<button type="button">X</button></li></ul>
</div>
<div ng-show="!stateEdit" ng-click="toggleWidgetState()">
{{getNetworks}}
<span class="form-control-feedback form-control-feedback_left_textbox"><img src="images/icon7.png" ></span>
<div class="reach"></div>
</div>
</div>
</div>

How can i remove a div and its contents from the DOM

im developing a web application and i am looking to return some error messages via ajax when there is error or success.
i have the ajax script working fine it returns and error or success however my issue is when returning the data i want it to remove the div #webapp_recovery from the dom all together not just hide it once its removed i want to show #webapp_notification
This is the form to submit a request via ajax
<div id='webapp_recovery' class='login-container'>
<div class='page-content'>
<div class='content'>
<div class='panel panel-body login-form'>
<div class='text-center'>
<div class='icon-object border-slate-300 text-slate-300'><i class='icon-lock2'></i></div>
<h5 class='content-group'>Reset Password <small class='display-block'>Reset Your Account Password</small></h5>
</div>
<form method='POST' name='webapp_auth_recover' id='webapp_auth_recover' class='webapp_auth_recover webapp_authentication_val3'>
<div class='form-group has-feedback has-feedback-left'>
<input type='password' id='webapp_auth_password1' name='webapp_auth_password1' class='form-control required' placeholder='New Password' autocomplete='off'>
<div class='form-control-feedback'>
<i class='icon-lock2 text-muted'></i>
</div>
</div>
<div class='form-group has-feedback has-feedback-left'>
<input type='password' name='webapp_auth_password2' class='form-control required' placeholder='Confirm Password' autocomplete='off'>
<div class='form-control-feedback'>
<i class='icon-lock2 text-muted'></i>
</div>
</div>
<div class='form-group'>
<button type='submit' class='btn btn-primary btn-block'>Update Password <i class='icon-circle-right2 position-right'></i></button>
</div>
</form>
</div>
</div>
</div>
</div>
this is the error message i wish to show
<div id='webapp_notification' class='login-container'>
<div class='page-content'>
<div class='content'>
<div class='panel panel-body login-reset'>
<div class='text-center'>
<div class='icon-object border-slate-300 text-slate-300'><i class='icon-warning22'></i></div>
<h5 class='content-group'>Systems Error <small class='display-block'>Erros have been found</small></h5>
</div>
<div class='form-control-static'>
<p>errors have been detected</p>
</div>
</div>
</div>
</div>
i have tried the following but they dont seem to work
$("#webapp_recovery").hide(); //as it says hides the div
$("#webapp_recovery").remove(); //this only removes the single div not all inside
is this at all possible or is there another method for returning a new div for message and removing the old
Try jquery replaceWith function
Here's a sample fiddle
https://jsfiddle.net/gianoneil/zofm4qx6/
say, your error div is hidden on page load, then
here's how it's gonna look like
$('#webapp_recovery').replaceWith(
$('#webapp_notification').show()
);
try playing with jQuery replaceWith, show, & hide functions, and you should be able to accomplish your mission :) have fun
$('#webapp_recovery').remove();
Will remove the div and all its children however if you want to remove all elements yourself you can do this:
$('#webapp_recovery *').remove();
$('#webapp_recovery').remove()
Remove should delete the element as well as contents. This is from the JQ api: "Use .remove() when you want to remove the element itself, as well as everything inside it.".
So I would use the following if your webapp_notification div already exists in the DOM:
$("#webapp_recovery").remove();
$("#webapp_notification").show(); //hide this initially.
Otherwise, if you are removing the old and adding the new, you could use something like:
$("#webapp_recovery").after($("#webapp_notification")).remove();
Using
$("#webapp_recovery").children().hide();
$("#webapp_recovery").hide();
will hide the div and the elements inside it.
This method doesn't use jQuery, if the parent element id is webapp_recovery:
var tmp=document.getElementById("webapp_recovery");
tmp.parentNode.removeChild(tmp);

angularjs how to set text inside element based on textbox input

My code is:
<div ng-controller="myCtrl">
<div class="row">
<div class="col-md-4 col-sm-3">
<checked-input ng-scope="$eventID"></checked-input>
</div>
<div class="col-md-4 col-sm-3">
<output ng-scope="$postbackOutput">***This is where I want the text typed in the textbox to go***</output>
</div>
<div class="col-md-3 col-sm-3">
<a ng-click="generateURL($eventID)" class="btn-plus">
<span class="glyphicon glyphicon-plus"></span>
</a>
</div>
</div>
</div>
So what I'm trying to do is get that $eventID that's inside the first column div, then pass it as an argument to the function call generateURL() when the link in the <a> tag is clicked in the third column. Inside the controller I have:
app.controller('postbackCtrl', function($scope) {
$scope.generateURL = function(eventID) {
$scope.postbackOutput = eventID;
}
});
But it doesn't seem to be setting the text in the <output> correctly. Could anyone help? I've just started out with angular so it's a bit confusing.
You can just bind the var to the view with handlebar brackets:
<output ng-scope="$postbackOutput">
{{ postbackOutput }}
</output>
Here is a working plunkr

jQuery find id after loading

Here is my structure:
Person.html
...
<script src="../../js/site.js"></script>
...
<a id="findPersonById" href="javascript:void(0);" class="btn btn-primary">
Find person by id</a>
...
<div id="person-result">results div</div>
Site.js
$(document).ready(function () {
privateFunction();
});
...
$('#findPersonById').click(function () {
$("#person-result").load('/person/find #inside-container');
});
...
/person/find
<script src="../../js/site.js"></script>
...
<div class="container">
<div id="inside-container">
<br/>
<form id="personFindByIdForm">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">PERSON'S ID</span>
<input type="text" class="form-control" name="id"/>
<span class="input-group-btn">
<button class="btn btn-default" type="submit">Find</button>
</span>
</div>
</div>
</form>
<div id="find-result">res-div</div>
</div>
So, first of all I'm finding #findPersonById and loading /person/find #inside-container in the #person-result. It works. My next step was about to find two ids #personFindByIdForm and #find-result. I can't do it since document is already loaded if I'm right. How could I do this ?
And the second question - if I add any js code into the div that will be loaded into another div, will that js code run (why is it not running)?
Like:
$("#div-2").load('/any-url #div-1');
<div id='div-1'>
<script>console.log('Any JS')</script>
</div>
Thank you.
You can make sure the items are loaded this way:
$("#div-2").load('/any-url #div-1', function(){
//here all the items loaded will be accessible
});

Categories