I have a complicated view that holds another partial view. The partial view has a submit button.
The submit button and everything works fine in Chrome but in Firefox, even though Firebug shows no errors, absolutely nothing happens when I click the submit button.
Are there any typical issue to be aware of here? Maybe Chrome is more lenient with Javascript errors?
Anyone got any idea what could be happening?
The views are pretty huge so will not post everything
Edit: I will post the view with the submit button. I have put a form in a table to capture the values that I want to save:
<table>
<tbody>
<tr>
#using (Html.BeginForm("RowPost", "Controller"))
{
<td class = "editor-field">
#Html.EditorFor(model => model.Minutes)
#Html.ValidationMessageFor(model => model.Minutes)
</td>
<td>
#Html.DropDownList("WorkType")
</td>
<td>
#Html.TextAreaFor(model => model.description)
#Html.ValidationMessageFor(model => model.description)
</td>
<td>
<input type="submit" value="Save" />
</td>
}
</tr>
</tbody>
</table>
Maybe its something to do with the form inside a table row?
Your view is not well formed and will result in invalid HTML, which in turn causes undocumented behaviour.
<tr>
#using (Html.BeginForm("RowPost", "Controller"))
{
<td class = "editor-field">
Results in something like:
<tr>
<form>
<td class = "editor-field">
which is obviously not ok. You shouldn't be putting forms inbetween rows and cells. Try putting the entire table inside the form for more predictable results.
In future you could save yourself lots of headaches if you get to know and love the WC3 Markup Validation Service. If your html fails that, then get it fixed before worrying about anything else.
Related
I'm trying to pull a value out of a kendo popup window but can't seem to get the right combo/syntax.
Im looking for 9070009 in the "dipatchIdentLablel"
I have tried:
.Document.getElementById("AddSucessWindow").Value 'I know, too broad, too many possibilities
.Document.getElementById("AddSucessWindow").Text
.Document.getElementById("AddSucessWindow").getElementById("dispatchIdentLablel").Value
.Document.getElementById("AddSucessWindow").getElementById("dispatchIdentLablel").Text
.Document.getElementById("dispachIdentLablel").Value
.Document.getElementById("dispachIdentLablel").Text
.Document.getElementById("dispachIdentLablel").getElementsByName("dispatchIdentLablel").Value
.Document.getElementById("dispachIdentLablel").getElementsByName("dispatchIdentLablel").Text
.Document.getElementById("dispachIdentLablel").getElementsByName("dispatchIdentLablel").innerText
.Document.getElementById("dispachIdentLablel").getElementsByName("dispatchIdentLablel").HTML
.Document.getElementById("AddSucessWindow").getElementsByTagName("span").Value
.Document.getElementById("AddSucessWindow").getElementsByTagName("span").Text
No errors on any, but the result is"empty" on all
Here is a portion of the web page code. I've removed a bunch of unneccessary stuff for ease of reading.
<div tabindex="0" class="k-window-content k-content" id="AddSucessWindow" role="dialog" aria-labelledby="AddSucessWindow_wnd_title" data-role="window">
<div>
<table>
<tbody>
<tr>
<td class="columnLabel">
<label for="Dispatch_Load_Id:">Dispatch Load Id:</label>
</td>
<td class="columnData">
<span id="dispatchIdentLablel" name="dispatchIdentLablel"></span>
9070009 '<<--Shows as element (text)
</td>
</tr>
</table>
</div>
<div class="divCenter">
<button Type="Button" id="AddSucessWindowClose">Close</button><script>
jQuery(function(){jQuery("#AddSucessWindowClose").kendoButton({});});
</script>
</div>
I can get the button to close the window using this
.Document.getElementById("AddSucessWindowClose").Click
I know I'm overlooking something or have the syntax wrong. Any insight appreciated !!
You should be able to use querySelector() looking for the columnData class:
.Document.querySelector(".columnData").innerText
Note that this worked for me when testing with just the HTML in the OP. If there are other elements with the same class on the page, may have to tweak it.
I'm working on a MVC project in which I display a ViewModel in several partial views within a table. I have a control in which the user can change how the table is displayed, like this:
<table>
<tr>
<td>
partial view 1 partial view 2
</td>
</tr>
<tr>
<td>
partial view 3 partial view 4
</td>
</tr>
</table>
or
<table>
<tr>
<td>
partial view 1
</td>
</tr>
<tr>
<td>
partial view 2
</td>
</tr>
<tr>
<td>
partial view 3
</td>
</tr>
<tr>
<td>
partial view 4
</td>
</tr>
</table>
Any time a user wants to change how the view is displayed, he has to click the submit button of the from, and the application has to make the request to the server, get the results, and according to a flag (TableDisposition = 1 or 2), load some divs.
I know this is not the best way to do it, but my lack of knowledge regarding client side coding (javascript/jquery) is making it impossible for me to do this in a more efficient way.
Any input will be much appreciated.
EDIT: Solved in the comments.
First I started loading the viewModel in two tables, each one in a div with absolute positioning. Then I made a function to hide one of those tables:
$(function () {
$("#divTable1").css('visibility', 'hidden');
});
Finally, I made a function which is triggered by pressing a button:
$("#btnAlternateView").click(function () {
if ($("#divTable2").css('visibility') == 'hidden') {
$("#divTable2").css('visibility','visible');
$("#divTable1").css('visibility', 'hidden');
}
else {
$("#divTable2").css('visibility','hidden');
$("#divTable1").css('visibility', 'visible');
}
});
And that was it. Works like a charm.
So I have this table:
<table class="table table-bordered">
<tr>
<th style="width: 10px">#</th>
<th>Location</th>
<th style="width: 20px">Actions</th>
</tr>#foreach (var item in Model) {
<tr>
<td>#Html.DisplayFor(modelItem => item.LocationID)</td>
<td>#Html.DisplayFor(modelItem => item.LocationName)</td>
<td>
<a href="#Url.Action(" Edit ", new { id = item.LocationID})">
<i class="glyphicon glyphicon-edit"></i>
<span class="sr-only">Edit</span>
</a>
<a href="#Url.Action(" Delete ", new { id = item.LocationID})">
<i class="glyphicon glyphicon-erase"></i>
<span class="sr-only">Edit</span>
</a>
</td>
</tr>}
<tr>
<td><i class="glyphicon-plus"></i>
</td>
<td colspan="2">#Html.ActionLink("Create New", "Create")</td>
</tr>
</table>
the edit, delete, and add buttons are all working but they are taking me into a new page to perform the edit, add and delete. Is it possible that when I click the edit, the corresponding row becomes editable and edit button become save button to post/save it to database? Can anyone show me how its done or point me where I can see some example pls im new to web development.
There are many ways to achieve what you're after. My preferred method is to use a dialog for new/edit rather than inline, but I've used inline plenty of times. It depends on how many inputs there are - if just LocationName then inline is fine.
One simple method is to include the editor on the view, then show/hide it as required.
Change this:
<td>#Html.DisplayFor(modelItem => item.LocationName)</td>
to:
<td>
<div class='inline-view'>
#Html.DisplayFor(modelItem => item.LocationName)
</div>
<div class='inline-edit' style='display:none;'>
#Html.EditorFor(modelItem => item.LocationName)
</div>
</td>
and change the edit button to call some javascript
<div class='inline-view'>
<a href='#' onclick='startEdit();return false;'>edit</a>
</div>
<div class='inline-edit' style='display:none;'>
<a href='#' onclick='cancelEdit();return false;'>cancel</a>
</div>
(of course, be a purist and add the click event via javascript, for illustrative purpose only)
You also don't need all the div's - just added for clarity.
then add some js:
function startEdit() {
// you could use fadeOut/fadeIn or slide etc to make it a bit nicer here
// maybe flash the background of the input to show something's changed
// etc
$(".inline-view").hide();
$(".inline-edit").show();
}
function cancelEdit() {
$(".inline-edit").hide();
$(".inline-view").show();
}
(again, production code should use proper namespaces)
You'll then need to post the edit - add a small save button next to the EditorFor and either use Ajax to post or add <form> tags.
An alternative approach is to load the inline form when the edit button is clicked - create a PartialView for the edit form and use an ajax call to load it in and replace the existing table row/cell - on save, load a PartialView for the view part and overwrite. The ajax approach ensures you're editing up-to-date data, but is a little more complicated.
I put a calendar of events put together using angular and jquery. A styled button saying +My Schedule adds the data to localStorage which is then pulled in to another page for user's reference. The localStorage function worked fine until it was brought into the Angular template. Clicking the link now cause the page to jump up and there is nothing recorded in the console or localStorage.
A working example of what I am trying to do is at the following url, this page was all hard coded and I am trying to implement the same thing in an Angular template: http://events.latimes.com/festivalofbooks/the-festival/schedule/
Any help would be appreciated.
Here is a fiddle: http://plnkr.co/edit/gaKFWTsACxwCg0i4JCiw?p=preview
Here is the shortened template as I had to paste code here:
<table class="target-stage stage-only" border="0" cellspacing="0"
cellpadding="0" style="border:none;" >
<tr>
<td width="190" valign="top" class="ev-time">{{item.time}}</td>
<td valign="top" class="ev-desc">
<p class="ev-date">{{item.day}}, {{item.date}}, 2015</p>
<strong>{{item.first_name}} {{item.last_name}},</strong> Author of
<em>" {{item.work_title}}"</em><br />
{{item.stage}}
<span class="info-btn"><p class="selctor" rel={{item.rel}}><span
class="addSchd"><b>+ MY SCHEDULE</b></span>
</td>
</tr>
</table>
I'm seeing a few problems here.
First of all, your html is broken. The p-tag is never closed.
<span class="info-btn"><p class="selctor" rel={{item.rel}}><span class="addSchd"><b>+ MY SCHEDULE</b></span>
Second, as far as I've seen from taking a quick look you are dynamically adding content. You can't use (selector).click() on dynamic content, because the selector won't exist at the point that code is called. Instead use on(), which will be applied to dynamically generated content as well like this:
$(document).on("click", ".button", function() {
// do this when class with .button is clicked
});
I have an issue with the enter key not submitting data in a form when the enter key is hit in Chrome and Firefox, you have to click on the link:
onclick="javascript:document.EntryForm.TargetAction.value = 'NewDocument'; document.EntryForm.submit();"
I believe this is because the document lacks input type="submit", so I would like to add it into the page.
The problem lies in the fact that the page is generated dynamically by Sage CRM which according to our Sage team does not give us access to modify the scripts. I have however found the CSS! I have used the CSS in the past to change certain aspects of the interface.
Another problem is that although Sage CRM is a relatively new system (I am told) as it was created when Sage sold ACT! the HTML does not seem to comply with what I would describe as best practices (HTML4, no DOCTYPE, elements 20 tables deep, very few class tags and fewer ID tags, I think we got lucky in this case with the .ButtonItem class)
My plan is to change this link (one of many links with no IDs) to the submit input type using css content: and :after and :nth-of-type(1)
<TABLE class=ButtonGroup>
<TBODY>
<TR>
<TD class=ButtonItem>
<TABLE cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD width=32><A onfocus="if (event && event.altKey) click();" class=ButtonItem accessKey=F href="javascript:try{checkSubmit(document.EntryForm);}catch(e){document.EntryForm.submit();}"><IMG border=0 src="/CRM/Themes/img/default/Buttons/Search.gif" align=middle></A></TD>
<TD> </TD>
<TD><A onfocus="if (event && event.altKey) click();" class=ButtonItem accessKey=F href="javascript:try{checkSubmit(document.EntryForm);}catch(e){document.EntryForm.submit();}"><FONT style="TEXT-DECORATION: underline">F</FONT>ind</A></TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
<TR>
<TD class=ButtonItem>
<TABLE>
<TBODY>
<TR>
<TD><A>a</A></TD>
<TD><!-- Many more of these rows --></TD>
<TD><A>a</FONT>ear</A></TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>
Is this how you would get the submit on enter to work and if so how would you select the css and insert the html?
And how come IExplorer knows what to do when I hit return but Firefox/Chrome does not if not submit is specified? A best guess?