In old school server side languages like PHP or ASPX, HTML elements can be sent to the browser or not based on the user's authorization. For example, in PHP we could:
<?php if (user->isInRole('Admin')) { ?>
<select id="customerList">
<option value="1">Customer 1</option>
<option value="2">Customer 2</option>
</select>
<?php } ?>
How is this done with Aurelia? Do we still need to use a server-side language so that the element is never sent to the browser?
Pretty similar actually. You could use if.bind="". Which basically removes it from the DOM if the condition isn't met. So for your example, you would have a user object that holds the current state of a user, and pass that into your function. So you'd have something like this:
<select if.bind="isAdmin(userObj.Role)" id="customerList">
<option value="1">Customer 1</option>
<option value="2">Customer 2</option>
</select>
So if that function returns true, then the select tag will be displayed. If it returns false, it will be removed from the DOM.
Related
I have a dropdown with the following attributes on it:
<select value.bind="row.columns[$parent.$index].colSize" change.delegate="changeColumnSize($parent.$index, $index, row.columns[$parent.$index].colSize)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
But it seems that I cannot pass row.columns[$parent.$index].colSize as an parameter. It is always undefined.
How can I pass the selected value of the dropdown directly to the change events method?
You're missing the value.bind in your select options. I prefer to use mode.bind instead of value.bind though. Try something like this:
<template>
<select value.bind="changedValue" change.delegate="DropdownChanged(changedValue)">
<option model.bind="1">1</option>
<option model.bind="2">2</option>
<option model.bind="3">3</option>
<option model.bind="4">4</option>
</select>
</template>
export class App {
changedValue;
DropdownChanged(changedVal) {
alert(changedVal);
}
}
I'm not sure what you're trying to bind the select to, but basically you want to create a variable that you can bind the selected value too. So, the selected value is going to be set to the variable of changedValue. I like to use model.bind because I can bind true/false values instead of everything being a string.
I've made a running Gist for you to use if needed:
https://gist.run/?id=87f6897928feb504dad638d439caf92f
I'm trying to use tooltipster jQuery plugin, but it doesn't work for or tag :
I've just tried this simple code :
<div id="my-tooltip">
This div has a tooltip with HTML when you hover over it!
</div>
--> div works fine
<select id="my-tooltip" name="select">
<option value="value1">Valeur 1</option>
<option value="value2" selected>Valeur 2</option>
<option value="value3">Valeur 3</option>
</select>
--> select doesn't work
<span id="my-tooltip">
test with span
</span>
--> span doesn't work
Could you please help me ?
here is my page
thank you all !
From looking at your code and site the issue is due to your multiple use of the id my-tooltip. IDs should only be used once to identify one node. A simple test can be done to prove this using jQuery, try running this on the page:
jQuery('#my-tooltip')
You'll see that only one node is returned, this is the one that has your initialised tooltip.
To fix this you'll need to change your nodes to use classes, i.e.
<div class="my-tooltip">
This div has a tooltip with HTML when you hover over it!
</div>
<select class="my-tooltip" name="select">
<option value="value1">Valeur 1</option>
<option value="value2" selected>Valeur 2</option>
<option value="value3">Valeur 3</option>
</select>
<span class="my-tooltip">test with span</span>
In your tooltipster setup, you'll want to have the following selector and options enabled:
jQuery('.my-tooltip').tooltipster({
// Original setup
content: jQuery('<span><img src="/../../../popup.png" /> <strong>This text is in bold case !</strong></span>')
// Additional options
multiple: true,
contentAsHTML: true
});
I hope this helps! :)
I am trying to use Elements to get an array of elements, but it doesn't work here.
Any one can help me with that? thanks a lots.
here is my code:
<select name="test" id="select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
Now I am trying to get all the option elements:
client.url('www.somesite.com')
.elements('#select>option').then(function(res){
console.log(res.length);
})
But I got 'undefined' result for 'res.length' .
If I use getText then I can get the correct result:
client.url('www.somesite.com')
.getText('#select>option').then(function(res){
console.log(res.length);
})
You need to access the value property.
console.log(res.value.length);
I have an ASP.Net MVC app, and when a user clicks a certain link, I do the following:
var orderID = returnStatus["Data"];
var url = '#Url.Content("~/OrderEntry/OrderDetail")?orderID=' + orderID;
window.location.href = url;
This works great, however, when I click the back button, my html dropdown changes from:
Zone: <select id="Zones" name="Zones" style="width: 150px"><option value="1">Zone 1</option>
<option value="2">Zone 2</option>
<option value="3">Zone 3</option>
<option value="4">Zone 4</option>
</select>
to this:
Zone: <select id="Zones" name="Zones" style="width: 150px"><option value="QUOTE">Quote</option>
<option value="SUBM">Submitted</option>
<option value="INPRD">In Production</option>
<option value="CANC">Cancelled</option>
<option value="COM">Complete</option>
<option value="CH">Credit Hold</option>
</select>
These statuses are defined in a dropdown later in the code, and I'm not sure why they have moved up to this dropdown?
Both of these dropdowns are populated from the model. It's almost as if the model is trying to re-generate this html, but the values are somehow incorrect?
Here is the Razor syntax:
Zone: #Html.DropDownList("Zones", Model.Zones, new { style = "width: 150px" } )
This doesn't appear to happen in Firefox or Chrome.
Apparently it had to do with the fact that my ID was called "Zones". I changed this ID to AcctManagerZones and everything is working fine now.
Edited: It appears this wasn't exactly the answer either. It apparently has to do with the way IE caches the page. I still got the same thing, until I turned page caching off, then it worked.
I am trying to add view all option to the
pagesize option
Something silmilar to below:
<select class="pagesize">
<option value="10">10 per page</option>
<option value="20">20 per page</option>
<option value="all">View All</option>
</select>
for JQuery tablesorter.
How is that possible?
Please share some example or tutorial.
Thanks,
Since you control the pagesize selector, just add a really large value in the view all option:
<select class="pagesize">
<option value="10">10 per page</option>
<option value="20">20 per page</option>
<option value="500">View All</option>
</select>
I tried it and it works without causing any errors, but if you want to be more specific, you can add a bit of code to make it more exact:
$(function(){
var rows = $('table.tablesorter')[0].config.totalRows;
$('select.pagesize').find('option:contains("All")').val(rows);
});