Search jQuery

jQuery Forum

why i can't include library with Ionic-Angular App

in Using jQuery UI • 2 years ago

Hello,

I'm developping an app with ionic - Angular and I wanted to make the dragging service with jquery UI but it didn't work enven with basic examples, this is my code:

<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js"></script>
<script type='text/javascript'>
$(function() {
$( "#device.id" ).draggable();
});
</script>
</head>
<body>
<ion-view view-title="{{vm.title}}" class="exlhoist-dashboard-view">
<ion-content
has-bouncing="true"
padding="true"
scroll="true">

<div id="draggable" class="ui-widget-content">
  <p>Drag me around</p>
</div>

</ion-content>
</ion-view>
</body>

Replies(10)

jakecigar

Re: why i can't include library with Ionic-Angular App

2 years ago

$( "#device.id" ).draggable();

looks for an element with id=device and class=Id. You don’t seem to have that in your HTML.

JΛ̊KE

Miled Bra..

Re: why i can't include library with Ionic-Angular App

2 years ago

no it's

$( "#draggable" ).draggable();

Sorry it was a copying mistake.

jakecigar

Re: why i can't include library with Ionic-Angular App

2 years ago

I don’t see the required UI CSS included. Can you share a link to a running page? I don’t want to guess about ionic. I’ve not used it.

JΛ̊KE

jakecigar

Re: why i can't include library with Ionic-Angular App

2 years ago

If you can’t provide a running demo of the page, you will probably have to ask on an Ionic forum like Ionic.

JΛ̊KE

Miled Bra..

Re: why i can't include library with Ionic-Angular App

2 years ago

Now it worked for me after I added UI CSS. But I have another question if you don't mind,
In fact my code generate a list of <div> that corresponds to my devices. So the Id is changing like you see in the code below:

<div id="device.id" class="device-list-item exlhoist-dashboard-col" ng-repeat="device in vm.deviceNames">

so the Id here is device.id
Hence I putted the script like this:

<script>
$( function() {
$( "#device.id" ).draggable();
} );
</script>

but it didn't work for me
Is there any other option to perform dragging here ?

Thank you :)

watusiware

Re: why i can't include library with Ionic-Angular App

2 years ago

I don't use Angular. So, I don't know if your code above will create a bunch of divs all with the same ID of "device.id", or if it will generate unique IDs from your array of vm.deviceNames. ng-repeat is a template directive:

https://docs.angularjs.org/api/ng/directive/ngRepeat

I believe, though, that it will create a bunch of divs all with the same ID. And that's invalid HTML. IF that's what is created, then the FIRST one should be draggable.

But you don't need the IDs. Use a CSS class. CSS classes don't have the restriction of having to make them unique in a page. And you already have a convenient CSS class.

$('.device-list-item').draggable();

---

You PROBABLY wanted something like:

<div id="{{device.id}}" class="device-list-item exlhoist-dashboard-col" ng-repeat="device in vm.deviceNames">

... but I don't use Angular. (Because, apparently, using Angular is like hitting your head against a wall, repeatedly. At least that is what I have heard from a trusted colleague. I do not like hitting my head against a wall, repeatedly...)

But of course you still need to use a CSS class for .draggable() as then then IDs will all be different and you won't know in advance what they are.

I question whether there is any actual need for IDs here. If you have no use for them, don't include them!

In general, when you are tempted to add some unique ID to each item in a list, you probably DO NOT NEED IDs, and relying on them will only over-complicate your code.

---

I notice that you loaded jQuery twice. You should only load it once. Pick ONE version.

watusiware

Re: why i can't include library with Ionic-Angular App

2 years ago

Using jQuery UI with Ionic is a bit like adding running-boards to your Ferrari, though.

You can do it, but.... why?

It will almost always be troublesome trying to mix two UI libraries.

There is probably a better way of dragging things with Ionic. You should ask in some Ionic community.

jakecigar

Re: why i can't include library with Ionic-Angular App

2 years ago

Instead of

$( "#device.id" ).draggable();

You should code

$( ".exlhoist-dashboard-col" ).draggable();

Your selector is wrong, but your class is probably preserved.

JΛ̊KE

Miled Bra..

Re: why i can't include library with Ionic-Angular App

2 years ago

Hi,

@watusiware For Instance there is no need to the IDs so I deleted them from my code and I used CSS class but nothing changed it still doesn't work here is my code:

<script>
$( function() {
$( ".device-list-item" ).draggable({
helper:'clone'
});
</script>
<body>
<ul class="column-device-list" >
<div class="device-list-item" ng-repeat="device in vm.deviceNames">
<div ng-click="vm.removeBase(device.id)"><i class="se-icon-close"></i></div>
<div class="button icon-left button-clear" ng-click="deviceSelected(device.id)"
ui-sref="app.dashboard.details({transmitterId: device.id, transmitterName: device.uiName})">
<div class="dashboard-device-container">
<div class="icons"><i class="device-icon"></i></div>
<div class="deviceid" ng-bind="device.id"></div>
<div class="icons" ng-if="device.uiShowError"><i class="exlhoist-alarm- error-icon"></i></div>
</div>
<div>
</div>
</div>
</div>
</ul>
</body

watusiware

Re: why i can't include library with Ionic-Angular App

2 years ago

You need to make sure that Angular has completed creating the page from the template before you initialize the draggable.

Since I do not use Angular or Ionic, I do not know how you insure that the page has been created. It MIGHT be sufficient to use document ready (as you have above) or it MAY NOT.

You need to ask in some Angular forum!

I doubt you will find anybody using it with jQuery UI, though, because of the many problems I would expect you to encounter with the combination.

I think it would be more fruitful to ask how others are doing dragging. It likely is not with jQuery UI.

Maybe one of these will help. Or... make you bang your head against a wall! These examples use jQuery UI datepicker rather than draggable, but the need to initialize is the same.

https://grobmeier.solutions/angular-js-binding-to-jquery-ui-datepicker-example-07092012.html

http://henriquat.re/directives/advanced-directives-combining-angular-with-existing-components-and-jquery/angularAndJquery.html

Top Reply

Response title

Attachments

jQuery Forum

why i can't include library with Ionic-Angular App

Replies(10)

Re: why i can't include library with Ionic-Angular App

Re: why i can't include library with Ionic-Angular App

Re: why i can't include library with Ionic-Angular App

Re: why i can't include library with Ionic-Angular App

Re: why i can't include library with Ionic-Angular App

Re: why i can't include library with Ionic-Angular App

Re: why i can't include library with Ionic-Angular App

Re: why i can't include library with Ionic-Angular App

Re: why i can't include library with Ionic-Angular App

Re: why i can't include library with Ionic-Angular App

Statistics

Tags

Actions