Depending on the select box value, is it possible for the user to not be able to see the value in the url by GET method when the page is moved or is it possible for the user to see the value in the url?
$("#category2").on("change", function() {
sessionStorage.setItem("category2", $(this).val());
$.ajax({
url: "shereCenterPage",
type: "GET",
data: {'alignment':$("#category2").val()},
success: function(data) {
$("#slistDiv").load("shereCenterPage?alignment="+ sessionStorage.getItem("category2") + " #slistDiv");
$("#pagination").load("shereCenterPage?alignment="+sessionStorage.getItem("category2") + " #pagination");
}
});
Related
I have a ASP.net webform populated with data from a MS SQL DB, and allows you to edit values.
The web app uses a Harvest Chosen multiselect dropdown list (max=1) to select two different persons picked from the same list of information, but on two separate controls.
When I refresh the page, sometimes both controls are populated with the correct value, sometimes neither or one are. I tested in the console and it is definitely pulling the correct information from the DB, but I must be missing something relating to how these procedures are executed. I have done this work with VB.NET and ASP controllers in the past. This is my first time using AJAX and web method functions. I believe I am missing an update somewhere, or not understanding the order in which code is executed.
I tried explicitly stating the order of operations in the .aspx page, and then doing no update triggers until after all the code for the controller had been executed, but this appears to have broken both controllers (the both end up looking like normal select controllers). Apologies if my terminology is not on point, I am very self-taught. The current state of the code where I get inconsistent application
The .aspx page is as such. Each control has a set of different parameters that affect how it is populated, and what happens when it changes.
<select class="chosen-select" multiple data-placeholder="Assign a scientist" name="ChosenScientist" style="width:800px;" id="cmbChosenScientist">
<script type="text/javascript">
handleChosenControls("select#cmbChosenScientist.chosen-select");
</script>
</select>
<select class="chosen-select" multiple data-placeholder="Assign a supervisor" name="ChosenSupervisor" style="width:800px;" id="cmbChosenSupervisor">
<script type="text/javascript">
handleChosenControls("select#cmbChosenSupervisor.chosen-select");
</script>
</select>
The aspx page passes the controller name to a function which first defines all of the parameters used by the controllers.
function defineChosenControls(controller) {
switch (controller) {
case "select#cmbChosenScientist.chosen-select":
currentData = JSON.stringify({ sqlQueryName: "studyScientist" + "/" + MainContent_txbStudy.value });
populateData = JSON.stringify({ sqlQueryName: "userList" });
changeData = JSON.stringify({ strControlName: controller, arrValues: JSON.stringify($(controller).val()), strArg1: MainContent_txbStudy.value });
break;
case "select#cmbChosenSupervisor.chosen-select":
currentData = JSON.stringify({ sqlQueryName: "studySupervisor" + "/" + MainContent_txbStudy.value });
populateData = JSON.stringify({ sqlQueryName: "userList" });
changeData = JSON.stringify({ strControlName: controller, arrValues: JSON.stringify($(controller).val()), strArg1: MainContent_txbStudy.value });
break;
}
}
The function that handles the populating the options, setting the current value, and handling changes is as follows:
function handleChosenControls(controller) {
//Purpose: Any time a Chosen control is loaded, changed, etc., this is run.
defineChosenControls(controller);
$(controller).chosen({ max_selected_options: 1 });
//Script for populating the control
$.ajax({
type: "POST",
url: "ClientToServer.aspx/GetDT",
data: populateData,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
for (line of JSON.parse(response.d)) {
$(controller).append('<option value="' + line[Object.keys(line)[0]] + '">' + line[Object.keys(line)[0]] + '</option>');
}
$(controller).trigger("chosen:updated");
},
error: function (response) { console.log("ERROR: Unable to pass changed values from controller " + controller + " to server-side."); }
});
//Script for determining current value during load
$.ajax({
type: "POST",
url: "ClientToServer.aspx/GetDT",
data: currentData,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
for (line of JSON.parse(response.d)) {
$(controller).val(line[Object.keys(line)[0]]).trigger("liszt:updated");
console.log(line[Object.keys(line)[0]]);
}
$(controller).trigger("chosen:updated");
},
error: function (response) { console.log("ERROR: Unable to retrieve current value of " + controller + " from server-side."); }
});
//Script for when a value in the control is changed
$(controller).on('change', function (e) {
defineChosenControls(controller);
$.ajax({
type: "POST",
url: "ClientToServer.aspx/PassJqueryControlValue",
data: changeData,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
},
error: function (response) { console.log("ERROR: Unable to pass changed values from controller " + controller + " to server-side."); }
});
});
}
I expect both controls to have the proper value in the DB, and those values are being written in the browser console properly, but the harvest chosen controls are inconsistent.
The solution was to call the code after load.
<script type="text/javascript">
$(window).bind("load", function() {
handleChosenControls("select#cmbChosenScientist.chosen-select");
handleChosenControls("select#cmbChosenSupervisor.chosen-select");
});
I have a problem with getting items in cart, after I add an item into the cart, Ajax works perfect, then when i try to remove it from the list, first time it wont work with Ajax, if I reload the page it will work.
Ajax generate response like this:
1x ItemTitle X (remove)
When remove has /delete-from-cart/id/place_id
It only works when I reload the page, and also I have a button for coupons that is also managed to work with Ajax, but it only works after refresh.
$('.deletefromcart a').each(function(){
$('#'+this.id).on('click',function(e) {
e.preventDefault();
var id = $(this).attr('data-del');
var url = $(this).attr('href');
var place = $(this).attr('data-place');
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
url: '/delete-from-cart/'+id+'/'+place+'',
method: 'get',
data: $(this).serialize(),
success: function(data){
toastr.warning('Uspešno ste obrisali iz korpe!', 'Korpa');
$(".korpa").load(location.href + " #cartAll");
},
error: function(data){
console.log(data);
}
});
});
});
It seems like this function cant find any object to run it from ajax after I add to cart, after refresh it finds.
If you need live preview, i can make you an account.
You should bind the click event handler on each 'delete' element as,
$('body').on('click', '.deletefromcart a', function (e) {
e.preventDefault();
var id = $(this).attr('data-del');
var url = $(this).attr('href');
var place = $(this).attr('data-place');
$.ajax({
url: '/delete-from-cart/' + id + '/' + place + '',
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
method: 'get',
data: $(this).serialize(),
success: function (data) {
toastr.warning('Uspešno ste obrisali iz korpe!', 'Korpa');
$(".korpa").load(location.href + " #cartAll");
},
error: function (data) {
console.log(data);
}
});
});
Note 1: Your method of binding will attach the event handler to all .deletefromcart a elements. But the one I suggested will bind the event handler to only one element, body. This will also work on dynamically added .deletefromcart a elements.
Note 2: You can include the header values as above too.
Currently, need to click two times on the button ".radioButton" to load the two pages in the ajax success function. How can I change my code to have just one click to load the two pages?
$('.select-address').on('click', '.radioButton', function() {
var form = $('#shippingAddress');
var action = form.attr('action'),
method = form.attr('method'),
data = form.serialize();
data += '&' + form.find('button[name$=save]:first')[0].name + '=' + form.find('button[name$=save]:first').val();
$.ajax({
url: action,
type: method,
data: data,
success: function(data) {
$(".mini-billing-address").load(app.urls.miniBillingAddressURL).delay(2000);
$(".billing").load(app.urls.paymentMethodURL).delay(2000);
}
});
});
I have created Accrodions dynamically and inside each pane is a link button. I have assigned a value to the ID of the link button. what I want to accomplish is that when I click on a link button in one of my pane I want to use the ID' value as the parameter.
My Ajax:
function FireThisEvent() {
var Value;
$("lnkCopy").click(function(event) {Value = (event.target.id);})
alert(Value);
alert(lnkCopy.val());
$.ajax({
type: "POST",
url: "frmSchemeSetup.aspx/sbGetData",
data: '{sdPreNo: Value}',
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "JSON",
timeout: 10000,
success: function() {
alert("YEAH!!!");
},
error: function(xhr, status) {
alert(status + " - " + xhr.responseText);
}
});
}
How can I accomplish this?
This is where I add the event to my link button
lnkCopy.Attributes.Add("onclick", "FireThisEvent()")
I manage to get my Ajax to call my WebMethod with the help of this following post.
I am able to get jqGrid display my data. When I do multi-select and submit the form (jqGrid is obviously inside the form) then I am not able to get the selected rows in Spring mvc controller.
Here is my onClick event
$("#GetDataDetailsLink").click( function() {
var selectedRows;
selectedRows = jQuery("#DataList").jqGrid('getGridParam','selarrrow');
var dataToSend = JSON.stringify(selectedRows);
alert("dataToSend is =" + dataToSend);
alert("selectedRows is =" + selectedRows);
//non-ajax submit
var url = "/underwriting-ui-web/taskDetail" + "?selectedTasks="+selectedRows;
$("#DataGridForm").attr("action", url);
$("#DataGridForm").attr("method", "get");
alert("action url is = " + $("#taskGridForm").attr("action"));
$('#DataGridForm').submit();
//ajax way of submiting
/*
$.ajax({
url:'/dataDetail',
type: 'POST',
contentType: 'application/json; charset=utf-8',
data: dataToSend,
dataType: 'json',
success: function (result) {
alert('success: ' + result.result);
}
});
return true;
*/
});
Some how jqGrid is overwriting my url and writing it's own url something like this
http://localhost:8080/myProject-ui-web/DataDetail?jqg_taskList_8=on&jqg_taskList_9=on
Instead of
http://localhost:8080/myProject-ui-web/DataDetail?selectedTasks=8,9
In ajax submit it is working. But I wanted it in non-ajax submit.
Any idea why this is not working in non-ajax submit?