First let me set the situation.
I am writing a simple client html page and a simple server side program.
In detail, the page has a submit button to POST some data to the server program.
The problem is that any time I test the page to push the submit button ,the browser displays the new page which displays only the return message my server program returned.
How can I modify the html or the server side program so that the browser keeps the page unchanged before after the submit button is pushed.
I know an easiest way ; letting the sever program returns the same string as the client html page.
Thank you in advance.
In a regular form submission, your page will be whatever the server sends back. The form's action might be the same page, and then your server-side code can read the value of any input fields, and set the values in the response back to what they were in the request. This should result in the page looking the same as it did before the submit button was pressed. However, the page has "changed" in the sense that it was reloaded.
Alternatively, your form can make an Ajax request, which means that you'd need to use Javascript to intercept and stop the form submission, and then use additional coding to send the Ajax request, and then receive and process the response.
What you want is probably a postback:
http://en.wikipedia.org/wiki/Postback
1.) AJAX
You could use JavaScript and AJAX to POST the data.
2.) IFrame (not recommended)
You could also create a hidden IFrame and set the target attribute of the form to it.
What you want to do doesn't seem to be very clear.
If you want to submit your POST data without loading a new web page, you can use Ajax. It may be simple to do it in jQuery, and even simpler if you serialize your form data.
$('form').submit(function() {
$.post('your-post-url',$(this).serialize(),function(data) {
alert('Data posted!');
});
return false;
});
Related
I'm developing a ASP.NET Core web application where I'm using DataAnnotations to decorate my view model with validation attributes. When I open a detail page with my inputs, I see that Core added the HTML5 validation attributes to the rendered HTML (i.e. data-val="true").
However, I wrote custom client-side code when the user clicks on the Save button like this:
$(document).on("click", "#SaveAsset", function (event) {
event.preventDefault();
Asset.Save();
});
I also have a Save function defined like this:
window.Asset.Save = function () {
var postData = {
'Id': $("#Id").val(),
'SerialNumber': $("#SerialNumber").val(),
'PartNumber': $("#PartNumber").val(),
'assetTypeId': $("#AssetTypeId").val()
};
$.post('/Asset/SaveAsset', postData);
}
I need to validate on the client side first before calling $.post but I'm confused about how to do it. Microsoft shows that the unobtrusive javascript works automatically when you use it with forms. But I'm not using the HTML form element to submit my page. So how can I trigger the HTML5 validation attributes?
I added the links to jquery.validate.js and jquery.validate.unobtrusive.js. Right now, if I click the Save button the data is sent to the server and the controller checks the ModelState. But it shouldn't even be sending anything to the server. The client should stop the validation.
Should I even stop doing it this way? For example, creating my postData JSON object by getting the val() of each input.
Should I use the form element? I stopped using it because my page has hundreds of inputs so I was worried I would have problems. This way, I have control over each input.
Use a javascript solution like jQuery Validation Plugin to validate data before sending to the server. Otherwise, send the data to the server, and return a the errors with a bad request if validation fails.
Eg.
Return BadRequest(string[]{"Name is required", "Id must me a number"});
then capture the errors and shoe to the user
I am trying to submit that form on the site from java. up till now i found the POST-DATA that is send using httpFox. but the problem that the form doesn't include an action that i could use. here is the link
http://tamarod.com/index.php?page=english
the data that is sent on submit is
Member_Name=&National_ID=&governerate_id=0&district_id=&Email=&Date_Of_Birth=&Submit=I+Accept
but i tried adding this line beside the url on the browser to try it but nothing happens..
I figured out the problem. I was missing SetDoInput() and SetDoOutput() in my HttpConnection. so i can POST and GET data.
I have a page where there are several search / filter button which, when clicked, refresh the contents of a list below through AJAX.
In the process, I'm modifying history (through pushstate) so that the new filtered page is bookmarkable, and so the back button works. I'm also listening for the popstate event, to react to Back.
My code looks more or less like this:
window.addEventListener("popstate", function(ev) {
if (!window.history_ready) { return; } // Avoid the one time it runs on load
refreshFilter(window.location.href, true);
});
refreshFilter: function(newURL, backButtonPressed){
$.ajax({ url: newURL}).done( blah );
if (!backButtonPressed) {
window.history_ready = true;
history.pushState(null, null, newURL);
}
}
This works wonderfully, except for one weird case...
User is in page "A"
They click a link to go to this page that plays with history (let's call it "B")
They run a couple of filters, then press Back a few times, so they're back at the initial state of "B"
They click Back once again, which sends them back to "A"
At this time, if they press Forward, instead of making a request to the server again for Page "B", the browser simply displays a bunch of JSON code as the page contents (this JSOn is the response of one of my AJAX requests to filter stuff)
At least in latest Chrome
Why is this happening and how can I avoid it?
Chrome caches the pages you visit and when you go back or forward it uses the cache to display the page quickly. If the URLs you are using to retrieve JSON from the server by AJAX is the same one Chrome would hit, then it's possible Chrome is picking that page from the cache, which instead of being the nice HTML it's just a JSON dump.
There is a cache option for $.ajax:
$.ajax({ cache: false, url: newURL})
See http://api.jquery.com/jquery.ajax/
#pupeno is right, but to give a more solution oriented answer, you need to differentiate the JSON from HTML in the routes your server has.
I know two ways of doing this:
1) If you call /users you get HTML, if you call /users.json you get JSON.
2) If you call /users you get HTML, if you call /api/users you get JSON.
I like 1 a lot better, but it depends on the web framework if whichever is used by default or wether you configure that yourself.
1 is used in Ruby on Rails, 2 is used in other frameworks too.
I have a form at the bottom of the page. It's a normal form. I've set the action to #adding-show and the form's id is "form". The result is that the form submits to the current page (the browser doesn't send #adding-show to the server).
If the submission is invalid/fails, the form is focused and visible = good.
If the submission is valid, the server redirects the browser to the same page (to get rid of the postback), without hash, but the browser 'remembers' the hash, so the browser redirects to #adding-show at the bottom of the page.
In short: keeping the hash is good when submission is invalid/fails, but the hash shouldn't be used if submission succeeded.
The question: is there a way to do that? Redirect correctly and 'forget' the hash appropriately. Some JS is okay. I can make the server do anything.
If you like code, it's on Github.
Or:
<form id="adding-show" method="post" action="#adding-show">
I've solved it with a piece of 'conditional' JS: https://github.com/rudiedirkx/series/blob/83c74f183d4c10474e2b92d819349120ad0094b6/index.php#L627 It's only printed if the page is in postback, so the form needs to be highlighted.
The form here works fine in the browser, but for some reason I cannot submit it programmatically.
If I do not enter anything in the form in the browser then when I submit I get a 'Log-In Error'. But If I try sending a POST request to the form action url (with and without parameters) the response is the same page. Why is this?
You probably aren't accounting for all of the <input /> fields. When serializing the form, I get this list of parameters:
__EVENTTARGET=
__EVENTARGUMENT=
__VIEWSTATE=
UserLoginControl%24districtId=
UserLoginControl%24districtName=
UserLoginControl%24UserName=
UserLoginControl%24UserPassword=
UserLoginControl%24district=
districtId=
districtName=
ScreenWidth=
ScreenHeight=
FlashPlayerVersion=
Make sure you set all of them (or guess and check which ones don't mean anything).