I have a table like so
<table>
<tr id="trRow1" runat="server" style="display: none">
<td>First Name:</td>
<td><asp:Label id="lblFirstName" runat="server"></asp:Label></td>
</tr>
<tr>
<td>Last Name:</td>
<td><asp:Label id="lblLastName" runat="server"></asp:Label></td>
</tr>
</table>
As you can see, initially the first row is not being displayed. When the user clicks a certain radio button on the page an asynchronous postback occurs, and at that time I set the style of trRow1 to "inline". Nothing fancy; nothing new. It works just great.
Or at least up until I try to do the following in a javascript function.
function Test() {
var obj = trRow1.getElementsByTagName("select");
alert(obj.length);
}
At the point I call Test(), I get an error that says "Microsoft JScript runtime error: 'trRow1' is undefined."
My guess is it has something to do with the fact that I'm messing with setting the Display style using AJAX, and for whatever reason the DOM can't find trRow1 even after I set it's display to "inline".
Can anyone throw me a bone on this one? I'm stuck.
The object trDegree is not defined, by your naming conventions looks like trDegree is a table row element, I think that you're trying to do something like this:
function WTF() {
var trDegree = document.getElementById('trDegree'); // Locate the element
var obj = trDegree.getElementsByTagName("select");
alert(obj.length);
}
Further Reference:
element.getElementsByTagName
I don't see any variable for trDegree in your sample. You would need to have trDegree loaded before calling getElementsByTagName.
For example:
function WTF() {
var trDegree = document.getElementById('trDegree');
var obj = trDegree.getElementsByTagName("select");
alert(obj.length);
}
or you could just load the tags from the document level. I'm not sure if this is the effect you want though.
function WTF() {
var obj = document.getElementsByTagName("select");
alert(obj.length);
}
The solution is in the first answer. U must get the element before using it adding this line:
var trRow1 = document.getElementById('trRow1');
Related
So I'm having a very, very strange issue, so here's a code snippet where the problem is happening:
<td class="editable ageCell" data-source="Age" data-bind="css: {'modified': true}"></td>
Basically what is going wrong is that it does not add the modified class. At all. Strangely, when I added a text binding, like modified:true, text: 'testatest', it does apply it.
What is going on? I'm not even close to a web developer expert, but I even asked my two senior project leads and they can't figure it out.
Inspect your web page in browser console and check the class modified present or not.
If it is there, then probably the problem is with your text content inside the td element. it may be null or empty. Also make sure that there is no script error in browser console.
Try and understand this:
HTML
<div class="editable ageCell" data-source="Age" data-bind="css: {'modified': false}, text:text"></div>
<div class="editable ageCell" data-source="Age" data-bind="css: {'modified': true}, text:text"></div>
JavaScript
var model = function()
{
var self=this;
self.modified = ko.observable(false);
self.text = ko.observable('Sample Text');
};
ko.applyBindings(new model());
Here is the Demo
So it turns out that in some framework that was being used, there was a function that served no purpose but to remove classes from cells when it was called, and it was being called right after my modified adder, so that wraps up this problem.
There's another reason why a class might not be applied I ran into: It gets overridden by a subsequent css-declaration:
<td class="editable ageCell" data-source="Age" data-bind="css: {'modified': true}, css: unrelatedcssclass"></td>
In this case 'modified' will never appear, but 'unrelatedcssclass' will.
To fix that, merge both declarations to
<td class="editable ageCell" data-source="Age" data-bind="css: {'modified': true, 'unrelatedcssclass' : true}"></td>
I am using SimpleFormController with a result page looking like this:
<tr>
<td>Name: </td>
<td>${product.name}</td>
</tr>
<tr>
<td>Text: </td>
<td>${product.text}</td>
</tr>
A user can enter a name and some text. I'm trying to implement a delete functionality for each entry (there should be a link next to each entry). I'm having trouble with understanding, if it can be done in the same Controller as for the input or not (am new to Spring) and how. The onSubmit method helps to display data that was added, do I need to implement an extra delete method? If yes, how can I "map" it to my delete link in my jsp?
I suppose you are not wanting to put a delete link even when the user is just entering the name!
Delete links should normally appear when you are displaying data, not creating them.
Here is how you can create a delete link according to associated ids.
<tr>
<td>Name: </td>
<td>${product.name}</td>
<td>delete</td>
</tr>
and this should be in your controller:
#Controller
public class ProductController{
#RequestMapping("/delete/{id}")
public String deleteProduct(#PathVariable("id")Integer id) {
// get product by id
// delete that product
// save database
// or do as you wish
return "redirect:/index";
}
}
Hope that helps :)
Here's a strange thing. I'm up and running on my first Meteor app.
You can see it at: http://www.howli.st
Here's what's happening:
Press process to use the sample data to take you to the data
entry screen where you can pop in a few values
Take the Session Reference from the top right corner and in another browser open up
howli.st again and then paste that session reference into the box on
the right to "retrieve data"
Both browsers are now in the same session and if you type data in one it will update in the other.
Small glitch: here's what happens over a series of changes to the form binding box:
"hello" -> "hello"
"hello world" -> "hello" note no change in other broswer
"helloworld" -> "helloworld" the other browser now updates!
Here's the code from my app:
html:
<tr>
<td>form binding</td>
{{#each sessioninfo}}
<td colspan="2"><input type="text" id="formbinding" value={{formbind}} ></td
{{/each}}
</tr>
js:
Template.thedata.events = {
'keyup #formbinding':function(){
//save formbinding to MyItems
var thisSession = Session.get("thisSession");
MySessions.update({_id: thisSession}, {$set : { formbind : $('#formbinding').val()}});
}
};
Template.thedata.sessioninfo = function(){
return MySessions.find({});
};
Any help gratefully received.
Update If I use a variable theformbind = $('#formbinding').val() to pass to my update statement then the other browser does update, but it only shows the text preceding the space i.e.
abcd -> abcd
ab cd -> ab
Looking in the mongodb the correct value "ab cd" has been stored
o_O
Upon a second look I now see that
<td colspan="2"><input type="text" id="formbinding" value={{formbind}} ></td>
has no " around the formbind, thus you would want it to be
<td colspan="2"><input type="text" id="formbinding" value="{{formbind}}"></td>
such that it allows for stuff that contains spaces (and not make new arguments of them).
I am generally new to ASP.NET and am modifying some code that I've inherited. There is a section of code that creates a Select box using a ListBoxFor based on a search term that's entered by the user:
#Html.ListBoxFor(m => m.SelectedItem,
Lookup.Models.myService.Search(Model.SearchTerm,
null == Model.SelectedCity ? 1 :
Int32.Parse(Model.SelectedCity))
The signature for Search() is:
public static List<SelectListItem> Search(string term, string city)
Instead of displaying a Select box, I want to output an HTML table instead with the data. I'm not even sure how to go about doing this or really what info to give you all in order to help me :)
The ListBoxFor helper displays <select> elements with multiple="multiple" attribute allowing multiple selections. If you want something else you should not use this helper. So you said that you wanted an HTML table.
Now, there's something very wrong with the code you have shown. You are calling Lookup.Models.myService.Search inside a view. Views are not supposed to pull data from some places. They are supposed to only display data that is being passed to them under the form of view models by a controller action. So this call should not be done in the view. It should be done beforehand and the result stored as a property on your view model:
public IEnumerable<SelectListItem> Items { get; set; }
Anyway. The first possibility is to write the markup yourself:
<table>
<thead>
<tr>
<th>Value</th>
<th>Text</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.Items)
{
<tr>
<td>#item.Value</td>
<td>#item.Text</td>
</tr>
}
</tbody>
</table>
Of course writing this code over and over again could become cumbersome. So you could externalize it in a DisplayTemplate. For example you could put it inside a ~/Views/Shared/DisplayTemplates/MyTableTemplate.cshtml and then when you needed to render it in a view you could use:
#Html.DisplayFor(x => x.Items, "MyTableTemplate")
I have code that renders the following HTML
<tr>
<td>Control 1 with onclick="javascript:Test(this);" </td>
<td>Control 2</td>
<td><span><div>Control 3</div></span></td>
</tr>
function Test(myThis)
{
//Here I would like to get references to the siblings of Control 1 (in this ex: Control 2, Control 3)
//and disable them. Any ideas?
}
I am using this approach of finding siblings as this is in a nested usercontrol with depth = 3 and ASP.NET refers to the controls with a prefix which is awfully hard especially if i have multiple instances of the control on the page.
if you're using a javascript library such as jQuery it becomes really easy:
$(this).siblings().disable();
http://docs.jquery.com/Traversing/siblings#expr
If you don't have jQuery or a similar library, then you'll have to do it manually:
function disableSiblingsOf(elem)
{
var nodes = elem.parent.childNodes;
for(var i=0; i<nodes.length; i++);
if(nodes[i] != elem)
nodes[i].disabled = true;
}
That should do the trick.
Add jQuery and use the following:
$(myThis).nextAll("td").each(function(){
// Code to "disable" them here, dunno what you mean by that though as they are tds.
});
I'll assume you don't have a Javascript library available, since I already see jQuery answers posted.
It depends a lot on the HTML rendered by your controls. However, you can probably just reference this.parent in a loop until this.tagName === 'TR' or this.parent becomes null. Then descend back down.