We Keep Coding

Cropper JS with class.upload.php - uncropped image is being saved

I'm using the Cropper JS library and then class.upload.php on an image upload project. I've got everything working except when the PHP script processes the upload, it saves the uncropped version of the image. If I 'inspect' the file input in Chrome after I've performed the crop, the src is the cropped image, so I can't figure out for the life of me why it's receiving the original uncropped version.
The HTML looks like this. It uses Bootstrap & JQuery, but I'm omitting that to avoid bloat.
<input type="file" class="upload-input" name="imageFile" accept="image/*" style="display:none;" id="input-1">
<div class="input-group mb-3">
<input type="text" class="form-control" id="filename-1" readonly placeholder="Upload your show image (Required)" style="width:100%;">
<div class="input-group-btn">
<button class="btn btn-outline-secondary upload-button" type="button" data-ratio="1/1">Select</button>
</div>
</div>
<!-- Modal For Cropper -->
<div class="modal fade photo-cropper" tabindex="-1" aria-labelledby="cropperModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="cropperModalLabel">Crop your image</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="upload-preview">
<img class="upload-image-preview" style="display: block; max-width: 100%;">
<div class="photo-cropper-controls">
<i class="fa fa-check-square" id="crop-confirm" aria-hidden="true"></i>
<i class="fa fa-window-close" id="crop-cancel" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
</div>
Here's the JS that controls Cropper
$(document).on('click', '.upload-button', function(e) {
var ratio = $(this).data('ratio');
var activeInput = $('#input-1');
activeInput.click();
$(activeInput).change(function() {
if(this.files && this.files[0]) {
var imageFile = this.files[0];
var reader = new FileReader();
reader.onload = function (e) {
$('.photo-cropper').modal('show');
$(document).on('shown.bs.modal', function (f) {
$('.upload-image-preview').attr('src', e.target.result);
$('.photo-cropper-controls').show();
$('.upload-image-preview').data('target', '#input-1');
$('.upload-image-preview').cropper('destroy');
$('.upload-image-preview').cropper({
aspectRatio: eval(ratio),
viewMode: 1
});
});
}
reader.readAsDataURL(imageFile);
}
});
});
$(document).on('click', '#crop-confirm', function() {
var target = $('.upload-image-preview').data('target');
var imageData = $('.upload-image-preview').cropper('getCroppedCanvas', {maxWidth: 990}).toDataURL('image/jpeg');
$('.photo-cropper').modal('hide');
$(document).on('hidden.bs.modal', function (f) {
$('.upload-image-preview').cropper('destroy');
});
$(target).attr('src', imageData);
var filename = $(target).val().split('\\').pop();
$('#filename-1').val(filename);
});
And finally, the PHP that deals with the posted form
if(!empty($_FILES['imageFile'])) {
require_once('assets/plugins/class.upload.php');
$handle = new upload($_FILES['imageFile']);
if ($handle->uploaded) {
$handle->file_safe_name = true;
$handle->allowed = array('image/*');
$handle->image_ratio_y = true;
$handle->image_x = 800;
$handle->process('/upload/path/');
if ($handle->processed) {
$image = $handle->file_dst_name;
}
}
}
The basic method is click the .upload-button which clicks the hiding file input, then opens a Bootstrap modal and initialises Cropper with the selected image. When you've finished cropping, clicking #crop-confirm creates the DataURL, closes the modal, and puts the imageData in the file input. Submitting the form sends the data to the PHP with the image in the imageFile field. All ok so far? So why is the file it saves the original uncropped image?
I'm clearly missing something really obvious...

How to return a view after select of date on fullCalendar using javaScript and Razor

