I have view books/browse which uses 3 elements (those elements don't use any requestAction, they just depend on variables set in books/browse controller. Each element is enclosed in separate div with id of this element. Now I want to have a link which will refresh with ajax 2 of 3 elements. For now I have something like this (this is in books/browse view):
echo $this->Js->link('Page 2', array('page' => 2), array('update' => '#element_id'));
and in books/browse controller I have:
...
$this->set('books', $books);
$this->set('author_keywords',$author_keywords);
$this->set('title_keywords',$title_keywords);
$this->set('languages',$languages);
$this->set('language_id',$language_id);
$this->set('limit',$limit);
$this->set('category_id',$category_id);
if ($this->RequestHandler->isAjax())
{
$this->autoRender = false;
$this->layout = 'ajax';
$this->render('/elements/element1');
}
return;
And this works fine, the element in div 'element_id' is refreshed with proper contents of elements/element1
Now I want to update 2 element in separate divs in a single request. So maybe is there option to pass to link 2 divs which should be updated - but how then use the controller to render two elements in those 2 divs?
--edit
the purpose of this is to ommit refreshing one element on the page as its database queries and rendering are slow, and it doesnt change...
-- edit
Okay I have an idea on how to do it - in controller I have to render two elements and save html returned by those elements in two variables, then return ajax data like some array with 2 variables containing those elements html. Then I have to use JS to update two divs... But how to do it in controller?
Related
So what I'm trying to accomplish is when the grid is fully loaded, I loop over a certain column that contains checkboxes. Depending on the value of the checkbox I should be able to disable it.
Problem is that I can't access the html element that's there. Am i doing something wrong or overlooking something?
What i've tried:
loadComplete: function() {
// Fetch all the ID's of the rows
var rows = $("#table").getDataIDs();
// Loop over the rows
if(rows.length != 0){
for(i=0; i < rows.length; i++) {
// Get the data so we test on a certain condition
var row = $("#table").jqGrid("getRowData", rows[i]);
if (row.gridCheckbox == 1) {
//disable the element
row.prop("disabled", "disabled");
}
}
}
}
It's important to understand that changing one element on the page follow in the most cases to web browser reflow: validation whether some property (position for example) need be changed in all other elements on the page. If you do changes in the loop then your JavaScript code can be really slow.
Thus it's strictly recommended to reduce the number of changes of the DOM. Especially to reduce the number of changes jqGrid provides rowattr, cellattr and custom formatters. If you need for example to set disabled attribute on some rows then you should now do this in loadComplete, but to use rowattr instead to inform jqGrid that some additional attributes (disabled="disabled") should be set on some rows. jqGrid collect first the string representation of the whole table body and it use one assignment of innerHTML to fill the whole body of the grid in one DOM operation. It improves essentially the performance. See code example in the old answer.
I have a view panel in xpages and a computed field to show the row-count. I have 2 problems:
1st: how can i count only the rows of the current page of the pager?it seems that viewPanel.getRowCount() gets all rows from the beginning until the current page, so if i have 30 entries per page and i am in page 2, it shows 60 instead of 30.
2nd: even if i achieve the above, the pager only refreshes the view and i can't refresh the computed field or another panel. Can i put the computed field inside the view panel or make it somehow to be refreshed in each page change? i would prefer not to do it with full page refresh if possible...
Given the computed field refresh issue, even if you managed to get a count of rows (eg on a page-scope SSJS variable), it woudln't update the computed field.
It might be easier to to count to rows in the HTML table using clientside javascript ?
something like ..
page onload event :
get the HTML table
get the table rows property (array of rows in the table)
number or rows = that value (1st row = TH (header) row if there is one = row 0)
use javsscript to plug that value into a known DIV
You could also hijack the partial refresh issued from the pager and check for the ID that has been refreshed. If the ID match your view panel's ID, you could do another partial update in order to update another panel.
Example code for hijacking the partial refresh:
var sysHijackPartialRefresh = function(){
XSP._inheritedPartialRefresh = XSP._partialRefresh;
XSP._partialRefresh = function( method, form, refreshId,options) {
if (options){
if (!options.onComplete) {
options.onStart = function(){
};
options.onComplete = function(){
if (refreshId == "<client id of view panel>") {
// issue another partial refresh
XSP.partialRefreshGet(<client id of the other panel>);
}
};
}
}
this._inheritedPartialRefresh(method, form, refreshId, options); }
}
XSP.addOnLoad(sysHijackPartialRefresh);
See http://xpageswiki.com/web/youatnotes/wiki-xpages.nsf/dx/Work_with_events_and_partial_or_full_refresh for more information about partial updates.
The pager should have a "refreshID" property in which you can put the client ID (!) of the panel you want to refresh. Use getClientId() to compute the client ID of the panel.
For the row count: use the XPages debug toolbar (from openNTF) to check for a property of the view panel or the pager which gives you the current page number. If you got that, you can simply compute by using viewPanel.getRowCount() - (page number * number of rows per page).
I need the ability to add a random amount of subgrids to a jqgrid. Basically the subgrid is idential to the parent jqgrid apart from having their column headings hidden. Is there a way where I can define the grid once in say a js file method and have the grid id and data url passed in as a parameter and then append different versions of itself into its subGridRowExpand after its defined. It just seems very laborious to have to define multiple versions of the same jqgrid one inside the other.
Could I do something like
var i = 0;
var maxsubgrids = 5;
function CreateGrid(gridId, dataUrl) {
$(gridId).grid(
...... Grid definition
subGridRowExpand: function(subgrid_id, row_id) {
if (subgridcount < maxsubgrids){
CreateGrid('#subgridId' + i++, subgridDataURL);
}
}
......... continue with grid definition
}
I know the above isn't correct but just an idea, but I think it would be better if the grid could be just created once in a method and then find a way to insert the subGridRowExpand section afterwards. Is this even possible?
You should consider to use TreeGrid instead of Subgrids. It's important to understand that subitems of TreeGrid have always the same number of columns like it's parent elements. So I suppose it corresponds to requirements which you have. Of extending of tree node nodeid, parentid and n_level will be automatically added to the list of parameters of the URL (see the documentation).
I have a page with a lot of images, each of them being wrapped with an onclick event. For example:
<a onclick=javascript:xxx(y,z)><img id="myclass" src="yyy"></a>
Following command returns all the images correctly:
$x("//img")
This doesn't (returns null):
$("img")
I assume, because these img tags were created dynamically, so are not directly in the source.
My idea was to add .click() at the end, but somehow it doesn't work.
So the question is:
How do I simulate clicking all images at once to trigger all associated javascript functions?
You can't .click() on collection as it is just a container for some objects and it doesn't have any methods from objects inside. You need to iterate over each object and call .click() individually:
for (var idx = document.images.length - 1; idx >= 0; idx--){ document.images[idx].click() }
I've just ran it in console and opened your profile and ad on sidebar.
There is a simple form that has 6 dropdownlists and a gridview. When any of the dropdownlists change the value filters the grid by altering the selectcommand. A user can navigate in another page through a row of the grid.
From the other page a user has a back button that loads the page WITH a querystring which has the values of the dropdownlists.
I want to accomplish 2 things:
1) To put the values in the dropdownlists. This i have done easily.
2) The next thing is to make the grid show data based on this values. this is its normal operation.
I thought that if i add the following code in page load would do the trick but it didnt. I tried all the events but no luck.I can get the dropdownlists to hold the value i want but the grid shows ALL records:
if (!IsPostBack)
{
if (Request.QueryString["ret"] != null)
{
string[] retvalues = Request.QueryString["ret"].Split('_');
Update_Search(retvalues);
dsTodo.SelectCommand = dsTodo.SelectCommand + Build_Where();
GridView1.DataBind();
}
}
The last 2 lines exist in the selectedvaluechange evnets on the dropdownlists and they work fine to filter the grid in normal operation.
You are setting the SelectCommand but you are not executing it. Do this:
dsTodo.SelectCommand = dsTodo.SelectCommand + Build_Where();
dsTodo.Select(DataSourceSelectArguments.Empty);
GridView1.DataBind();
That's assuming that the DataSourceID property of the GridView1 is set to dsTodo.