How can I filter dates between start and end using query builder wherebetween - laravel-5

I have put two input tag to get the start date and end date. I want to use the wherebetween clause of laravel query builder to take in those inputs and get back data between those two days
blade.php file
<form action="{{ route('search.between.dates',[$expense_category_data[0]->id]) }}" method="POST">
#csrf
<h3 style="color:Blue; text-align: center;text-decoration:underline"><b>Filter Date </b></h3>
<input class="form-control" type="text" id="datepicker1" name="start_date" placeholder="Start Date" style="width: 20%; display: inline-block; margin-left:20%; margin-bottom: 2% ">
<input class="form-control" type="text" id="datepicker2" name="end_date" placeholder="End Date" style="width: 20%; display: inline-block; margin-left:20%; margin-bottom: 2%">
<br>
<button type="submit" class="btn btn-success" style="position: absolute;
left: 45%;">Find Expenses</button>
</form>
Script
<script>
$( function() {
$( "#datepicker1" ).datepicker({
dateFormat: 'dd-mm-yy'
});
} );
$( function() {
$( "#datepicker2" ).datepicker({
dateFormat: 'dd-mm-yy'
});
} );
</script>
Controller
public function search_between_dates(Request $request,$exp_category_id){
$start_date = dmyToYmd($request->start_date);
$end_date = dmyToYmd($request->end_date);
$expense_category_data = DB::table('expense_category')
->leftjoin('expense_table','expense_category.id','=','expense_table.exp_category')
->select('expense_category.id as category_id','expense_category.exp_category AS category_name','expense_category.exp_category_details','expense_category.exp_category_image','expense_table.*')
->where('expense_category.id',$exp_category_id)
->whereBetween('expense_table.exp_date',[date($start_date),date($end_date)])
->get();
return view('admin.Expense_sheet.view_expense_category_details',compact('expense_category_data'));
}

I don't know what that function dmyToYmd is doing. My Sql uses the date format which is Y-m-d while your datepicker is using the format dd-mm-yy that's why it is not fetching the expected results. You will need to use the carbon to format the date.
->whereBetween('expense_table.exp_date',[Carbon/Carbon::createFromFormat('d-m-y', $start_date)->format('Y-m-d'),Carbon/Carbon::createFromFormat('d-m-y', $end_date)->format('Y-m-d')])
/*
it is sending the format
dd-mm-yy => 01-01-21
Mysql required format
Y-m-d => 2021-01-01
*/

Related

AJAX POST Send Multiple DIV value

I would like to send my dynamically generated DIV items, but I do not understand how to do it
I create my div dynamically:
$("#clt_forf_ti").click(function(e){
e.preventDefault();
if(x < max_input){
x++;
var addDIV = $('<div id="clt_forf_div'+x+'" class="w-100 form-control" ><label for="clt_forf_num'+x+'">Ligne :</label> <input type="text" class="font-weight-bold border-top-0 border-right-0 border-left-0 mR-10" id="clt_forf_num'+x+'" autocomplete="off" style="width: 100px" > Forfait : <i id="clt_forf_forf_select'+x+'" style="display:none;"></i><input type="text" class="border-top-0 border-right-0 border-left-0" id="clt_forf_forf'+x+'" autocomplete="off" style="width: 180px"><i class="ti-calendar mL-20 mR-5"></i><input type="text" class="border-top-0 border-right-0 border-left-0" id="clt_forf_date_start'+x+'" name="datepicker" placeholder="Début" style="width: 80px"><i class="ti-calendar mL-20 mR-5"></i><input type="text" class="border-top-0 border-right-0 border-left-0" id="clt_forf_date_end'+x+'" name="datepicker" placeholder="Fin" style="width: 80px"><i id="clt_forf_ti_remove" class="ti-close c-red-500 mL-5" style="cursor: pointer;"></i></div>');
$('#clt_forf_bloc').append(addDIV);
$('#clt_forf_forf'+x, addDIV).autocomplete(autocomp_opt);
$("input[id^='clt_forf_date']", addDIV).datepicker(datepick);
//$('#clt_forf_date_end'+x, addDIV).datepicker(datepick);
}
});
I want to send each value by ajax:
var data = {
op_clt_forf_ref: $("[id^='clt_forf_forf_select']").html(),
op_clt_forf_num: $("[id^='clt_forf_num']").val(),
op_clt_forf_start: $("[id^='clt_forf_date_start']").val(),
op_clt_forf_end: $("[id^='clt_forf_date_end']").val(),
op_clt_forf_nom: $("[id^='clt_forf_forf']").val(),
};
however he only takes me the first div and not the others,
can you help me ?
The Elements that you have created were not present in the DOM earlier. So can't target them directly.
Try doing this:
var data = {
op_clt_forf_ref: $('body #clt_forf_forf_select').html(),
op_clt_forf_num: $('body #clt_forf_num').val(),
op_clt_forf_start: $('body #clt_forf_date_start').val(),
op_clt_forf_end: $('body #clt_forf_date_end').val(),
op_clt_forf_nom: $('body #clt_forf_forf').val(),
};

