I have a problem with using an ajax button in a partial view to update a div in the parent page. If I put the same button into the parent page it works fine. Is this not possible or am I missing something? cheers for the help
Parent View:
<div id="topiclist">
#{Html.RenderPartial("DetailLoader", this.Model);}
</div>
Partial View
#using (Ajax.BeginForm("LatestTopics", "Forums", new AjaxOptions { UpdateTargetId = "topiclist" }))
{
<input type="hidden" name="page" value="#ViewBag.page" />
<input type="submit" id="refresh" class="latestbuttons" value="#(ViewBag.NewTopics) New Topics" />
}
Include this line in your views, I had the same issue and it worked for me !
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
Related
i have tried every possible script on StackOverflow but nothing is working.I want to bind enter key to a textbox , which clicks the specific button.
Code looks like this:
<form>
Enter URL: <input type="text" id="url" />
<input id="button" type="button" value="Load" onclick="loadUrl()" />
</form>
<iframe id="showUrl"></iframe>
button leads to another script for loading URL (which is working absolutely fine).But when i use any javascript or jquery, nothing happens, it shows "?" in main browser URL and my link from textbox disappers.
Sorry i am noob in programming, please help me
My loadUrl() Script:
<script type="text/javascript">
function loadUrl() {
var url = document.getElementById( 'url' ).value,
showUrl = document.getElementById( 'showUrl' );
showUrl.src = /$https?:\/\//.test(url) ? url : 'https://'+url;
}
</script>
Here's the example on Plunker. If you create the form correctly it should automatically submit when you press the enter key, or click the Go/submit button.
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form id="theForm" method="GET" action="#">
Link:
<input type="text" id="url" />
<input type="submit" id="goButton" value="Go"/>
</form>
<iframe id="showUrl"></iframe>
<script src="script.js"></script>
</body>
</html>
script.js
var url = document.getElementById('url'),
showUrl = document.getElementById('showUrl'),
goButton = document.getElementById('goButton'),
theForm = document.getElementById('theForm');
function loadUrl(e) {
e.preventDefault();
showUrl.src = url.value;
return false;
}
theForm.addEventListener('submit', loadUrl);
url.addEventListener('keyup', function(e){
//You shouldn't need this since the form submits when you click enter anyway.
console.log(e.key);
console.log(e.which);
console.log(e.char);
});
I've a form that points to itself on POST operation to process data. This part is good. Now in the form I've a textbox and a button (X) that is used for another purpose as well. When this button X is clicked it should take the input value from the text box and point to another ASP page, process data and return the value...and this is the part I'm unable to figure out... Let me explain this in a bit more clearly..
form name=frmAccounts method=Post action="self.asp"
...
...
name ---> Textbox
function ---> textbox :: search button(X) <--> sales.asp
Description --->textbox
...
...
Form Submit ---> button
Form ends
Now..suppose I enter function as "Sales" in the textbox, then when I click on the search button it would look at another ASP page like sales.asp that will query for relevant description and populate the description box...Then the form submit will call the self.asp to do its function.
Question: How can I pass value from function textbox, via search button, to sales.asp for processing and return back the value.
Things I've tried so far with no luck
1) Functions using #include method
2) Button onClick method by passing Request.Form data
3) href option by passing the URL by adding the form data - URL does not take the value
some other methods after Googling through many forums but with no joy.
Any help please?
Like Lankymart says, do something like this:
Self.asp
<form action="self.asp" name="myform" id="myform">
<input type="text" name="name" id="name" />
<br /><input type="text" name="functionbox" id="functionbox" />
<br /><input type="button" name="search" value="search" id="search" />
<br /><input type="text" name="Description" id="Description" />
<br /><input type="submit" value="submit" />
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#search").click(function() {
$.ajax({
data: {'functionbox': $("#functionbox").val()},
url: '/sales.asp',
success: function(data) {
if (data) {
$("#Description").val(data);
}
}
});
});
});
</script>
sales.asp
<%# LANGUAGE = JScript %>
var functionbox = Request.Form("functionbox").Item;
var answer = getAnswer(functionbox); // your code here
%><%= answer %>
The issue i am facing has taken more then 8 hours but couldn't find the solution to it.
I am trying to implement ajax functionality in MVC4.
I've following code in index view.
#using (Ajax.BeginForm(
new AjaxOptions
{
HttpMethod = "get",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "resturantList"
}
))
{
<input type="search" name="searchTerm" />
<input type="submit" value="Search By Name" />
}
<div id="resturantList">
#foreach (var item in Model)
{
<div>
<h4>#item.Name</h4>
<div>#item.City, #item.Country</div>
<div>Reviews: #item.CountOfReviews</div>
<hr />
</div>
}
</div>
Following is html which renders when search button is clicked.
I've checked the script files references by firebug even they are included
<script src="/Scripts/jquery-2.1.0.js">
<script src="/Scripts/jquery-ui-1.10.4.js">
<script src="/Scripts/jquery.unobtrusive-ajax.js">
<script src="/Scripts/jquery.validate.js">
<script src="/Scripts/jquery.validate.unobtrusive.js">
Tried to remove the
<add key="UnobtrusiveJavaScriptEnabled" value="true" />
from web.config file which solves the above stated issue but it also disables the client side validations.
You are not telling the form to post the data on which action of which controller, this is causing the problem,do like this, pass controller and action name as well:
#using (Ajax.BeginForm(
"Action", "Controller",
new AjaxOptions
{
HttpMethod = "get",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "resturantList"
}
))
{
<input type="search" name="searchTerm" />
<input type="submit" value="Search By Name" />
}
<div id="resturantList">
#foreach (var item in Model)
{
<div>
<h4>#item.Name</h4>
<div>#item.City, #item.Country</div>
<div>Reviews: #item.CountOfReviews</div>
<hr />
</div>
}
</div>
and second thing,make sure you are returning a partial view,if full view is returing that will also cause issues.Do this in you view for it:
#{
Layout = null
}
Actually you have to return partial view in the response of ajax call
I'm just learning javascript and php. I created a contact form and I'd like the submit button to accomplish two things when I press it:
submit the data to me (this part is working)
read my onclick function (this part is not working)
<input id="submit" name="submit" type="submit" value="Submit" onclick="eatFood()">
<?php
if ($_POST['submit']) {
////?????
}
?>
I'm sending the data to my email, and so I get that. But the onclick function doesn't seem to work. I tried reviewing add onclick function for submit button but it didn't help.
I need to see your submit button html tag for better help. I am not familiar with php and how it handles the postback, but I guess depending on what you want to do, you have three options:
Getting the handling onclick button on the client-side: In this case you only need to call a javascript function.
function foo() {
alert("Submit button clicked!");
return true;
}
<input type="submit" value="submit" onclick="return foo();" />
If you want to handle the click on the server-side, you should first make sure that the form tag method attribute is set to post:
<form method="post">
You can use onsubmit event from form itself to bind your function to it.
<form name="frm1" method="post" onsubmit="return greeting()">
<input type="text" name="fname">
<input type="submit" value="Submit">
</form>
html:
<form method="post" name="form1" id="form1">
<input id="submit" name="submit" type="submit" value="Submit" onclick="eatFood();" />
</form>
Javascript:
to submit the form using javascript
function eatFood() {
document.getElementById('form1').submit();
}
to show onclick message
function eatFood() {
alert('Form has been submitted');
}
if you need to do something before submitting data, you could use form's onsubmit.
<form method=post onsubmit="return doSomething()">
<input type=text name=text1>
<input type=submit>
</form>
I have this code:
<html>
<head>
<SCRIPT type=text/javascript>
function deshabilitarBoton() {
document.getElementById("boton").style.display = 'none';
document.getElementById("envio").innerHTML ="<br><img src='img/loading.gif' width='16' height='16' border='0'>Generando...";
return true;
}
</SCRIPT>
<title>untitled</title>
</head>
<body>
<form name="form" action="ok.do" method="post" >
<table>
<tr>
<td>Fecha inicio:</td>
<td><input type="TEXT" name="fecha_inicio" id="fecha_inicio" /></td>
</tr>
</table>
<div id="boton">
<input type="submit" name="event" value="Enviar" class="button" onclick="return deshabilitarBoton()" />
</div>
<div id="envio">
</div>
</form>
</body>
</html>
Create a hidden button with id="hiddenBtn" and type="submit" that do the submit
Change current button to type="button"
set onclick of the current button call a function look like below:
function foo() {
// do something before submit
...
// trigger click event of the hidden button
$('#hinddenBtn').trigger("click");
}
<button type="submit" name="uname" value="uname" onclick="browserlink(ex.google.com,home.html etc)or myfunction();"> submit</button>
if you want to open a page on the click of a button in HTML without any scripting language then you can use above code.
I am working on a test mvc project and since it's my 1st time working in mvc environment I am almost lost and is completely different compared to asp.net web forms.
I am trying to put a textbox and a button on a form, but when I am using <%= Html.TextBox("name") %> for textbox for example, the code displays as a text on the screen and is not rendered as a textbox. When I am using html markup for textbox and button I can see the textbox but shouldn't <%= Html.TextBox("name") %> be correct way to do that?
Here is what I have here:
#{
Layout = "~/_SiteLayout.cshtml";
Page.Title = "Welcome to my Web Site!";
}
<p>
ASP.NET Web Pages make it easy to build powerful .NET based applications for the web.
Enter your name: <%= Html.TextBox("name") %>
<input id="Text1" type="text" />
<input id="Button1" type="button" value="button" />
</p>
Which way should I go, can I go with the standard html format or what am I doing wrong that the textbox from <%= Html.TextBox("name") %> doesn't get displayed?
Thanks in advance, Laziale
You are using ASPX syntax. For Razor, it would be something like this:
#Html.TextBox("TextBoxName")
So your code would look like:
<p>
ASP.NET Web Pages make it easy to build powerful .NET based applications for the web.
Enter your name:
#Html.TextBox("name")
<input id="Button1" type="button" value="button" />
</p>
In addition to the previous answers, if you are referencing a Model on your View page, then you can use the Razor HTML Helpers with Lambda expressions.
Updated Example (This update is in response to the Laziale's comment):
In your Models directory you have a User class:
namespace MvcApplication.Models
{
public class User
{
public string Name { get; set; }
}
}
In your Controllers directory, you have a UserController:
namespace MvcApplication.Controllers
{
public class UserController : Controller
{
//
// GET: /User/
public ActionResult Index()
{
return View();
}
}
}
In your Views directory, you have a sub-directory named "User" which contains an "Index.cshtml" file:
#model MvcApplication.Models.User
#using (Html.BeginForm())
{
#Html.TextBoxFor(x => x.Name)
<input type="submit" />
}
MVC/Razor will create the following HTML:
<html>
<head>...</head>
<body>
<form action="/User" method="post">
<input id="Name" name="Name" type="text" value="" />
<input type="submit" />
</form>
</body>
</html>
You use the Razor syntax which is denoted using # at the start:
#Html.TextBox("name")