Trying to update the contents of my grid view after an ajax call to an action that triggers some DB changes:
$.ajax({
'url': '" . $this->createUrl('//myController/myAction') . "',
'type': 'post',
'data': serial,
'success': $.fn.yiiGridView.update('my-grid'),
}
});
My problem is that the grid update ajax call seems to be called before my ajax call is completed so although the grid values are updated in the db the changes can only be seen after I manually refresh the page.
You need to wrap that call in a function:
'success': function(){ $.fn.yiiGridView.update('my-grid'); }
Related
I have the following problem: So I built a search function for an OrderId in Nopcommerce and I want to update two values (Buyer Name) and (Purchase Reason) in a table in my main view instead of how it is now, where I render them in a partial view but it appears on the main page.
Example:
How it is at the moment after I click search button :
My controller that renders the partial view:
And here:Part of my SearchResult.cshtml partial view where the values appear
I want it to appear somewhere here (My startview.cshtml as you can see I tried some things but nothing seems to work, Ill delete those)
Thank you in advance!
You can achieve this using ajax call.
var request = {
OrderId: $('#OrderId').val(),
}
$.ajax({
url: "/Home/DisplayBuyerName",
type: "GET",
data: request,
contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
success: function (data) {
$("#SearchResult").html('').html(data);
},
error: function (jqXHR, textStatus, errorThrown) {
alert(errorThrown);
return false;
}
});
html:
<div id="SearchResult"> </div>
So now your partial view is placed in SearchResult div.
when I added new dropdown to my view. This dropdown is filled with list from model. Model is loaded in Index action with high ammount of rows oround 4k. Problem is now that when I run the page, it freeze for like 5 seconds, before dropdown is filled, I mean my whole website is not responding. What can I do?
Either you can fill you drop down using ajax call after your page is loaded and show any small progress bar over the drop down while drop down is being loaded.
You will have to create an another action method that will only return the drop down element. and on document ready you will have to make an ajax call to that action method and on the success of ajax call load drop down items in drop down. :
$(document).ready(function(){
$.ajax({
url: //Url to your action method along with the student name in query string,
type:get,
dataType: "json",
complete: function() {
//remove progress bar.
},
beforeSend: function() {
//Show progress bar.
},
success: function (data) {
//fill second drop down like:
//$("#secondDropDown").append('<option value="' + anyvalue + '">' + anyText + '</option>');
}
});
});
There is a list of patient data using a "TbGridView" widget,
Now, I want to use modal widget for each one of the patient here, so, that
the patient id is passed to the modal for each patient with patient id.
I had tried this, but, I am being unable to pass each patient id to the modal form.
Any response related to this would be very helpful.
Thank you.
Actually there is no direct way of doing that I mean that you cant render dynamic data by passing an id. Modal is static.
You can use ajax call for that to retrieve data from database and render that data in your modal. Follow these steps
1. In your gridview use rowHtmlOptionsExpression to set id for specific row.
2. create an action in your controller to handle ajax call.
3. use jquery click event on TbGridView elements like
$('#mygrid table tbody tr td:not(:first-child)').on('click', function() {
var Url =<?php echo '"' . CController::createUrl('/user/default/viewMessageAjax') . '"'; ?>;
var id = $(this).parent().attr('id');
console.log($(this));
$.ajax({
url: Url,
data: {id: id},
success: function(data) {
$('.modal-body').html(data);
$('#myModal').modal('show');
}
});
})
jQuery('#mygrid >table>tbody>tr:first-child').live('click', function() {
return false;
})
above code is just an example, you can change it according to ur needs.
I have a partialview "selectUser". On this partial view a user can search for other users. The user id will be stored in a hidden field or as a var on my view. I need to use this partial view in many places. Lets say I need to return the id of the selected user on the close event of my dialog. My question is, how do I make this partial view, loaded as a modal dialog with jquery ui, to retrun the selected value to its parent view? Is there a way to access the value directly from the parent view?
I think I follow what you are needing now. So on your button click you do an ajax call back to the server and include the destination field name in the call
$.ajax({
url: "#(Url.Action("Action", "Controller"))",
type: "POST",
cache: false,
async: true,
data: { destination: 'fieldName' },
success: function (result) {
$(".Content").html(result);
AttachScript();
Dialog.load();
}
});
On your controller send that field to the partial view through your view model or viewbag and on the partial view put that field name in a hidden field. then in your button click you should be able to do something like this (untested)
function AttachScript(){
$('.btnSubmit').on('click', function(){
var data = $('.sharedField').val();
$($('.HiddenField').val()).val(data);
});
}
which will set the value of whatever field is named in your hidden field to the data. Hopefully this helps.
I have a grid with store: cdStore defined. The grid's records are edited using a form which is bound to the grid data. When updating a record, I would like for the refreshed records to show in the grid.
Currently I have
handler : function() {
areaForm.getForm().submit({
params: { action: "update" }
});
cdStore.loadPage(cdStore.currentPage);
areaGrid.doLayout();
}
It seems like this fails sometimes and older data remains displayed in the grid - perhaps doLayout() is called before the page is fully loaded.
Can I trigger a doLayout on loadPage somehow?
// ...
cdStore.load({
callback: function(){areaGrid.doLayout();},
page: cdStore.currentPage
});
Update
I would appreciate a line or two with an explanation if you would be so kind
You said that "doLayout() is called before the page is fully loaded" and you were right. So the doLayout must be called after the data is loaded. The one way to do that is to use load method. You can pass array of options into this method:
store.load({
page: 2,
limit: 50,
// and
callback: function(){ /*do something*/ }
});
The function you pass as callback is called exactly after the data is loaded. So doLayout() put into callback produces correct behaviour.