jQuery: Clearing Form Inputs on Html.TextBox and then refreshing page - asp.net-mvc

I have found this JSFiddle that clear text from input? http://jsfiddle.net/xavi3r/D3prt/
How do I use this for Html.TextBox in razor View in MVC and then refresh page?
So far my solution is this (it works):
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<script type="text/javascript">
$(function () {
//this part clean text from textboxes
$('#button').click(function () {
$(':input', '#form')
.not(':button, :submit, :reset, :hidden')
.val('')
.removeAttr('checked')
.removeAttr('selected');
});
//this part submit my search button - it is like refresh button, returns state as it was in begin - this is the same as I click on search without entering parameters
$('#button').click(function () {
document.myForm.onSubmit.click();
});
});
</script>
using (Html.BeginForm("Index", "LoginUser", FormMethod.Get, new { id = "form", name = "myForm"}))
{
<div class="form-group">
#Html.TextBox("order", Model.Search.Order, new { placeholder="Luška št.", id ="quantity1", #class="quantity form-control"})
<button type="submit" class="btn btn-primary" name="onSubmit">Search</button>
<input type="button" class="btn btn-primary" value="Clear" id="button" />
</div>
}
In _Layout:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.validate.min.js"></script>
<script type="text/javascript" src="~/scripts/jquery.validate.unobtrusive.min.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script type="text/javascript" src="~/Scripts/bootstrap.min.js"></script>
Realy thanks for help...

Your view will be rendered like this as html:
<div class="form-group">
<input type="text" name="order" id="quantity1" placeholder="Luška št." class="quantity form-control" value="SomeValue" />
<input type="button" />
</div>
and you can do it with this code:
$(function () {
$('.form-group input:button').click(function () {
$('input#quantity1').val('');
});
});

Related

using pageinit() instead of document.ready

I tried many ways of using my app as a jquerymobile but didn't succeed.
I know I have to use pageinit instead of document ready. Can you please show me the right way to do it. When I add it, it just simply not working. Here is code
<head>
<link rel="stylesheet" href="https://s3.amazonaws.com/codiqa-cdn/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script>
if (navigator.userAgent.match(/Android/i)) {
window.scrollTo(0, 1);
}
</script>
<script src="https://s3.amazonaws.com/codiqa-cdn/jquery-1.7.2.min.js"></script>
<script src="https://s3.amazonaws.com/codiqa-cdn/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
try {
$(function() {});
} catch (error) {
console.error("Your javascript has an error: " + error);
}
</script>
<script>
$(document).ready(function() {
$("form").change(function() {
$.post("test2.php",
$("#myform").serialize());
});
});
</script>
</head>
<body>
<div id="my-page" data-role="page">
<form name="myform" id="myform" method="get">
<label for="DogalGaz">Doğal Gaz</label>
<select name="DogalGaz" id="DogalGaz" data-theme="" data-role="slider">
<option value="">Seçiniz</option>
<option value="off">Off</option>
<option value="on">On</option>
</select>
</form>
</div>
What i did was, just simply send the form data to test2.php file and process. Thank you for any help
The Flip Toggle Switch should have 2 options instead of 3.
Try this:
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="https://s3.amazonaws.com/codiqa-cdn/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script>
if (navigator.userAgent.match(/Android/i)) {
window.scrollTo(0, 1);
}
</script>
<script src="https://s3.amazonaws.com/codiqa-cdn/jquery-1.7.2.min.js"></script>
<script src="https://s3.amazonaws.com/codiqa-cdn/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
$(document).on('pageinit', function() {
$("#myform").change(function() { // use #myform instead of form to only serialize one form.
$.post("test2.php",
$("#myform").serialize());
});
});
</script>
</head>
<body>
<div id="my-page" data-role="page">
<!-- include action and method in case javascript handler fails -->
<form name="myform" id="myform" action="test2.php" method="post">
<label for="DogalGaz">Doğal Gaz. Seçiniz: </label>
<select name="DogalGaz" id="DogalGaz" data-theme="" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</form>
</div>
</body>
</html>
This will post to test2.php every time you switch the toggle.

jQueryMobile: Button action not getting called