I am able to query database to properly fill calendar with events. I can drag and drop and the dates successfully update in database. If I click on existing event, the popup modal shows the details I want and I have been able to customize that easily.
However, I can't figure out how to create a new event from the fullCalendar view. I do not want to create it right there in a form in a modal, because I need to capture lots of extra selections from the user beyond the basics of start, end, id, color, etc. I just want to capture 'start' only and return a basic create view form.
When I track the breakpoint, everything looks like it is working. The 'start' value is passed to the controller method. That method calls to service to return a model. The breakpoint shows the view being rendered, but nothing actually changes on the screen. The js is below:
selectable: true,
select: function (start) {
selectedEvent = {
eventID: 0,
start: start,
allDay: true,
};
CreateFullCalEvent(start.toISOString());
$('#calendar').fullCalendar('unselect');
},
height: 'parent',
events: function (start, end, timezone, callback) {
$.ajax({
type: "GET",
contentType: "application/json",
url: "GetEventData",
dataType: "JSON",
success: function (data) {
var events = [];
$.each(data, function (i, data) {
events.push(
{
title: data.title,
start: moment(data.start),
end: moment(data.end),
allDay: true,
backgroundColor: data.color,
id: data.id,
textColor: data.textColor
}
);
});
callback(events);
}
})
},
nextDayThreshold: '00:00:00',
editable: true,
droppable: true,
nowIndicator: true,
eventClick: function (info) {
GetFullCalEventByID(info);
},
eventDrop: function (info) {
console.log(info);
UpdateFullCalEvent(info.id, info.start.toISOString(), info.end.toISOString());
},
eventResize: function (info) {
UpdateFullCalEvent(info.id, info.start.toISOString(), info.end.toISOString());
}
})
}
function CreateFullCalEvent(start) {
var object = {};
object.start = start;
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "CreateFullCalEvent/",
dataType: "JSON",
data: JSON.stringify(object)
});
}
function GetFullCalEventByID(eventinfo) {
The controller method is here:
//CREATE
[HttpPost]
public ActionResult CreateFullCalEvent(string start)
{
//return RedirectToAction("Create", "CalendarEvent");
var model = _calEventSvc.FullCalendarEventCreateView(DateTime.Parse(start));
return View(model);
}
And the view:
#model CRM.Models.CalendarEvent.CalendarEventCreate
#{
ViewBag.Title = "CreateFullCalEvent";
}
<h2>CreateFullCalEvent</h2>
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.Start, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Start, new { htmlAttributes = new { #class = "form-control", type = "date" } })
#Html.ValidationMessageFor(model => model.Start, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.End, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.End, new { htmlAttributes = new { #class = "form-control", type = "date" } })
#Html.ValidationMessageFor(model => model.End, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Title, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Title, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Title, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Location, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Location, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Location, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Details, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Details, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Details, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.TypeOfEvent, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EnumDropDownListFor(model => model.TypeOfEvent, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.TypeOfEvent, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" formaction="Create" class="btn btn-default" />
#*<input type="submit" value="Add Job info" formaction="Job" class="btn btn-default" />*#
</div>
</div>
</div>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
I am not getting an error in visual studio or in debug mode in the browser. It is just not showing my view as expected. This is a regular view, not a partial view, so I am expecting my layout view from my other pages to show here.
The page I am on when I click on a date does not use a layout page and is like this:
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="~/Content/fullcalendar.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<script src="~/Scripts/jquery-3.4.1.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/moment.js"></script>
<script src="~/Scripts/fullcalendar.js"></script>
<script src="~/Scripts/calendar.js"></script>
<script type="text/javascript">
$(document).ready(function () {
GetEventsOnPageLoad();
});
</script>
<style>
.calendar-body {
height: calc(100vh - 165px);
width: 90%;
padding-left: 130px;
}
.calendar-header {
padding-left: 30%;
margin-top: 5%;
}
body {
zoom: 110%;
background-image: url('../../Content/Assets/bgSubtle.jpg');
font-family: Consolas;
}
</style>
</head>
<body>
<div class="calendar-header">
#Html.Partial("~/Views/Shared/NavBarLayout.cshtml")
<div style="padding: 1%; margin-left: 71%;">#Html.ActionLink("List View", "Index", "CalendarEvent")</div>
</div>
<div class="calendar-body">
<div id="calendar"> </div>
</div>
<div id="MyPopup" class="modal fade modal-CreateEvent" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
#*Header*#
<div class="modal-header">
<h4 class="modal-title"></h4>
</div>
#*ModalBody*#
<div class="modal-body">
</div>
#*modal footer*#
<div class="modal-footer">
<button type="button" class="btn" data-dismiss="modal">
OK
</button>
<button id="btnEdit" class="btn btn-default pull-right">Edit</button>
</div>
</div>
</div>
</div>
</body>
</html>

You're calling CreateFullCalEvent via AJAX. That won't render your view unless you write some JavaScript to do so (and in that case you'd need a Partial View, not a full view, to go inside the existing page). Remember an AJAX request doesn't refresh the page automatically, it simply sends a request and receives a response. The response data (in this case the HTML of the view) comes back to the JavaScript inside a variable - what happens to that response data is then up to you and the code you write to process it. At the moment, your code is ignoring the response it gets back from the AJAX request.
You said you didn't want to put this Create form inside a modal, so I'll assume that you actually wanted redirect the browser away from the calendar and onto the Create page. To do that, a simple redirect is all you need:
function CreateFullCalEvent(start) {
window.location.href = "CreateFullCalEvent?start=" + encodeURIComponent(start);
}
But to make that work with the server-side code you'll also have to make the action method respond to GET instead of POST:
[HttpGet]
public ActionResult CreateFullCalEvent(string start)
Optionally you could also try changing it to CreateFullCalEvent(DateTime start) so you don't need to call DateTime.Parse later on.
P.S. Having said all that, it's not really clear why you feel a form inside a modal (overlaid on top of the calendar) wouldn't be suitable here - your "Create" view is only capturing a small number of fields. It seems to me it would work fine as a partial view. Just something to think about.

How i can capture the screen with an image that loaded from server using angular

How I can capture the screen with an image that loaded from the server using angular. Now I can capture the screen with only text data that load from the back-end, But the image is missed.
Note: I can load the text and image from the backend. But this code can't capture the image
This is the HTML Code
<div #screen id="cards">
<div class="row justify-content-center">
<div class=" col-12 col-md-6 box mt-4">
<img class="img-layer" src="{{url}}/xxxx/xxxx/{{xxxxx}}/xxxx/front.jpg" style="height: 100%; width:
100%; border: 1px solid black;">
<div class="row justify-content-center avatar">
<div class="col-md-8 text-center d-flex">
<img src="{{url}}/xxxxx/profile/{{xxxxxxx}}/student/{{xxxxxx}}.jpg" style="height: 200px; width:
200px; border-radius: 5px;">
</div>
</div>
<div class="row mt-7 clg-details space">{{aaaa}}</div>
<div class="row">{{aaaa}}</div>
<div class="row">{{aaa}}</div>
<div class="row">{{aaaa}}</div>
</div>
</div>
<div id="download">
<img #canvas>
<a #downloadLink></a>
</div>
This is the TS Code
#ViewChild('screen', { static: false }) screen: ElementRef;
#ViewChild('canvas', { static: false }) canvas: ElementRef;
#ViewChild('downloadLink', { static: false }) downloadLink: ElementRef;
captureImage() {
console.log((this.screen.nativeElement));
html2canvas(this.screen.nativeElement).then(canvas => {
this.canvas.nativeElement.src = canvas.toDataURL();
this.downloadLink.nativeElement.href = canvas.toDataURL('image/png');
this.downloadLink.nativeElement.download = 'id-card.png';
this.downloadLink.nativeElement.click();
});
}
This is the image what I need after render and save
This is the image that I get. note that background image is missed

First of all you need to create an img [src]'s value in the front end.
e.g.<img [src]="myImage">in your HTML.
In component :
myImage : any;
createImage(image : blob){
let reader = new FileReader();
reader.addEventListener("load" => {
this.myImage = reader.result;
}, false);
if(image){
reader.readAsDataURL(image);
}
}
assuming you are getting blob from backend.

jquery function firing even though condition is false

This is a real mystery for me and the other developers who have looked at it. I have a jquery function and within the function I have an if statement. There is some code within the statement body that I want executed when the condition is true, but not executed when the condition is false. Pretty simple. However, the code within the body is being executed, EVEN when the condition is false. The variable in the condition is called delayExists (which is outside the function). I tested using a variable (called test) within the function and "forced" the condition to be true - ONLY in this scenario is the if statement working correctly. I've stepped through the code using Chrome Developer tools and can see when delayExists becomes true yet the condition appears to be ignored. I've tried to include the pertinent code below. Please let me know I need to provide more.
<!-- at model specifies the type of object the view expects -->
#model atdaem
<div class="tab-pane" id="tab_delays">
<div class="row">
<div class="col-xs-12">
#(Html.Kendo().Grid<atdlm>().Name("delays-grid").Columns(columns =>
{
columns.Bound(c => c.Id).HeaderTemplate(" ").Width(1).ClientTemplate("<span style=\"white-space:nowrap;\">" + "<button type=\"button\" class=\"btn btn-social-icon btn-linkedin\" " + "data-toggle=\"modal\" data-target=\"\\#delayAddModal\" data-guid=\"#=Id#\" data-name=\"#=LocationName#\" " +
"data-title=\"Edit Delay\" >" + "<i class=\"fa fa-edit\"></i></button>" + "</span>");
;
}).DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Type(HttpVerbs.Post)
.Action("ActualDelayList", "TrainActivity")
.Data("actualJobTaskId")))
.Events(events => events.DataBound("delaysDatabound")))
<div class="pull-right top-buffer">
<button type="button" class="btn bg-green" data-toggle="modal"
data-title="Add Delay"
data-target="#delayAddModal">
<i class="fa fa-plus-square"></i>
Add delay
</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="delayAddModal" tabindex="-1" role="dialog" aria-labelledby="delayAddLabel">
<div class="modal-dialog" role="document">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<!-- This "x" button is for dismissing the modal -->
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="delayAddLabel">Add Delay</h4>
</div>
<div class="modal-body">
<form name="delay-form" id="delay-form">
#Html.HiddenFor(m => m.atdId, new { id = "atdId" })
#Html.HiddenFor(m => m.ajtId)
#*Original:*#
<div class="form-group">
<!-- Renders floating text ("Subdivision") above the select options -->
#Html.LabelFor(m => m.SubdivisionId, new { #class = "field-label always-visible" })
<!-- ID for select element -->
<!-- Renders select class="select" id="SubdivisionId" name="SubdivisionId"><option value="4429faa8-5ad4-4adf-adde-ec7cf88ed9e9" innerHTML "Caltrain"-->
#Html.DropDownListFor(m => m.SubdivisionId, Model.AvailableSubdivisions, new { #class = "select" })
#Html.ValidationMessageFor(m => m.SubdivisionId)
</div>
<div class="row">
<!--Start milepost -->
<div class="col-xs-6">
<div class="form-group">
#Html.LabelFor(m => m.StartMilepost, new { #class = "field-label" })
#Html.TextBoxFor(m => m.StartMilepost, new { #class = "form-control", placeholder = Html.DisplayNameFor(m => m.StartMilepost) })
#Html.ValidationMessageFor(m => m.StartMilepost)
</div>
</div>
<!-- End milepost -->
<div class="col-xs-6">
<div class="form-group">
#Html.LabelFor(m => m.EndMilepost, new { #class = "field-label" })
#Html.TextBoxFor(m => m.EndMilepost, new { #class = "form-control", placeholder = Html.DisplayNameFor(m => m.EndMilepost) })
#Html.ValidationMessageFor(m => m.EndMilepost)
</div>
</div>
</div>
<!-- Location -->
<div class="form-group">
#Html.LabelFor(m => m.LocationId, new { #class = "field-label always-visible" })
<select id="LocationId" name="LocationId" class="select">
#foreach (var loc in Model.AvailableLocations)
{
<option value="#loc.Id" data-milepost="#loc.Milepost">#loc.Name</option>
}
</select>
#Html.ValidationMessageFor(m => m.LocationId)
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<!-- call to js function-->
<button id="delayAddButton" type="button" class="btn btn-primary" data-title="Add Delay">Add Delay</button>
</div>
</div>
</div>
</div>
<script>
var delayExists = false;
//the jquery function is listening for the element with the id #delayAddModal (which is also used for delayEdit); when that modal is shown (by someone clicking
// on the Add Delay button which has a data-target that points to the modal), just before the modal appears this fuction executes)
$("#delayAddModal")
.on("show.bs.modal",
function(event) {
var button = $(event.relatedTarget); // Button that triggered the modal
var modal = $(this);
var title = button.data('title'); // get New title from data-title attribute
var delId = button.data("guid");
var name = button.data("name");
var conditionalVariable = 1;
var updateButtonValue = "Save Edit";
modal.find('.modal-title').text(title); // set title to New title
modal.find('#delayAddButton').text(updateButtonValue); // set button value to Edit Delay
$.ajax({
type: "GET",
url: "/TrainActivity/GetDelayDataForEditing/" + "?delayId=" + delId,
dataType: 'json',
success: function(data) {
delayExists = true;
modal.find('');
var sub = data.SubdivisionId;
$.getJSON('/TrainActivity/LocationBySubdivisionList?id=' + sub,
function(locs) {
// the stuff that needs to happen before the parent ajax completes needs to go in here
$('select#SubdivisionId').val(data.SubdivisionId).trigger('change');
$('#StartMilepost').val(data.StartMilepost);
$('#EndMilepost').val(data.EndMilepost);
$('#LocationId').val(data.LocationId).trigger('change');
//$('select#LocationId').val(data.LocationId).trigger('change');
});
},
error: function() { alert("error in Delay Edit"); }
});
});
//matches location based on input in Start Milepost
$(document)
.ready(function() {
var test = true;
//matches location based on input in Start Milepost
var button = $(event.relatedTarget); // Button that triggered the modal
var delId = button.data("guid");
if (test == false) {
//if (delayExists == false) {
$("#StartMilepost").change(function() {
$("#EndMilepost").val($(this).val());
//nearestMilepost();
});
}
#*function nearestMilepost()
{
//var mile = parseFloat($(this).val());
var mile = $("##Html.IdFor(m => m.StartMilepost)").val();
var sub = ($("#SubdivisionId").val());
var locationId = $('#LocationId option').filter(function () {
return parseFloat($(this).data('milepost')) >= mile
}).val();
$("#LocationId").val(locationId).change();
}
});
//changing the subdivision changes the locations available in the location box
#*$("#SubdivisionId").change(function () {
var sub = $(this).val();
$.getJSON('#Url.Action("LocationBySubdivisionList", "TrainActivity")?id=' + sub,
function (locs) {
var list = $('##Html.IdFor(model => model.LocationId)');
list.find('option').remove();
$(locs).each(function (index, loc) {
list.append('<option value="' + loc.Id + '" data-milepost="'+ loc.Milepost+'">' + loc.Name + '</option>');
});
nearestMilepost();
});
});*#
});
</script>

