Develop Reference

Bootstrap Datepicker not Working on Server but works locally

My Datepicker in modal does not work on server but works properly on localhost. Below is my html and js code:
Html:
<div class="modal fade" id="CreateAppointmentModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Create Appointment</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body" id="CreateAppointmentBody">
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
JS
$(document).on("click", ".AppointmentItem", function () {
var row = $(this).closest("tr");
idOfCust = row.find("td:first-child").text();
var url = '/Home/Create_AppointmentAdmin';
console.log(url);
$('#CreateAppointmentModal').modal('show');
$('#CreateAppointmentBody').load(url);
});
$('#CreateAppointmentModal').on('shown.bs.modal', function (e) {
console.log('Entered');
$('.daterangepicker').css('z-index', '1600');
$(".daterangepicker").datepicker({
dateFormat: 'dd-mm-yy',
//onSelect: PopulateDropDown,
minDate: 0
});
});
Modal Body:
<div class="alert" role="alert" id="alertBox" style="display:none">
</div>
<div class="row">
<div class="col-md-12">
<form asp-action="Create_AppointmentAdmin" autocomplete="off">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<input asp-for="Userid" type="hidden" id="CustId" />
<div class="form-group">
<label asp-for="AppointmentDay" class="control-label">Appointment Day</label>
<input asp-for="AppointmentDay" class="form-control daterangepicker" id="Calendar_Admin" type="text" autocomplete="off"/>
<span asp-validation-for="AppointmentDay" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="AppointmentTime" class="control-label">Appointment Time</label>
<select asp-for="AppointmentTime" class="form-control" id="AppointmentTime">
<option value="">Select</option>
</select>
<span asp-validation-for="AppointmentTime" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Comment" class="control-label">Comments</label>
<input asp-for="Comment" class="form-control" id="Comment" />
<span asp-validation-for="Comment" class="text-danger"></span>
</div>
<div class="form-group">
<input type="button" value="Create Appointment" class="btn btn-success" id="CreateAppointmentAdmin" />
</div>
</form>
</div>
</div>
Have tried multiple solutions availabe here but none seem to work.
Is there some mistake that I am doing? The same code seems to work fine on server when it is a full fledged page.
Any solution to this issue?

Validating data in bootstrap modal using JQuery not working

I have been stuck on this issue since a week. I am not able to validate bootstrap modal using jQuery validator function. I have searched lots of stuff, also I have used exactly the same method as mentioned in here: How to correctly validate a modal form . I have been using django framework. Here is my HTML code:
<div class="modal fade" id="myModalHorizontal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<form class="form-horizontal" id="myForm" role="form" action="{% url 'apply:add' %}" method="POST">
{% csrf_token %}
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">
Apply Leave
</h4>
</div>
<!-- Modal Body -->
<div class="modal-body">
<div class="form-group">
<label class="control-label col-sm-3" for="e_id">Employee-Id</label>
<div class="col-sm-9">
<select class="form-control" id="e_id" name="e_id" class="required">
{% for entry in emp_data %}
<option value="{{ entry.emp_id }}">{{ entry.emp_id }} - {{ entry.emp_name}} </option>
{% endfor %}
</select>
</div>
</div>
<style>
.datepicker {
z-index: 1600 !important;
border-color: black;
}
</style>
<div class="form-group">
<label class=" control-label col-sm-3" for="s_dt">Start Date</label>
<div class="col-sm-9" >
<input type='text' class="form-control" id="s_dt" placeholder="Start Date" name="s_dt"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="e_dt">End Date</label>
<div class="col-sm-9" >
<input type='text' class="form-control" id="e_dt" placeholder="End Date" name="e_dt" require/>
</div>
</div>
<p class="col-sm-9 col-sm-offset-3" > Enter Start Date = End Date if leave is applied for a single day </br></p>
<div class="form-group">
<label class="col-sm-3 control-label" for="l_type">Leave Type</label>
<div class="col-sm-9">
<select class="form-control" id="l_type" name="l_type">
<option value="S">Sick Leave</option>
<option value="V">Vacation Leave</option>
<option value="M">Maternity Leave</option>
<option value="P">Paternity Leave</option>
<option value="C">Casual Leave</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="desc">Description</label>
<div class="col-sm-9">
<textarea class="form-control" id="desc" rows="3"></textarea>
</div>
</div>
<!-- Modal Footer -->
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">
Close
</button>
<button type="submit" class="btn btn-primary" name="save" id="save" value="Save changes" data-dismiss="modal">
Save changes
</button>
</div>
</form>
</div>
</div>
</div>
</div>
Here is my javascript:
$(function() {
$("#myForm").validate({
rules: {
s_dt: "required",
e_dt: "required"
},
messages: {
s_dt: "Please provide a date",
e_dt: "Please provide a date"
}
});
});
Thanks in advance..

