We Keep Coding

Laravel: using Javascript inside blade #if

I was wondering. It's not possible to put Javascript inside blade #if right? Is blade #if some form of php but using php code will be discouraged in view right? What should I do? Here's the logic of what I'm trying to achieve. Basically, what alternative ways are there to achieve what I'm trying to do? I'm trying to show button when the three conditions are met.
#if(isToday($one_parking_info->booking_data->m_bkl_end_date) && isBeforeElevenPM() && notEndInT($one_parking_info->booking_data->m_plots_address_city))
<button type="button" class="btn btn-primary btn-sm" onClick="cancelBooking('{{ $one_parking_info->booking_data->m_bkl_gov_id }}')">取消</button>
#endif

Blade is a form of php, so all work is done on the server. So you cannot call javascript functions inside #if expression. Instead you can run the functions in the controller and return a value to say if you should include the button or not or you can have a javascript to show or hide the button if you don't care if the users can find and show the button if they want.
Something like in your controller return view('your view')->with(['showButton' => $shouldShow) and in your view #if($shouldShow) and the rest of your code

Your js must be in public or a child, and would be something like this:
#if(isToday($one_parking_info->booking_data->m_bkl_end_date) && isBeforeElevenPM() && notEndInT($one_parking_info->booking_data->m_plots_address_city))
#include('script.js')
<button type="button" class="btn btn-primary btn-sm" onClick="cancelBooking('{{ $one_parking_info->booking_data->m_bkl_gov_id }}')">取消</button>
#endif
Another option could be <script src="{{ asset('js/scripts.js') }}"></script> instead of #include directive

i guess:
#if(isToday($one_parking_info->booking_data->m_bkl_end_date) && isBeforeElevenPM() && notEndInT($one_parking_info->booking_data->m_plots_address_city))
#include('script.js')
<button type="button" class="btn btn-primary btn-sm" data-id="{{ $one_parking_info->booking_data->m_bkl_gov_id }}">取消</button>
#endif
<script>
$('body').on('click','.btn-sm',function(){
var id = $(this).attr('data-id');
//
logic of cancelBooking
//
})
</script>

Dynamically add components depending on data being recieved Angular 5

I do have this working.. but I want to know if there is a better way.. because I can see how the way could potentially be a problem in the future..
Basically I have a page that brings in data and populates on the page, every time you click a 'next' button the data changes and so the page changes..
Now I have a few tools that I have set up in components and sometimes when the data says tool === true I show the tool component on the page so how Ive done it at the moment is like so
<div class="program-item">
<div class="main">
<div *ngFor="let asset of item?.fields?.asset" class="program-item_inner">
<div [innerHTML]="asset.fields.textBlock"></div>
<!-- tool -->
<app-tool *ngIf="asset.fields.tools === 'tool'"></app-bmi-tool>
<button *ngIf="asset.fields.tools == 'BMI Tracker'" class="full-width-btn program-item_next-button" (click)="next(item?.sys.id); child.getBmi();">CALCULATE BMI</button>
<button *ngIf="item?.fields?.assetType !== 'tool'" class="full-width-btn program-item_next-button" (click)="next(item?.sys.id)">{{(item?.fields?.nextButtonText == null || item?.fields?.nextButtonText == undefined) ? 'NEXT' : item?.fields?.nextButtonText}}</button>
</div>
so basically when the data has been recieved check to see if asset.fields.tools === tool and then show the tool component.. this isnt a great way to do it because I have a few tools and I would have to do that for every single one
Is there another way I could do this?

Validation for file upload in angularjs

Hi I am developing web application in angularjs. I am developing file upload module. I have one form and inside form i have file upload control. On clicking on submit(submitting form) if the file is not uploaded then i want to make file control as red. i have designed css class to make file control red.
<div class="upload-button bank button1" ng-class="{'has-error':
vm.hasFileInputError(myFileID) }">
<div class="upload-button-icon" >
<span class="text">{{ 'ID' | translate }}</span>
<input type="file" file-modelsr="myFileID" />
</div>
</div>
I am writing validation rule in javascript.
$scope.vm = {};
function hasFileInputError(myFileID) {
return this.form2.$submitted && this.form2.myFileID.$invalid ||
form2.myFileID.$invalid && form2.myFileID.$dirty;
}
On clicking on submit button if file has not uploaded then i want to make file control as red. This is not happening. I am trying to figure out this issue but nothing worked out. May i get some help to fix this? Thank you.