The code below tries to implements a button action in jQueryMobile,but it is not working for me. Please let me know where I am wrong.Everything is written in a HTML file.
I am facing some problem in providing my code here. Here is what I am trying.
In standard HTML format, I am writing the below code between script tags
$('#theButton').click(function() {
alert('The Button has been clicked,');
});
And in the body tag ---
<div data-role="page">
<div data-role="content">
<input type="button" id="theButton" name="theButton" value="The Button">
</div>
But the action is not getting called.
EDIT: Please try the code below:
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script language="javascript">
$(function() {
$('#theButton').on('tap click',function(event, ui) {
alert('The Button has been clicked');
});
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="content">
<input type="button" id="theButton" name="theButton" value="The Button">
</div>
</div>
</body>
</html>

jquery use of :last and val()

I'm trying to run the code from http://jsfiddle.net/ddole/AC5mP/13/ on my machine and the approach I've use is below or here.
Do you know why that code doesn't work on my machine. Firebug doesn't help me and I can't solve the problem. I think that I need another pair of eyes :(((
In firebug,console tab i don't get any error message. The problem is that I can't get the value of that input from the dialog box, after I press save button. The $('input:last').val() seems to be empty
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Modal form</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.21.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
<script type="text/javascript" >
jQuery(function($) {
$('.helpDialog').hide();
$('.helpButton').each(function() {
$.data(this, 'dialog',
$(this).next('.helpDialog').dialog({
autoOpen: false,
modal: true,
width: 300,
height: 250,
buttons: {
"Save": function() {
alert($('.helpText:last').val());
$(this).dialog( "close" );
},
Cancel: function() {
$(this).dialog( "close" );
}
}
})
);
}).click(function() {
$.data(this, 'dialog').dialog('open');
return false;
});
});
</script>
</head>
<body>
<span class="helpButton">Button</span>
<div class="helpDialog">
<input type="text" class="helpText" />
</div>
<span class="helpButton">Button 2</span>
<div class="helpDialog">
<input type="text" class="helpText" />
</div>
<span class="helpButton">Button 3</span>
<div class="helpDialog">
<input type="text" class="helpText" />
</div>
<span class="helpButton">Button 4</span>
<div class="helpDialog">
<input type="text" class="helpText" />
</div>
<span class="helpButton">Button 5</span>
<div class="helpDialog">
<input type="text" class="helpText" />
</div> </body>
Refer LIVE DEMO
To display the text on save, I have modified your line alert($('.helpText:last').val()); to this alert($('.helpText', this).val());
I have added one more dependencies on fiddler,
http://code.jquery.com/ui/1.8.21/jquery-ui.min.js
Now its working as expected.
HTML:
<span class="helpButton">Button</span>
<div class="helpDialog">
<input type="text" class="helpText" />
</div>
<span class="helpButton">Button 2</span>
<div class="helpDialog">
<input type="text" class="helpText" />
</div>
<span class="helpButton">Button 3</span>
<div class="helpDialog">
<input type="text" class="helpText" />
</div>
<span class="helpButton">Button 4</span>
<div class="helpDialog">
<input type="text" class="helpText" />
</div>
<span class="helpButton">Button 5</span>
<div class="helpDialog">
<input type="text" class="helpText" />
</div>
JS:
jQuery(function($) {
$('.helpDialog').hide();
$('.helpButton').each(function() {
$.data(this, 'dialog',
$(this).next('.helpDialog').dialog({
autoOpen: false,
modal: true,
width: 300,
height: 250,
buttons: {
Save: function() {
alert($('.helpText', this).val());
$(this).dialog( "close" );
},
Cancel: function() {
$(this).dialog( "close" );
}
}
})
);
}).click(function() {
$.data(this, 'dialog').dialog('open');
return false;
});
});

Ajax.BeginForm(...) not always working, full postback sometimes, using ASP.NET MVC

I cannot for the life of me figure out why this postback sometimes does an ajax one as it is supposed to and sometimes it does not. Here is the relevant code:
JS:
<html>
<head>
<title>Index</title>
<link href="/Content/screen.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 8]><link href="/Content/ie.css" rel="stylesheet" type="text/css" /><![endif]-->
<link href="/Content/plugins/fancy-type/screen.css" rel="stylesheet" type="text/css" />
<link href="/Content/plugins/buttons/screen.css" rel="stylesheet" type="text/css" />
<link href="/Content/plugins/link-icons/screen.css" rel="stylesheet" type="text/css" media="screen, projection" />
<link href="/Content/jQueryUI/css/cupertino/jquery-ui-1.8.9.custom.css" rel="stylesheet" type="text/css" />
<link href="/Content/HelpDesk.css" rel="stylesheet" type="text/css" />
<link href="/Content/droppy.css" rel="stylesheet" type="text/css" />
<link href="/Content/tablesorter.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery-ui.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
<script src="/Scripts/jquery.droppy.js" type="text/javascript"></script>
<script src="/Scripts/jquery.cascadingDropDown.js" type="text/javascript"></script>
<script src="/Scripts/jquery.tablesorter.min.js" type="text/javascript"></script>
<script type='text/javascript'>
$(function () {
$('#nav').droppy();
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#targetStartDate").datepicker();
$("#targetEndDate").datepicker();
$("#ticketsHTMLTable").tablesorter({ sortList: [[0, 0], [1, 0]] });
$(".fakeLink").mouseover(function () {
$(this).css("color", "red");
});
$(".fakeLink").mouseout(function () {
$(this).css("color", "black");
});
});
</script>
</head>
Here is my View (Razor):
#using (Ajax.BeginForm("Index", "Problem", new AjaxOptions
{
HttpMethod = "GET",
UpdateTargetId = "ticketsTable",
InsertionMode = InsertionMode.Replace
}))
{
<div class="notice">
<div class="prepend-1 span-2">
<label for="targetPriorityID">
Priority</label>
</div>
<div class="prepend-1 span-3">
<label for="targetStatusID">
Status</label>
</div>
<div class="span-3">
<label for="targetBusinessUnitID">
Business Unit</label>
</div>
<div class="span-3 prepend-1">
<label for="targetStartDate">
Start Date</label></div>
<div class="span-3 prepend-2">
<label for="targetEndDate">
End Date</label></div>
<div class="prepend-1 span-3 last">
&nbsp
</div> <div class="prepend-1 span-2">
#Html.DropDownList("targetPriorityID",
new SelectList(ViewBag.Priorities as System.Collections.IEnumerable,
"ID", "Title"), "All", new { #onchange = " this.form.submit();" })
</div>
<div class="prepend-1 span-3">
#Html.DropDownList("targetStatusID",
new SelectList(ViewBag.Statuses as System.Collections.IEnumerable,
"ID", "Title"),"All", new { #onchange="this.form.submit();" })
</div>
<div class="span-3">
#Html.DropDownList("targetBusinessUnitID",
new SelectList(ViewBag.BusinessUnits as System.Collections.IEnumerable,
"ID", "Title"), "All", new { #onchange = "this.form.submit();" })
</div>
<div class="span-3 prepend-1">#Html.TextBox("targetStartDate", "", new { onchange = "this.form.submit();" })</div>
<div class="span-3 prepend-2">#Html.TextBox("targetEndDate", "", new { onchange = "this.form.submit();" })</div>
<div class="prepend-1 span-3 last">
<input type="submit" value="Hide" />
</div>
<br />
<br />
<br />
</div>
}
<div id="ticketsTable">
#Html.Partial("_AllTickets", Model)
</div>
And finally the controller,
[HttpPost]
public ActionResult Index(int targetPriorityID = -1, int targetBusinessUnitID = -1, int targetStatusID = -1, string targetStartDate = "", string targetEndDate ="")
{
Repository<Priority> priorityRepository = new Repository<Priority>();
Repository<BusinessUnit> businessUnitRepository = new Repository<BusinessUnit>();
Repository<Status> statusRepository = new Repository<Status>();
ViewBag.Priorities = priorityRepository.GetAll();
ViewBag.BusinessUnits = businessUnitRepository.GetAll();
ViewBag.Statuses = statusRepository.GetAll();
var results = problemRepository.GetAll();
results = (targetPriorityID != -1) ? results.Where(t => t.PriorityID == targetPriorityID) : results;
results = (targetBusinessUnitID != -1) ? results.Where(t => t.BusinessUnitID == targetBusinessUnitID) : results;
results = (targetStatusID != -1) ? results.Where(t => t.StatusID == targetStatusID) : results;
results = (targetStartDate != "") ? results.Where(t => t.DateReported >= DateTime.Parse(targetStartDate)) : results;
results = (targetEndDate != "") ? results.Where(t => t.DateReported <= DateTime.Parse(targetEndDate)) : results;
if (Request.IsAjaxRequest())
{
return PartialView("__AllTickets", results);
}
return View(results);
}
Any thoughts?
I would suggest you to use normal form that will be AJAXified later:
#using (Html.BeginForm("Index", "Problem")
{
<div class="notice">
<div class="prepend-1 span-2">
<label for="targetPriorityID">Priority</label>
</div>
<div class="prepend-1 span-3">
<label for="targetStatusID">Status</label>
</div>
<div class="span-3">
<label for="targetBusinessUnitID">Business Unit</label>
</div>
<div class="span-3 prepend-1">
<label for="targetStartDate">Start Date</label></div>
<div class="span-3 prepend-2">
<label for="targetEndDate">End Date</label>
</div>
<div class="prepend-1 span-3 last">
&nbsp
</div>
<div class="prepend-1 span-2">
#Html.DropDownList("targetPriorityID", new SelectList(ViewBag.Priorities as System.Collections.IEnumerable, "ID", "Title"), "All")
</div>
<div class="prepend-1 span-3">
#Html.DropDownList("targetStatusID", new SelectList(ViewBag.Statuses as System.Collections.IEnumerable, "ID", "Title"), "All")
</div>
<div class="span-3">
#Html.DropDownList("targetBusinessUnitID", new SelectList(ViewBag.BusinessUnits as System.Collections.IEnumerable, "ID", "Title"), "All")
</div>
<div class="span-3 prepend-1">
#Html.TextBox("targetStartDate", "")
</div>
<div class="span-3 prepend-2">
#Html.TextBox("targetEndDate", "")
</div>
<div class="prepend-1 span-3 last">
<input type="submit" value="Hide" />
</div>
<br />
<br />
<br />
</div>
}
<div id="ticketsTable">
#Html.Partial("_AllTickets", Model)
</div>
and then in a separate file AJAXify it:
$(function() {
$('form :input').change(function() {
var form = $('form');
$.ajax({
url: form.attr('action'),
type: form.attr('method'),
data: form.serialize(),
success: function(result) {
$('#ticketsTable').html(result);
}
});
});
});
Another improvement I that I would suggest you is to use view models and get rid of ViewData and use strongly typed helpers.
One problem I can see is that your AJAX options in your Razor view specify the GET HTTP method, but the action filter on the controller action specifies POST.
I wonder if Request.IsAjaxRequest() is causing the problem. I would look at removing that code and always return PartialView("__AllTickets", results); instead.

Can we Made an anchor tag autoclick in the success function of Ajax Script?

Can we Made an anchor tag autoclick in the success function of Ajax Script?
Does it Possible we Click an anchor tag through Ajax Script?
if Yes then how?I am using Ajax in asp.net MVC?
This is the Viewsource of Partial View
<script language="javascript" type="text/javascript">
$(document).ready(function(){
alert("Button clicked");
$("#bt1").click(function(){
var data2 = $('#txt2').val();
var data1 = $('#Color').val();
$.ajax({
type:"Post",
url:'/Marker/CreateMarkerjson',
data:"Color="+ data1 + "&txt2=" + data2,
success:function(result)
{
alert(result);
$get('click').click();
},
error:function(result)
{
alert("fail");
}
});
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$("#datepicker").datepicker();
});
</script>
<form action="/Marker/CreateMarkerPartial" method="post">
<fieldset>
<legend>Fields</legend>
<p>
<label for="Id" id="ID">
Id:</label>
<input type="text" id="txt1" />
</p>
<p>
<label for="CompanyName">
CompanyName:</label>
<input type="text" id="txt2" />
</p>
<p>
<label for="Color">
Color:</label>
<input id="Color" name="Color" type="text" value="" />
</p>
<p>
<input type="button" id="bt1" value="create" />
</p>
<div id="datepicker"></div>
</fieldset>
</form>
<div>
Back to List
click
</div>
Update answer. Merged the two $(document).ready functions and changed the $get('click') to $('#click'). Let's give it a try.
<script language="javascript" type="text/javascript">
$(document).ready(function () {
alert("Button clicked");
$("#bt1").click(function () {
var data2 = $('#txt2').val();
var data1 = $('#Color').val();
$.ajax({
type: "Post",
url: '/Marker/CreateMarkerjson',
data: "Color=" + data1 + "&txt2=" + data2,
success: function (result) {
alert(result);
$('#click').click();
},
error: function (result) {
alert("fail");
}
});
});
$("#datepicker").datepicker();
});
</script>
<form action="/Marker/CreateMarkerPartial" method="post">
<fieldset>
<legend>Fields</legend>
<p>
<label for="Id" id="ID">
Id:</label>
<input type="text" id="txt1" />
</p>
<p>
<label for="CompanyName">
CompanyName:</label>
<input type="text" id="txt2" />
</p>
<p>
<label for="Color">
Color:</label>
<input id="Color" name="Color" type="text" value="" />
</p>
<p>
<input type="button" id="bt1" value="create" />
</p>
<div id="datepicker">
</div>
</fieldset>
</form>
<div>
Back to List click
</div>
you can fire the click handler of the anchor tag that you want clicked.
for example:
<a id="clickme" href="somelink.html">Click me</a>
now there must be an event being fired from your ajax script on the successful completion of the request. In that function do
document.getElementById('clickme').click();

Resources