pop up not working after sending a message

my contact us page, a pop up is meant to show and disappear when i send a message,but nothing happens. please help
the contact us page and pop up modal
<!-- The Contact Us Page -->
<div class="jumbotron jumbotron-sm">
<div class="container">
<div class="row">
<div class="col-sm-12 col-lg-12 header"></div>
</div>
</div>
</div>
<div class="container card">
<div class="row">
<div class="col-sm-12 col-lg-12">
<h1 class="h1">Contact us <span class="fa fa-envelope"></span> <!--<small class="col-xs-12" style="padding-left: 0">We will get back to You</small>--></h1>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-12">
<div class="cardStyle">
<form name="contact" id="form" data-toggle="validator">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="name">
Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter name" required="required" />
</div>
<div class="form-group">
<label for="email">
Email Address</label>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span>
</span>
<input type="email" class="form-control" id="email" placeholder="Enter email" required="required" />
</div>
</div>
<div class="form-group">
<label for="subject">
Subject</label>
<select id="subject" name="subject" class="form-control" required="required">
<option value="none" selected="" disabled>Choose One:</option>
<option value="general">General Customer Service</option>
<option value="collaborate">Collaborate with Us</option>
<option value="bug">Found a Bug/Issue</option>
<option value="other">Any other Queries</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="name">
Message</label>
<textarea name="message" id="message" class="form-control" rows="9" cols="25" required="required" placeholder="Message"></textarea>
</div>
</div>
<div class="col-md-12">
<button type="submit" class="btn btn-success pull-right" id="btnContactUs">Send Message</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
this is the pop up modal that is supposed to appear
<!-- Form submitted Thank You Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title text-center" id="myModalLabel">Contact</h4>
</div>
<div class="modal-body">
<h3 class="h3 text-center">Thank you for your feedback! We will get back to you.</h3>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
the JavaScript file
$(document).ready(function() {
$('#form').validator().on('submit', function(e) {
if (e.isDefaultPrevented()) {
// handle the invalid form...
$('#myModal').modal('hide');
} else {
// everything looks good!
$('#myModal').modal('show');
}
})
});

Since you try to show the modal only when preventDefault() has NOT been called, the form's default action will take place, which is to submit the form. This causes a page load and since you haven't specified an action attribute on the form, it will submit to the same page. In other words, the page just reloads.
If you don't want to cause a page reload, you have to always call preventDefault() and then submit the data with AJAX.

How to replace the append content before the edition on modal

