Rerender full page using ajax - javascript

I am more backednd developer and sometimes ui things confuding me.
I have html form
<form action="getNewPage">
...
<input type="submit'>
</form>
getNewPage returns html page
when I click on submit
Then page reloads and html returned from getNewPage renders on this page.
How can I achieve it using ajax?
Is it possible?
P.S.
I just want to know

You can use the jQuery (the JavaScript framework) for it.
Example:
// #theForm - form id
$.get('server.php?' + $('#theForm').serialize());
$.post('server.php', $('#theForm').serialize());

Related

Make Post Api Call from HTML

I want to make a post API call from a anchor HTML tag and URL will be included in the href.
How can i attach the body parameters.
<a href='http:/test_url:5002/api/GetFile'></a>
And in this I want to send the body parameters in the call as well.
I want to find a way to include this in the html tag itself, not in the javascript file.
Help will be appreciated.
Links are designed to GET a URL. You cannot make a POST request directly with them.
Use a form with a submit button instead.
Thats what forms are for. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form
Just create a form with a submit button. You can also specify if you want to open the requested URL in a new tab with the target attribute.
This is a way you could do it
<form method="POST" action="/api/PostFile">
<!-- with input in between -->
<!-- and a submit button-->
</form>
there's only one way for you to POST data with a link... you would need to wrap the code in a <form> and use that link to submit the form, for example:
<form id="frm" ation="http:/test_url:5002/api/GetFile">
<input type="hidden" name="param1" value="value_for_param1" />
...
...
</form>
any input can be used to append parameters to the <form>, as an example, the hidden is used
now, remember that you shouldn't use http:/test_url:5002 just minimize to /api/getfile or you would most likely get caught into CORS issues

Sending data to php script without ajax

I am required to send data from an html page, via input elements to a php script and I cannot use ajax for some reason. How to accomplish this?
My code is something like this:
HTML:
First Name : <input type"text" name="first_name">
<br><br>
Last Name : <input type"text" name="last_name">
<br><br>
<button id="submit_btn">Submit</button>
Now, I want the javascript to be something like :
function redirect_from_here() {
close(); //close the current window
window.location='./phpfile.php'; //load the new page which will process the data sent to it.
}
My question is how do I send the value in the input elements in the HTML portion, as data to be processed, to the php script (phpfile.php in this case).
Please note that I prefer not to use html form for doing the job.
You are using HTML form as there are input fields in you code.
Inputs are part of a form and should be wrapped by a form element
Why using JS for submitting the form when you can use <form action='script.php'.. for that?
I suggest that you revise your requirements instead of trying to come up with a hackish way of how to send the data..
Just submit a form with action="phpfile.php"
if not interested with html,
then in the window location bind the values as a GET form method do

Yahoo Merchant Store Catalog Tags Insert Dynamically with Javascript, Jquery, or Ajax