You have pass your myFileID to function. then why you need $form validation? Because if any other fields are not valid then the form.&dirty always return false.
So better to change your method be like
vm.hasFileInputError = function (myFileID) {
return myFileID == undefined || myFileID == '' ? true : false
}
EDIT:
And you should read this discussion : AngularJS - Why use "Controller as vm"?

How to perform a check on ng-disabled in angularjs?

I am using a fuelUX Wizard and Angularjs. I would like the next button to be enabled or disabled basing on this controller method:
$scope.canMoveForward = function(){
switch($("#moduleWizard").wizard("selectedItem").step){
case 1:
//check if the module on the first step is valid*/
return $scope.validSelection && $scope.linkedPredicateForm.$valid;
case 2:
//check if the table is empty
return !linkingDataSource.isEmpty();
case 3:
var enab= ($scope.saveModeForm.$valid && $scope.newSourceForm.$valid) ||
($scope.saveModeForm.$valid && $scope.appendSourceForm.$valid)
}
};
So indeed this is how I decleared the buttons:
<div class="actions">
<button class="btn btn-mini btn-prev" ng-click="refresh()"> <i class="icon-arrow-left"></i>Prev</button>
<button class="btn btn-mini btn-next" data-last="Finish" id="wizard-next" ng-disabled="!canMoveForward()"
ng-click="handleStepResult()">
Next<i class="icon-arrow-right"></i></button>
</div>
And it works fine, except when I get back from the second page to the first page: if the next button is disabled in the second page it will be this way even on the first page, unless I don't edit the form there. Is there anyway to refresh the ng-disabled binding?

I guess AngularJS cannot check if the output of canMoveForward() has changed or not. I found that for this kind of things it's easier to rely on scope variables. You could do something like this:
ng-disabled="!canMoveForward"
Then in your controller just set the property to true/false as needed:
$scope.canMoveForward = false;

I have had the same problem and I've discovered that the problem is with the ! operator.
This fails:
ng-disabled="!canMoveForward()"
But this will work:
ng-disabled="canNotMoveForward()"

Richfaces 3.3.2 GA Conditionally show modal panel based on validation

based on this example:
<a4j:commandButton value="Submit"
action="#{mappedAction}"
eventsQueue="#{eventsQueue}"
reRender="#{myId}noteArea"
onclick="this.disabled=true"
oncomplete="#{facesContext.maximumSeverity == null ? '' : 'this.disabled=false'}" />
I'm trying to show and hide a modal panel based on the validation
<a4j:commandButton value="Submit"
action="#{mappedAction}"
eventsQueue="#{eventsQueue}"
reRender="#{myId}noteArea"
oncomplete="#{facesContext.maximumSeverity == null ? '' : rich:component(modalConvalida).hide()}"
onclick="#{rich:component(modalConvalida)}.show()"
/>
Where modalConvalida is a ui:param passed into my facelet composite component, but I can't manage to get the syntax right. the panel shows onclick, but it doesn't get hidden in the oncomplete.
If I put an alert in the second branch of the ? operator I can see that it gets executed, though.

Done:
<a4j:commandButton value="Submit"
action="#{mappedAction}"
eventsQueue="#{eventsQueue}"
reRender="#{myId}noteArea"
onclick="#{rich:component(modalConvalida)}.show()"
oncomplete="#{rich:component(modalConvalida)}.hide()"/>
Thanks anyway