Image sprite - form submit button

Can i use image sprites for my form submit button, tried a few things but nothing seems to work.
.button, .download, .OK, .file{
background: url(app/sprites.png) no-repeat;
}
.button{
background-position: -1px -212px ;
width: 170px;
height: 30px;
}
My form
<form action="add.php" method="post" value="Username">
<div style="float:left; margin-left:15px;"><input type="text" name="fbid" required></div>
<div style="float:left; margin-left:2px;"><input type="submit" value="Submit"></form>
Right now you are missing a class on the input.
<input type="submit" class="button" value="Submit">
With that it'll work.
I put it into a jsFiddle, using a different image because I don't have access to yours. You can play with the position, in incriments of 32px.
jsfiddle.net/CzWCv
Have you tried
<div class="button" style="float:left; margin-left:2px;"><input type="submit"
value="Submit"></form>
??

Kendo mobile template styling/formatting not working

I am trying to use a template as shown below, the outcome is a view with all elements from the template on one line, even though i am using to separate the elements. Why does this not display properly? It seems that no matter what styling i do it still ends up a single line view.
UPDATE
The culprit is the kendo style sheet - kendo.mobile.all.min.css -
So the new question for a kendo expert is why does kendo handle input fields differently when they appear in a listview via a template than when they appear outside of a template?
An input field outside of a listview template gets this class
.km-ios .km-list input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="checkbox"]):not([type="radio"]):not(.k-input):not(.k-button), .km-ios .km-list select:not([multiple]), .km-ios .km-list .k-dropdown-wrap, .km-ios .km-list textarea
Which results in no odd styling rules :) Normal text field view
An input field inside of the template gets this class
.km-root input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="checkbox"]):not([type="radio"]):not(.k-input):not(.k-button), .km-root select:not([multiple]), .km-root .k-dropdown, .km-root textarea
which results in these rules being applied to it (making the field sit in a wierd spot and loose all normal field stlying ie border background etc.) Im not 100% sure which wrapper is causing this
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
font-size: 1.1rem;
color: #385487;
min-width: 6em;
border: 0;
padding: .4em;
outline: 0;
background:
transparent;
My work around is to give any text fields inside listview templates the class="k-input" which obviously excludes them from the above css -
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/kendo.mobile.min.js"></script>
<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<!-- eventDetail view -------------------------------------------------------------------------------------------------->
<div data-role="view" id="view-eventDetail" data-show="getEventDetailData" data-title="eventDetail">
<header data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
<a data-align="right" data-role="button" class="nav-button" href="#view-myEvents">Back</a>
</div>
</header>
<form id="updateEventForm">
<div id="updateEvent">
<div id="eventDetail"></div>
<p>
<input type="button" id="eventUpdateCancelButton" style="width:30%" data-role="button" data-min="true" value="Back" />
<input type="submit" id="eventUpdateSaveButton" style="width:30%" data-role="button" data-min="true" value="Save" />
</p>
<div id="eventResult"></div>
</div>
</form>
</div>
<script id="eventDetail-template" type="text/x-kendo-template">
<p>
<input name="event_type" id="event_type" data-min="true" type="text" value="#= type #" />
</p>
<p>
<input name="event_loc" id="event_loc" data-min="true" type="text" value="#= type #" />
</p>
<p>
<input name="event_date_time" id="event_date_time" data-min="true" type="datetime" value="#= stamp #" />
</p>
<p>
Share this
<input data-role="switch" id="event_share" data-min="true" checked="checked" value="#= share #"/>
</p>
<input name="userID" id="userID" type="hidden" value="#= user_id #" />
<input name="eventID" id="eventID" type="hidden" value="#= event_id #" />
</script>
<script>
function getEventDetailData(e) {
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "http://localhost/mpt/website/api/event_details.php",
dataType: "jsonp",
type: "GET",
data: { userID: e.view.params.user_id, eventID: e.view.params.event_id },
cache: false
},
parameterMap: function(options) {
return {
userID: options.userID,
eventID: options.eventID
};
}
},
schema: { // describe the result format
data: "results" // the data which the data source will be bound to is in the "results" field
}
});
console.log(e);
$("#eventDetail").kendoMobileListView({
dataSource: dataSource,
template: kendo.template($("#eventDetail-template").html())
}).data("kendoMobileListView");
}
//update event
function sendUpdateEvent() {
var siteURI = "http://localhost/mpt/website/api/update_event.php?";
app.showLoading();
var user_id = $('#userID').val();
var event_id = $('#eventID').val();
var event_type = $('#event_type').val();
var event_loc = $('#event_loc').val();
var event_date_time = $('#event_date_time').val();
var event_share = $('#event_share').val();
var formVals = 'eventID=' + event_id + '&userID=' + user_id + '&event_type=' + event_type + '&event_loc=' + event_loc + '&event_date_time=' + event_date_time + '&event_share=' + event_share;
var fullURI = siteURI + formVals;
$.ajax({
url: fullURI, dataType: 'json', success: function (data) {
$('#eventResult').html(data.results);
app.hideLoading();
app.navigate("#view-myEvents");
}
});
}
$('#eventUpdateCancelButton').click(function () {
app.navigate("#view-myEvents");
});
$('#eventUpdateSaveButton').click(function () {
sendUpdateEvent();
});
$('#updateEventForm').submit(function () {
sendUpdateEvent();
return false;
});
</script>
ListView widgets are supposed to be applied to <ul> elements.
Try changing:
<div id="eventDetail"></div>
to:
<ul id="eventDetail"></ul>
Also with this bit of code:
$("#eventDetail").kendoMobileListView({
dataSource: dataSource,
template: kendo.template($("#eventDetail-template").html())
}).data("kendoMobileListView");
The .data() call on the end isn't doing anything here and can be removed, and also you can pass just the text string as the template. You don't need to call kendo.template() yourself. So you can change that to just:
$("#eventDetail").kendoMobileListView({
dataSource: dataSource,
template: $("#eventDetail-template").html()
});

