.load() with data - javascript

I want to load data into a checkout page using .load() to load the pages in a modal window. The data that needs to be loaded is a shipping price value, that needs to be usable on the loaded page.
JS
function totalCalc() {
var shipping = ($('#shippingform input[name="shipping"]').val());
$('#cartdialog').load("/ash/shop/checkout.php",[$('#shippingform input[name="shipping"]')]);
alert(shipping);
}
CHECKOUT.PHP
$myTotal = ($subtotal + $_POST['shipping']);
I need the value which is shown through the "alert(shipping);" to be a usable value on checkout.php. You'll see I try to $_POST[] it in a php variable, but it wont work. I must be sending the data wrong...

Per the jQuery API, data sent as a query-string format string through .load() is treated as GET. Data sent as a JSON object is treated as POST. Basically, send it like this:
.load("/ash/show/checkout.php", {shipping: shipping});

As it seems you're using jQuery: http://api.jquery.com/jQuery.post/
or if you want proper control over it, use the ajax method: http://api.jquery.com/jQuery.ajax/
Alternatively, you could add the shipping cost to the URL and use $_GET

Related

Load data with AJAX only if it has not already been loaded?

I need to load data for my JavaScript app to use. I would like to load the following:
userlist JSON
milestones JSON
Tags JSON
user ACL permissions JSON
These 4 items of data from the server as JSON should be loaded using AJAX but only loaded once.
So I need code that will check to see if the data is loaded already and if it is, use it. If it is not loaded yet, it would make an AJAX request and load the data, and then use it.
I have multiple JavaScript files which need access to this data so I want to make sure that any of them can access it, and whichever once calls for it first will load it using AJAX and make it available for the other scripts to call it without making multiple repeat AJAX requests.
How could I go about this using JavaScript and jQuery?
A basic example would be super appreciated and useful. Thank you
If any of these are not set, load them using AJAX. After loading with AJAX, set these vars for the next caller to access them without a new AJAX request being made...
var userList = userJsonData;
var milestoneList = milestoneJsonData;
var tagList = tagJsonData;
var useAclPermissions = useAclPermissionsJsonData;
Just store the data in a global javascript variable, which is set to null, when your page loads. The first script which loads the data, stores it in the variable, all the other scripts try to access the content of the variable, and if not set, load it:
var milestoneData = null;
function getMilestoneData() {
if (milestoneData === null) {
//make the ajax request, and populate milestoneData variable
} else return milestoneData;
}
According to can i use you can check out localstorage aka webstorage. If you can use it, it might solve your issues. There is a jQuery plugin available. jstorage is an alternative, and has a really simple example at the bottom of the page. Hope this helps.

How to pass value to another static page via javascript?

I am trying to pass value to another page and read the value in the another page. I use only JavaScript and jQuery. Not use others language as PHP. I don't want to be as like (http://www.example.com/?value=test). I am trying to use POST or GET method.
On first page:
$.post("second_page.html",{q:"test"});
window.location.replace("second_page.html");
On second page:
var location_query = window.location.search.substring(1);
var vars = location_query.split("&");
for (var i in vars) {
var param = vars[i].split("=");
params[param[0].toString()] = param[1];
}
If I pass value as like http://www.example.com/?q=test , the second page script is read the value, but I use this line: $.post("second.html",{q:"test"}); not read.
How to pass value from first page to another static page via JavaScript or jQuery or ajax?
See this post says:
POST data is data that is handled server side. And Javascript is on client side. So there is no way you can read a post data using JavaScript.
but you can use cookies to read and store values:
<script src="/path/to/jquery.cookie.js"></script>
you can get it from here
Try with reading the documentation and see if this works for you.
Without using GET or POST you can transfer the content using HTML5 Local Storage or
Web SQL
$.post and $.get send AJAX request and waiting response on current page, you cant send params for next window.location.replace by this.
Use url get-params window.location.replace("404.html?q=404"); and look this for get params on second page.

Hide querystring in javascriptPost Method