The misunderstanding is here:
if (delayExists == false) {
$("#StartMilepost").change(function() {
$("#EndMilepost").val($(this).val());
// etc.
});
}
That check happens once, at startup. Is delayExists false? Yes (at startup), so we add that handler. Which will always run all of the code within.
If you want to check the flag everytime #StartMilepost changes, you need to do that:
$("#StartMilepost").change(function() {
if (delayExists == false) {
$("#EndMilepost").val($(this).val());
// etc.
}
});

jQuery textbox change event doesn't fire, mvc

I am trying to fire a method in JQuery, but it won't work.
#using (Html.BeginForm("AddOrUpdateMethod", "Controller", FormMethod.Post))
{
//some code
<div class="row">
<div class="period-list">
<span class="advance-season">
<span class="glyphicon glyphicon-warning-sign margin-right10"></span>Something
</span>
#for (int i = 0; i < Model.Periods.Count; i++)
{
<div class="form-group period">
#Html.HiddenFor(model => model.Periods[i].Id, new { #Value = Model.Periods[i].Id })
<div class="pull-left inline-block col-xs-5 col-sm-5 col-md-5 col-lg-5">
<div class="text-box-with-icon calendar margin-bottom10">
#Html.TextBoxFor(model => model.Periods[i].From, "{0:dd/MM/yyyy}", new { #class = "form-control period-from", #onchange = "periodChange();" })
<span class="icon"></span>
</div>
</div>
<div class="pull-left inline-block col-xs-5 col-sm-5 col-md-5 col-lg-5">
<div class="text-box-with-icon calendar margin-bottom10">
#Html.TextBoxFor(model => model.Periods[i].To, "{0:dd/MM/yyyy}", new { #class = "form-control period-to" })
<span class="icon"></span>
</div>
</div>
}
//some code
</div>
</div>
}
And my jQuery:
<script type="text/javascript">
function periodChanged() {
$('.period-from .period-to').change(function () {
alert("click");
//some code
});
}
As you can see I tried already adding #change to textBox control. Nothing is happening. Maybe I should mention as well, that i I am using validation on model.Periods.From and model.Periods.To. Moreover this view is a partial view.
EDIT:
I changed into:
<script type="text/javascript">
$(document).ready( function () {
$('.period-from .period-to').click(function () {
alert("click");
if (Model.Periods.All(p=>p.To.Day - p.From.Day + 1 <= 7)) {
}
});
});
but it still doesn't work.

