I have an issue with keeping a division active after submitting a form using AJAX. My scenario is that I have a search bar, which can take multiple types of input (Name, ID, category, etc.). Then, I have a filter bar which is basically an advanced search, it practically does the same thing but has more options like separate fields for Name, ID, Category, price range, etc. these are some important terms,
- ID: product ID
- Name: Product name
- SPL_CD: Special code assigned to every product
- ALT_NM2: Alternate name/Description
- costStart/costEnd: range search for all products whose cost price is between the range
- sellStart/sellEnd: range search for all products whose selling price is between the range
- cname: category of the product
- gname: group the product is classified under the category
I don't care much for the CSS, but the point is that, anyone using this page at client end needs to see the values inserted in the filter dropdown i.e. keeping the filter drop down visible even on page reload. After submitting the form, my entire page reloads. This makes the dropdown go hidden again. I am bad at AJAX so I do not know how to do it, any help would be appreciated.
This is the working fiddle (ignore the lack of CSS, as it is all majorly defined under a different file based on MVC approach)- Fiddle This fiddle as well, does not support keeping the division active after the form is submitted, so I am trying to switch to AJAX.
This is what my AJAX approach is, but it keeps displaying a blank instead of the table and its data.
$("#searchButton").click(function() {
var params = {
searchKeyword: $("#searchKeyword").val()
};
var form = $("#searchArea");
var url = form.attr("action") "?" $.param(params);
$.ajax({
url: url,
type: "POST",
dataType: "json",
colModel:[
{label:'ProductID', name:'ITM_CD',classes:'ITM_CD', width:40, align:"center", sorttype:"int"},
{label:'Name', name:'ITM_NM',classes:'ITM_NM',width:100, align:"center", sorttype:"int"},
{label:'Alt.name', name:'ITM_ALT_NM2',classes:'ITM_ALT_NM2', width:100, align:"center", sorttype:"string"},
{label:'Special code', name:'SPL_CD',classes:'SPL_CD', width:50, align:"center", sorttype:"int"},
{label:'Sort Order', name:'SORDER',classes:'SORDER', width:40, align:"center", sorttype:"int"},
{label:'Talent Points', name:'TPOINTS',classes:'TPOINTS', width:40, align:"center", sorttype:"int"},
{label:'Selling price', name:'SPRICE',classes:'SPRICE', width:30, align:"right", sorttype:"string"},
{label:'Cost price', name:'CPRICE',classes:'CPRICE', width:30, align:"right", sorttype:"string"},
{label: 'Category Name', name:'CNAME', classes: 'CNAME', width: 30, align: "right", sorttype:"string"},
{label: 'Group name', name:'GNAME', classes: 'GNAME', width: 30, align: "right", sorttype:"string"}
],
});
});
$("#searchButton").click(function() {
var params = {
searchKeyword: $("#searchKeyword").val(),
IDKeyword: $("#IDKeyword").val(),
NMKeyword: $("#NMKeyword").val(),
NM2Keyword: $("#NM2Keyword").val(),
SCKeyword: $("#SCKeyword").val(),
costStartKeyword: $("#costStartKeyword").val(),
costEndKeyword: $("#costEndKeyword").val(),
sellStartKeyword: $("#sellStartKeyword").val(),
sellEndKeyword: $("#sellEndKeyword").val(),
cnameKeyword: $("#cnameKeyword").val(),
gnameKeyword: $("#gnameKeyword").val()
};
var form = $("#dropDownFilter");
var url = form.attr("action") "?" $.param(params);
$.ajax({
url: url,
type: "POST",
dataType: "json",
colModel:[
{label:'ProductID', name:'ITM_CD',classes:'ITM_CD', width:40, align:"center", sorttype:"int"},
{label:'Name', name:'ITM_NM',classes:'ITM_NM',width:100, align:"center", sorttype:"int"},
{label:'Alt.name', name:'ITM_ALT_NM2',classes:'ITM_ALT_NM2', width:100, align:"center", sorttype:"string"},
{label:'Special code', name:'SPL_CD',classes:'SPL_CD', width:50, align:"center", sorttype:"int"},
{label:'Sort Order', name:'SORDER',classes:'SORDER', width:40, align:"center", sorttype:"int"},
{label:'Talent Points', name:'TPOINTS',classes:'TPOINTS', width:40, align:"center", sorttype:"int"},
{label:'Selling price', name:'SPRICE',classes:'SPRICE', width:30, align:"right", sorttype:"string"},
{label:'Cost price', name:'CPRICE',classes:'CPRICE', width:30, align:"right", sorttype:"string"},
{label: 'Category Name', name:'CNAME', classes: 'CNAME', width: 30, align: "right", sorttype:"string"},
{label: 'Group name', name:'GNAME', classes: 'GNAME', width: 30, align: "right", sorttype:"string"}
],
});
});
});
The HTML and the CSS is the same as the Fiddle.
Edit 1: Tried the Local Storage
$("#filterSearchButton").on("click", function(){
localStorage.setItem("style", $("#dropDownFilter").css("display", "none"));
});
if (localStorage.getItem("style") === null) {
localStorage.setItem("style", $("#dropDownFilter").css("display", "flex"));
} else {
$("#dropDownFilter").css("display", "flex");
}
});
Problem: The dropdown displays on first reload too, need to avoid that.
CodePudding user response：
You can Use localstorage setItem and getItem to store ajax last respone.
window.localStorage.setItem("variable", variable);
var getItem = window.localStorage.getItem("variable");
also when You want to remove the setItem you can remove it too.
window.localStorage.removeItem('variable');
CodePudding user response：
As mentioned by @bhavik I have tried the approach using localStorage and it worked, for doing the same thing with avoiding the division to open on page reload I simply changed the way the form was being submitted. instead of an if statement I simply said,
$(document).on("click", "#report tr", function(){
parent.onSearched($("#report").getRowData($(this).attr("value")));
});