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();
Related
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/
I'm new to ASP.NET Core and trying to figure out how to display a Bootrstap modal based on a string property of the underlying page Model (Model.Message). I've tried several different things and nothing is working. Below is a sample Bootrstap modal I found on the Bootstrap website. I can get the modal to display with a button, but that's not the functionality I am looking for.
<!-- Modal -->
<div class="modal fade" id="UserDialog" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Understood</button>
</div>
</div>
</div>
</div>
EDIT: Added code to my scripts section at the bottom of the page and a new JavaScript function in an external .js file.
Here's my scripts section on the Razor page
#section scripts
{
<script>
$(document).ready(function () {
ShowModalDlg();
var message = '#Model.Message';
if (message != "") {
ShowModalDlg();
}
});
</script>
}
Here's the new JavaScript function in my external file
function ShowModalDlg()
{
$("#UserDialog").modal("show");
}
The ShowModalDlg() function does get called when it is supposed to, but the bootstrap modal is not showing. The button I added to test "showing" the modal still works. I also added (although not shown here) a temporary call to alert("I'm here!") inside of the ShowModalDlg() function and the alert shows perfectly. I did just check the Chrome debug console and I am getting an error that seems to indicate I am loading jquery twice. That error message is:
"$(...).modal is not a function"
So it looks like I need to figure out where that's happening.
I have the following in my _Layout.cshtml page:
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
If I understand you, this kind of approach might solve your problem. We define a ShowModal variable sent from the controller as a javascript variable, then we trigger the modal by checking the value of this variable.
EDIT: We expect 'show' string as showModal variable from controller.
<script>
var showModal = '#Model.showModal';
if(showModal == 'show'){
$("#exampleModal").modal("show");
}
</script>
If you use it this way it will work. You can check it here.
<script src="https://cdn.jsdelivr.net/npm/jquery#3.6.0/dist/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <!-- You may not really need this. -->
<!-- Bootstrap 5 (https://getbootstrap.com/docs/5.0/getting-started/download/) -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
I fixed the problem by combining the answer above with the following:
$(window).load(function ()
{
var message = '#Model.Message';
if (message != "") {
ShowModalDlg();
}
});
I should not have had that code inside of document ready, which is why it wasn't working and also causing the error message.
I'm wondering if I can validate a form with input fields that are wrapped in another components.
Something like this:
<template>
<require from="./inpWrap"></require>
<form submit.delegate="submit()">
<div class="form-group">
<inp-wrap value.bind="firstName & validate"></inp-wrap>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</template>
Here's the full gist: https://gist.run/?id=f94dd7502141f865468465ef25c9e5a1
Visually, in this example, the validation will run only on running the .validate() method (by clicking on the submit button) for the wrapped element.
Would it be possible to have the same validation behaviour for the component-wrapped elements?
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 was using something like this before Dojo 1.8, but now I get a "node not found" error :
<form dojoType="dijit.form.Form">
Search :
<input type="text" dojoType="dijit.form.TextBox" name="searcht" id="searcht">
<script type="dojo/connect" event="onSubmit" args="evt">
my_function();
dojo.stopEvent(evt);
</script>
</form>
I noticed that if I remove the search text box the code is working.
How can I rewrite the above to work with 1.8, and also please be so kind to point me in the right direction to read about this and understand why this is happening.
I should also note that I'm using the same type of code for contentpanes, and the code works fine there.
Thanks,
Noru
In dojo 1.8 dojo.connect is dojo/on. First you have to load the modules you are going to use and parse the file to transform dijit elements.
<script>
require([
"dojo/parser",
"dijit/form/Form",
"dijit/form/TextBox",
"dijit/form/Button"
], function(parser) {
parser.parse();
});
</script>
Second, declare the dijit properties and funcionality inside html tags:
<div data-dojo-type="dijit/form/Form" id="search_form">
<script type="dojo/on" data-dojo-event="submit" data-dojo-args="evt">
evt.stopPropagation();
alert( "my_function()" );
</script>
<label for="my_textbox">Search:</label>
<input type="text" data-dojo-type="dijit/form/TextBox" id="my_textbox"/>
<button data-dojo-type="dijit/form/Button" id="my_button" type="submit">
Submit
</button>
</div>
I used a declaratively example inserting dijit options inside the html code. There is other way using only javascript. Take a look in the official documentation: http://dojotoolkit.org/reference-guide/1.8/dijit/index.html