Octobercms Component Unique id (Twig & Javascript)
Ad
I need to have unique IDs to duplicate the component I know how to set the unique id in the default.htm for my component
{% set uid = '{{__SELF__.id}}' %}
but I don't know how link it with my JavaScript... I've tried several ways but I still can't get it right
1) default.htm
<div id="tab" data-id="{{__SELF__.id}}" class="draggable-tab ui-draggable">
<img id="tab-avatar" alt="Virtual agent avatar" style="height:50px; width:50px" src="{{__SELF__.avatarImage}}">
<div id="tab-minimize">
<div id="tab-label"></div>
<div id="tab-expand" class="tab-btn"></div>
<div id="tab-close" class="tab-btn"></div>
</div>
</div>
this is my js
$(function() {
$( "#tab" ).data('id').draggable({
axis: "y",
containment: "window"
});
});
there's an error says "Uncaught TypeError: $(...).data(...).draggable is not a function"
2) default.htm
<div id="tab{{__SELF__.id}}" class="draggable-tab ui-draggable">
<img id="tab-avatar" alt="Virtual agent avatar" style="height:50px; width:50px" src="{{__SELF__.avatarImage}}">
<div id="tab-minimize">
<div id="tab-label"></div>
<div id="tab-expand" class="tab-btn"></div>
<div id="tab-close" class="tab-btn"></div>
</div>
</div>
this is my js
$(function() {
$( "#tab{{__SELF__.id}}" ).data('id').draggable({
axis: "y",
containment: "window"
});
});
3) default.htm
{% set uid = '{{__SELF__.id}}' %}
<div id="tab" class="draggable-tab ui-draggable">
<img id="tab-avatar" alt="Virtual agent avatar" style="height:50px; width:50px" src="{{__SELF__.avatarImage}}">
<div id="tab-minimize">
<div id="tab-label"></div>
<div id="tab-expand" class="tab-btn"></div>
<div id="tab-close" class="tab-btn"></div>
</div>
</div>
this is my js
var tab_{{uid}} = $(function() {
$( "#tab" ).data('id').draggable({
axis: "y",
containment: "window"
});
});
window[tab_{{uid}}]();
can someone pls show me how to do it?
Ad
Answer
Ad
$("#x")
return a jQuery Objet which have x
as id. $("#x").data("y")
return the value of the tag data-y
in the jQuery Objet which have x
as id. draggable()
can't apply to a value.
So try something like this:
<div id="tab{{__SELF__.id}}" class="my-tab draggable-tab ui-draggable">
<img id="tab-avatar" alt="Virtual agent avatar" style="height:50px; width:50px" src="{{__SELF__.avatarImage}}">
<div id="tab-minimize">
<div id="tab-label"></div>
<div id="tab-expand" class="tab-btn"></div>
<div id="tab-close" class="tab-btn"></div>
</div>
</div>
and
$(function() {
$(".my-tab").draggable({
axis: "y",
containment: "window"
});
});
You can use each()
function like this:
$(".my-tab").each(function(){
var myId = $(this).attr('id');
// Do Something with your unique Id
$(this).draggable({
axis: "y",
containment: "window"
});
});
Ad
source: stackoverflow.com
Related Questions
Ad
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
Ad