How would you go about in using a Razor 'if' to check on condition, then using a Kendo template 'if' to check another condition. For example,
#if (User.IsInRole(Roles.Homeroom.Administrator))
{
#if (Approved) {#
<div class="col-md-3 pull-right">
<button class="btn btn-primary pull-right" onclick="approveCoach(#=Id#)">Approve</button>
</div>
#}#
}
The code is giving me red squiggles.
Easy way around this is to just switch the 'if' conditions, which is okay in my case. I believe by trying to do it the other way, the Razor 'if' tries to read the '#if' as a C# reference instead of a Kendo Template conditional statement. I'm sure there's some other way around this, but it seems easier to just switch the ifs around in my case.
#if (!Approved) {#
#if (User.IsInRole(Roles.Homeroom.Administrator))
{
<div class="col-md-3 pull-right">
<button class="btn btn-primary pull-right" onclick="approveCoach(#=Id#)">Approve</button>
</div>
}
#}#
Related
I am trying to insert a form into my site.Master but when I debug it, it seems to have removed the form.
<form onsubmit="quoteMe(event)">
<div class="form-group" id="divQuotePriceBeforeBook">
<button class="btn btn-block btn-primary" id="quotemebutton" type="submit">Quote Now</button>
</div>
</form>
I can see that there is a server form wrapping the entire body, does this mean we can't have forms?
No you cannot do that using WebForms but there is always a work around.
Based off of your code it doesn't seem like you need a form for what you are trying to accomplish.
<div class="form-group" id="divQuotePriceBeforeBook">
<button class="btn btn-block btn-primary" id="quotemebutton" onclick="quoteMe()">Quote Now</button>
</div>
If you really do need the code to post back to the server, you would want to do something like this:
<div class="form-group" id="divQuotePriceBeforeBook">
<asp:Button id="quotemebutton" runat="server" CssClass="btn btn-block btn-primary" OnClientClick="quoteMe()" Text="Quote Now" />
</div>
I am working on the CRUD part of a Laravel app.
It is supposed that when the delete button of an entry is clicked, a modal show up and ask user to confirm delete the corresponding entry or not.
I tried to do this but it said the method written in vue modal template is not defined in the JS console of chrome browser when I clicked the button.
Sure I have defined it. Why does this happen and how to fix it?
If there is any similar example that demonstrate how to do it in vue,
please provide the link. Thanks!
This is the structure of my frontend code.
The blade.php
<button id="show-modal" class="btn btn-danger"
#click="triggerDeleteModal($project)">
delete</button>
<modal-delete></modal-delete>
/resources/js/app.js
Vue.component('modal-delete', require('./components/ModalDelete.vue'));
/resources/js/components/ModalDelete.vue
<template>
<div class="modal fade" tabindex="-1"
role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×
</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close</button>
<button type="button" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: ['project'],
methods: {
triggerDeleteModal(project) {
alert('Did something!' + project + " - project : " + this.project);
}
}
}
</script>
You got two options here. First the one LakiGeri mentioned you put the button inside the vue-template.
The second way is you just calling the the blade.php and you call two templates. First the template with the button and the modal-delete call. And after this you $emit the function from the inside of the modal-delete template.
Vue.js emit events
I would suggest the second way because so you can reuse the modal-delete Template.
I show you one of my examples: create.blade.php
...
#section('content')
<p>Neues Raster anlegen</p>
<div class="col-md-12">
<gridunits></gridunits>
</div>
#endsection
Now calling the first template gridunits. Inside this i forward the methods for the emit-events remove and add to the second template.
<template>
...
<div class="form-group">
<gridunititems
v-for="gridunit in request.gridunits"
:key="gridunit.id"
:gridunit="gridunit"
#remove="removeGridUnit"
#add="addGridUnit"
>
</gridunititems>
</div>
...
</template>
<script>
...
methods: {
addGridUnit(id) {
//doing things
},
removeGridUnit(idToRemove) {
//doing things
},
...
</script>
Second template gridunititems
<template>
...
<div class="input-group-append">
<button type="button" class="btn btn-outline-success" #click.prevent="$emit('add',gridunit.id)">+</button>
</div>
<div class="input-group-append">
<button type="button" class="btn btn-outline-danger" #click.prevent="$emit('remove',gridunit.id)">-</button>
</div>
...
</template>
create.blade.php calling first template
gridunits.vue calling second template and methods in script
gridunitsitems.vue button who emitting event
I'm using a nice HTML template which features a preview of the picture selected by my HTML file input. This is the HTML:
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-new img-thumbnail text-center">
<img src="#" data-src="holder.js/100%x100%" alt="not found"></div>
<div class="fileinput-preview fileinput-exists img-thumbnail"></div>
<div class="m-t-20 text-center">
<span class="btn btn-primary btn-file">
<span class="fileinput-new">choose</span>
<span class="fileinput-exists">change</span>
<input type="file" id="pb" name="pb" accept="image/*" class="form-control"></span>
<a href="#" class="btn btn-warning fileinput-exists"
data-dismiss="fileinput">Entfernen</a>
</div>
</div>
I chose pb as name for the actual file input. This is the controller function:
public function addUser(Request $request) {...}
Everything fine so far, echo $request->pb also echoes the filename as desired. HOWEVER, Laravel doesn't recognise this as a file apparently:
$request->file('pb')
returns null (yes, I have tried to display all files of $request, also $request->hasFile() returns false/null). I wonder why? Unfortunately, I cannot directly access $_FILE which would make things easier despite not being in the right order with Laravel in general.
Make sure your form has:
enctype="multipart/form-data"
Using Laravel, I have a form and I want to include a "cancel" button that just redirects back to a different route. Since the button is within the form element, when clicked it attempts to submit the form. In the Laravel docs I don't see a good way to do this. Any suggestions or would using Javascript be best?
Thanks,
<div class="form-group pull-right">
<button class="btn btn-default btn-close">Cancel</button>
<button type="submit" class="btn btn-global">Register</button>
</div>
Though it's a very late answer, But it might help others.
You can just redirect back where you have come from. Simply use the following code.
Cancel
It will send you back where you have came.
<a> elements in bootstrap can have the btn class and they will look just like a button, so you can take the button out and just have cancel be a link:
<div class="form-group pull-right">
<a class="btn btn-default btn-close" href="{{ route('home') }}">Cancel</a>
<button type="submit" class="btn btn-global">Register</button>
</div>
it does not have to do with laravel. You can simple use formaction attribute
<input type=submit formaction="anotherpage">
<button class="btn btn-default btn-close" formaction="{{ route('home') }}">Cancel</button>
I got an error [error] Element //div[#id='newslist_config']//button[#type='button'] not found when I use auto run to run my selenium test but if I click at the command and choose Execute this command The tests pass. Could you tell me why selenium can not find that element?
My selenium test is
<tr>
<td>click</td>
<td>//div[#id='newslist_config']//button[#type='button']</td>
<td></td>
</tr>
The html is
<div id="newslist_config" class="section-box span8">
<div class="accordion-group">
<div class="accordion-heading">
<h3>News-List Configuration</h3>
<a class="btn btn-danger close_newslist_config" data-dismiss="modal" href="#">remove widget</a>
<button class="btn btn-info collapse-btn" type="button" href="#collapse_newslist" data-parent="#newslist_config" data-toggle="collapse">
<span class="edit-btn-txt">
<span class="collapse-btn-txt">
</button>
</div>
<div id="collapse_newslist" class="collapse collapse-box">
</div>
</div>
You could instead try the xpath: //div[#id='accordion-heading']/button[#type='button']
This is a more direct path; if it does not work I would suggest trying to click one of the containing spans as sometimes, due to styling, clicking an elements span achieves more consistent results. I sometimes have this issue when working with WebDriver in KendoUI.
Approach:
1.Derive the CSS Selector from the given DOM.
css=#newslist_config .collapse-btn
2.Perform the click
driver.findElement(By.cssSelector("#newslist_config .collapse-btn")).click();