Good day everyone! hope you are having a good day.
My challenge today is... Can I have a template (ctp) with nested blocks from separate CTP templates. For instance:
Some form with headers and what not
<h1 id-"Something">Testing</h1>
<div class="main section">
<div class="">
-Section 1 - this would another ctp (include **section1.ctp**)
-Section 2 - this would another ctp (include **section2.ctp**)
</div>
</div>
<footer>something here</footer>
Rest of the form
Yes, you can, everything is neatly documented in the cakephp book
Extending Views && Using View Blocks
Elements
https://book.cakephp.org/4/en/views.html
the same is for CakePHP3
Related
Hey I have two JSP pages that are step(s) 1 & 2 of a form. On step 1 I am displaying certain category options a user can choose from. In order for the user to get to step 2, they must click one of the category options and upon going to step 2, I am trying to display the name of the category that they clicked on. I know with ng-model, one can bind it to an input and display what is interacted in that input but for some reason it is not working if I bind the ng-model to a "p" or "span". I am new to AngularJs so please bare any rookie mistakes.
step_one.jsp
<div class="col-sm-6" ng-click="setStep(2)"><span class="glyphicon glyphicon-cutlery"></span>
<p ng-model="category">Cutlery & Service</p>
</div>
step_two.jsp
<div class="col-md-12">
<label for="requestCategory">Category:</label>
<p id="requestCategory" ng-model="category">{{category}}</p>
</div>
JS to switch steps:
$scope.setStep = function (step){
$scope.step = step;
};
$scope.isStepSet = function(step){
return ($scope.step === step) ;
};
Are you intermingling server vs client side development?
You have 2 JSPs, which I'm assuming each load AngularJS? The majority of Angular apps work with a single page (i.e. one JSP) and dynamically load/show different content (i.e. through angular views). Single page applications (SPAs) maintain state within a single page and Angular provides constructs to do this with $scope (you can also use localStorage to do this).
It looks like you're transitioning from a classic web/server-side development model to a client-side model. To do what you want to do above, you can keep everything in 1 JSP and use the following code:
HTML
<div ng-show="isStepSet(1)" ng-init="setStep(1)" class="col-sm-6" ng-click="setStep(2)"><span class="glyphicon glyphicon-cutlery"></span>
<p ng-model="category">Cutlery & Service</p>
</div>
<div ng-show="isStepSet(2)" class="col-md-12">
<label for="requestCategory">Category:</label>
<p id="requestCategory" ng-model="category">{{category}}</p>
</div>
Let's say I have a typical bootstrap layout with row's and col-lg-x's
<div class="content container">
<div class="row">
<div class="col-lg-5">
</div>
<div class="col-lg-7">
</div>
</div>
</div>
Are there any plugins (perferably angular but others too) to make a draggable divider between 2 columns to allows the user to adjust the width?
Like in this example (Tab #2) except it should "snap" to bootstrap's possible col-lg-xx combinations like col-6/col-6, col-5/col-7, col-4/col-8.
The following does not address your question directly, in that it does not follow bootstrap's columns/rows. But it might give you a good starting point and others might find it useful:
bg-splitter https://github.com/blackgate/bg-splitter
ui-layout https://github.com/angular-ui/ui-layout
There are good Angular solutions in this answer:
Angular.js using bootstrap and dynamically creating rows
As well as this answer:
how to split the ng-repeat data with three columns using bootstrap
I have a store webpage and I want to add product blocks when user scrolls down (by infinite scrolling).
Which method should I use to fetch data from server and add it to the dom?
I saw this fiddle for implementing infinite scrolling in angularjs (it runs a loadMore() function when user arrives to end of page), as mentioned above, blocks are store's product and every item should have different scope.
The problem is that I don't know how to structure data in a scope and adding more items to it by ajax requests in the loadMore() function.
My products template:
<section class="more-apps">
<h1>More recommendations</h1>
<div class="loadmore-these">
<!-- ajax requests will load more instances of these three templates -->
<div data-ng-include data-src="'products-template-1.html'"></div>
<div data-ng-include data-src="'products-template-2.html'"></div>
<div data-ng-include data-src="'products-template-3.html'"></div>
</div>
</section>
and every sub-template file is like this with some simple differences:
<section data-ng-repeat="i in [1,2,3,4]">
<h1 data-ng-bind-html="title"></h1>
<div data-ng-bind-html="about"></div>
</section>
Every product has different title and about variables in (it's own?) scope.
I suggest you go through the angularjs official tutorial (basically it's about what you want to do, list products from a webstore) , and specifically the step about $http and services :
http://docs.angularjs.org/tutorial/step_05
If you structure your service to download a range of products according to how much the user scrolled (as in the example you linked to) you should be set.
I have a Drupal 7 site using ckeditor 4.2. I've created a basic page node and put a span inside an h2 heading in the body. I hard coded it in the html view. It looks fine but if I go back to edit the page, my has gotten stipped out of the html and also any style="" I've put into the html also. I've looked at the ckeditor config and text-formats. I've set the only formats allowed to be text and full html so I'm not using filtered at all. What gives? I've used the editor many times before but probably not this version.
If you are using the CKeditor module then there is an option in Advanced Options that is also mentioned in the module homepage where you should set:
config.allowedContent = true;
None of the above solutions worked for me. What I found was that CKEditor was removing empty <span> tags from the HTML. For example:
<div class="section-heading">
<span class="sep-holder-l"><span class="sep-line"></span></span>
<h4>Section Header</h4>
<span class="sep-holder-r"><span class="sep-line"></span></span>
</div>
Would yield:
<div class="section-heading">
<h4>Section Header</h4>
</div>
However, if I added a non-breaking space in the innermost <span>, CKEditor didn't edit the HTML:
<div class="section-heading">
<span class="sep-holder-l"><span class="sep-line"> </span></span>
<h4>Section Header</h4>
<span class="sep-holder-r"><span class="sep-line"> </span></span>
</div>
Hopefully that helps someone out there!
In Drupal 7 there's no automatic synchronization between CKEditor's filter (called the Advanced Content Filter) and Drupal's filter. As I understand you configured latter one, but not the first one. See config.extraAllowedContent.
CKEditor 4.+ will remove any empty tags it finds which are in CKEDITOR.dtd.$removeEmpty as part of the HTML parsing process.
See this answer for a hack to avoid it.
So I am trying to evaluate AngularJS as I think it is interesting however it is quite different from what I have been using which is BackboneJS. As part of this evaluation I want to take a few page of my existing Backbone application and try to port them over to AngularJS. So I have the following html layout:
<html>
<head>
</head>
<body>
<div class="page-wrapper">
<div class="header-wrap">
<ul>
<li>Ryan Zec</li>
<li>Admin</li>
<li>Logout</li>
</ul>
</div>
<div class="content-wrap">
<form>
<input type="text" name="username" value="" />
<input type="password" name="password" value="" />
<input type="button" value="Login" />
</form>
</div>
<div class="footer-wrap">
<span>Copyright © 2012 - Ryan Zec
</div>
</div>
</body>
</html>
Now in backbone I would have the div with the -wrap classes be empty and to contents for each section one would go in individual templates (and each section could have more than one template that might display in it). There would then be a view associated for each template to would attach to the correct element and display the contents of the template in it.
Now with AngularJS, it is discouraged to do direct DOM manipulation everywhere except in directives. So I am wondering what is the best way to have the same setup in AngularJS that I do with BackboneJS keeping in mind that the content of these sections need to be switched out for different content based on the page/url they are viewing? (I know I can add the ng-directive-name to the div so on initial load, it load correctly but how do I get it to reload to different data when the page is switched in a single page application).
Answer is directives :)
you can either use this -> http://jsfiddle.net/thaqL/
or just download chrome -> go to http://angularjs.org -> press F12 -> check out how they did it
hope it helps.
cheers
I think for the time being the best answer is ngInclude. I think that the AngularJS team wants to make routes more powerful (based on something I remember reading) in the future (like multiple views per route where each should should have a controller for the header, a controller for the footer, and a controller for the main content) but until then ngInclude should hopefully get me by.