I have following javascript :
var link = AjaxLocation + "/createDataSet.aspx";
$j.post(link, null, function() {
window.location.replace("/admin/SavedDataSet_edit.aspx?businessId="+data);
}, "html");
createDataSet.aspx page returns businessId for SavedDataSet_edit.aspx page...
whenever page redirect to SavedDataSet_edit.aspx page, querystring displays in the addressbar of the browser.
how to hide Querystring ?? and if i hide querystring from the browser then how to fetch it in the SavedDataSet_edit.aspx page??
Thanks..
There are a number of ways to achive that: you can use cookies(I wouldn't recommend) you can post to our page hidden field and then retrieve it using FormCollection property of the Request object. To post to your page you would need to craete dynamically a form that then submit it, the code would look like:
var link = AjaxLocation + "/createDataSet.aspx";
$j.post(link, null, function() {
$("<form action='/admin/SavedDataSet_edit.aspx'><input name='businessId' type='hidden' value='"+ data +"'></form>").appendTo('body').submit();
}, "html");
The only way to hide it is to pass it to SavedDataSet_edit.aspx, store it in session, then have that page redirect to itself without the querystring. Or use a different page in-between the two to save in session. Or, you could encrypt the value and pass encrypted querystring, provided data is a value coming from the server.
Make sure, even though you may do that, to check permissions on the resource to see that the user is authorized.
window.location.replace is not a POST request, so it cannot send POST data. So your choices are:
Keep using the query string route and just live with the value showing, sounds like this is not a realistic option though
Put the query string data into a form and submit the form as described in various answers to pass post data with window.location.href.
Leverage the AJAX call you are already making to createDataSet.aspx and store the value you want to retrieve on SavedDataSet_edit.aspx page by storing the businessId data in Session when you are in the createDataSet.aspx and then retrieving it from Session cache when you are in the Page_Load of SaveDataSet_edit.aspx.

How can I refresh the page after an ajax call but passing parameters as well? I.e. not full refresh

I am using ajax from JQuery. I am doing in a page that I see the results of a POST/GET having provided specific parameters as filters to the server.
Assume I have provided parameters a&b&c to the user so that I see in the page the subset of the data that these parameters hold true.
In a specific case I do an ajax call to pass a value to the server that modifies this set that I am seeing.
What I need is a way to do a refresh of the page but that will only display the new version of the current subset of data I.e. somehow refreshing passing back to the server a&b&c
Right now I am doing: window.location.reload(true); which reloads all the data and it is time-consuming to re-apply the filters manually.
How can I solve this?
Essentially what I need is not full refresh?
If you are using Ajax from jQuery and want to do a partial reload but have chosen window.location.reload, then you are doing it wrong.
Use the format
$("#someDiv").load("someUrl?a=x&b=y")
or
$.get("someUrl?a=x&b=y",function(data) { $("#someDiv").html(data)});
for example this code in the head where .parameters could be checkboxes
$(function() {
$(".parameters").on("click",function() {
var url = "someUrl.php?"+$("#myForm").serialize();
$.get(url,function(data) {
$("#someContainer").html(data);
});
});
});
You would have to return something from the server which will contain th einformation needed to update
And then update the content based on the returned data.

how to send a single element from browser to server without reload

How can I send just one element from browser to server fast and without reloading browser page?
Is there an AJAX way to do this, that is a NON-FILE method? The opposite of ".load"?
.load works great sending a single element from server to browser without page reload.
How to do the opposite direction?
Browser is JavaScript.
Server is vxworks with windmarks.
PRESENT METHOD THAT WORKS BUT RELOADS PAGE:
Presently, the browser element is and I use submit to send it to the server, but this takes too long and reloads the browser page.
The element's innerHTML contains data formatted as a vxworks WINDMARK.
(When the vxworks server receives this submission, it reads the windmark and copies it to a 'C' string for backend software to process.)
If you're using jQuery and PHP then something like this should work:
JS:
$.ajax('doServerSuff.php?action1=saveLog', function() {
// do stuff after server received the data
});
PHP (doServerStuff.php):
<?php
if ($_GET['action1'] == 'saveLog') {
//do stuff
}
?>
You can get and send data using jQuery. using something like this:
$.post('urlfromserver',browserdata,function(datafromserver){
//do stuff
})
if you let me put a little bit more, it's a good idea to use JSON to send/receive data to/from server. Having that in mind, you can do something like:
$.post('urlfromserver',{browserdata: JSON.stringify(browserdata)},function(datafromserver){
javascriptObject = jQuery.parseJSON(datafromserver)
//do stuff
})
And in your PHP code, it would be as simple as using json_encode to send data to javascript and json_decode to receive data from javascript
UPDATE
Obtaining the data in the server should be as simple as requesting the object via post or get depending on your send method, and parsing the JSON.
In PHP, this is an example of obtaining data using the above code:
$dataFromBrowser = json_decode($_POST['browserdata'])
Use $.post in jQuery to send the data.
The load intruction can also be used to transmit data to the server:
$().load("url", {limit: 25}, function(){
//transmission finished
});
In this example the parameter limit with the value 25 wil be transmitted to the server.
Taken from:http://api.jquery.com/load/
You can simply do with the ajax call like this
$.ajax({
type: "POST",
url: "yourpage.php?id=someValue",
success:function(data){
//do some stuff here
});
I got it working. Here is the corrected JavaScript, from the above answer.
Here is how to change a single element at the server.
This is also an example of how to write to a vxworks windmark string at a vxworks web server, without reloading the page.
NOTE: no URL is specified, so that the same page is used.
$.ajax({
type: "POST",
url: "?general_page_to_MM_data_1_windmark=CCCCCCCCCCCCCC",
success:function(data_from_server){
}});

Categories

Resources