I'm trying to learn HTMX https://htmx.org/ by building a simple example.
This here is a form with two data entry fields.
It should fire, when the "search" button is clicked or enter is pressed.
This works.
I would like to provide some feedback to the form user:
to grey out the "search" button so it's only activated when there's data in both fields
to grey out the "search" button while a request to the backend it curently in progress. Alternatively show a spinner and block input while the request runs.
<html>
<head>
<title>example</title>
<script src="https://unpkg.com/htmx.org#1.7.0"
integrity="sha384-EzBXYPt0/T6gxNp0nuPtLkmRpmDBbjg6WmCUZRLXBBwYYmwAUxzlSGej0ARHX0Bo"
crossorigin="anonymous"></script>
</head>
<body>
<h1>Hello World!!!</h1>
<div id="main">
<button hx-get="/button1" hx-target="#main">
Get stuff
</button>
</div>
<div id="main2">
<form>
<label for="search">label:</label>
<input id="s1" name="q" type="search" placeholder="one">
<input id="s2" name="q2" type="search" placeholder="two">
<button hx-post="/button2" hx-target="#main" hx-trigger="click, keyup[enterKey] from:body">
Search
</button>
</form>
</div>
</body>
</html>
This should be easily done by using htmx extensions.
Check these out:
https://htmx.org/extensions/disable-element/
https://htmx.org/extensions/loading-states/
Related
I'm tinkering with DaisyUI within Vue.js 3 (porting an existing Vue+Bootstrap application to Tailwind CSS). I liked the idea that DaisyUI doesn't have JS wizardry going on behind the scenes, yet there seems to be some CSS voodoo magic that is doing things more complicated than they need to be (or at least this is my impression).
From the DaisyUI examples, here's the modal I'm trying to integrate:
<input type="checkbox" id="my-modal" class="modal-toggle"/>
<div class="modal">
<div class="modal-box">
<h3 class="font-bold text-lg">Congratulations random Internet user!</h3>
<p class="py-4">You've been selected for a chance to get one year of subscription to use Wikipedia for free!</p>
<div class="modal-action">
<label for="my-modal" class="btn">Yay!</label>
</div>
</div>
</div>
no javascript, yet the problem is that the modal will come and go according to some obscure logic under the hood that tests the value of the my-modal input checkbox at the top. That's not what I want. I want my modal to come and go based on my v-show="showModal" vue3 reactive logic!
Daisy doesn't seem to make that possible. Or at least not easily. What am I missing?
The modal is controller by the input field, so to open or close the modal just toggle the value of that input:
<template>
<!-- The button to open payment modal -->
<label class="btn" #click="openPaymentModal">open modal</label>
<!-- Put this part before </body> tag -->
<input type="checkbox" v-model="paymentModalInput" id="payment-modal" class="modal-toggle" />
<div class="modal modal-bottom sm:modal-middle">
<div class="modal-box">
<h3 class="font-bold text-lg">Congratulations random Internet user!</h3>
<p class="py-4">You've been selected for a chance to get one year of subscription to use Wikipedia for free!</p>
<div class="modal-action">
<label class="btn" #click="closePaymentModal">Yay!</label>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
const paymentModalInput = ref()
const openPaymentModal = () => {
paymentModalInput.value = true
}
const closePaymentModal = () => {
paymentModalInput.value = false
}
</script>
I am using the Vue-datetime package for a datepicker in the UI and also am using Bootstrap 5's input group form component for placing buttons on sides of input fields.
I would like to make the entire input field clickable, as well as the button. Does anyone have any advice on how to do so? My current attempt just makes only a small part of the input field clickable. How to extend it for the entire field, as well as the button?
Screenshot of my current attempt:
I have a codesandbox here: https://codesandbox.io/s/gallant-glade-orwv9?file=/src/components/HelloWorld.vue
Note: It would be nice to hide the inner date field border, as well.
You can solve this issue by using some Bootstrap utility classes.
Applying form-control and p-0 to the wrapper will give it the look of a normal bootstrap input.
Then we can add some classes to the input itself using the input-class prop.
Here we'll add w-100 to stretch it to full width. py-1 and px-2 to give the placeholder some padding and then border-0 to remove the base border on the <input />.
class="form-control p-0"
input-class="w-100 py-1 px-2 border-0"
You'll also want to move the hidden input field to after the datetime component, to avoid the border-radius being messed up on the left side.
The button we can make into a <label> and point to the input to allow us to open the datepicker by pressing it. We can style the label using the btn classes.
new Vue({
el: "#app"
})
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap#5.1.0/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/vue-datetime#1.0.0-beta.14/dist/vue-datetime.min.css" />
<script src="//unpkg.com/vue#2.6.14/dist/vue.min.js"></script>
<script src="//unpkg.com/luxon#1.28.0/build/global/luxon.min.js"></script>
<script src="//unpkg.com/weekstart#1.1.0/dist/commonjs/main.js"></script>
<script src="//unpkg.com/vue-datetime#1.0.0-beta.14/dist/vue-datetime.js"></script>
<div id="app" class="p-4">
<label class="form-label" for="date_input">Date:</label>
<div class="input-group">
<datetime input-id="date_input" type="date" ref="dateInput" class="form-control p-0" input-class="w-100 py-1 px-2 border-0" placeholder="Choose a date..." aria-label="Choose a date..." aria-describedby="dateField" auto required></datetime>
<input type="text" class="d-none" placeholder="Choose a date..." aria-label="Choose a date..." aria-describedby="dateField" />
<label for="date_input" class="btn btn-primary">
Button
</label>
</div>
</div>
I'm using Materialize to generate modals on a php website, only the data below is clearly visible.
This is based on data from a MySQL database. For each hard drive in said db, generate a card and populate with drive data.
For testing purposes I removed all php code to see if that was what was breaking it, sadly I still had normal text punch through.
Any ideas? Are there css options I can use to force the opaque settings? Or maybe an alternative altogether, I did have a look at css overlays but had the same problem.
In the code below I've removed all php. The complete website source code can be found at my repo
here (albeit without the modal stuff as not committed to master yet)
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<!-- Drive stats on index -->
<div class="card-content center">
<h6>Hard Drive Canonical Name Goes Here via PHP</h6>
<ul>
<li>Hard Drive Size Goes Here Via PHP</li>
<li>Hard Drive Temp Goes Here via PHP</li>
<li> </li>
<li>Last updated at database timestamp goes here via PHP</li>
</ul>
</div>
<div class="container center">
<a class="waves-effect waves-light btn blue darken-1 modal-trigger" href="#modal">Launch Temperature History</a>
<div id="modal" class="modal">
<div class="modal-content">
<div class="card graphcolour">
<div class="card graphcontent">
<canvas id=1></canvas> <!-- <?php echo htmlspecialchars( $drive['DiDriveId'] )?> is what would normally be in here -->
</div>
</div>
"hello there!"
</div>
<div class="modal-footer">
Close
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('.modal').modal();
})
</script>
<!-- Status Images -->
<!-- Images would go here based on PHP if else statements -->
</div>
</div>
The materialize modal code snippets were edited versions of below:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script type = "text/javascript" src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</head>
<body>
<div class="container">
<h3>A Demo of Modal</h3>
<!-- Modal Trigger -->
<a class="waves-effect waves-light btn pink darken-1 modal-trigger" href="#demo-modal">Launch Modal</a>
<!-- Modal Structure -->
<div id="demo-modal" class="modal">
<div class="modal-content">
<h4>A Demo of Simple Modal</h4>
<p>Content of the modal goes here. Place marketing text or other information here.</p>
</div>
<div class="modal-footer">
Close
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('.modal').modal();
})
</script>
</body>
</html>
Thanks to SeanDoherty for clarifying what I felt was the answer. I moved the Modal outside of the card, added three empty line breaks to the bottom of my card, then re-added the modal script with css offsetting. It's cheap, but it works!
.modalPosition{
top: -100px;
}
I'm still learning, please help!
I am trying to apply a Modal Popup that appears only when a link is clicked instead of when the page loads. My Modal Popup does all work fine, but I want to turn off/prevent the Popup from appearing at all when the page loads and simply have it only invoke the Popup when my chosen link is clicked.
$(document).ready(function () {
$("#popup-1").myModal({
// Functionality goes below this line
});
});
And this
<div id="popup-1" class="myModal">
<div class="window">
<!-- Your popup content -->
<div class="wrap demo-1">
<div class="title">Some Text Here</p>
<form>
<input type="text" class="field" placeholder="Your email goes here" />
<input type="submit" class="closeModal send" value="Submit" />
</form>
<label class="deny closeModal">Some Text Here</label>
</div>
<div class="cta demo-1">
<span class="icon"></span>
<p>Some Text Here</span></p>
</div>
<!-- / Your popup content -->
</div>
</div>
Is there a simple fix I can apply to solve this issue? I have spent countless hours going through existing posts and forums but almost each enquiry doesnt target the same specific question im trying to achieve based on my actual existing code.
My cose for the Link Click to activate
Newsletter
your help is very much appreciated
Just execute your modal opening code when a link is clicked instead of when the ready event is fired :
$('#modal-link').on('click', function() {
$("#popup-1").myModal({
// Functionality goes below this line
});
});
assuming the link opening your modal is :
link
I have a form that fits neatly into my colorbox. When the following validation function fires it creats dynamic labels that cause the form's height to pop a scroll bar.
I am trying to call $.colorbox.resize() every time the validation function runs but so far its not working?
My code so far
<script type="text/javascript">
$(document).ready(function(){
$("#logForm").validate();
$("#logForm").colorbox.resize();
});
</script>
form code
<div id="colorboxwrapper">
<form action="login.php" method="post" name="logForm" id="logForm">
<input name="doLogin" type="submit" id="doLogin3" class="button" value="Login">
</form>
</div>
This:
$("#logForm").colorbox.resize();
Should be this:
$.colorbox.resize();