I opened up a yahoo store through their Merchant Service. They have a pretty good store catalog that I have used on a business site that I own. I like it so I decided to use the service again on another business I own. I got the site built but have ran into a few issues with calling the Yahoo Catalog Tags. The tags are basically comments. EX: (<!--#ystore_order id=item_id -->). When the site is loaded it is parsed and the page loads the product details in place of this tag/comment.
I can get everything to work except for the action attribute of my form.
I have tried a bunch of things but I cannot seem to get the action set for my form. If I hard code the tag then it works fine but obviously if I did that then I would have to create a page for every single product.
My form:
<div id="list">
<form method="post">
<input id="btnSubmit" type="submit" value="Add To Cart">
</form>
</div>
Trying to add the comment/tag to form action attribute. I've done it this way(below) and also by getting rid of the variable and just paring the url in the jquery attr function.
<script language="javascript">
$.ajaxSetup({cache: false});
$(document).ready(function(){
//Get URL from URL Query String.
var obj = getUrlVars()["Object"];
//Set form action attribute
$('form').attr('action', '<!--#ystore_order id='+ obj +' -->');
});
</script>
I've also tried creating the form dynamically.
<script language="javascript">
$.ajaxSetup({cache: false});
$(document).ready(function(){
//Get URL from URL Query String.
var obj = getUrlVars()["Object"];
var new_form = '<form method="post" action="<!--#ystore_order id='+obj + ' -->">' +
'<input type="submit" value="Add To Cart" id="btnSubmit">' +
'</form>';
$('#list').append(new_form);
});
</script>
I have tried to escape some characters but have had no success there either.
"\<\!--#ystore_order id='+obj + ' --\>"
I know the issue has something to do with the comment syntax but if I can add it manually then I should be able to do it dynamically. I know this is a hard one to test but if anyone thinks they may have a solution I would be happy to set up an ftp account on my site so you can test and I will provide the product ID's for testing. I've fought with this for about 30+ hours.
Yahoo store tags are populated server-side. Adding a store tag on the client side using Javascript won't do anything, because the code that recognizes the store tag and appends the appropriate html will never see the tag you drop in on the client side. There's no client-side solution possible
The best solution here would be to write a server side program to populate a template with the appropriate tag in response to http requests. I'm not super-familiar with the Yahoo store, so I don't know what the best language for this would be, but it would be a very simple program given how straightforward it sounds like your template is. Since this is already embedded in a site you own, I'd just use whatever backend language you are already working in.
Once you have a server side script that executes and returns the html you need, you could use AJAX to populated it with the appropriate product details as needed.

Can i use JS to replace a GET-parameter with a Post in a link?

I'm working with an old ASP WebForms page in which there is a link which opens in a new windo using javascript. This link includes a GET-parameter, like this:
<href="javascript:window.open(http://myurl.com?MyId=123).focus()">
Search for object
</a>
What I would like to do is replace this GET-parameter with a Post-variable in order to avoid the value of MyId being stored in the browser-history. Possibly something like:
<input type="hidden" id="MyId" name="MyId" value="123">
<a href="submitSearchCriteria()">
Search for object
</a>
Note: Since this is a webforms page, the whole contents of the page is within a pair of <form>...</form> tags which post back to the page itself, and I don`t want to mess with these. The page I would like to link to is another page.
My question: Is there some fairly simple, clean and safe way to pass along a Post-variable from within a link like this? I would prefer to do this without including any third-party java script libraries if possible (I want to minimize the necessary changes to an aging system).
Any ideas?
Add your MyId in your form:
<input type="hidden" id="MyId" name="MyId" value="123">
Then your hyperlink:
Search for object
Then use javascript to change your form action:
function submit(){
[Your Form].action = "[Your Action]";
[Your Form].submit();
}
The form submits but as the page refreshes, the form action goes back to what it was before. But this could depend to where you point back your new action. You could add something to handle the response. This is the easiest solution if you ask me. But for the cleanest, you should try reading about AJAX.

Passing variables in URL

I have an address book widget that shows if there are contents.
If there are no contents, an add button will show up. Upon pressing the add button, it will redirect to another page which will show the form.
The initial design of my website is as follows:
When the user click the add button, it will direct to a page using javascript function:
document.location.href="address?addOnly=true";
The form will display.
If successful, there are $.post that will change the div only that will enable user to do CRUD in the address book.
The problem with the variable inside the url which is address?addOnly=true is that when the user refresh it, it will always shows the add form.
That's why i've decided to hide the implementation using $.post
$.post('address', {"listEmty":true}, function (data) {
window.location = "address";
});
The problem with this is that it can't pass the variable at all.
My questions are:
How to handle the page refresh if using the get method, which passes the paramater in the URL,
Are there anyways in javascript/jquery to pass the variable using post method then refresh the page?
Thank you.
<FORM method="post" action="address" id="refresh" style="display: none;">
<DIV>
<INPUT type="hidden" name="addOnly" value="true">
</DIV>
</FORM>
<SCRIPT type="text/javascript">
document.getElementById('refresh').submit();
</SCRIPT>
What this does is create an invisible form, then immediately submits it. You can of course call the submit from within your other javascript code.

Categories

Resources