I have the append div listing some values and I need to edit them using a modal, I already can edit but the content appended in list doesn't change at all.
My JS:
var creatingModal = false;
canvas.on('mouse:up', function (){
creatingModal = true;
jQuery('#modal').modal('show').trigger('shown');
//get values from obs form
jQuery(document).on("click", "#submitObservacao", function(e){
e.preventDefault();
var denteNumero = jQuery("#dente").val();
var procedimentos = jQuery("#procedimentos").val();
var observacao = jQuery("#observacoes").val();
jQuery("#anotacoes").append(
'<div class="thumbnail mark" id="itemObs" data-toggle="modal" data-target="#EditMod"><b>Dente</b>:<span id="anotacaoDente" class="anotDent">'+ denteNumero +'</span> <i class="fa fa-trash f-right" id="removerNow" aria-hidden="true"></i> <br> <b>Procedimentos:</b> <span id="anotacaoProcedimentos">'+ procedimentos +'</span><br> <b>Observações:</b> <span id="anotacaoObservacao">'+ observacao +'</span><br> </div>'
);
//refreshing values
jQuery(denteNumero).val('');
jQuery("#dente").val('');
jQuery(procedimentos).val('');
jQuery(observacao).val('');
jQuery("#observacoes").val('');
jQuery('#modal').modal('hide').unique();
});
jQuery(document).on("click", "#removerNow", function(e){
e.preventDefault();
jQuery(this).parent().remove();
var canvas_objects = canvas._objects;
console.log(canvas_objects);
if(canvas_objects.length !== 0){
var last = canvas_objects[canvas_objects.length -1]; //Get last object
canvas.remove(last);
canvase.renderAll();
}
});
});
jQuery(document).on("click", ".mark", function(e){
e.preventDefault();
var numDente = jQuery(this).find("#anotacaoDente").html();
var numObservacoes = jQuery(this).find("#anotacaoObservacao").html();
var numProcedimentos = jQuery(this).find("#anotacaoProcedimentos").html();
jQuery("#obsModalEdit input[name=dente]").val(numDente);
jQuery("#obsModalEdit select[name=procedimentos]").val(numProcedimentos);
jQuery("#obsModalEdit textarea[name=observacoes]").val(numObservacoes);
//Edit on click
jQuery(document).on("click", "#submitEditar", function(e){
e.preventDefault();
var numDente = jQuery("#denteEdit").val();
var numProcedimentos = jQuery("#procedimentosEdit").val();
var numObservacoes = jQuery("#observacoesEdit").val();
//Edit the append contente here
jQuery('#EditMod').modal('hide');
});
});
})();
The HTML that i want to edit the content is generated by the append in JS above, thank you.
The HTML
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-12 ">
<canvas id="c" width="840" height="590" style="border:1px solid #aaa"></canvas>
</div>
<div class="col-lg-4 col-md-4 col-sm-3 col-xs-12 ">
<div style="display: inline-block; margin-left: 10px">
<button style="visibility: hidden;" id="drawing-mode" class="btn btn-info">Cancel drawing mode</button><br>
<button style="visibility: hidden;" id="clear-canvas" class="btn btn-info">Clear</button><br>
<div id="drawing-mode-options">
<label style="visibility: hidden;" for="drawing-mode-selector">Mode:</label>
<select style="visibility: hidden;" id="drawing-mode-selector">
<option>Pencil</option>
<option>Circle</option>
<option>Spray</option>
<option>Pattern</option>
<option>hline</option>
<option>vline</option>
<option>square</option>
<option>diamond</option>
<option>texture</option>
</select><br>
<div class="thumbnail od-thumb">
<label for="drawing-line-width">Expessura da Linha:</label>
<span class="info">2</span><input type="range" value="2" min="0" max="150" id="drawing-line-width"><br>
<label for="drawing-color">Cor da Linha:</label>
<input type="color" value="#005E7A" id="drawing-color"><br>
</div>
<label style="visibility: hidden;" for="drawing-shadow-color">Shadow color:</label>
<input style="visibility: hidden;" type="color" value="#005E7A" id="drawing-shadow-color">
<label style="visibility: hidden;" for="drawing-shadow-width">Shadow width:</label>
<span style="visibility: hidden;" class="info">0</span><input style="visibility: hidden;" type="range" value="0" min="0" max="50" id="drawing-shadow-width">
<label style="visibility: hidden;" for="drawing-shadow-offset">Shadow offset:</label>
<span style="visibility: hidden;" class="info">0</span><input style="visibility: hidden;" type="range" value="0" min="0" max="50" id="drawing-shadow-offset">
</div>
</div>
<!-- close col-panel first-->
</div>
<!-- fecha row -->
</div>
<!-- jumbotron -->
<div class="row">
<div class="">
</div>
<div class="col-lg-12">
<div class="tron" id="anotacoes">
</div>
</div>
</div>
<!-- Modal -->
<div id="modal" class="modal fade" tabindex="-1" role="dialog" data-backdrop="static" >
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-backdrop="static" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Adicionar Região</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" id="obsModal">
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Dente:</label>
<div class="col-md-4">
<input id="dente" name="textinput" type="text" placeholder="Número do dente" class="form-control input-md" required="">
</div>
</div>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="selectbasic">Procedimentos:</label>
<div class="col-md-4">
<select id="procedimentos" name="selectbasic" class="form-control">
<option value="122">122 - Tramua 1</option>
<option value="123">123 - Trauma 2</option>
</select>
</div>
</div>
<!-- Textarea -->
<div class="form-group">
<label class="col-md-4 control-label" for="textarea">Observações:</label>
<div class="col-md-4">
<textarea class="form-control" id="observacoes" placeholder="Digite sua observação aqui" name="textarea"></textarea>
</div>
</div>
<button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
<button type="button" id="submitObservacao" class="btn btn-primary">Salvar Anotações</button>
</form>
</div>
<div class="modal-footer">
<!-- <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
<button type="button" class="btn btn-primary">Salvar Anotações</button> -->
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- EDIT MODAL -->
<div id="EditMod" class="modal fade" tabindex="-1" role="dialog" data-backdrop="static" >
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-backdrop="static" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Editar Anotação</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" id="obsModalEdit">
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="textinput">Dente:</label>
<div class="col-md-4">
<input id="denteEdit" name="dente" type="text" placeholder="Número do dente" class="form-control input-md" required="">
</div>
</div>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="selectbasic">Procedimentos:</label>
<div class="col-md-4">
<select id="procedimentosEdit" name="procedimentos" class="form-control">
<option value="122" name="procedimentos">122 - Tramua 1</option>
<option value="123" name="procedimentos">123 - Trauma 2</option>
</select>
</div>
</div>
<!-- Textarea -->
<div class="form-group">
<label class="col-md-4 control-label" for="textarea">Observações:</label>
<div class="col-md-4">
<textarea class="form-control" id="observacoesEdit" placeholder="Digite sua observação aqui" name="observacoes"></textarea>
</div>
</div>
<button type="button" class="btn btn-default refresh" data-dismiss="modal">Cancelar</button>
<button type="button" id="submitEditar" class="btn btn-primary">Editar Anotação</button>
</form>
</div>
<div class="modal-footer">
<!-- <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
<button type="button" class="btn btn-primary">Salvar Anotações</button> -->
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

