I'm trying to auto-save a selection in a dropdown (ASP.NET, MVC, VB), but it's not behaving as expected. Here's the dummy action in the controller:
<AcceptVerbs(HttpVerbs.Post)> _
Function TestAction(ByVal id As Integer) As ActionResult
Return Content(id)
End Function
and the HTML:
<script type="text/javascript" src='<%= Url.Content("~/Scripts/MicrosoftAjax.debug.js") %>'></script>
<script type="text/javascript" src='<%= Url.Content("~/Scripts/MicrosoftMvcAjax.debug.js") %>'></script>
<% Using Ajax.BeginForm("TestAction", New AjaxOptions With {.UpdateTargetId = "test"})%>
<%=Html.Hidden("id", 123)%>
<%=Html.DropDownList("actions", Nothing, New With {.onchange = "this.form.submit();"})%>
<input type="submit" value="Submit" />
<span id="test"></span>
<% End Using%>
The Submit button works as expected - the span is populated with "123". The dropdown on the other hand opens a new page with nothing but "123" on it. Why "this.form.submit()" not doing the same thing as the Submit button? Is there a different call I should make to emulate the Submit button?
this.form.submit does not run the form.onsubmit event. Pressing the submit button, on the other hand, does. That, combined with the HTML that Ajax.BeginForm generates, explains why the two behave differently. As for how to make your event do the same thing as pressing the submit button, look at the HTML in the linked article:
Sys.Mvc.AsyncForm.handleSubmit(
this,
new Sys.UI.DomEvent(event),
{
insertionMode: Sys.Mvc.InsertionMode.replace,
updateTargetId: 'test'
});
I know this is old, but there is a new (and better) way to do this.
Instead of doing using javascript, use jQuery. Just had this issue and it worked great.
this.form.submit() <---- Javascript
$("form").submit() <---- jQuery
Related
I place a button in a div tag, and when I run it, I only see the div container
<div style= "border-style:solid;border-width:1px; padding:5px; background-color:#ffffcc">
<asp:button ID = "refresh" runat ="server" OnClientClick="reloadPage()">
<script type="text/javascript">
function reloadPage(){
window.location.reload()
}
</script>
</asp:button>
</div>
the refresh button is nowhere can be found. Are there anything wrong with my code? I am new to MVC, please give me suggestions.
Why are you using asp controls in an MVC project -> use an HTML element.
Use a Form
<div>
#using (Html.BeginForm("Action", "Controller", FormMethod.Post))
{
<button type="submit">Submit</button>
}
</div>
Use a Button
<div>
<button onclick="DoSomeJavascript" >Submit</button>
</div>
MVC uses Controllers (Code Behind) and Views (Html) to create pages. To send data to or from a page you need to use View Models.
Maybe have a look at this handy guide: http://www.asp.net/mvc/overview/getting-started/introduction/getting-started
Your question states that you are new to MVC, yet you are trying to define a button from classic ASP.NET, which will not be processed by the Razor view engine used by MVC. Since you are just reloading the page you can do this with regular HTML buttons and Javascript. I'm not reloading the page here in this snippet, but that's irrelevant.
<div style="border-style:solid; border-width:1px; padding: 5px; background-color:#ffffcc">
<button id="refresh" onclick="reloadPage()">
Refresh Page
<script type="text/javascript">
function reloadPage() {
console.log("Reloaded")
//Reload page here
}
</script>
</button>
</div>
If you run this and click you should see the log message in your Javascript console.
In iOS 8 and above, to show the Search button on the iOS keyboard, you use the action attribute in the form. From Anton's answer here ... Show 'Search' button in iPhone/iPad Safari keyboard
<form action=".">
<input type="search" />
</form>
But this does not work when you are using an AngularJS form with ng-submit like this
<form action="." ng-submit="doSearch(searchtext)">
<input type="search" ng-model="searchtext" />
</form>
The action attribute breaks the Angular form submit.
Any suggestions on how to put a dummy action attribute and still get ng-submit to handle the form processing? Or any other solution that would show the iOS keyboard's search key with an AngularJS HTML5 form.
Just encountered the same problem, key here is that angular prevents default form submission only if no action specified, so if you want to specify one you need to preventDefault manually, which should be pretty easy.
This should work (worked for me):
<form action="." ng-submit="$event.preventDefault();doSearch(searchtext)">
<input type="search" ng-model="searchtext" />
</form>
Also note, that you will need to blur() your input field after you made a Search request in order to auto-hide keyboard.
Update:
With the latter this directive will help you:
.directive('prettySubmit', function () {
return function (scope, element, attr) {
var textFields = $(element).children('input');
$(element).submit(function(event) {
event.preventDefault();
textFields.blur();
});
};
})
I have placed preventDefault() in directive, so your form will look like this:
<form action="." ng-submit="doSearch(searchtext)" pretty-submit>
<input type="search" ng-model="searchtext" />
</form>
I encountered the same problem.
Finally I decided to use
<form action="{{'#/search/' + searchText }}">
Instead, and it works.
I am trying to install the jQuery UI autocomplete on my website. I have it up and working but I want it to automatically submit the search form when someone clicks on an option. The default behavior seems to be that it just fills out the form with the selected item and then the user must click the submit button. I want it to just automatically redirect like Google. I'm running PHP 5.+ and MYSQL 5+ and jquery.1.4.2 and jqueryui.1.8.6.
Here is the javascript:
<script>
$(function() {
$( "#query" ).autocomplete({
source: "/scripts/autocomplete_handler.php",
minLength: 2,
select: function(event, ui) {
$('#query').val(ui.item);
$("#results").text(ui.item); // for testing purposes
$('#search_form').submit();
}
});
});
</script>
Here is the form:
<form name="search_form" id="search_form" action="search.php" method="get">
<input type="text" name="query" id="query" />
<input type="submit" value="Search" />
</form>
<code id="results"></code>
As you can see, I am trying to change the value of the input field "query" using $('#query').val(ui.item). The problem is that when I select an autocomplete option $_GET['query'] becomes [object Object]. i.e. My website searches for the string "[object Object]" instead of the value that I clicked.
At the bottom of the form there is a code tag with id "results". I also can't get this to populate with the text(ui.item). If anyone could help it would be much appreciated, I'm sure I'm not the only one who wants this type of Google like functionality in their autocomplete, but I can't find any examples anywhere.
Try this in your select function:
$('#query').val(ui.item.value);
I have a form inside an iframe which is inside a jQuery UI dialog box. The form contains a file input type. The jQuery UI dialog contains an Upload button. When this button is clicked, I would like to programmatically call the submit method. My question is how I could select the form which is in a iframe using jQuery. The following code should clarify the picture:
<div id="upload_file_picker_dlg" title="Upload file">
<iframe id="upload_file_iframe" src="/frame_src_url" frameborder=0 width=100% scrolling=no></iframe>
</div>
frame_src_url contains:
<form action="/UploadTaxTable" enctype="multipart/form-data" method="post" id="upload-form">
<p>Select a file to be uploaded:</p>
<p>
<input type="file" name="datafile" size="60">
</p>
The jQueryUI dialog box javascript code:
$('#upload_file_picker_dlg').dialog({
...
buttons: {
'Close': function() {
$(this).dialog('close');
},
'Upload': function() {
$('#upload-form').submit(); //question is related to this line
$(this).dialog('close');
}
},
....
});
From the javascript code snippet above, how can I select the form with id upload-form that is in the iframe whose id is upload_file_iframe ?
Accessing an element inside an iframe is tricky.
You should use the following syntax:
$('#iframeID').contents().find('#upload-form').submit();
where 'iframeID' is obviously an ID you've given to the iframe.
Hope it is correct!
The answer is:
$('#upload_file_iframe').contents().find('#upload-form').submit();
which I learned from http://simple.procoding.net/2008/03/21/how-to-access-iframe-in-jquery/
Off the top of my head I'd say you might have to add the logic to the file where the iframe source is from.
I am tryng to use this: http://jqueryui.com/demos/dialog/#modal-form
I have:
<script type="text/javascript">
$(document).ready(function() {
$("#dialog").dialog();
$("#dialog").dialog('close');
$('.myPop').click(function() {
$("#dialog").dialog('open');
});
});
Which allows me to pop-up on the click of '.myPop' which is just a temp input button in my list which is working:
<button type="button" class="myPop"></button>
My question is - what is the best way to use this pop-up to go to the Edit method of my controller, populate controls and then be able to save back to the model and refresh the list page?
I want to keep with best practice in ASP.Net MVC please.
Am I beetr maybe using this? http://dev.iceburg.net/jquery/jqModal/
Thanks
There's obviously a bunch of ways to do that, but here's how I would solve it. Perform an ajax call before loading the dialog to populate the dialog's contents, show the dialog, than on save close the dialog and refresh the grid. Those are the basics, there's some helper code below. I find it a good practice to return a json result from the save action to determine if the saved was successful, and if not an error message that indicates why it failed to display to the user.
<div id="dialog" title="Basic dialog">
<!-- loaded from ajax call -->
<form id="exampleForm">
<input blah>
<input type="button" onclick="Save()" />
</form>
</div>
<script>
$(function() {
$('.myPop').click(function() {
$.get("editController/loadContents", function(data){
$("#dialog").html(data);
});
$("#dialog").dialog('open');
});
});
function Save(){
$.post("/editController/Edit", $("#exampleForm").serialize(),
function(data){
$("#dialog").dialog('close');
//update grid with ajax call
});
}
</script>