It has been a while since I last made a website with JQUERY-UI. I am have a aspx page, and I am trying to add a popup modal on click of
but it triggers a "submit" when I click the button, how do I prevent the submit? It displays the popup for 2 seconds and then "submit" occurs.
here is the html code
<div id="dialog-form" title="Create new user">
<p class="validateTips">All form fields are required.</p>
<form>
<fieldset>
<label for="name">Name</label>
<input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all">
<label for="email">Email</label>
<input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all">
<label for="password">Password</label>
<input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all">
</fieldset>
</form>
</div>
<div id="users-contain" class="ui-widget">
<h1>Existing Users:</h1>
<table id="users" class="ui-widget ui-widget-content">
<thead>
<tr class="ui-widget-header ">
<th>Name</th>
<th>Email</th>
<th>Password</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>john.doe#example.com</td>
<td>johndoe1</td>
</tr>
</tbody>
</table>
</div>
<button id="create-user">Create new user</button>
You can prevent submit action -
$('form').on('submit',function(e){
e.preventDefault();
});
In you Jquery code where you are setting the popup write
return false in the end... Thank you
Simplest way is to return false OnClientClick, <asp:Button OnClientClick="return false;"></button>.
Add the type attribute in the button, type="button". By default it is submit
Related
I have a form designed with a button which should call a stored procedure. For now, I just want the button to display text in a textbox (just to make sure the button is working). However, I cannot get it to fire the button_click event.
Here is what I have:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div class="container-fluid">
<section class="container">
<div class="container-page">
<div class="col-md-6">
<h3 class="dark-grey">Registration</h3>
<div class="form-group col-lg-12">
<label>Username</label>
<input type="" name="" class="form-control" id="" value="">
</div>
<div class="form-group col-lg-6">
<label>Password</label>
<input type="password" name="" class="form-control" id="" value="">
</div>
<div class="form-group col-lg-6">
<label>Repeat Password</label>
<input type="password" name="" class="form-control" id="" value="">
</div>
<div class="form-group col-lg-6">
<label>Email Address</label>
<input type="" name="" class="form-control" id="" value="">
</div>
<div class="form-group col-lg-6">
<label>Repeat Email Address</label>
<input type="" name="" class="form-control" id="" value="">
</div>
<div class="col-md-6">
<h3 class="dark-grey">Terms and Conditions</h3>
<p>
By clicking on "Register" you agree to the Terms and Conditions.
</p>
<button type="submit" class="btn btn-primary" onclick="btnSumbit_Click">Register</button>
<br />
<br />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</div>
</div>
</section>
</div>
</form>
</body>
</html>
My c# code is:
protected void btnSumbit_Click(object sender, EventArgs e)
{
TextBox1.Text = "Registered";
}
Any idea why this will not work?
My guess is that you are getting a normal <button> mixed up with an <asp:Button>.
Your current implementation wants to run a javascript function name btnSubmit_Click and does not have any connection to your C# code-behind.
...
<asp:Button type="submit" CssClass="btn btn-primary" OnClick="btnSumbit_Click" runat="server">Register</asp:Button>
...
I haven't been able to test if it works myself.
If you need to use an html button, instead of an ASP Button control (for instance, if you need something other than text in the button), you can still do it like this (using runat=server and OnServerClick):
<button runat="server" type="button" id="updateButton" onserverclick="UpdateEmail_Click" class="btn btn-success btn-block" title="<%$ Resources:UserMessages, UpdateCaps %>"><asp:Localize ID="Localize5" runat="server" Text="<%$ Resources:UserMessages, UpdateCaps %>"></asp:Localize></button>
If you're using a standard HTML button, you need to:
Add runat="server" to your button.
Set your button to use onserverclick instead of onclick.
http://msdn.microsoft.com/en-us/library/system.web.ui.htmlcontrols.htmlbutton.onserverclick(v=vs.110).aspx
So:
<button runat="server" class="btn btn-primary" onserverclick="Method_Name"...
Alternatively, you can use Bootstrap classes with the <asp:Button... tags as well. You'll simply apply them to an attribute called CssClass instead of `class'.
So:
<asp:Button type="submit" runat="server" CssClass="btn btn-primary" OnClick="Method_Name"...
I am adding to a list of elements through an ajax call. The ajax call sends information to controller, controller adds everything to database, then grabs all the items for the list from the database, adds the items to a view model, then returns a partial view with the model. I clear the div container for the list then add the returning HTML.
$('#container').empty().html(result);
My problem is, in the HTML, I have Kendo Datepickers. The page loads fine, and if I do a refresh everything is fine. But right after the Ajax call, the Kendo Datepickers are not there. I debugged and got the result HTML from the ajax call and the following is what is showing for the datepickers:
jQuery(function(){jQuery("#dueDate0").kendoDatePicker({"format":"M/d/yyyy","min":new Date(1900,0,1,0,0,0,0),"max":new Date(2099,11,31,0,0,0,0)});});
the 'dueDate0' is obviously the ID of the element, but it should not be zero it should be an actual ID number ( ex. 12 ). When I look at the HTML after the AJAX call, the datepickers are just input elements with a date type.
Any suggestions on what to do?
Thanks
EDIT: Here is the HTML that gets return in the AJAX call.
<div id="accordion">
<div class="ItemList">
<table class="tblPriorityElement">
<tr>
<td class="tdPrioritySelect">
<div class='handle'><span class='ui-icon ui-icon-carat-2-n-s'></span></div>
</td>
<td class="tdPriorityName">fasdfasr4</td>
<td class="tblType" tabindex="0">
<span class="txtType">Project</span>
</td>
<td class="tdPriorityDate" tabindex="0">
<time>10/8/2013</time>
</td>
<td class="tdAllocation" tabindex="0">
<span class="txtAllocation">0 hrs</span>
</td>
<td class="tdDeletePriority">;
<img src="../../Images/redx.png"/>
</td>
</tr>
</table>
<div class="content">
<form class="editItem">
<input id="ItemID" name="ItemID" type="hidden" value="0" />
<label>Name:</label>
<input class="text-box single-line" id="Item_Name" name="Item.Name" type="text" value="fasdfasr4" />
<label>Type:</label>
<input class="text-box single-line" id="Item_Type" name="Item.Type" type="text" value="Project" />
<label>Due date:</label>
<input class="k-input" id="dueDate0" name="dueDate0" type="date" value="10/8/2013" />
jQuery(function(){jQuery("#dueDate0").kendoDatePicker({"format":"M/d/yyyy","min":new Date(1900,0,1,0,0,0,0),"max":new Date(2099,11,31,0,0,0,0)});});
<br/>
<label>End Date:</label>
<input class="k-input" id="endDate0" name="endDate0" type="date" />
jQuery(function(){jQuery("#endDate0").kendoDatePicker({"format":"M/d/yyyy","min":new Date(1900,0,1,0,0,0,0),"max":new Date(2099,11,31,0,0,0,0)});});
<label>Start Date:</label>
<input class="k-input" id="startDate0" name="startDate0" type="date" value="10/8/2013" />
jQuery(function(){jQuery("#startDate0").kendoDatePicker({"format":"M/d/yyyy","min":new Date(1900,0,1,0,0,0,0),"max":new Date(2099,11,31,0,0,0,0)});});
<br/>
<input type="submit" value="save"/>
</form>
</div>
</div>
</div>
When generating the partial view,just define some kind of random id for the datepicker - for example Guid.NewGuid() or something. are you using the MVC helpers to define the datepicker?
I am building a Dashboard app in asp.net. I have placed 3 input buttons inside a div tag. When a user is moused over a table cell I would like for the buttons to show. How can I accomplish this using .css, javascript or jQuery?
My HTML looks like this:
<td id="bold_cell1" valign="top" width="33%" Height="33%">
<div id="buttonBlock">
<input type="button" id="btnAdd" value="Add" style="font-size:8px" />
<input type="button" id="btnEdit" value="Edit" style="font-size:8px" />
<input type="button" id="btnDelete" value="Delete" style="font-size:8px" />
</div>
</td>
Thanks
The old-fashioned way: CSS:
#buttonBlock input{
display:none;
}
#bold_cell1:hover #buttonBlock input{
display:block;
}
demo link
Sorry to bother, I'm fairly new to MVC3 and I've been looking for 3 days but no solution.
The problem looks like this. I have a view which has another partial view in it using #html.Partial.
In the partial view I have a double select box which allows me to move users from one side to another.
My question is when I post my main form how can I also post the information from my partial form also, more precisely the second select box data, because I've tried everything yet no success. Also here is the code, and your help is highly appreciated.
The Main View: (not copied from the beginning as I don't think it helps)
<div class="editor-field">
#Html.TextBoxFor(v => v.Voyage.DateOfArrival, new { #class = "date", id = "arrival" })
</div>
<div class="editor-label">
#Html.LabelFor(v => v.Voyage.MarginOfErrorTime, "Allowed margin of error")
</div>
<div class="editor-field">
#Html.EditorFor(v => v.Voyage.MarginOfErrorTime)
</div>
<p>
<input type="submit" value="Create" />
</p>
</div>
<div class="partial-view">
#Html.Partial("_UserAddingOptions", Model)
</div>
</fieldset>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
This is the partial view:
<script language="javascript" type="text/javascript">
$(function () {
$.configureBoxes();
});
</script>
#using (Html.BeginForm())
{
<table>
<tr>
<td>
Filter:<br />
<input type="text" id="box1Filter" style="width: 160px;" />
<button type="button" id="box1Clear">
X</button><br />
<select id="box1View" multiple="multiple" style="height: 240px; width: 200px;">
#foreach (var user in Model.Users)
{
<option>#user.FirstName #user.LastName</option>
}
</select><br />
<span id="box1Counter" class="countLabel"></span>
<select id="box1Storage">
</select>
</td>
<td style="width: 28px; vertical-align: middle;">
<button id="to2" type="button">
></button>
<button id="to1" type="button">
<</button>
</td>
<td>
Filter:<br />
<input type="text" id="box2Filter" style="width: 160px;" />
<button type="button" id="box2Clear">
X</button><br />
<select id="box2View" multiple="multiple" style="height: 240px; width: 200px;">
</select><br />
<span id="box2Counter" class="countLabel"></span>
<select id="box2Storage">
</select>
</td>
</tr>
</table>
}
I only have a controller for the main view, what viable solutions do I have to post the partial view info from (id = box2View) to the controller when I submit the main form?
Two mistakes I can see, and one advisory:
1) You have a nested form there - unless there are other views on which the partial is used to submit stuff in its own right (probably not, since you are using BeginForm it's always posting back to the current Controller/View). Get rid of the form tag on the partial view.
2) ...And this is the main issue - none of your inputs on the partial have names. If they don't have names then they don't submit anything:
<select id="box2View" name="box2View" ...
3) You're a self-confessed beginner, I know - so you'll benefit from me advising you to look over some walkthrough guides on model-binding. Manually writing out all your form elements, manually spitting out option tags etc, is unnecessary. The simple MSDN topic Models and Validation in Asp.Net MVC is worth taking a look at - in particular note the view code there - everything is done from the model, no explicit <input type="textbox" etc.
You have the submot button outside the form, either you move it into the form that is inside the partial view within the code block #Html.BeginForm() or use javascript to post the form when it is clicked on.
<input type="button" onclick="$('#someForm').submit();" /> //someForm is id of the form.
For some reason both the Get and Post fire the first action.
public ActionResult Login()
{
return View();
}
[HttpPost]
public ActionResult Login(FormCollection form)
{
// Login Stuff here... never gets reached!
}
I've basically copied this directly from the MVC music store sample. Tried it in another app and it worked fine.
this is a fairly new project, used the base MVC3 project template in Visual Studio, all the default settings.
I made sure the HTML output specifies the POST method:
<form action="/Home/Login" method="post">
Here is my Login.cshtml
#{
ViewBag.PageTitle = "Login";
}
<section id="index">
<header>
<h2>Login</h2>
</header>
<content>
#using (Html.BeginForm("Login", "Home", FormMethod.Post))
{
<panel id="login">
<table>
<tr>
<td>Email:</td>
<td><input name="Email" /></td>
</tr>
<tr>
<td>Password:</td>
<td><input name="Password" type="password" /></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="Login" /></td>
</tr>
</table>
</panel>
}
</content>
</section>
After I submit the form I see this URL in my browser:
http://localhost:51606/Home/Login?Email=me#email.com&Password=mypass
Those fields should not be in the URL! Why on earth is my form getting converted to a GET request?
Looking at the HTML output some more, I spotted another form tag surrounding my form.
Turns out someone (me) put a form tag in the Views/Shared/_Layout.cshtml, which is the default shared layout.
bah, figures after typing in the question here I would find the problem.
I just added method="post" action="" into form tag and it worked.
#{
ViewBag.Title = "Add New Entry";
}
<h2>Add New Entry</h2>
<form method="post" action="">
<fieldset>
Please enter your name: <br />
<input type="text" name="Name" maxlength="200" />
<br /><br />
Please enter your message: <br />
<textarea name="Message" rows="10" cols="40"> </textarea>
<br /><br />
<input type="submit" value="Submit Entry" />
</fieldset>
</form>