I have the code below to show a button in a overlay.
<div class="overlay22" id="overlay22" style="display:none;"></div>
<div class="box22" id="box22">
<input type="submit" value="Submit" class="buttonclick" id="buttonclick" />
</div>
Can we show the cq5 form in the overlay instead of hardcoding in the overlay?
If you are just creating some sort of basic form template or component, I think you should just stick to using regular HTML elements and then control look + feel with CSS. Though if you absolutely needed to use form elements similar to what you see in CQ's dialog windows, you will need to generate them by working with CQ's extension of the Ext JS framework.
For example, if you wanted to create a button analogous to your provided example, you'd have to write something like:
CQ.Ext.onReady( function(){
var button = new CQ.Ext.Button({
text : "Submit",
id : "buttonclick",
cls : "buttonclick",
renderTo : CQ.Ext.getBody(),
listerners : {
click : function(){
// Write handler code here
}
}
});
});
Widget API for latest version of CQ (5.5):
http://dev.day.com/docs/en/cq/current/widgets-api/index.html
Materials on Sencha Ext JS 3.4 (which I believe 5.5 is built on):
http://docs.sencha.com/ext-js/3-4/
We can do in the following way as well,
Say for instance we have a page with default cq5 form component already dragged in that,
Let that page be defined in this path as /content/geometrix/loginpage.html
Now we can show the above page in an overlay, using the below code
<div class="overlay22" id="overlay22" style="display:none;"></div>
<div class="box22" id="box22">
<sling:include path="content/geometrix/loginpage/par" />
</div>
Below that par we can find the contents of the form.Here box22 is the lightbox(pop up) and the overlay22 is the background div
Related
i use https://angular.io/guide/dynamic-form angular dynamic form. How is it possible to intercept the click event on every input field of the web page? I tried
<pre>
<df-question [question]="question" [form]="form" ng-
click="onContainerClick($event);"></df-question>
</pre>
Thank you
Instead of applying the click to the tag, just in your DynamicFormQuestionComponent (df-question) add click event on the input field (code taken from the docs)
HTML:
<input (click)="onContainerClick($event)" *ngSwitchCase="'textbox'"
[formControlName]="question.key"
[id]="question.key" [type]="question.type">
BTW, you were using ng-click which is not Angular, but AngularJS.
TS:
onContainerClick(event) {
console.log('clicked')
}
DEMO (check console) https://plnkr.co/edit/MbwuhWJrJOwuW23ZbzsC?p=preview
New to react and I'm wondering if there is any work around to get past this error:
_registerComponent(...): Target container is not a DOM element.
EDIT What I'm trying to do is:
I have a react function like:
ReactDOM.render(React.createElement(someFunction,{data:someData}),document.getElementById('someID')
which generates a dom like :
<span>
<ul data-reactid='...'>blahhh</ul>
<div data-reactid='...'>
<div id='some-id1' data-reactid='...'>blahhh</div>
<div id='some-id2'data-reactid='...'>blahhhh</div>
</div>
</span>
Now on the very next line to the previous react call, I have other function which is trying to do stuff with the above created div:
ReactDOM.render(React.createElement(someOtherReactFunction, { somePram: 'ImParam'}), document.getElementById('some-id1'));
This gives me:
_registerComponent(...): Target container is not a DOM element.
But I can see it's present in the DOM
So how do I access this virtual dom div? and load some contents in it?
P.S: I know a way with dangerouslySetInnerHtml but looking for a more better approach
it's just javascript. Yes you can create div. You have to register on some dom element only once to load up all app. You should avoid touching DOM after load of React app, because React does it in very efficient way, but it doesn't mean that it's not possible to touch it. And before loading React app, if you have to check if app container is there, you may do it with such code:
if (!document.getElementById("app")) {
var div = document.createElement("div");
div.id = 'app';
document.body.appendChild(div);
}
ReactDOM.render(<App />, document.getElementById('app'));
I Have Created Dynamic FilePicker Control on Button Click Event of Jquery
but the button click event of this dynamic control does not open the filepicker.io popup where files get uploaded on filepicker...
Below is the html code by which i have created this control in jquery
<input type="filepicker" data-fp-apikey="Acdgfv0GWQXyMKwqVMfMHz" data-fp-mimetypes="image/*" data-fp-container="modal" data-fp-services="COMPUTER" class="uploadImg btn border-blue-btn" tabindex="31" style="display:none"> <button type="button" class="uploadImg btn border-blue-btn">Pick File</button>
Filepicker javascript library construct widgets immediately after script is loaded. Using filepicker with any client side rendering library requires manually call
filepicker.constructWidget();
method on Dom element. You need to set element type as 'filepicker' etc.
Basic example:
var input = $('<input>').attr({
type: 'filepicker',
class:'picker',
}).appendTo(config.results);
filepicker.constructWidget(input);
And full working example:
http://jsfiddle.net/krystiangw/hfg6k8u2/
Did you include filepicker.js library?
Please try this example (link: https://jsfiddle.net/gy2gLvkw/)
<script type="text/javascript" src="//api.filepicker.io/v2/filepicker.js"></script>
<input type="filepicker" data-fp-apikey="Acdgfv0GWQXyMKwqVMfMHz" data-fp-mimetypes="image/*" data-fp-container="modal" data-fp-services="COMPUTER" class="uploadImg btn border-blue-btn" tabindex="31" style="display:none" onchange="alert(event.fpfile.url)">
I've added onchange="alert(event.fpfile.url)" to input element so that the url is displayed after upload.
I have an issue getting content inside the projectpages. (I literally tried to figure this out for 4 days now, searching the web - i will give my right arm for solving this)
So I have a simple index.html page with 7 projects (7 thumb images representing each portfolio project). When i click on one of the images i would like to get to the page showing its content - i get to the new page /#/WORK1/ but i can't figure out where/how to insert my content in this new url?
You can see the problem at my site here:
awesth.dk
Here is the code i am using for the 7 projects. WORK1, WORK2 etc.
<div id="projectPages">
<div class="project page-project" data-url="/WORK1/" >
<!-- Will be fetched on-demand -->
</div>
...
(So I don't know how I get it to be "fetched on-demand")
And here is the 7 clickable thumbs:
<div id="projectThumbs" >
<div class="wrapper">
<a class="project "href="/WORK1/" >
<div>
<div class="project-image"><div class="intrinsic"><div class="content-fill"><img data-src="/img/upcoming.png" data-image="/img/upcoming.png" data-image-dimensions="2500x1401" data-image-focal-point="0.5,0.5" alt="work" data-load="false"/><noscript><img src="/img/upcoming.png"></noscript></div></div><div class="project-item-count">0</div></div>
<div class="project-title">Titel1</div>
</div>
</a>
...
Pleaaase help
You need to use write some JavaScript code using JQuery.
There are methods you need:
click() – to add click event handler.
data() – to get value from data attribute.
load() – to load contents from some URL to some element.
UPD
There is an example of using these methods. Does it fit your case?
https://jsfiddle.net/up495fzs/
UPD2
You need to update your HTML code on the server.
Pay attention to data-project-id="1" and id="project-id-1". And update numbers respectively.
In data-url set your relative path. If you want to load WORK1.html file, you should write: data-url='/WORK1.html' (without / at the end).
UPD3
The connection between blocks are made by data-project-id="1" and id="project-id-1" attributes.
I change the way to get url. I leave it in <a href="..."> and removed from <div class="project page-project">.
https://jsfiddle.net/up495fzs/6/
But for now I realised that I don't understand why you need many <div class="project page-project"> elements. Why not to use just one?
https://jsfiddle.net/up495fzs/5/
UPD4
And you need to know about CORS (Cross-origin resource sharing) – https://en.wikipedia.org/wiki/Cross-origin_resource_sharing
You could load contents just from your web site. It'll fail if you will try to load page from external web site.
UPD4
You could use history.pushState(null, null, link.href); to update the URL of the page.
http://diveintohtml5.info/history.html
Updated JSFiddle:
https://jsfiddle.net/up495fzs/8/
You won't see URL changes at JSFiddle because it runs in a frame.
Try it on your page.
UPD5
Add link to JQuery library to the <head> of your page but before my script.
Add my script wrapped with $(function() { /* JS code */ }); to execute it properly.
<head>
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
...
<script>
$(function() {
/* JS code from JSFiddle */
});
</script>
I'm using TinMCE to edit site content and need to add a custom piece of HTML via a button using TinyMCE plugin so when i click the button the following content gets added:
<div class="custom">
<a class="header">title</a>
<a class="delete">delete</a>
<p>Some text</p>
</div>
This is all working however I want to add a link so when I click delete the div gets removed from the TinyMCE content.
Is it possible?
Thanks
If you are using tinyMCE 4.X, it can be done using the <> source code editor option under tools. when you open it, you will see the html source code for what you have entered in the tinyMC editor.
<div class="custom">
<a class="header">title</a>
<a class="delete" onclick="this.parentNode.remove();">delete</a>
<p>Some text</p>
</div>
just make sure you have added anchor's onclick as extended_valid_elements
e.g.
tinymce.init({
...
extended_valid_elements : "a[onclick]"
... });
for more.... check this out :
http://www.tinymce.com/wiki.php/Configuration:extended_valid_elements