Basically, I have a HTML search form which allows me to search within the database. A JavaScript function is called when the form is submitted but I'm not redirected to the required page.
"Request method 'POST' not supported" is the error message received.
My code:
<form th:object="${devices}" method="POST" onsubmit="return fireAction()">
<input type="text" id="search" name="search" />
<input type="submit" value="Search"/>
</form>
function fireAction() {
var searchInput = document.getElementById('search').value;
var searchFilter = document.getElementById('deviceAttributes').value;
var checkbox = document.getElementById('lastEntry').checked;
alert(searchInput + " " + searchFilter + " " + checkbox);
if (searchInput == "" || searchInput == null) {
alert("Search field cannot be null.");
return false;
} else if (checkbox) {
window.location.href = '/current/' + searchInput
+ '/filter/' + searchFilter;
} else {
window.location.href = '/showForm/' + searchInput
+ '/filter/' + searchFilter;
}
}
#RequestMapping(value = "/showForm/{keyword}/filter/{searchFilter}", method = RequestMethod.POST)
public String showForm(#PathVariable("keyword") String keyword,
#PathVariable("searchFilter") String searchFilter, Model model) {
Devices devices = new Devices();
devices.setSearch(keyword);
devices.setSearchFilter(searchFilter);
model.addAttribute(
"addDevices",
device.findByDevicesName(devices.getSearch(),
devices.getSearchFilter()));
return "showForm";
}
#RequestMapping(value = "/current/{keyword}/filter/{searchFilter}", method = RequestMethod.POST)
public String currentDevices(#PathVariable("keyword") String keyword,
#PathVariable("searchFilter") String searchFilter, ModelMap model) {
model.addAttribute("devices", new Devices());
Devices devices = new Devices();
devices.setSearch(keyword);
devices.setSearchFilter(searchFilter);
List<Devices> newList = device.allDevices();
ListIterator<Devices> iterator = newList.listIterator();
List<Devices> resultList = new ArrayList<Devices>();
while (iterator.hasNext()) {
Devices device = iterator.next();
if (searchLastEntry(device, keyword, searchFilter)) {
resultList.add(device);
}
}
model.addAttribute("iterator2", resultList);
return "current";
}
You don't have a return false in your javascript after executing the window.location.href - So i suspect that after the javascript executes the asynchronous GET request to window.location.href, then the function ends and control is passed back to the form, which just does the normal POST action, but you haven't defined an action URL (which explains the GET then POST requests you say you have seen in the network tab).
Aside, as mentioned in the comments, you probably shouldn't be using POST for a search form - Have a look at http://www.w3schools.com/tags/ref_httpmethods.asp
Related
I have a script that makes an ajax call to an action in the controller and save some records.
The whole process is working fine but my little issue is to redirect to another page after saving records successfully.
With my code below, the records were added successfully with an alert indicating as it is described in the code "msg + "Courses were Registered"". Rather than doing that I want it to redirect to an action.
Javascript code:
<input type="submit" value="Register Courses" id="register" class="btn btn-rose" />
<script>
$(document).ready(function () {
$("#register").click(function () {
var items = [];
$('input:checkbox.checkBox').each(function () {
if ($(this).prop('checked')) {
var item = {};
item.CourseID = $(this).val();
item.CourseCode = $(this).parent().next().html();
item.CourseName = $(this).parent().next().next().html();
item.Units = $(this).parent().next().next().next().html();
items.push(item);
}
});
var options = {};
options.url = "/Course/SaveCourse";
options.type = "POST";
options.dataType = "json";
options.data = JSON.stringify(items);
options.contentType = "application/json; charset=utf-8;";
options.success = function (msg) {
alert(msg + " Courses were Registered");
};
options.error = function () {
alert("Error while Registering Courses");
};
$.ajax(options);
});
});
</script>
Controller
[HttpPost]
public IActionResult SaveCourse([FromBody]List<CourseRegModel> courseIDs)
{
var user = HttpContext.Session.GetString("currentUser");
if (user == null)
{
return RedirectToAction("Login", "Account");
}
ViewBag.student = user;
var pendingPayment = (from row in _context.BursaryTransactions where row.MatricNo == user && row.ResponseCode == "021" select row).Count();
if (pendingPayment > 0)
{
return RedirectToAction("PaymentSummary", "Student");
}
var student = _context.StStudentInfo.Include(m =>m.AdmInstProgramme.AdmInstDepartment).Include(m =>m.AdmInstClassLevels).FirstOrDefault(m => m.MatricNo == user);
var session = _context.AdmInstProgrammeTypeSession.Include(m => m.AdmInstSemesters).Include(m => m.AdmInstSessions).Include(m => m.AdmInstProgramType).Where(m => m.IsActive == true).FirstOrDefault(m => m.ProgramTypeId == student.ProgrammeTypeId);
foreach (CourseRegModel courseID in courseIDs)
{
courseID.Level = student.AdmInstClassLevels.ClassLevel;
courseID.Semester = session.AdmInstSemesters.Semester;
courseID.Session = session.AdmInstSessions.SessionName;
courseID.Department = student.AdmInstProgramme.AdmInstDepartment.Department;
_context.CourseRegModel.Add(courseID);
}
int courses = _context.SaveChanges();
return Json(courses);
}
Objective is to return RedirectToAction("MyCourses","Courses"); after SaveChanges();
If you want to redirect to another action method why would you use AJAX? But I think you can work around that by performing the redirect in the client side AJAX after it is successfully receive a response you use JavaScript to do the redirect
You can simply redirect your page inside ajax's success handler,
options.success = function (msg) {
window.localtion.href = "/Courses/MyCourses";
// or window.location.href = '#url.Action("MyCourses","Courses")';
};
public ActionResult GiveTicket(Guid voteId, Guid applyId,string cptcha)
{
//檢查此票選是否允許此登入方式
var canVoteWay = _voteService.GetVoteWay(voteId);
string message = string.Empty;
string loginPath = $"{ConfigurationManager.AppSettings["DomainName"]}/Account/Login?returnUrl={Request.UrlReferrer}";
//檢查是否已登入
if (User.Identity.IsAuthenticated && WebLogic.HasValue(canVoteWay, (int)CurrentUser.LoginType))
{
// [驗證圖形驗證碼]
if (string.IsNullOrEmpty(cptcha) || cptcha != Session["VerificationCode"]?.ToString())
{
Response.Write("<script language=javascript> bootbox.alert('圖形驗證碼驗證錯誤，請重新輸入!!')</script>");
return null;
}
//var result = _voteService.GiveTicket(voteId, applyId, CurrentUser.Id, CurrentUser.LoginType);
Response.Write("<script language=javascript> bootbox.alert('投票成功')</script>");
return null;
}
message = _voteService.VoteWayString(canVoteWay, "請先登入，才能參與投票!! 投票允許登入的方式:");
Response.Write("<script language=javascript> if (confirm('" + message + "',callback:function(){})){window.location = '" + loginPath + "'}</script>");
return null;
}
My ajax code
function GiveTicket(applyId) {
var voteId = $('input[name="Id"]').val();
var captcha = $('input[name="Captcha"]').val();
$.ajax({
url: '#Url.Action("GiveTicket", "Vote")',
data: { applyId: applyId, voteId: voteId, cptcha: captcha },
type: 'Get',
success: function (data) {
console.log(data);
//bootbox.alert(data);
}
});
}
Like you see. I have many condition. SomeTime I need to pass alert or confirm to
web client . when I pass confirm. if user click Yes. I need to redirect Url.
So that I decide to write string to web client.
The problem is How I can just execute string from MVC like alert,confirm...
hello hopefully this post help you
you can passe your string to view using viewbag or viewModel as you like then in this view you put your redirect logic using razor.
I am trying to open new window using window.open(actionUrl)
the actionUrl is compose form the action address and url as parameter.
so eventually the actionUrl is :
"/Default/Details?url=http://www.someaddress.com?a1=1&a2=2&a3=3"
However in the action the url i get is :
"http://www.someaddress.com?a1=1"
I do not get "&a2=2&a3=3" parameters
Here is the relevant view code:
<div>
<input type="button" value="test" id="btnTest" />
</div>
<script>
var vurl = '#Url.Action("Details", "Default")';
$(function () {
$("#btnTest").click(function () {
var url = "http://www.someaddress.com?a1=1&a2=2&a3=3";
vurl = vurl + url;
window.open(vurl);
});
})
</script>
and this is the controller and action
public class DefaultController : Controller
{
// GET: Default
public ActionResult Index()
{
return View();
}
// GET: Default/Details/5
public ActionResult Details(string url)
{
return View();
}
}
You need to use the encodeURIComponent function on the url parameter's value:
var actionUrl = '/Default/Details?url=' + encodeURIComponent('http://www.someaddress.com?a1=1&a2=2&a3=3');
The &a2=2&a3=3 part was actually part of the /Default/Details URL, not the http://www.someaddress.com one. Now that the inner URL is URI encoded, it should work.
Make sure to decode the value when using the url parameter though, using decodeURIComponent:
var urlMatch = location.search.match(/url=(.*)&?/);
if (urlMatch) {
var decodedUrl = decodeURIComponent(urlMatch[1]);
// do something with the decoded URL...
}
EDIT
For the first part (URI encoding) and based on your code, you should use it this way:
<div>
<input type="button" value="test" id="btnTest" />
</div>
<script>
var vurl = '#Url.Action("Details", "Default")';
$(function () {
$("#btnTest").click(function () {
var url = "http://www.someaddress.com?a1=1&a2=2&a3=3";
vurl = vurl + encodeURIComponent(url);
window.open(vurl);
});
})
</script>
As for the ASP.NET part and the use of the string url parameter, I'd suggest checking the following post: using decodeURIComponent within asp.net as I'm not familiar with this environment.
My problem is that the backing bean method #{infomappeController.sendInfomappeAsMail} is immediately called and doesn't wait for the javascript function createpdfresource() to return the correct parameter (which should be an url).
My Question:
How could you assure that my backing method waits until the javascript method has finished ?
Could you do it via JSF ?
xhtml file (code snippet):
<!-- TODO: backing bean method-call doesn't wait for javascript function to finish which as a result returns an incomplete url -->
<h:commandButton class="sendInfoMapAsEmail noMarginLeft"
id="sendInfoMapAsEmail"
value="Als Email versenden"
actionListener="#{infomappeController.sendInfomappeAsMail}">
<f:ajax render=":emailStatusMessage" />
</h:commandButton>
javascript method:
$(".sendInfoMapAsEmail").click(createpdfresource);
function createpdfresource(e){
e.preventDefault();
var cleanurl = $('.cleanurl').attr('href');
var clientId = $('.clientId').val();
var formId = "#"+clientId+"\\:infofolderForm";
var seralizedform = $(formId).serialize();
var pdfurl = cleanurl + "&" + seralizedform + "&contentType=pdf";
var hiddenResource = formId + '\\:pdfresource';
$(hiddenResource).val(pdfurl);
}
backing bean method:
public void sendInfomappeAsMail() {
//Mailer mailer = new Mailer();
FacesContext context = FacesContext.getCurrentInstance();
String beraterEmail="";
try {
beraterEmail = themeDisplay.getRealUser().getEmailAddress();
} catch(Exception e){
logger.error("sendInfomappeAsMail: no EmailAdress for "+themeDisplay.getRealUser(),e);
}
mailer.sendMail(beraterEmail, pdfresource);
if(mailer.isWasEmailSentSuccessfully()) {
FacesMessage successMessage = new FacesMessage(FacesMessage.SEVERITY_INFO,"Infomappe erfolgreich versendet.", null);
context.addMessage(null, successMessage);
} else {
FacesMessage errorMessage = new FacesMessage(FacesMessage.SEVERITY_ERROR, "Fehler beim Versenden der Infomappe.", null);
context.addMessage(null, errorMessage);
}
}
Thanks a lot for your help.
We are getting a issue wherein while submitting a form via javascript one of the parameters (invoiceCodes) is not sent to the server. Below is the snippet of the javascript code.
The flow is as follows. When user clicks on "Print" button validateTransition() method is called in which we make a ajax call. After response of that ajax we call couponPopup(url, invoiceCodes). In this function we submit newWinForm but sometimes invoiceCodes parameter is sent empty.
Also checkForInvoiceCode is true in this case which require user to input invoice codes
Is there anything wrong in the manner in which we are putting values in the form which may lead to invoiceCodes being not sent sometimes.
function couponPopup(url, invoiceCodes)
{
var selectedOrders = '';
$(".selectedOrder:checked").each(function() {
selectedOrders += $(this).val() + ',';
});
var frm = document.forms["newWinForm"];
frm.action = url;
frm.selectedShipments.value= selectedOrders;
frm.invoiceCodes.value = invoiceCodes;
console.log("Selected orders are "+selectedOrders);
console.log("Invoice codes with them in order are "+invoiceCodes);
document.getElementById("hiddenInvoiceCodes").value=invoiceCodes;
document.getElementById("hiddenselectedShipments").value=selectedOrders;
frm.submit();
return false;
}
function validateTransition() {
$('#statusChangeSuccess').hide();
$('#statusChangeFail').hide();
var selectedOrders = '';
var invoiceCodes = '';
var flag = 0;
var spaceError = 0;
var commaError = 0;
$(".selectedOrder:checked").each(function() {
selectedOrders += $(this).val() + ',';
<c:if test="${checkForInvoiceCode}">
var emptyPattern = /^\s*$/;
var commaPattern = /,/;
var inv_code = $("#invoice-code-" + $(this).val()).val().trim();
if (emptyPattern.test(inv_code)) {
spaceError = 1;
flag = 1;
}
if (commaPattern.test(inv_code)) {
commaError = 1;
flag = 1;
}
invoiceCodes += inv_code + ",";
</c:if>
});
if(selectedOrders=='') {
alert('Please select at least one order');
return false;
}
if ( flag ) {
if ( commaError ) {
alert('One or more specified codes have comma, please remove comma from them');
}
if ( spaceError ) {
alert('One or more specified codes has been left blank, please fill them up');
}
if ( !commaError && !spaceError ) {
alert('Please contact tech');
}
return false;
}
var inputdata = {"selectedShipments" : selectedOrders,
"statusCode" : "PRINT"
};
//this is where we are making an ajax call
jQuery(function($){
setTimeout(function(){
var ajaxUrl = '/product/update/';
$.ajax({url:ajaxUrl, type: "POST", dataType: 'json', data:inputdata , success: function(data) {
if(data['status'] == 'success') {
//couponPopup function is called where form is submitted
couponPopup("${path.http}/product/print/", invoiceCodes);
$('#statusChangeSuccess').html(data['message']).show();
$(".selectedOrder:checked").each(function() {
$("#row-" + $(this).val()).remove();
});
} else{
$('#statusChangeFail').html(data['message']).show();
}
}});
}, 10 );
});
return false;
}
<form id="newWinForm" name="newWinForm" action="" method="post" target="_blank" >
<input type="hidden" id="hiddenselectedShipments" name="selectedShipments" value="" />
<input type="hidden" id="hiddenInvoiceCodes" name="invoiceCodes" value="" />
</form>
Controller for the form. Invoice codes is sometimes empty even when we are sending it from client side.
#RequestMapping("/product/print")
public void printSelectedPendingOrders(#RequestParam("selectedShipments") String selectedShipments,
#RequestParam(defaultValue = "", value = "invoiceCodes", required = false) String invoiceCodes, ModelMap modelMap, HttpServletResponse httpResponse)
throws IOException, DocumentException, ParserConfigurationException, SAXException {