I am working on Cakephp application. What I want here is to create facebook style pagination. Still I have done with Ajax pagination on simple sorting. Now my logic with this I will create button of next. and render element. Cakephp will itself manage pagination. But my issue is its rendering my view to particular div(ID) that it ask me during 'update'. My style of dom is...
<div class="fb_style" id='1'></div>
<div class="fb_style" id='2'></div>
<div class="fb_style" id='3'></div>
<div class="fb_style" id='4'></div>
<div class="fb_style" id='5'></div>
<div class="fb_style" id='6'></div>
<div id='more button'>MORE BUTTON(ACTUALLY PAGINATOR NEXT LINK)</div>
I want to render the div next to id=6 or I can say next to .fb_style:last
My pagination sample code...I simple wish to append to particular dom element.
$this->Paginator->_ajaxHelperClass = "Ajax";
$this->Paginator->Ajax = $this->Ajax;
$this->Paginator->options(array('update' => 'listID',
'url' => array('controller' => 'poets', 'action' => 'index', $separator),
'indicator' => 'loaderID'));
If I do it with Jquery means to write function than its quite clumpsy means I have to send total records, than validate the limit manually, on view check if total records are equal or more so I move with above logic let me know if it correct...or any other solution or guide line with it.
I used Infinite scrolling JQuery plugin and it is just working fine. This jquery plugin will give you custom built-in events that you can use to send Ajax request to your controller's method. Also if it will be working then you can change it css to looks like facebook infinite scrolling functionality.
Here is another post that will help you how to use it with CakePHP.
Use the twitter style of pagination, although your ordering ASC, while facebook and twitter order DESC, it would still apply.
Send the min_id form the first results as param, and use that in your conditions in index() so the next request would get the next block of results.
This is safer then getting page 2 as new records might have been added in the meanwhile so you would be missing records or have duplicates (only applies when you would change to order DESC, for ASC ordering it would be safe to use page 2)
'update' => 'listID'
should be
'update' => '#listID'
Related
Need to render ACF repeater in react. I am able to display ACF text Fields but not repeater fields. Need to find out if anyone has an example of how to map through a repeater field.
Repeater field group Is called Skills.
Im also new in this stuff, but I will try to help you.
So, the first thing that you need is to download and install ACF to REST API plugin so you can use ACF with Wordpress API. I assume, that you already have it, because as you said before - you can display text fields.
Once you can send data through Wordpress API, you need to preview of JSON sent by Wordpress (in this case), so you can display necessary data. Mine is called React Developer Tools and I installed it as Chrome extension.
Link to Chrome store
It should look like this:
As you can see, my component is called Home.js, yours may be called differently. Chose component that is fetching all the data that you need.
Now, you just need to use your repeater. It would be much easier if you showed us your code. I don't really know what kind of data you are calling through api, so I guess these are pages.
{ pages[0].acf.technologie_lista.map ( (field, index) => (
<div key={index} className="single-field">
{ field.nazwa_technologii }
</div>
) ) }
Let's break it down.
1 - My project contains two pages. I have chosen the first one, because only this one has needed ACF fields. technologie_lista is acf field name.
2 - You need to use map function to list all posts. You need to assign key to each element.
nazwa_technologii is just a repeater sub field name.
And that's all. I might make some rookie mistakes, but it work's for me. I hope that i helped. Cheers!
How can I go about overiding CakePHP's code without creating it manually myself? I'm attempting to customise the getCrumbList function.
The lastClass option is applying a class to the 'li' tag sucesfully, but I'd also like to remove the link/ ahref altogether for the last tag.
Function generating crumbs
echo $this->Html->getCrumbList(array('class' => 'breadcrumb', 'lastClass' => 'active'), 'Home');
Output of getCrumbList
<ul class="breadcrumb"><li class="first">Home</li><li>Scheduler</li><li class="active">Downloaded Playlists</li></ul>
Simple solution - You dont include the URL in addCrumb. Doh!
In my AngularJS I have the following code where I check if there is a currently logged in user or not in order to switch the top app menu text from Login to Logout (login if no user is logged in) and vice versa. When I used ng-show ng-hide the app started to be extremely heavy so I tried switching to ng-if, but then the css effects on the top menu started not to work specifically in the login/ logout tab. So can someone please tell me what is the best approach to handle this situation with example please? Thanks
index.html
<div ng-controller="MenuController">
<li>
<div ng-if="userLevel() == 1">
Login
</div>
<div ng-if="userLevel() == 2">
Logout
</div>
</li>
</ul>
</div>
Controller:
controller('MenuController',
function MenuController($scope, UService){
$scope.userLevel = function(){
var userType = UService.checkULevel(); //This will return either 1, 2,3,4...etc
return userType;
};
});
The difference between ng-show and ng-if is that ng-show applies a display: none to the element when the specified expression is a false value, while the ng-if removes the node from the DOM, basically equivalent to the .empty in jQuery.
An approach you can consider for your element, is rather than using it within a controller, use a directive for the access level, and follow the approach described in this article, which is really flexible and allows you to have different elements in the UI depending on the user level: http://frederiknakstad.com/2013/01/21/authentication-in-single-page-applications-with-angular-js/
Another reason for your application to be slow when you check the user level, could be that every time that is evaluated your application has to perform a check on the server side, slowing the application. An approach for it would be to cache the result of that query, and then use it while the login status doesnt change. At that stage you can invalidate the cache and fetch the user level again, ready to update the UI.
The ng-if directive removes the content from the page and ng-show/ng-hide uses the CSS display property to hide content.
I am pretty sure that no-show is lighter than ng-if and no-show should not make the app too heavy. If it is becoming heavy, I think there could be other causes for it.
If you use ng-if the node is rendered only when the condition is true
In case of ng-show ng-hide the Nodes will be rendered but shown/hidden based on the condition if condition changes the same nodes are shown/hidden
when ever you use ng-if it will render only that code which satisfy the condition.
while ng-show ng-hide will render the code on page but will be hidden with the help of CSS properties.
so better to use ng-if for reducing the line of code to be rendered on page.
I am facing a strange behavior when testing an Angular JS application with protractor.
Considering this HTML structure , I would like to click on the inner div which is a filter.
<div ng-hide="term.selected" ng-click="selectFilter('target',term.value)" class="listItem">
<div>
<label class="ng-binding">ZECPFICO00</label>
<span class="listItemNum ng-binding">157</span>
</div>
</div>
Here is my locator :
element(by.repeater('term in facets.target | filter:ecSearchText').row(1)).click ();
When executing this code my webdriver cursor goes to the filter in the web page but and tries to click on the filter however the click does not work and therefore the filter is not applied.
1 - You don't need to specify the filters when using by.repeater it is optional
2 - Sirk is almost there, you need to continue chaining your promises, below an example of clicking on a div, you can use any by method here..
var elements = element.all(by.repeater('term in facets.target'));
elements.first().then(function (term) {
term.findElement(by.css('div')).then(function (div) {
div.click();
});
});
3- You could also do it this way:
element.all(by.repeater('term in facets.target')).get(0).click();
hmm I've never seen or used a locator that way where you have .row(1), but I am a noob so that just might be my own ignorance, however you could try something like the following:
element(by.repeater('term in facets.target | filter:ecSearchText')).then(function(rows){
rows[0].click();
});
That should click on the first row of the repeater. 'rows' would contain all the rows as an array.
I'm trying to use Deface to add a button in a column in a table in Spree Admin. But I just can't get my CSS-like selector right. I can select the table row using a data-hook, and can select child elements (eg td, span), but can't select by a specific class (in this case, .balance_due). Am I missing something simple??
My override:
Deface::Override.new(:virtual_path => "spree/admin/orders/index",
:name => "add_capture_order_shortcut2",
:insert_bottom => "[data-hook='admin_orders_index_rows'] .balance_due",
:text => '<h1>hey yo, your balance is due</h1>'
)
I have confirmed the CSS selector using jQuery, ie:
$("[data-hook='admin_orders_index_rows'] .balance_due")
=> [<span class="state balance_due">…</span>]
An exerpt from the generated HTML:
<tr data-hook="admin_orders_index_rows" class="state-complete odd">
...
<td class="align-center"><span class="state balance_due">balance due</span></td>
...
</tr>
Deface acts upon the actual .html.erb template, before it is rendered, not the generated output.
You need to ensure that the selector matches something that is directly in your template specified in your virtual path.
The relevant line from the spree template is:
<td class="align-center"><span class="state <%= order.state.downcase %>"><%= Spree.t("order_state.#{order.state.downcase}") %></span></td>
Note that .balance_due is not specified directly in the template, but assigned from a variable.
The easiest way to fix this would be to override the entire
[data-hook='admin_orders_index_rows']
with your content, or use some fancy CSS selectors like :first-child to get the exact portion you want.
A better way to fix this would be to submit a pull request to spree with data-hook's to allow people to select specific rows with deface. That will be much less likely to break in the future if someone decides to re-order things, or add a new row.