Try this way
$(document).on('change','.period-from .period-to') {
alert("click");
//some code
});

#using (Html.BeginForm("AddOrUpdateMethod", "Controller", FormMethod.Post))
{
//some code
<div class="row">
<div class="period-list">
<span class="advance-season">
<span class="glyphicon glyphicon-warning-sign margin-right10"></span>Something
</span>
#for (int i = 0; i < Model.Periods.Count; i++)
{
<div class="form-group period">
#Html.HiddenFor(model => model.Periods[i].Id, new { #Value = Model.Periods[i].Id })
<div class="pull-left inline-block col-xs-5 col-sm-5 col-md-5 col-lg-5">
<div class="text-box-with-icon calendar margin-bottom10">
#Html.TextBoxFor(model => model.Periods[i].From, "{0:dd/MM/yyyy}", new { #class = "form-control period-from", #onchange = "periodChange();" })
<span class="icon"></span>
</div>
</div>
<div class="pull-left inline-block col-xs-5 col-sm-5 col-md-5 col-lg-5">
<div class="text-box-with-icon calendar margin-bottom10">
#Html.TextBoxFor(model => model.Periods[i].To, "{0:dd/MM/yyyy}", new { #class = "form-control period-to" })
<span class="icon"></span>
</div>
</div>
}
//some code
</div>
</div>
}
#*call the jquery.js file in the main or here*#
<script type="text/javascript">
$(document.ready(function(){
$('.period-from .period-to').change(function () {
alert("click");
//some code
});
});
</script>
this will fire the alert , but this is not enough for your case, you have to do more than this, as the list is generated in loop
your partial view should look like this, attaching the event after the C# code