I have a question regarding free jqgrid. My jqgrid is loading fine with all data. I have given one dropdown and search button explicitly. when I am trying to search by selecting the dropdown and clicking on search button, New data is not loading into existing grid.
Here is my fiddle: https://jsfiddle.net/x3fger4z/.
On page load, I am using this url: '/MajorsView/GetAllData', but after clicking on button I wanted to load from another url.
Below is my search button and actually I am getting data in success, but it is not reflecting on grid:
<input type="button" onclick="return myfunction();" id="btnFlagStatus" value="Search" class="btn btn-primary" />
function myfunction() {
var gendarVal = $("#gendarFlagsEnum option:selected").text();
var URL= "/MajorsView/GetFemaleData?searchKey=" + gendarVal;
$.ajax({
type: "GET",
url: URL,
contentType: "application/json; charset=utf-8",
data: JSON.stringify(gendarVal),
datatype:"json",
success: function (data) {
//$("#grid").setGridParam({ url: URL })
$("#grid").trigger('reloadGrid');
},
error: function () {
alert("error");
}
})
}
I have tried to taken references from these but no avail
How to filter the jqGrid data NOT using the built in search/filter box
how to reload jqgrid in asp.net mvc when i change dropdownlist
jQuery button click refresh of jqGrid only firing once
If you use datatype: "json" with some url, then you can just change url to another value and to trigger reloadGrid. One don't need to make a manual Ajax request. If you use loadonce: true option additionally, then datatype of the grid will be changed to "local" to process sorting, paging and filtering locally. Every sorting, paging and filtering is nothing more as reloading the grid which has datatype: "local" with another parameters (like page, sortname, postData.filters). Thus to reload the data of the grid from the server one have to restore datatype to the initial value ("json" in your case). Thus you can use
var p = $("#grid").jqGrid("getGridParam"); // get reference to all parameters of jqGrid
p.url = "/MajorsView/GetFemaleData?searchKey=" + encodeURIComponent(gendarVal)
$("#grid").trigger("reloadGrid", { fromServer: true });
Alternatively ole can reset datatype directly (with p.datatype = "json";), but the usage of fromServer: true could be helpful in other scenarios and it makes the code more readable in my opinion. See UPDATED part of the old answer for additional information.
Related
I'm having some trouble reading a data attribute value after updating through an AJAX call.
Here's the call, which works and updates the data-paged value successfully.
$('.block-resource-feed').on('click','#get-more-posts div',function(){
// Get current paged value
var paged = $(this).data('paged');
$.ajax({
type: 'POST',
url: jsVar.ajax_url,
dataType: "html",
data: {
action : 'get_more_posts',
paged : paged
},
success: function( response ) {
// Return data
$('#post-feed').append(response);
// Updated paged value
$('#get-more-posts div').attr('data-paged',paged + 1);
}
});
})
and the HTML side for the button;
<div id="get-more-posts">
<div data-count="13" data-paged="2">More resources</div>
</div>
The issue arrises when clicking the div again and the value always stays at 2, despite changing in the DOM.
I thought using the above on click method should allow reading of DOM elements after the call?
You should set/update this values on instance of your this element.
Add this above ajax call
const self = $(this);
and change your code in success callback
$('#get-more-posts div').attr('data-paged',paged + 1);
to
self.data('paged',paged+1);
This will work now.
JSFIDDLE
I am stuck in this like I have never before.
My situation : I am making a shopping cart. When user click "Add" button, it posts the form and in the server side i.e inside if(IsPost){....}, corresponding item gets added to the the the cart table in my database.
Everything is fine, except it reloads the page and scrolls back to top. With a little research, I got to know that may be Ajax could help. Then I created a new .cshtml page add-to-cart.cshtnl. Now my current page doesn't reload but it opens add-to-cart.cshtml which is not how I wanted. Now I even tried to learn AJAX and try doing things looking at examples. Nothing helps. Please help!
Here is what my code looks like : P.S I am using razor in webmatrix.
<form method="post" id="productForm" action="~/add-to-cart.cshtml">
<input ............"Input Something.............../>
<button type="submit" id="add-button" >ADD</button>
</form>
At my add-to-cart.cshtml, I don't have anything on the UI. It just processes data.I don't want that page to ever load. It looks something like this:
ifIsPost(){
............ADD item to the cart table of database..............
}
Now I am convinced, AJAX is my solution but how????
Please don't give me incomplete answers. I have already wasted 3 days in it :/
Try this
$('#productForm').submit(function(e) {
e.preventDefault();
$.ajax({
type: 'POST',
url: $(this).attr('action'),
data : $(this).serialize(),
success : function(response) {
//write your code here
},
error : fucntion(response) {
//write your code here
}
});
});
Put this script into <script> tag.
Note: Don't forgot to include jquery in your page.
Here is the complete working solution :
$(function () {
$('#productForm').submit(function (ev) {
var frm = $(this);
$.ajax({
type: frm.attr('method'),
url: frm.attr('action'),
data: frm.serialize(),
success: function (data) {
//Do What Ever You Wanna Do
}
});
ev.preventDefault();
});
});
Is it possible to simply run the knp paginator with ajax? Is it possible at all and what is the best way to do it ?
Greetings Michael
Not sure if this is best solution, but I did it this way:
$(function(){ $('#dish-select-component-canvas').on('click', "ul.pagination a" , function(e){
$.ajax({
type: "GET",
url: $(this).attr('href'),
})
.done(function( msg ) {
$('#dish-select-component-items').html(msg);
});
e.preventDefault();
});
});
#dish-select-component-canvas is container for page. When somebody click on this canvas on link in ul.pagination (pagination is class used by knpPaginator by default as wrapper for pagination), I take href attribute of that link, and send it with ajax GET request.
Result of that request goes to appropriate div (here to #dish-select-component-items). Of course you must remember to add e.preventDefault() to prevent browser from reloading the page.
In my project i am using springMVC+Hibernet .When EndUser click his/her profile Link i want to show his/her Information .For that i am using ajax in spring MVC .Now my controller return data in the form JSON object but i don't know How to update the object in my view Page.In That Object i have more than 25 fields any one help me how to update JSON object data to my jsp lables(FirstName,LastName.....)
MY code like this
$.ajax({
type: "GET",
url: "AjaxActionController?",
dataType: "json",
success: function(data){
alert(data);
var firstName = data.getFristName();
}
}
NOW i want to Update this data into my view layer
One "simple" way to do it is to set an id on the html element you want the data in and use jQuery to set it. This will get less and less "simple" as your application grows.
html:
<div id="firstName"/>
javascript:
success:function(data){
var firstName = data.getFirstName();
$('#firstName').text(firstName);
}
If you want something more manageable for a large app, the concept is called "data binding". Try a javascript databinding framework, such as Knockout, Ember/Backbone, Angular, Epoxy/Backbone. jQuery can do it too, with some work.
I have a little box in my sidebar populated by ajax. I have 2 ajax function: one adds items to the list and the second deletes them if the user clicks on the delete button. My html is a simple unordered list like so:
<ul id="listaruta" class="lista">
<li>Item</li>
<li>Item</li>
</ul>
Everytime I call any of the two functions they will replace the ul list with an updated one (selecting the items from the database after inserting or deleting). They work fine until I want to delete right after I inserted an item to the list.
My ajax function for inserting (the other one is very similar):
var valor=$("#alcrearuta").attr('class');
$("#alcrearuta").click(function(){
$.ajax({
type: "GET",
url: "../ajax/ruta.php",
data: "url=" + valor,
dataType: 'html',
success: function(data) {
$("#listaruta").html(data);
}
});
});
My ruta.php file gives me another ul list with the same structure as the original, just with the items updated.
As far as I understand this, since I update the ul via my ajax function, the other function doesn't know that the list was updated, it only "remembers" the older list so it does nothing. If I refresh the page, it wil delete with no problem. I'm guessing this would be solved by using live()? But I have no clue...
EDIT: Ok so now I can get my ajax call to work, except that when I delete right after I update, the value that I'm passing to the ruta.php file (the variable that will help me find the field I need to delete from database) will be set to 'undefined' giving me a query like so: Select id from poi where url='undefined'
Again, if I reload, it will work. The change I did to the ajax function was:
$("#alcrearuta").live('click',function(){
$.ajax({
....
});
});
The problem is that you are saving the value of the attribute at the beginning of the request, you should save it in the click event:
$("#alcrearuta").click(function(){
var valor=$(this).attr('class');
$.ajax({
type: "GET",
url: "../ajax/ruta.php",
data: "url=" + valor,
dataType: 'html',
success: function(data) {
$("#listaruta").html(data);
}
});
});
Hope that helps.