How to concatenate two params using href? - javascript

I have kendo grid where i am using anchor tag so using href i am trying to pass two params from client side but it always give syntax error, any help what is correct way to pass variables using href.
config.js
toolbar: [{template: '<a class="btn btn-default btn-sm pull-right"
href="app/challenge/rest/exportChallengeGridDataToExcel?key={{$rootScope.id}}
&challengeType={{$rootScope.challengeType}}">Export to Excel</a>'}]

You can do something like :
'<a class="btn btn-default btn-sm pull-right"
href="app/challenge/rest/exportChallengeGridDataToExcel?key={{$rootScope.id}}
&challengeType={{$rootScope.challengeType}}">Export to Excel</a>
Anyways I would encourage you to use $rootScope as less as possible, also to build your URL in your controller so your html looks more readable, but that's up to you

Related

Can't open new window when click button

I need to redirect to new window by using onclick openNewWindow . I just route to my controller but seems it give error as "Route [sla.slaCategoryTreeListScreen] not defined"
Here is my controller code.
public function slaCategoryTreeListScreen() {
return view('sla.slm.SLACategoryCheckBoxList');
}
my view onclick part
<a class="btn btn-sm btn-default pull-right" type="button" title="Search Category" onclick="openNewWindow('{{ route('sla.slaCategoryTreeListScreen') }}" >
my route
Route::group(['prefix' => 'sla'], function () {
Route::resource('sla', 'SlaController');
//Route::get('sla','SlaController#slaCategoryTreeListScreen')->name('SlaController.slaCategoryTreeListScreen');
// Route::get('sla','SlaController#SlaCategoryTreeListScreen')->name('sla.SlaCategoryTreeListScreen');
Route::get('sla/getbranch/{id}','SlaController#getBranchAjax')->name('sla.getBranchAjax');
Route::get('sla/getBranchAjax2/{cuid}/{stid?}','SlaController#getBranchAjax2')->name('sla.getBranchAjax2');
});
The comment part on route that are trying was not fix at all..Sorry for my bad English and i hope its help.
First of all: Route::resource() does only register routes by a predefined array of defaults ('index', 'create', 'store', 'show', 'edit', 'update', 'destroy').
It will not automatically register any method from your controller.
Also make sure that your controller has methods for all these routes or specify a subset of routes. Check this for more information: https://laravel.com/docs/6.x/controllers#restful-partial-resource-routes
Second: Your a-tag seems to be malformed. The JavaScript method opens with (' but is never closed again. So it should be like this:
onclick="openNewWindow('{{ route('sla.slaCategoryTreeListScreen') }}')"
To simply open the URL in a new tab you could use this (with target="_blank"):
Search Category
Additionally: make sure that a route named sla.slaCategoryTreeListScreen exist. Easiest way to do so is by listing all available routes by running the command php artisan route:list from the root directory of your project in a terminal.
Replace this in your view file
<a class="btn btn-sm btn-default pull-right" type="button" title="Search Category" onclick="window.open('{{ route('sla.SlaCategoryTreeListScreen') }} ', '_blank')" >

"Could not parse reminder error" - django

When jsevent triggered , it forwards link parameter to data-url attribute of a button and when user click that button it redirects to django backend view but there is a problem with parsing line of JS
$('#btn_del').attr('data-url',{% url 'event_delete' + event.id + %});
is there any chance to combine that syntax ?
Thank you , have a nice days.
JS:
eventClick: function(event, jsEvent, view) {
$('#modalTitle').html(event.id);
$('#btn_del').attr('data-url',`{% url 'event_delete' ` + event.id + `%}`);
$('#calendarEditModal').modal();
console.log(event.id);
}
url.py
....
url(r'^event/(?P<pk>\d+)/delete/$', event_delete, name='event_delete'),
....
Html button that redirects to django
<button id="btn_del" type="button" class="btn btn-primary js-delete-events" data-url="">
<span class="glyphicon glyphicon-pencil"></span>
Edit
</button>
Result should be like this format event.pk is going to be our parameter numeric value , it's ok.
<button type="button" class="btn btn-primary js-delete-events" data-url="{% url 'event_delete' event.pk %}">
<span class="glyphicon glyphicon-plus"></span>
button
</button>
/event/1/update/ is the last result of seen from browser inspect. But I need to write inside jsEvent with django syntax to able to reach backend view which is {% url 'event_delete' event.pk %} something like that.
No, it cannot be done that way... Parsing of your templates (the {% url %} tag) is done on the server before even the browser receives anything. Browser doesn't know what template tags are you using.
On the other side, JavaScript is executed in the browser, so template language has also no knowledge about variables inside it.
Solution for that is to use a package like Django JS Reverse. The second one is to pass full URL to the JavaScript, just like it receives the ID of the item.

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>

check confirmation script and do link to route action

I have a question on laravel 5 and I think It's simple
I have "x" icon ; this icon is for delete item . there is a confirmation script which make the deletion of the item's div . but I want to implement the back-end action
the code now is fine for interface . it is :
<a class="btn btn-default btn-xs remove" href=" javascript: jQuery('.item-{{$i}}').remove()" data-confirm="Are you sure" data-confirm-button="yes" ><span class="glyphicon glyphicon-remove"></span></a>
and the link route I want to add is :
{!! link_to_route('item_delete','', $id) !!}
How can I combine the back-end to the interface ? I mean combine the script confirmation with route action?
I appreciate any help
You can do this by AJAX. Since you need $i generated from php loop and url generated from laravel, then we cannot put these variables in javascript.
HTML.
<a class="btn btn-default btn-xs remove" onclick="removeItem({{$i}},{!! link_to_route('item_delete','', $id) !!});" data-confirm="Are you sure" data-confirm-button="yes" ><span class="glyphicon glyphicon-remove"></span></a>
Javascript.
function removeItem(i,url){
$.post( url, { _token: '{{csrf_token()}}' }, function( data ) {
//check the data return from back-end and remove the x icon. assume return 0 is success.
if(data===0){
jQuery('.item-'+i).remove();
}
});
};
Please check syntax again, some maybe wrong :).

Dynamically updating an ng-include

This should be easy for any one who knows Angular--I, on the other hand, am super new to it. I was trying to put together an easy example using ng-include but it's not clear why the variable inside the include is not updating.
I include some html in the page (not sure if ng-model is necessary):
<div ng-model="template" ng-include="template.url"></div>
I have a button:
<a class="btn btn-lg btn-success" ng-model="template" ng-click="switch()" ng-href="#">Change!</a>
that calls a function from the controller which looks like this:
app.controller('MainCtrl', function ($scope) {
$scope.templates =
[ { name: 'Template1', url: 'views/template1.html'},
{ name: 'Template2', url: 'views/template2.html'} ];
$scope.template = $scope.templates[0];
$scope.switch = function() {
$scope.template = $scope.templates[1];
console.log($scope.template);
return $scope.template;
};
}
);
The variable that shows up in the console? Correct. But nothing changes on the page.
UPDATE: So this code works. What's required is the removal of the href attribute, which in some cases was reloading the page. If that's true, then is there a way to do this in which there is a failsafe? i.e. the href works fine without javascript, but the ng-include works when javascript is working?
It looks okay, try it in this plunkr. The only thing I changed was the URL to the templates.
Here is a fiddle also showing that it works with and without ng-href.
<a class="btn btn-lg btn-success" ng-click="switch()" ng-href="#">Change!</a>
<a class="btn btn-lg btn-success" ng-click="switch()">Change!</a>
After seeing Sunil's comment, I added in bootstrap css to make it clear that href is not needed to get the desired styling. It can be removed without any problems. But, unfortunately, plnkr and jsfiddle are not reproducing the reload you experienced.

Categories