Hi all alpine js geeks,
I am trying to set datatransfer property of drag and drop api with the html of the current html element.
<span draggable="true" class="dropdown-item fs-6 cursor-pointer databoard-grid-draggable"
:id="$id('databoard-grid-draggable')" #dragstart="
(event) => {
event.dataTransfer.setData('text', event.target.innerHTML);
}
">
<i class="fa fa-fw me-2" :class="module.icon"></i>
<span x-text="module.name"></span>
</span>
However, when this element is dropped at certain dropping place and I am trying to pickup the html which was set via dataTransfer method this way, Alpine js is re-evaluating x-text attribute at that drop place and giving error about module being not defined.
#drop.prevent="(event) => {
$(event.target).html(event.dataTransfer.getData('text'))
}"
Uncaught ReferenceError: module is not defined
Obviously it gives this error due to x-data for module is not defined at dropping place.
I can of course prepare html in that dragstart function via string concatenation in same fashion as inner html and then set dataTransfer's text but it feels somewhat cumbersome.
How to strip out those x- attributes or any other alpine attributes from html so that it does not complaint about the data is not defined?
Related
This should be really simple, but I don't get it. I want to replicate the functionality of a button that when pressed goes to an API (which could take about a minute to get the data and process it), it gets diabled, and after loading the data it gets enabled.
I'm using Laravel/Livewire/Alpine
So, in my livewire component I have:
public $loading = false;
In my blade file, I have the declaration for the div where the button is:
<div
class="grid grid-cols-3 gap-4"
x-data="{
loading: #entangle('loading')
}"
>
Then the button x-binds the disabled property to the loading value, when the button is clicked, it changes the property of the loading variable, and calls the loader function
<button
type="button"
class="btn btn-sm btn-jbn"
x-on:click="loading = true"
x-bind:disabled="loading"
wire:click="loader"
>
Load API
</button>
And it does what it is supposed to do... the button is grayed, it becomes unusable, the cursor change, etc., it executes the loader function in my livewire component, but it never return to the normal state after loading the API. In my livewiere componente I have:
public function loader() {
// API call and logic goes here, this works
$this->loading = false;
}
So I would imagine that at the end of the API process the entangled variable loading would return the button to its normal state, but it doesn't
What am I missing?
Livewire already has incorporated functionality to handle loading-states. Instead of implementing your own, you can use this.
Get rid of all your current loading-logic, and simply use wire:loading with wire:target on your button.
wire:loading can toggle the disabled attribute directly by doing wire:loading.attr="disabled", and wire:target is to set the target for that loading-state to the method you are calling, so in your case that's wire:target="loader".
This means your button looks like this,
<button
type="button"
class="btn btn-sm btn-jbn"
wire:click="loader"
wire:loading.attr="disabled"
wire:target="loader"
>
Load API
</button>
I want to provide a link on a text based condtion utilizing ng-if.
If functions return true I want to provide the link, otherwise display just the value with no link.
<th style="text-align:left">
<span ng-if="(mandalLink())">
<a ng-href="/#!/l2-mandal/{{department}}/{{d}}" title="Click to see data at Mandal Level">{{d}}</a>
</span>
<span ng-if="(!mandalLink())"> {{d}} </span>
</th>
I have used ng-if at other places and its working but in this case it's not. What am I doing wrong here?
In your .html-file try:
<th style="text-align:left">
<span ng-if="showLink">
<a ng-href="/#!/l2-mandal/{{department}}/{{d}}" title="Click to see data at Mandal Level">{{d}}</a>
</span>
<span ng-if="!showLink"> {{d}} </span>
</th>
In your .ts-file (on ngOnInit or where you get/assign a value to 'department'..)
showLink;
getDepartmentOrWhatEver(){
... // your logic getting 'department' assigned
if (department == "") {
this.showLink= false;
}
else {
this.showLink= true;
}
}
From the docs on ng-if:
The ngIf directive removes or recreates a portion of the DOM tree based on an {expression}. If the expression assigned to ngIf evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM.
ngIf differs from ngShow and ngHide in that ngIf completely removes and recreates the element in the DOM rather than changing its visibility via the display css property. A common case when this difference is significant is when using css selectors that rely on an element's position within the DOM, such as the :first-child or :last-child pseudo-classes.
FYI: The brackets are not needed around the function, just <span ng-if="mandalLink()"> is fine..
Here is the relevant snippet from my Web2Py view:
{{for candidate in rows:}}
<div class="well col-sm-12">
<button type="button" name="up_button" onclick="ajax('{{=URL('default', 'arrow_button_callback')}}', ['name'], 'target')" class="fa fa-caret-up arrow-up fa-4x"></button>
<span>{{=candidate.votes}}</span>
<button type="button" name="down_button" onclick="ajax('{{=URL('default', 'arrow_button_callback')}}', ['name'], 'target')" class="fa fa-caret-down arrow-down fa-4x"></button>
{{=IMG(_src=URL('photos',candidate.path_to_photo), _alt="Photo of Candidate")}}
{{=candidate.name}}
<div id="target"></div>
</div>
{{pass}}
And the relevant snippet from my Web2Py controller:
def arrow_button_callback():
response.flash = str(request.post_vars.name)
return request.post_vars.name
So why do I see the string "None" in my target div (and in my flash)?
Thank you for your help. I read chapter 11 of the Web2Py book and I'm still confused.
I really want to be able to pass candidate.id (depending on which row's button was pressed) and the button direction to controller variables. Please let me know if there's a better way to do this.
--Benjamin
From the web2py documentation (emphasis added):
ajax(url, [name1, name2, ...], target)
It asynchronously calls the url (first argument), passes the values of the field inputs with the name equal to one of the names in the list (second argument)...
In your code, your second argument is ['name']. However, there is no input field with the name "name" anywhere, so no "name" variable gets posted to web2py (therefore, request.post_vars.name is None, which is the default value returned whenever you attempt to get a variable that does not exist in request.post_vars).
In this case, because you are not placing any data in form input fields, you can simply ignore the second argument to ajax(). Instead, pass the relevant data via the URL itself:
{{url = URL('default', 'arrow_button_callback',
vars=dict(id=candidate.id, direction='up'))}}
<button type="button" name="up_button" onclick="ajax('{{=url}}', [], 'target')"
class="fa fa-caret-up arrow-up fa-4x"></button>
Then in the arrow_button_callback controller, you can access the candidate id via request.get_vars.id (or just request.vars.id). And you can access the arrow direction via request.vars.direction. Create a new URL for the "down" button, with direction='down'.
Currently I'm getting some data from the database and after that I want to render it within my Blade template.
In my queried data I have blade functions like url('/foo') combined with some html. And here is the problem.
When I'm using {!! $child->description !!} the HTML is rendered correctly, but my Blade function won't work:
Function: url('/foo)
Output: http://myurl.de/url('/foo')
When I'm using the "normal" Syntax like {{ $child->description }} the generated URL is correct (http://myurl.de/foo), but the HTML is not rendered.
So my question is:
How can I use my queried Blade function within rendered HTML? ^^
/Edit
Okay, perhaps my question is too abstract. So I want to show you my problem based on my example. (generated template image - only on german, sorry)
Every form is a database entry like:
categoryName
categoryParent
...
categoryDescription
As you can see on my image, the categoryDescription is the small text under my first input field with the small button.
I want to use this script abstract as possible so that I can fill the entry with every content I want to fill in.
In this case my content is:
lore ipsum <a class="btn btn-primary btn-sm pull-right" href="url('foo')">dolor</a>
As you can see there is the mentioned Blade-function (url) and the HTML.
{!! !!} - this dont escapse string so if u have something from database like,
something it would output it like that.
While in other hand {{ }} this would give you just "something" without , it is used to protect you from injections.
Maybe blade error.{{}}
lore ipsum <a class="btn btn-primary btn-sm pull-right" href="{{url('foo')}}">dolor</a>
Laravel Blade
I am using views and I have created a block. I need to add a span to Newest members.
I tried using the theme tpl files given by views. The top most file is views-view.tpl.php, I added a class to the first div "vishaltest" however u can see it starts a bit lower than what I want. how can I override this section
<div class="block-title">Newest members</div>
the code:
<section id="block-views-5a3590205379433adabbd042516161b0" class="block block-views clearfix">
<div class="block-title">Newest members</div>
<div class="view view-recently-added-updated-profiles view-id-recently_added_updated_profiles view-display-id-newest_member view-dom-id-e8042a917bbe79ecf65705f5c8bda2a3 vishaltest">
I think you would have more chance to access the block title through block--views-view.tpl.php using $block->subject variable.