django handle form submit without returning a response

I've tried everything here, and I must be missing something, as my ajax post to Django isn't returning anything. I've got it down to the bare bones at this point, just trying to get it working and no joy.
My view:
def saveProjectEntry(request):
form = ProjectEntryUpdateForm(request.POST)
if form.is_valid():
msg = json.dumps({'msg':'success'})
return HttpResponse(msg, mimetype='application/json')
else:
msg = json.dumps({'msg':'failed'})
return HttpResponse(msg, mimetype='application/json')
My url.py entry:
url(r'^chargeback/savepe/$','chargeback.views.saveProjectEntry'),
My jQuery:
$('#peUpdateForm').submit(function() {
$.ajax({
url:'/chargeback/savepe/',
data: $("#peUpdateForm").serialize(),
type: "POST",
success: function(e) {
alert("success");
},
error: function(e) {
alert("failed");
}
});
return false;
});
I also tried the jQuery post method:
$('#peUpdateForm').submit(function(e){
$.post('/chargeback/savepe/', $('#peUpdateForm').serialize(), function(data){
alert("success");
});
e.preventDefault();
});
I'm not getting anything. Not getting any of my alerts. Not getting any errors from the view (if I just navigate to the view directly I get the expected {'msg':'failed'} displayed in the browser, so the json response is fine. The url calls the correct view. The only thing I can think of is my jQuery code is wrong, but I can't figure out where, and there are no errors in the console. I've tested, in the console, the
$('#peUpdateForm').serialize()
and I get the expected value. Pulling my hair out here... Thanks.
EDIT: Adding HTML as my post method isn't even getting called when I place a breakpoint there, so something may be wrong with how my submit is being set up.
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable ui-dialog-buttons" style="outline: 0px; z-index: 1002; position: absolute; height: auto; width: 376px; top: 75px; left: 408px; display: block;" tabindex="-1" role="dialog" aria-labelledby="ui-id-8"><div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
<span id="ui-id-8" class="ui-dialog-title">Project Entry Update</span><span class="ui-icon ui-icon-closethick">close</span></div>
<div id="addPEForm" style="width: auto; min-height: 0px; height: 365px;" class="ui-dialog-content ui-widget-content" scrolltop="0" scrollleft="0">
<form method="post" id="peUpdateForm" action="">
<div style="display:none">
<input type="hidden" name="csrfmiddlewaretoken" value="wvzwSBl87vC1tbkbdfxsD82GnjtvJCSz"></div>
<p><label for="id_departmentid">Department:</label>
<select id="id_departmentid" class="projEntryControl" name="departmentid">
<option value="" selected="selected">Choose a Department</option>
<option value="1">ABND</option>
<option value="2">ATT</option>
<option value="3">AVI</option>
<option value="4">CCS</option>
<option value="5">PBW</option>
</select></p>
<p><label for="id_projectid">Project:</label>
<select id="id_projectid" class="projEntryControl" name="projectid">
<option value="-1">Choose a Project</option>
<option value="undefined">Bexar Street</option>
<option value="undefined">Chalk Hill</option>
<option value="undefined">Crown Road</option>
</select>
</p>
<p><label for="id_progNumId">Program Number:</label>
<select id="id_progNumId" class="projEntryControl" name="progNumId">
<option value="" selected="selected">Choose a Program Number</option>
<option value="1">31664</option>
<option value="2">DD-7081</option>
</select></p>
<p><label for="id_hoursWorked">Hours Worked:</label>
<input name="hoursWorked" value="0.0" class="projEntryControl" maxlength="5" type="text" id="id_hoursWorked"></p>
<p><label for="id_notes">Notes:</label>
<textarea id="id_notes" rows="10" cols="40" name="notes"></textarea></p>
</form>
</div>
...
AFAIK, Here's the way to do it right, if you want to keep the button outside:
$('#button').on('click', function(){
$.ajax({
data: $('#form').serialize(),
...});
});
This because `$('#form').submit() gets called only if you keep the submit button inside the form tags.

jquery ajax form submit plugin not posting file input

I've got this form:
<form id="imageinputpopup" class=suggestionsubmit style="display: none">
<span>Add a thing!</span><br/>
<label>url: </label><input name="imageurl" type="url"><br/>
<label>file: </label><input name="imagefile" type="file"><br/>
<input type='hidden' name='schoolid' class="schoolid">
<input type="submit" value="Submit">
</form>
And this document.ready:
<script type="text/javascript">
$(document).ready(function() {
$('.schoolid').val(get_gmap_value('school_id'));
$(".allow-submission").live('click', function(){
if($(this).attr('inputtype')=="colorpicker"){
.....
} else if($(this).attr('inputtype')=="image"){
remove_hidden("#imageinputpopup");
add_fieldname($(this), $("#imageinputpopup"));
$("#imageinputpopup").dialog();
} else if($(this).attr('inputtype')=="text"){
....
} else {
//nothing
}
});
$(".suggestionsubmit").submit(function(){
event.preventDefault();
alert($(this).html());
$(this).ajaxSubmit({
url: '/save-school-suggestion/',
type: 'post',
success: function(response){
response = jQuery.parseJSON(response);
// Check for login redirect.
// if ( response.requireLogin ) {
// alert('Sign up or log in to save your answer');
// } else {
$('.suggestionsubmit').dialog('close');
// }
}
});
});
});
function add_fieldname(element, addto){
var elementname = document.createElement('input');
elementname.type = 'hidden';
elementname.name = 'fieldname';
elementname.value = element.attr('fieldname').replace(' ', '_');
$(elementname).addClass('fieldname');
addto.append(elementname);
}
function remove_hidden(element){
$(element+' .fieldname').remove();
}
But the file field isn't showing up server side.
Why?
I found this in the documentation:
Why aren't all my input values posted?
jQuery form serialization aheres closely to the HTML spec. Only successful controls are valid for submission.
But I don't understand why my file control would be invalid.
I have another submission form in a different place on my site that is almost identical and works perfectly...
EDIT: this is the other form that does work (it has some extra stuff in it, but the form tag just has an id, like the problem one, and the input tags are the same).
<form id="photos-submission-form6">
<input type="hidden" name="section" value="photos">
<input type="hidden" name="school" id="photos-submit-school6">
<div style="margin-bottom: .5em">
<p style="position: relative; width:80%; font-size: 14px; display: inline" id="photos-anonymity-header6">Post as: null</p>
<img id="helpicon6" src="/static/img/help-icon.png" style="float: right; cursor: pointer; padding-left:1em;">
<div id="explanation6" style="display: none; padding:1em; background-color:white; border:2px solid gray; position: absolute;z-index:30; right:5px; top:5px">For more posting options, <a id="profilelink6" href="/profile/">fill out your profile</a></div>
</div>
<div id="photos-anonymity-select6" style="margin-bottom: .75em; width:412px" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 100%; "></a></div>
<input type="hidden" id="photos-anonymity-level6" name="anonymity-level" value="username">
<span style="line-height: 40px;">
<label class="photouploadlabel">URL</label><input type="text" name="image-url" style="width: 335px"><br>
<label class="photouploadlabel">File</label><input type="file" name="image-file" style="width: 335px"><br>
<label class="photouploadlabel">Caption</label><input type="text" id="image-caption6" name="image-caption" style="width: 335px; color: rgb(128, 128, 128); ">
</span>
<div style="height: 30px; margin-top: 1em; width: 413px;">
<label id="photos-tagsbutton6" style="margin-right: .5em; cursor: pointer; vertical-align: bottom; float:left; line-height: 1.8em;">Tags</label>
<input id="photos-tagsinput6" style="display: none;" type="text" name="tags">
<button id="send-photos-suggestion6" disabled="" style="float:right; position: relative; bottom: 7px; right: -4px;" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-disabled ui-state-disabled ui-button-text-only" role="button" aria-disabled="true"><span class="ui-button-text">Post</span></button>
</div>
</form>
This is probably not the case but are sure there are no spelling mistake server side? like you would be using $_FILE instead of $_FILES? Could you post the relevant php also?
Also, definitely not an issue but it is recommended to close your input tags, now like this:
<input ... />
Add enctype="multipart/form-data" attribute to your form.
Try to change the type of the input imageurl from url to text:
FROM:
<label>url: </label><input name="imageurl" type="url"><br/>
TO:
<label>url: </label><input name="imageurl" type="text"><br/>
I am not sure, but maybe the jquery plugin fails serializing the form due to invalid type attribute of image_url.
Hey you just forgot to add ---> enctype="multipart/form-data" in the form tag. This will help you out.
I think you have a problem with the binding in javascript not recognising your file.
Try binding your submit trigger event with another live() function
i.e. change
$(".suggestionsubmit").submit(mooFar(e));
to
$(".suggestionsubmit").live('submit', mooFar(e));
...........I was looking in the wrong place in the request for the file.
Server side should have been:
if not s.url_field and 'imagefile' in request.FILES:
s.image_field = request.FILES['imagefile']
instead of
s.image_field = request.POST.get('imagefile', None)
Complete and utter fail on my part.
Make sure the files you're testing aren't outside the max file size, it would be worth setting this in your HTML.
<input type="hidden" name="MAX_FILE_SIZE" value="500" />
Also, testing without the display:none might be worth while until you have the form working; which browser are you testing in?

Resources