I've got a table defined as below:
<table id="DateTable" width="100%">
<tbody>
<tr id="prior" style="display: none;" ><td>
. .. .. . prior
</td></tr>
<tr id="current"><td>
. .. .. current
</td></tr>
</tbody>
</table>
I need to have logic put in place that determines if the style="display: none;" exists for the "prior" id.
I have this, but it doesn't work:
if($("#DateTable tr").find("prior").html("style=display: none;").length > 1)
alert("Style exists!!");
}
else {
alert("Style doesn't exist.");
}
Where am I going wrong?
You need to use css method:
if($("#DateTable tr").find("#prior").css("display") === 'none')
Also note that ID should be unique in DOM and you forget to add # symbol in your selector for prior element.
So your code can be simple:
if($("#prior").css("display") === "none") {
alert("Style exists!!");
} else {
alert("Style doesn't exist.");
}
Related
just a very new to Vue 2.0, i actually use if for Laravel 5.4, now you can see from below link that i created one component which name is "canvas-chart", what actually i want show is a filterable table, and then to get more Json data from next steps, but now it always show me "Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option." , can not understand that i follow the official documentation to use it why it's not work?
new Vue({
el:'#filterTest',
data:{
keywords:[{"id":"9","name":"missy","phone":"21324234532"},
{"id":"3","name":"Mahama","phone":"345604542"},
{"id":"2","name":"Bernard","phone":"241242542"}]
},
computed: {
filterM: function () {
var self = this
return self.filter(function (word) {
return user.name.indexOf(self.searchQuery) !== -1
})
}
}
});
Vue.component('canvas-chat',{
template:'#canvasChart',
props:['keywordsData']
})
<script type="text/x-template" id="canvasChart">
<table>
<thead>
<tr>
<th v-for="key.id in keywordsData">
<span class="arrow" ></span>
</th>
</tr>
</thead>
<tbody>
<tr v-for="key.name in keywordsData">
<td v-for="key.phone in keywordsData"> {{key.name}}</td>
</tr>
</tbody>
</table>
</script>
<div id="filterTest">
<canvas-chat keywordsData="keywords" ></canvas-chat>
</div>
You have a few issues:
You must register the canvas-chat component first before you use it in the main component (put Vue.component('canvas-chat', ... before new Vue(...)).
Your v-for loops are wrong. They should be like v-for="key in keywordsData", not v-for="key.id in keywordsData".
The v-fors on the tr and td elements don't make sense; you will have to process the keywordsData first (perhaps in a computed property) to get it into the correct format you want, then loop over that.
You must bind the keywordsData prop in the template like this: :keywords-data="keywords".
I have make table scrollable inside div and everything is working fine but table header is too scrolling.I want to make table header fixed. And this table is rendered within a div. I have used PahingHelper model for paging.I have tried to use scrollable in table but it too is not working.So, am here to make scrollable-table. Is there any way to make table scrollable?
// here is my sample code for scrolling
#model ShresthaTrade.Helper.PagingHelper
<table >
<tr>
<th>Brand</th>
<th>Machine Type</th>
<th>Machine Model</th>
<th>Machine Serial</th>
<th>Mac Address</th>
</tr>
</table>
<div style=" overflow:auto; height: 340px;">
<table >
<tbody>
#if (Model.Datatable.Rows.Count > 0)
{
foreach (System.Data.DataRow row in Model.Datatable.Rows)
{
<tr>
<td>#row["brand_name"]</td>
<td>#row["machine_type_name"]</td>
<td>#row["MachineModel"]</td>
<td>#row["MachineSerial"]</td>
<td>#row["MacAddress"]</td>
</tr>
}
}
else
{
<tr>
<td colspan="4">No records are found</td>
</tr>
}
</tbody>
</table>
</div>
i am new in mvc and trying to learn.i want to display a form when ViewBag.Success is null or empty but if ViewBag.Success is true then i want to render a partial view.
here is my code
<div id="mydiv">
#if (ViewBag.Success != null && ViewBag.Success == true) //Show the message
{
Html.RenderPartial("Message");
}
else
{
#using (Html.BeginForm("Save", "Game", FormMethod.Post, new { #Id = "Form1" }))
{
<table border="0">
<tr>
<td>
Name :
</td>
<td>
<input name="name" type="text" />
</td>
</tr>
<tr>
<td>
Salary :
</td>
<td>
<input name="salary" type="text" />
</td>
</tr>
<tr>
<td colspan="2">
<input name="btnSubmit" type="submit" value="Save" />
</td>
</tr>
</table>
}
}
</div>
the error message i am getting when i am running like
Expected a "{" but found a "/". Block statements must be enclosed in "{" and "}". You cannot use single-statement control-flow statements in CSHTML pages. For example, the following is not allowed:
what i am doing wrong not being able to understand. please help & guide. thanks
# symbol is only required when your code is contained within an HTML element. The using statement does not need the # because it is a direct decedent of your if else block.
Example:
<div> <!-- html tag -->
#if(something == somethingElse) // requires # because direct decedent of html tag <div>
{
<p>
#for (var i=0; i < len; i++) // requires # because direct decedent of html tag <p>
{
if(i == 1) // doesnt require #, not decedent of any HTML tag, instead direct decedent of another razor statement (for)
{
//do something
}
}
</p>
}
</div>
The # sign is use to distinguish between a simple string / HTML and razor statements. You only need that when you are writing C# code between HTML code. But when you are have started a C# code block, the ASP.NET MVC View Engine is intelligent enough to understand that the code that follows is C# and not simply some string.
I am having issues with displaying (rather NOT displaying) plain text in an else block.
if (Model.CareerFields != null && ViewBag.CFCount > 0)
{
<h3>Careerfields Listing</h3>
<table>
<tr>
<th></th>
<th>Careerfield Name</th>
</tr>
#foreach (var item in Model.CareerFields)
{
<tr>
<td>
#Html.ActionLink("Select", "Index", new { careerFieldID = item.CareerFieldId })
</td>
<td>
#item.CareerFieldName
</td>
</tr>
}
</table>
}
else
{
No Careerfields associated with #ViewBag.SelectedDivisionTitle
}
The if blocks works fine. The text only renders when true. However, the else block text renders when the page loads, not if it evaluates to false only.
I've tried using
Hmtl.Raw("No Careerfields associated with ")
<text>No Careerfields associated with #ViewBag.SelectedDivisionTitle</text>
#:No Careerfields associated with #ViewBag.SelectedDivisionTitle
But it still renders the plaintext before evaluation.
Any suggestions?
Put your "plain text" inside of a naked <span> tag:
else
{
<span>No Careerfields associated with #ViewBag.SelectedDivisionTitle</span>
}
The browser shouldn't render it special (unless you have css selecting every span) and it'll help razor sense the end of the C# and print your HTML.
The following code worked perfectly for me:
#if (false) {
<h3>
Careerfields Listing
</h3>
<table>
<tr>
<th>
</th>
<th>
Careerfield Name
</th>
</tr>
</table>
}
else
{
#:No Careerfields associated with #ViewBag.SelectedDivisionTitle
}
You can see that the contents of if are rendered when you change condition to true.
Looks like you've forgotten the # sign before your if statement. Try this:
#if (Model.CareerFields != null && ViewBag.CFCount > 0)
{
<h3>Careerfields Listing</h3>
<table>
<tr>
<th></th>
<th>Careerfield Name</th>
</tr>
#foreach (var item in Model.CareerFields)
{
<tr>
<td>
#Html.ActionLink("Select", "Index", new { careerFieldID = item.CareerFieldId })
</td>
<td>#item.CareerFieldName</td>
</tr>
}
</table>
}
else
{
<text>No Careerfields associated with #ViewBag.SelectedDivisionTitle</text>
}
The most concise and correct answer is:
Prepend #: before the text.
(note the : after the #)
This still allows to embed variables in the text by prepending an # to the variable name:
#if (someCondition)
{
#:Some text you want to see.
}
else
{
#:Some other text, with a variable #someVariable included in the text.
}
I'm using the Razor view engine with MVC 3 and I'm trying to make even and odd rows have different classes in a table.
So far I've got this
#{ var odd = true; }
#foreach(var userLot in Model) {
if (!odd) {
<tr id="lot#userLot.Id" class="even">
else
<tr id="lot#userLot.Id" class="odd">
}
<td>#userLot.Id</td>
<td>#userLot.Description</td>
<td>#userLot.Carat</td>
<td class="averageBid">#userLot.AverageBid</td>
<td class="rank">#userLot.Rank</td>
<td class="currentBid">#userLot.CurrentBid</td>
<td style="width: 200px; height: 30px;" class="tdWithBidInput"><input type="text" style="display: none" /></td>
</tr>
#{ odd = !odd; }
}
This is giving me endless trouble with the stupid view engine unable to figure out what is markup and what is code. I've tried wrapping the tr opening tags in a text directive, but then the stupid view engine moans about the closing tr tags. If I then wrap the closing tr tag in a text directive the stupid view engine moans that the text directive has no opening tag.
Just to be clear, this
<text></ tr></text>
gives an error that the text tag has no matching opening tag. Lovely.
How do I write this so that Razor doesn't give an error?
Please don't recommend a JavaScript solution, I'm trying to get around the Razor issues here.
How about this:
#{ var odd = true; }
#foreach(var userLot in Model) {
<tr id="lot#(userLot.Id)" class="#(odd ? "odd": "even")">
<td>#userLot.Id</td>
<td>#userLot.Description</td>
<td>#userLot.Carat</td>
<td class="averageBid">#userLot.AverageBid</td>
<td class="rank">#userLot.Rank</td>
<td class="currentBid">#userLot.CurrentBid</td>
<td style="width: 200px; height: 30px;" class="tdWithBidInput"><input type="text" style="display: none" /></td>
</tr>
odd = !odd;
}
#( ... ) is a valid and very useful statement.