It is bit difficult without having your HTML code. Anyway I copied the last part of your JS and added few lines with comments. Hope this helps.
//Edit on click
jQuery(document).on("click", "#submitEditar", function(e){
e.preventDefault();
var numDente = jQuery("#denteEdit").val();
var numProcedimentos = jQuery("#procedimentosEdit").val();
var numObservacoes = jQuery("#observacoesEdit").val();
//Edit the append contente here
//Can't you changed the value of the relevant controller like this.
jQuery('#yourElementToModify').val(numProcedimentos);
//Or if you want to change the DIV fully,
jQuery('#itemObs')[0].innerHTML = 'append content';
jQuery('#EditMod').modal('hide');

Jquery .html wont load the css

Says, i write this code :
<div class="modal fade" id="addnewevent">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
<h4 class="modal-title">
New Event
</h4>
</div>
<div class="modal-body">
<form name="newevent" id="newevent" action="" method="post">
<div class="form-group">
<label for="eName">Title</label>
<input name="eName" id="eName" class="form-control" type="text">
</div>
<div class="form-group">
<label for="eDate">Date</label>
<div class="input-group date datepicker" data-date-autoclose="true" data-date-format="dd-mm-yyyy">
<input name="eDate" id="eDate" class="form-control" type="text" value="<?=date("d-m-Y",$now)?>"><span class="input-group-addon"><i class="icon-calendar"></i></span></input>
</div>
</div>
<div class="form-group">
<label for="eLevel">Event Level</label>
<select name="eLevel" id="eLevel" class="select2able" >
<option value=""></option>
<option value="1">Normal</option>
<option value="2">Urgent</option>
</select>
</div>
<div class="form-group">
<label for="eDesc">Deskripsi</label>
<textarea name="eDesc" id="eDesc" class="form-control" rows="3" maxlength="150"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" id="add" type="button">Add</button><button class="btn btn-default-outline" data-dismiss="modal" type="button">close</button>
</div>
</div>
</div>
</div>
This will gave me result like this picture :
http://imageshack.com/a/img542/7466/okj7.png
Then, i use :
function change(id) {
$.post('ajax/change.php', {
data: id,
rand: Math.random()
},
function (html) {
$('#changeform').html(html);
$("#modalchange").modal('show');
});
}
triggered from this button :
<a class="table-actions" href="#" onClick="change('<?=$tm['id']?>');return false;"><i class="icon-pencil"></i></a>
The code for html (from change.php) is like this :
<?php
if(isset($_POST['data'])) {
$id = $_POST['data'];
$evt = mysql_query("select * from cal_event where id = '$id'");
$evt = mysql_fetch_array($evt);
$dt = explode(",",$evt['date']);
?>
<input type="hidden" value="<?=$id?>" name="uid" />
<div class="form-group">
<label for="eName">Title</label>
<input name="eName" id="eName" class="form-control" type="text" value="<?=$evt['title']?>">
</div>
<div class="form-group">
<label for="eDate">Date</label>
<div class="input-group date datepicker" data-date-autoclose="true" data-date-format="dd-mm-yyyy">
<input name="eDate" id="eDate" class="form-control" type="text" value="<?=$dt[2]."-".($dt[1]+1)."-".$dt[0]?>"><span class="input-group-addon"><i class="icon-calendar"></i></span></input>
</div>
</div>
<div class="form-group">
<label for="eLevel">Event Level</label>
<select name="eLevel" id="eLevel" class="select2able" >
<option value=""></option>
<option <?=($evt['level']==1)?"selected":""?> value="1">Normal</option>
<option <?=($evt['level']==2)?"selected":""?> value="2">Urgent</option>
</select>
</div>
<div class="form-group">
<label for="eDesc">Deskripsi</label>
<textarea name="eDesc" id="eDesc" class="form-control" rows="3" maxlength="150"><?=$evt['deskripsi']?></textarea>
</div>
<?php
}
?>
this is modal change
<div class="modal fade" id="modalchange">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
<h4 class="modal-title">Change Event</h4>
</div>
<div class="modal-body" >
<form name="changeform" id="changeform" action="" method="post">
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" id="change" type="button">Change</button><button class="btn btn-default-outline" data-dismiss="modal" type="button">Close</button>
</div>
</div>
</div>
</div>
but the result is different, it's give me like this :
http://imageshack.com/a/img89/3892/tpo5.png
So, how can i solve this problem?
and sorry for my bad in english.

From the picture you posted, the select element should not be just styled with css, there should be some javascript magic (which transform the select element to something else and hide the select element).
So you have to apply the javascript to the new html content again.