How do I get the drop-down button to work within a card in React?
I am building in react and using Tailwind css card to display API information. I do not want to show all the info at once so plan to use a dropdown to say "show more" but somehow it won't work.
Button shows but when clicked nothing happens. Here is the code below, this also applies to dropdown code from the tailwind official website so something wrong with my app that I cannot figure out.
You can see the code display here
Thank you
<h5 class="text-gray-900 text-xl leading-tight font-medium mb-2">Card title</h5>
<p class="text-gray-700 text-base mb-4">
Some quick example text to build on the card title and make up the bulk of the card's
content.
</p>
<button
class="dropdown-toggle inline-block px-6 py-2.5 bg-purple-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-purple-700 hover:shadow-lg focus:bg-purple-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-purple-800 active:shadow-lg active:text-white transition duration-150 ease-in-out flex items-center whitespace-nowrap"
type="button"
id="dropdownMenuButton2"
data-bs-toggle="dropdown"
aria-expanded="false"
>
SHOW MORE
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="caret-down"
class="w-2 ml-2"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 320 512"
>
<path
fill="currentColor"
d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
></path>
</svg>
</button>
<ul
class="dropdown-menu min-w-max absolute hidden bg-white text-base z-50 float-left py-2 list-none text-left rounded-lg shadow-lg mt-1 hidden m-0 bg-clip-padding border-none bg-gray-800"
aria-labelledby="dropdownMenuButton2"
>
<h6
class="text-gray-400 font-semibold text-sm py-2 px-4 block w-full whitespace-nowrap bg-transparent"
>
Dropdown header
</h6>
<span
class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-gray-300"
>Dropdown item text</span
>
<li>
<a
class="dropdown-item text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-gray-300 hover:bg-gray-700 hover:text-white focus:text-white focus:bg-gray-700 active:bg-blue-600"
href="#"
>Action</a
>
</li>
<li>
<a
class="dropdown-item text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-gray-300 hover:bg-gray-700 hover:text-white focus:text-white focus:bg-gray-700"
href="#"
>Another action</a
>
</li>
<li>
<a
class="dropdown-item text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-gray-300 hover:bg-gray-700 hover:text-white focus:text-white focus:bg-gray-700"
href="#"
>Something else here</a
>
</li>
<li><hr class="h-0 my-2 border border-solid border-t-0 border-gray-300 opacity-25" /></li>
<li>
<a
class="dropdown-item text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-gray-300 hover:bg-gray-700 hover:text-white focus:text-white focus:bg-gray-700"
href="#"
>Separated link</a
>
</li>
</ul>
</div>
</div>
Just remove hidden class from ul tag and you can use one of component library like flowbite or daisyui
Related
I recently changed to importing the layout page of a project globally rather than doing so on each page that uses the layout. I understand that this change makes the layout component a parent of the pages using it (importing the layout component in each page makes it a child of the page), but I have now come to know that this also affects the CSS cascading and specificity rules.
I did some fiddling and managed to get things back to how it was but I'm still unable to fix the CSS of my nav section.
These are screenshots of what I have now:
I copied over the rendered HTML of the page to Tailwind Play and it generates the page as I expect, meaning what I have should work. This is the screenshot for that:
This is the rendered HTML code for this page:
<div class="min-h-screen dark:text-white bg-gray-100 dark:bg-gray-700 border-b border-gray-200"><nav><!-- Primary Navigation Menu --><div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"><div class="flex justify-between"><!-- Logo --><div class="pt-2"><img src="/img/Android-icon.png" alt="SmartWealth Logo" class="block h-9 w-auto"></div><!-- Navigation Links --><div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex"><a class="inline-flex items-center px-1 pt-1 border-b-2 border-indigo-400 dark:border-indigo-800 text-sm font-medium leading-5 text-gray-700 dark:text-white focus:outline-none focus:border-indigo-700 dark:focus:border-indigo-200 transition" href="http://127.0.0.1:8000/dashboard"> Dashboard </a><a class="inline-flex items-center px-1 pt-1 border-b-2 border-transparent dark:border-transparent text-sm font-medium leading-5 text-gray-500 dark:text-white dark:hover:text-gray-300 hover:text-gray-800 dark:hover:border-gray-400 hover:border-gray-300 focus:outline-none focus:text-gray-700 dark:focus:text-gray-200 focus:border-gray-300 dark:focus:border-gray-100 transition" href="http://127.0.0.1:8000/users"> Users </a></div><!-- Dropdown Navigation Menu --><div class="hidden sm:flex sm:items-center sm:ml-6"><!-- Settings Dropdown --><div class="ml-3"><div class="relative"><div><button class="flex text-sm border-2 border-transparent rounded-full focus:outline-none focus:border-gray-300 transition"><img class="h-8 w-8 rounded-full object-cover" src="https://smartwealth.s3.us-west-004.backblazeb2.com/profile-photos/x6ykUSsxOgm220vMTZbvaIIGe5Nu3wEsg9c0g469.jpg" alt="Adefowowe Adebamowo"></button></div><!-- Full Screen Dropdown Overlay --><div class="fixed inset-0 z-40" style="display: none;"></div><div class="absolute z-50 mt-2 rounded-md shadow-lg w-48 origin-top-left left-0" style="display: none;"><div class="rounded-md ring-1 ring-black ring-opacity-5 py-1 bg-white"><!-- Account Management --><div class="px-4 py-2 text-xs text-gray-400"> Manage Account </div><!--v-if--><div><a class="block px-4 py-2 text-sm leading-5 text-gray-700 dark:hover:bg-gray-500 hover:bg-gray-200 focus:outline-none dark:focus:bg-gray-500 focus:bg-gray-200 transition" href="http://127.0.0.1:8000/manage/rbac"> Manage Roles and Permissons </a></div><div><a class="block px-4 py-2 text-sm leading-5 text-gray-700 dark:hover:bg-gray-500 hover:bg-gray-200 focus:outline-none dark:focus:bg-gray-500 focus:bg-gray-200 transition" href="http://127.0.0.1:8000/user/profile"> Account Profile </a></div><div><a class="block px-4 py-2 text-sm leading-5 text-gray-700 dark:hover:bg-gray-500 hover:bg-gray-200 focus:outline-none dark:focus:bg-gray-500 focus:bg-gray-200 transition" href="http://127.0.0.1:8000/investment-profile/create"> Risk Assessment </a></div><!--v-if--><!--v-if--><!--v-if--><div><a class="block px-4 py-2 text-sm leading-5 text-gray-700 dark:hover:bg-gray-500 hover:bg-gray-200 focus:outline-none dark:focus:bg-gray-500 focus:bg-gray-200 transition" href="http://127.0.0.1:8000/providers/authorisation"> Provider Authorisation </a></div><div><a class="block px-4 py-2 text-sm leading-5 text-gray-700 dark:hover:bg-gray-500 hover:bg-gray-200 focus:outline-none dark:focus:bg-gray-500 focus:bg-gray-200 transition" href="http://127.0.0.1:8000/chat/messages"> Chats </a></div><!--v-if--><div><a class="block px-4 py-2 text-sm leading-5 text-gray-700 dark:hover:bg-gray-500 hover:bg-gray-200 focus:outline-none dark:focus:bg-gray-500 focus:bg-gray-200 transition" href="http://127.0.0.1:8000/user/api-tokens"> API Tokens </a></div><!-- Authentication --><form><div><button type="submit" class="block w-full px-4 py-2 text-sm leading-5 text-gray-700 text-left dark:hover:bg-gray-500 hover:bg-gray-200 focus:outline-none dark:focus:bg-gray-500 focus:bg-gray-200 transition"> Log Out </button></div></form></div></div></div></div><!--Notifications Dropdown --><div class="mx-2"><div class="relative"><div><div><span class=""><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4"><path fill-rule="evenodd" d="M5.25 9a6.75 6.75 0 0113.5 0v.75c0 2.123.8 4.057 2.118 5.52a.75.75 0 01-.297 1.206c-1.544.57-3.16.99-4.831 1.243a3.75 3.75 0 11-7.48 0 24.585 24.585 0 01-4.831-1.244.75.75 0 01-.298-1.205A8.217 8.217 0 005.25 9.75V9zm4.502 8.9a2.25 2.25 0 104.496 0 25.057 25.057 0 01-4.496 0z" clip-rule="evenodd"></path></svg></span></div></div><!-- Full Screen Dropdown Overlay --><div class="fixed inset-0 z-40" style="display: none;"></div><div class="absolute z-50 mt-2 rounded-md shadow-lg w-48 origin-top-left left-0" style="display: none;"><div class="rounded-md ring-1 ring-black ring-opacity-5 py-1 bg-white"><!-- Notifications Management --><div class="block px-4 py-2 text-xs text-gray-400"> Your Notifications </div><div class="block px-4 py-2 text-xs text-gray-400"><button class="mx-2">x</button><button>Mark all as read</button></div><div class="bg-white"></div></div></div></div></div><!-- Page Theme Toggle --><div class="ml-2 flex items-right"><button><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4"><path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 01.818.162z" clip-rule="evenodd"></path></svg></button></div></div></div><!-- Hamburger --><div class="-mr-2 flex items-center sm:hidden"><button class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition"><svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24"><path class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path><path class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg></button></div><!-- Responsive Navigation Menu --><div class="hidden sm:hidden"><div class="pt-2 pb-3 space-y-1"><div><a class="block pl-3 pr-4 py-2 border-l-4 border-indigo-400 dark:border-indigo-800 text-base font-medium dark:font-bold text-indigo-700 dark:text-indigo-800 bg-indigo-50 dark:bg-gray-800 focus:outline-none focus:text-indigo-800 dark:focus:text-indigo-800 focus:bg-indigo-800 dark:focus:bg-gray-800 focus:border-indigo-700 dark:focus:border-indigo-200 transition" href="http://127.0.0.1:8000/dashboard"> Dashboard </a></div><div><a class="block pl-3 pr-4 py-2 border-l-4 border-transparent dark:border-transparent text-base font-medium text-gray-600 dark:text-gray-300 dark:hover:text-gray-300 hover:text-gray-800 dark:hover:bg-gray-25 hover:bg-gray-50 hover:border-gray-300 dark:hover:border-gray-200 focus:outline-none focus:text-gray-800 dark:focus:text-gray-200 focus:bg-gray-50 dark:focus:bg-gray-25 focus:border-gray-300 dark:focus:border-gray-100 transition" href="http://127.0.0.1:8000/users"> Users </a></div></div><!-- Responsive Settings Options --><div class="pt-4 pb-1 border-t border-gray-200"><div class="flex items-center px-4"><div class="flex-shrink-0 mr-3"><img class="h-10 w-10 rounded-full object-cover" src="https://smartwealth.s3.us-west-004.backblazeb2.com/profile-photos/x6ykUSsxOgm220vMTZbvaIIGe5Nu3wEsg9c0g469.jpg" alt="Adefowowe Adebamowo"></div><div class="ml-2"><div class="relative"><div><div><span class=""><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4"><path fill-rule="evenodd" d="M5.25 9a6.75 6.75 0 0113.5 0v.75c0 2.123.8 4.057 2.118 5.52a.75.75 0 01-.297 1.206c-1.544.57-3.16.99-4.831 1.243a3.75 3.75 0 11-7.48 0 24.585 24.585 0 01-4.831-1.244.75.75 0 01-.298-1.205A8.217 8.217 0 005.25 9.75V9zm4.502 8.9a2.25 2.25 0 104.496 0 25.057 25.057 0 01-4.496 0z" clip-rule="evenodd"></path></svg></span></div></div><!-- Full Screen Dropdown Overlay --><div class="fixed inset-0 z-40" style="display: none;"></div><div class="absolute z-50 mt-2 rounded-md shadow-lg w-48 origin-top-left left-0" style="display: none;"><div class="rounded-md ring-1 ring-black ring-opacity-5 py-1 bg-white"><!-- Notifications Management --><div class="block px-4 py-2 bg-white text-xs text-gray-400"> Your Notifications </div><div class="block px-4 py-2 bg-white text-xs text-gray-400"><button class="mx-2">x</button><button>Mark all as read</button></div><div class="bg-white dark:bg-gray-800"></div></div></div></div></div><div class="ml-2"><button><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4"><path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 01.818.162z" clip-rule="evenodd"></path></svg></button></div></div><div class="mt-3 space-y-1"><!--v-if--><div><a class="block pl-3 pr-4 py-2 border-l-4 border-transparent dark:border-transparent text-base font-medium text-gray-600 dark:text-gray-300 dark:hover:text-gray-300 hover:text-gray-800 dark:hover:bg-gray-25 hover:bg-gray-50 hover:border-gray-300 dark:hover:border-gray-200 focus:outline-none focus:text-gray-800 dark:focus:text-gray-200 focus:bg-gray-50 dark:focus:bg-gray-25 focus:border-gray-300 dark:focus:border-gray-100 transition" href="http://127.0.0.1:8000/manage/rbac"> Manage Roles and Permissons </a></div><div><a class="block pl-3 pr-4 py-2 border-l-4 border-transparent dark:border-transparent text-base font-medium text-gray-600 dark:text-gray-300 dark:hover:text-gray-300 hover:text-gray-800 dark:hover:bg-gray-25 hover:bg-gray-50 hover:border-gray-300 dark:hover:border-gray-200 focus:outline-none focus:text-gray-800 dark:focus:text-gray-200 focus:bg-gray-50 dark:focus:bg-gray-25 focus:border-gray-300 dark:focus:border-gray-100 transition" href="http://127.0.0.1:8000/user/profile"> Account Profile </a></div><div><a class="block pl-3 pr-4 py-2 border-l-4 border-transparent dark:border-transparent text-base font-medium text-gray-600 dark:text-gray-300 dark:hover:text-gray-300 hover:text-gray-800 dark:hover:bg-gray-25 hover:bg-gray-50 hover:border-gray-300 dark:hover:border-gray-200 focus:outline-none focus:text-gray-800 dark:focus:text-gray-200 focus:bg-gray-50 dark:focus:bg-gray-25 focus:border-gray-300 dark:focus:border-gray-100 transition" href="http://127.0.0.1:8000/investment-profile/create"> Risk Assessment </a></div><!--v-if--><!--v-if--><!--v-if--><div><a class="block pl-3 pr-4 py-2 border-l-4 border-transparent dark:border-transparent text-base font-medium text-gray-600 dark:text-gray-300 dark:hover:text-gray-300 hover:text-gray-800 dark:hover:bg-gray-25 hover:bg-gray-50 hover:border-gray-300 dark:hover:border-gray-200 focus:outline-none focus:text-gray-800 dark:focus:text-gray-200 focus:bg-gray-50 dark:focus:bg-gray-25 focus:border-gray-300 dark:focus:border-gray-100 transition" href="http://127.0.0.1:8000/providers/authorisation"> Provider Authorisation </a></div><div><a class="block pl-3 pr-4 py-2 border-l-4 border-transparent dark:border-transparent text-base font-medium text-gray-600 dark:text-gray-300 dark:hover:text-gray-300 hover:text-gray-800 dark:hover:bg-gray-25 hover:bg-gray-50 hover:border-gray-300 dark:hover:border-gray-200 focus:outline-none focus:text-gray-800 dark:focus:text-gray-200 focus:bg-gray-50 dark:focus:bg-gray-25 focus:border-gray-300 dark:focus:border-gray-100 transition" href="http://127.0.0.1:8000/chat/messages"> Chats </a></div><!--v-if--><div><a class="block pl-3 pr-4 py-2 border-l-4 border-transparent dark:border-transparent text-base font-medium text-gray-600 dark:text-gray-300 dark:hover:text-gray-300 hover:text-gray-800 dark:hover:bg-gray-25 hover:bg-gray-50 hover:border-gray-300 dark:hover:border-gray-200 focus:outline-none focus:text-gray-800 dark:focus:text-gray-200 focus:bg-gray-50 dark:focus:bg-gray-25 focus:border-gray-300 dark:focus:border-gray-100 transition" href="http://127.0.0.1:8000/user/api-tokens"> API Tokens </a></div><!-- Authentication --><form method="POST"><div><button class="block pl-3 pr-4 py-2 border-l-4 border-transparent dark:border-transparent text-base font-medium text-gray-600 dark:text-gray-300 dark:hover:text-gray-300 hover:text-gray-800 dark:hover:bg-gray-25 hover:bg-gray-50 hover:border-gray-300 dark:hover:border-gray-200 focus:outline-none focus:text-gray-800 dark:focus:text-gray-200 focus:bg-gray-50 dark:focus:bg-gray-25 focus:border-gray-300 dark:focus:border-gray-100 transition w-full text-left"> Log Out </button></div></form></div></div></div></div></nav><!-- Display messages from backend sent as flash page props --><div><!--v-if--></div><!-- Display notifications broadcasts (wrap into a reusable component) --><!--v-if--><!-- Page Heading --><!--v-if--><!-- Page Content --><main><!----><div slot="header" class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8"><h2 class="font-semibold text-xl text-gray-800 dark:text-gray-100 leading-tight"> Dashboard </h2></div><div class="py-8"><div class="max-w-3xl mx-auto sm:px-6 lg:px-8"><div class="rounded"><div class="p-6 sm:px-20 border border-gray-200 rounded"><div class="text-2xl"> Hello Adefowowe, welcome to SmartWealth! </div><div class="mt-1 text-sm"><p> Now that you're here, the first step is to take a risk assessment test to gauge your investment capacity and risk disposition. You can do that here: <a class="inline-flex items-center px-1 pt-1 border-b-2 border-transparent dark:border-transparent text-sm font-medium leading-5 text-gray-500 dark:text-white dark:hover:text-gray-300 hover:text-gray-800 dark:hover:border-gray-400 hover:border-gray-300 focus:outline-none focus:text-gray-700 dark:focus:text-gray-200 focus:border-gray-300 dark:focus:border-gray-100 transition" href="http://127.0.0.1:8000/investment-profile/create"><strong> Risk Assessment </strong></a></p></div></div></div></div></div></main></div>
What can I do to get things working properly?
you have to append #media screen sizes in your CSS file as:
/* Small */
#media (min-width: 768px) {
.container {
width: 750px;
}
}
/* Medium */
#media (min-width: 992px) {
.container {
width: 970px;
}
}
/* Large */
#media (min-width: 1200px) {
.container {
width: 1170px;
}
}
<div class="head">
<div class="container">
<p>some text</p>
</div>
</div>
I have a counter made with Tailwind and Alpine JS. I am trying to capture the value of the input field when the user types in or uses the counter buttons, but I am only able to capture the value when a user types their response. Any ideas on how to capture the values when the user uses the counter buttons to increment or decrement?
<!-- counter -->
<div class="z-50 relative" x-data="{ quantity : 0 }">
<div class="fisker-bold text-gray-900 text-center mx-auto text-sm">
Quantity</div>
<div class=" mt-1 mb-3 flex rounded-md justify-center">
<button #click="quantity--" type="button"
class=" relative inline-flex items-center space-x-2 px-4 py-2 text-sm font-medium rounded-l-md text-gray-700 bg-gray-50 hover:bg-gray-100 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 bg-gray-300">
-
</button>
<div class="relative flex items-stretch focus-within:z-10">
<input type="text" x-model="quantity" name="qty-1" id="qty-1"
class="text-center focus:ring-blue-500 focus:border-indigo-500 block w-20 text-gray-900 rounded-none pl-3 sm:text-sm border-gray-300 bg-gray-300"
value="0">
</div>
<button #click="quantity++" type="button"
class="relative inline-flex items-center space-x-2 px-4 py-2 text-sm font-medium rounded-r-md text-gray-700 bg-gray-50 hover:bg-gray-100 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 bg-gray-300">
+
</button>
</div>
</div>
<!-- counter -->
<script>
$(function () {
$("#qty-1").on("change", function () {
var text = $(this).find('option:selected').text();
$('#qty').text(' x' + text);
});
});
</script>
{% for person in teacher %}
<tr class="bg-gray-100 border-b">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900"></td>
<td class="p-0 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
<img src="{{person.customuser.profile_pic.url}}" class="rounded-lg w-32"
alt="Avatar" />
</td>
<td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
<p>{{person.customuser.first_name}} {{person.customuser.last_name}}</p>
</td>
<td class="text-sm text-gray-900 font-light px-4 py-4 whitespace-nowrap">
{% for item in person.subjects.all %}
<p>{{item.name}}</p>
{% endfor %}
</td>
<td class="text-sm text-gray-900 font-light px-4 py-4 whitespace-nowrap">
<div class="flex items-center justify-center">
<div id="btnView" class="inline-flex shadow-md hover:shadow-lg focus:shadow-lg"
role="group">
<button type="button"
class="rounded-l inline-block px-6 py-2.5 bg-[#4951bf] text-white font-medium text-xs leading-tight uppercase hover:bg-blue-700 focus:bg-blue-700 focus:outline-none focus:ring-0 active:bg-blue-800 transition duration-150 ease-in-out">Edit</button>
<button onclick='viewDetails()'
type="button"
class=" inline-block px-6 py-2.5 bg-[#4951bf] text-white font-medium text-xs leading-tight uppercase hover:bg-green-700 focus:bg-green-700 focus:outline-none focus:ring-0 active:bg-green-800 transition duration-150 ease-in-out">View</button>
<button type="button"
class=" rounded-r inline-block px-6 py-2.5 bg-[#4951bf] text-white font-medium text-xs leading-tight uppercase hover:bg-red-700 focus:bg-red-700 focus:outline-none focus:ring-0 active:bg-blue-800 transition duration-150 ease-in-out">Delete</button>
</div>
</div>
</td>
</tr>
{% endfor %}
I want to call a javascript function viewDetails({{person.id}}) inside onclick event when the user presses the button.I want the value {{person.id}} to be passed as an argument which is coming from the for loop in jinja tag. Is it possible?
You can set value as onclick="viewDetails({{person.id}})"
<button onclick="viewDetails({{person.id}})" type="button"
class=" inline-block px-6 py-2.5 bg-[#4951bf] text-white font-medium text-xs leading-tight uppercase hover:bg-green-700 focus:bg-green-700 focus:outline-none focus:ring-0 active:bg-green-800 transition duration-150 ease-in-out">View</button>
Then in your javascript code do whatever you wants.
function viewDetails(personId) {
console.log(personId)
//do whatever you want to do with that `personId`
}
I have the following code that uses tailwindcss for the toggle, and AlpineJS for adding a cookie base on the toggle state (on/off).
But I can't seem to make it work.
Here's the codepen: https://codepen.io/williamharvey/pen/GRMBqzO
Any help or direction will be appreciated
Thanks
And here's the code.
<div
class="flex w-full items-center bg-gray-100 border-b border-gray-200 px-5 py-3 text-sm"
x-data="{ cookieConcent1: docCookies.getItem('cookieConcent1') === 'true'} "
x-init="$watch('!cookieConcent1', val => docCookies.setItem('cookieConcent1', val))"
x-bind:class="{ 'cookieConcent1': cookieConcent1 }">
<div class="flex-1">
<p>Strictly necessary cookies</p>
</div>
<div class="w-10 text-right">
<button type="button"
class="relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-300 bg-gray-200"
x-data="{ on: true }"
role="switch"
aria-checked="false"
:aria-checked="on.toString()"
#click="on = !on;cookieConcent1 = !cookieConcent1"
x-state:on="Enabled"
x-state:off="Not Enabled"
:class="{ 'bg-green-400': on, 'bg-gray-200': !(on) }
">
<span class="sr-only">Use setting</span>
<span aria-hidden="true" class="pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200 translate-x-0"
x-state:on="Enabled"
x-state:off="Not Enabled"
:class="{ 'translate-x-5': on, 'translate-x-0': !(on) }
"></span>
</button>
</div>
</div>
I need to pass the input values to a modal, but i can't do it with x-ref. Is this the right way to do it?
<div x-data="orderSearch()" class="container mt-2 mx-auto" x-ref="root">
<div class="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2 mt-2 mb-3">
<div class="card m-1 p-1 cursor-pointer border border-gray-400 rounded-lg hover:shadow-md hover:border-opacity-0 transform hover:-translate-y-1 transition-all duration-200 bg-green-200">
<div class="flex flex-row w-full py-2 px-2 m-1 text-sm text-green-800" x-data="{ qty: '', val: '', total: ''}" x-effect="total = qty * val">
Definir estratégia de COMPRA:
<input class="field shadow appearance-none border rounded w-1/3 py-2 px-2 my-1 mx-1 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="valorcompra" type="text" placeholder="Valor" autofocus x-model.number="qty" x-ref="valorcompra" #keydown.enter="fetchOrder('buy',$refs.quantidadecompra.value,$refs.valorcompra.value)">
<input class="field shadow appearance-none border rounded w-1/3 py-2 px-2 my-1 mx-1 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="quantidadecompra" type="text" placeholder="Quantidade" x-model.number="val" x-ref="quantidadecompra" #keydown.enter="fetchOrder('buy',$refs.quantidadecompra.value,$refs.valorcompra.value)">
<input class="field shadow appearance-none border rounded w-1/3 py-2 px-2 my-1 mx-1 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="totalcompra" type="text" placeholder="Total" x-model.number="total" x-ref="totalcompra" #keydown.enter="fetchOrder('buy',$refs.quantidadevenda.value,$refs.valorcompra.value)" x-bind:disabled="true">
</div>
</div>
<div class="card m-1 p-1 cursor-pointer border border-gray-400 rounded-lg hover:shadow-md hover:border-opacity-0 transform hover:-translate-y-1 transition-all duration-200 bg-red-200">
<div class="flex flex-row w-full py-2 px-2 m-1 text-sm text-red-800" x-data="{ qty: '', val: '', total: ''}" x-effect="total = qty * val">
Definir estratégia de VENDA:
<input class="field shadow appearance-none border rounded w-1/3 py-2 px-2 my-1 mx-1 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="valorvenda" type="text" placeholder="Valor" autofocus x-model.number="qty" x-ref="valorvenda" #keydown.enter="fetchOrder('sell',$refs.quantidadevenda.value,$refs.valorvenda.value)">
<input class="field shadow appearance-none border rounded w-1/3 py-2 px-2 my-1 mx-1 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="quantidadevenda" type="text" placeholder="Quantidade" x-model.number="val" x-ref="quantidadevenda" #keydown.enter="modal=true">
<input class="field shadow appearance-none border rounded w-1/3 py-2 px-2 my-1 mx-1 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="totalvenda" type="text" placeholder="Total" x-model.number="total" x-ref="totalvenda" #keydown.enter="fetchOrder('sell',$refs.quantidadevenda.value,$refs.valorvenda.value)" x-bind:disabled="true">
</div>
</div>
</div>
<!-- Dialog (full screen) -->
<div class="absolute top-0 left-0 flex items-center justify-center w-full h-full" style="background-color: rgba(0,0,0,.5);" x-show="modal">
<!-- A basic modal dialog with title, body and one button to close -->
<div class="h-auto p-4 mx-2 text-left bg-white rounded shadow-xl md:max-w-xl md:p-6 lg:p-8 md:mx-0">
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
<h3 class="text-lg font-medium leading-6 text-gray-900">
Confirmação!
</h3>
<div class="mt-2">
<p class="text-sm leading-5 text-gray-500" x-text="'Deseja cadastrar a ordem de venda?'">
</p>
</div>
</div>
<!-- One big close button. --->
<div class="mt-4 flex justify-between">
<div class="cancela px-4 bg-red-400 p-3 rounded-lg text-white hover:bg-red-600" #click="modal=false">Cancelar</div>
<div class="ok px-4 bg-green-400 p-3 rounded-lg text-white hover:bg-green-600" #click="fetchOrder('sell',$refs.quantidadevenda.value,$refs.valorvenda.value)">Confirmar</div>
</div>
</div>
</div>
<!-- fim modal div -->
</div>
Must be read input values here:
<div class="ok px-4 bg-green-400 p-3 rounded-lg text-white hover:bg-green-600" #click="fetchOrder('sell',$refs.quantidadevenda.value,$refs.valorvenda.value)">Confirmar</div>
I tried to find this answer for two days but i cant.
Can you help me?
i tried a $store solution and it1s done:
<script>
const element = document.querySelector("#valorvenda")
element.addEventListener('change', (event) => {
const quantidadevenda = document.querySelector("#quantidadevenda").value
Alpine.store('venda', {
valorcompra: document.querySelector("#valorcompra").value,
quantidadecompra:quantidadevenda,
valorvenda: event.target.value,
quantidadevenda: quantidadevenda,
})
console.log(Alpine.store('fields').valorvenda);
})
</script>
It's like a state management and works fine!
Thanks all.