On my page are repeating triggers, which should open (change the visibility) a specific form on click. On some pages, there are multiple triggers and forms.
The HTML markup is like this:
<div id="form-container-1">
<a id="form-trigger-1">Open Form</a>
<div id="form-1">
content of form
</div>
</div>
<div id="form-container-2">
<a id="form-trigger-2">Open Form</a>
<div id="form-2">
content of form
</div>
</div>
I'm trying to work on a script, where on click on #form-trigger-x the resonating form (#form-x) get's displayed. That's not the problem, but I want to automate this, so if a page has one form it works and also if it has 10 forms it works, without the need to hardcode every number in the script.
I tried an approach with .each and $(this) but it opened all forms at once instead of the form that should be triggered.
First you need to add click event on all the a tag where id starts with form-trigger with
$("a[id^='form-trigger']").click(function(){
And then you just need to get the next of clicked a tag and play with its display property or whatever you want like
$(this).next()
$("a[id^='form-trigger']").click(function(){
$(this).next().slideToggle();
})
$(".btn").click(function(){
$(this).closest("div").slideToggle();
})
#form-2{
display:none;
}
#form-1{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="form-container-1">
<a id="form-trigger-1">Open Form</a>
<div id="form-1">
content of form 1
<button type="button" class="btn"><i class="fa fa-close"></i> Close form 1</button>
</div>
</div>
<div id="form-container-2">
<a id="form-trigger-2">Open Form</a>
<div id="form-2">
content of form 2
<button type="button" class="btn"><i class="fa fa-close"></i> Close form 2</button>
</div>
</div>
Here is how I approached this. You don't need to target them with specific ID value, Instead, use classes because the basic structure of each container is same it would work no matter how many different forms you got.
When you click on the anchor tag, my script would look for closest form-container class and find the showform class in that dom element and show it.
I have added the code snippet below as an example.
Hope this helps!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="form-container-1" class="form-container">
<a onclick="showform(this);" id="form-trigger-1">Open Form</a>
<div id="form-1" class="showform hide">
content of form
</div>
</div>
<div id="form-container-2" class="form-container">
<a onclick="showform(this);" id="form-trigger-3">Open Form</a>
<div id="form-2" class="showform hide">
content of form
</div>
</div>
<script>
function showform(caller){
$(caller).closest(".form-container").find(".showform").removeClass('hide');
}
</script>
Related
I am trying to learn from Stack Overflow's "add a comment" link with code of three sections:
footnote-list
footnote-form
add-form-link
<div class="col-md-12 footnotes">
<div class="footnote-list">
<ul class="footnote-list">
....
</ul>
</div>
<div class="footnote-form"> make it invisible
<form>
...
</form>
</div>
<div class="add-form-link">
add a footnote
</div>
</div><!-- footnotes -->
I intend to make "footnote-form" invisible at first glance, later to emerge when "add-form-link" is clicked.
The nodes could be shown and hidden using $().hide() $().show()after the page successfully loads.
How can I hide a node at the very beginning?
To hide elements on load... CSS is prefered.
Then to show it, you need a click handler. The e.preventDefault() prevents the normal behavior of a link.
$(".add-form-link a").on("click",function(e){
e.preventDefault();
$(".footnote-form").show();
});
.footnote-form{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12 footnotes">
<div class="footnote-list">
<ul class="footnote-list">
....
</ul>
</div>
<div class="footnote-form"> make it invisible
<form>
...
</form>
</div>
<div class="add-form-link">
add a footnote
</div>
</div><!-- footnotes -->
I am playing around with a sample note manager app built using meteor/materialize/jquery.
I am having problems with my modal not popping up like it should when a button is clicked.
Here is the code for my modal:
<template name="add">
<div id="addNote" class="modal">
<div class="modal-content">
<h3>Add Note</h3>
<form class="add-form">
<input type="text" name="text" placeholder="Add note...">
</form>
</div>
</div>
</template>
This is the button that then when pressed should open the modal.
<li class="nav-item">
<button id="addNote" class="waves-effect waves-light btn" href="#addNote">Add Note</button>
</li>
I also have this jquery code which is apparently to initialize the modal.
<script>
$(document).ready(function(){
$('.modal').modal();
});
</script>
When I click on the button, the modal does not pop up like I believe it should.
When I add this one line of code, the modal is open by default upon reloading the page.
<script>
$(document).ready(function(){
$('.modal').modal();
$('#addNote').modal('open');
});
</script>
Therefore I would think that by doing something such as
<script>
$('#addNote').click(function() {
$('#addNote').modal('open');
});
</script>
or by doing
<button onclick="myFunction()"></button>
However, neither one of them are working as expected and the modal will not open. Does anyone know what I am doing wrong here?
This is probably happening because the button and the div have the same id of "addNote".
Try changing the id of the button and then the jQuery script.
<button id="addNoteButton" class="waves-effect waves-light btn"
href="#addNote">Add Note</button>
<script>
$('#addNoteButton').click(function() {
$('#addNote').modal('open');
});
</script>
It's already an old question and with found solution (despite no accepted answer?), but been playing with this right now. I think some clarifications will help.
Was that your whole code? If not, check the line if having .modal initiated first.
$('.modal').modal();
You have omitted that part when describing details in your further steps.
<script>
$(document).ready(function(){
$('.modal').modal();
$('#addNote').click(function() {
$('.modal').modal('open');
});
});
</script>
Was able to fix by using the following code
<li class="nav-item">
<button name="addNoteButton" class="waves-effect waves-light btn" href="#addNote" onclick="$('#addNote').modal('open');">Add Note</button>
</li>
$(document).ready(function(){
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal-trigger').leanModal();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
<link rel="stylesheet" href=" https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
<div class="row section">
<div class="col">
<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
<p>You have to include jQuery and Materialize JS + CSS for the modal to work. You can include it from CDN (getting started).
</div>
</div>
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Agree
</div>
</div>
opening model using materialize css
I think you must have to specify a modal-trigger on your trigger button as bellow. just try it.
HTML
<li class="nav-item">
<button type="button" id="addNote" class="waves-effect waves-light btn modal-trigger" href="#addNote">Add Note</button>
</li>
JS
<script type="text/javascript">
$(function(){
//the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$(".modal").modal();
});
</script>
If following the guide on materialize css, I ran into this error for awhile, only to find out that it was the import order, you have to import jQuery before importing materialize.js!
<a href="#">
<div class="col-md-4 promo-item item-1">
<h3>
Unleash
</h3>
</div>
</a>
I got a template online, the above (with css/bootstrap?), is an image that is a link. I want to change it so that instead of a link (href), it's a clickable button.
My plan is for the button to use JavaScript to change some of the content on the page, basing it off the JavaScript below;
<button type="button" onclick="document.getElementById('demo').innerHTML='Hello JavaScript!' ">
Click Me!
</button>
So how do I change this href into a button?
in bootstrap you just add the button classes and it will look like a button
<a class='btn btn-default' ...
However, there is no reason you can't just copy the onclick attribute to the anchor tag (or "href" as you keep calling it).
From your code in the comments:
<div id='demo'></div>
<a onclick="document.getElementById('demo').innerHTML='Hello JavaScript!'; return false; "> Click Me!> <div class="col-md-4 promo-item item-1"> <h3> Unleash </h3> </div> </a>
The field Description is optional and only appears when the user clicks on the + Description button. However when another div is generated the code loses the focus of the element it should hide and the button doesn't work anymore.
<script>
$(document).ready(function(e){
$(document).on('click', '#hide-desc', function(e) {
$("#description").slideToggle();
});
});
</script>
I have a button to remove and add the following div:
<div class="item-wrapper">
<div class="item-inner-wrapper">
<!-- Among other stuff -->
<div id="description" class="item-child-desc">
{{ form }}
</div>
</div>
<div class="item-action-button">
<!-- Deletes item-wrapper and another button adds it -->
<a id="delete" href="#" class="button alt small special">Remove</a>
<a id="hide-desc" class="button alt small">+ Description</a>
</div>
</div>
I know the function must be able to identify which description I am talking about, but I don't know how to do that. I tried to get the parent div of the button and specify the div with method find() but I could not make it work.
I have the same problem happening with an autocomplete function. I believe I will get both working if I can figure out what I have to do.
Based on your comments, I assume your html sort of looks like this (note that we use .description rather than #description since those are not unique elements):
<div class="item-wrapper">
<div class="item-action-button">
<a id="delete" href="#" class="button alt small special">Remove</a>
<a id="hide-desc" class="button alt small">+ Description</a>
</div>
<div class="description" class="item-child-desc">
blergh
</div>
</div>
We just have to look for the parent .item-wrapper using e.target to reference the source of the event then search the child .description:
$(e.target).parents(".item-wrapper").find(".description").slideToggle();
Based on the sample html you've added, the following should also work without modification:
$(e.target).parents(".item-wrapper").find(".item-child-desc").slideToggle();
It's also possible to just use this:
$(this).parents(".item-wrapper").find(".item-child-desc").slideToggle();
In all cases, the crucial part is parents(".item-wrapper").
I'm not entirely certain of the question, but if my understanding is correct I believe I may have found a solution for you. Using jQuery Event Delegation, it's relatively simple!
Run this code snippet and see if I'm close to a solution:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item-action-button"> Remove
<a class="hide-desc button alt small">+ Description</a>
<div class="item-child-desc">{{ form }}</div>
</div>
<div class="item-action-button"> Remove
<a class="hide-desc button alt small">+ Description</a>
</div>
<div class="item-action-button"> Remove
<a class="hide-desc button alt small">+ Description</a>
<div class="item-child-desc">{{ form }}</div>
</div>
<div class="item-action-button"> Remove
<a class="hide-desc button alt small">+ Description</a>
</div>
<script>
$(document).ready(function (e) {
$(".item-action-button").on('click', '.hide-desc', function (e) {
$(e.delegateTarget).find(".item-child-desc").slideToggle();
});
});
</script>
<style>
.item-child-desc {
display: none;
}
</style>
The problem with using ids for event handling is that they are only ever registered with the last element with that matching id. If you want one event handler for all elements of a certain type, register an event handler with elements of a certain class or tag. You'd be doing yourself a disservice otherwise.
Hope this helps!
I'm trying to find a way to make a replace button on my page. I've looked around the web but all I found was a replace text script. What I want is to replace both the text in my h1 tag and the text in the article. If its possible to just replace the whole div with another div it would be great.
To explain a bit more accurate on my page: www.bravitus.com
I want at the "OM MIG" section, a button where I could switch out the content, for something else like some info about bravitus. I'd like a button to click that replaces only the orange section.
Here's a bit of my mark-up:
<div class="full-page" id="page-2">
<div class="container">
<h1 style="color:white;" >Hvem er jeg</h1>
<div class="columns eight"><article> Lorem ipsum </article>
</div>
I want to replace all content in the page-2, or just switch out the whole page-2 div with another.
Is that possible?
Here we go, a small demo on jsFiddle (http://jsfiddle.net/json/8cu34y4L/).
There are three buttons with the data-switch attribute. The attribute indicates what block inside the page-2 will be shown, when the button is clicked.
HTML
<button data-switch="#about_me">Click to read about me</button>
<button data-switch="#education">Click to show my education</button>
<button data-switch="#about_name_bravitus">Click to read about the name Bravitus</button>
<div id="page-2">
<div id="about_me" class="container">
<h1>This is about me section</h1>
<div>about me about me about me</div>
</div>
<!-- Hidden blocks that you show when the appropriate button is clicked. -->
<div id="education" class="container" style="display: none;">
<h1>This is about my education</h1>
<div>education education education</div>
</div>
<div id="about_name_bravitus" class="container" style="display: none;">
<h1>This is about the name bravitus</h1>
<div>bravitus bravitus bravitus</div>
</div>
</div>
JS (you need jQuery)
// Listening to a button click.
$('[data-switch]').on('click', function (e) {
var $page = $('#page-2'),
blockToShow = e.currentTarget.getAttribute('data-switch');
// Hide all children.
$page.children().hide();
// And show the requested component.
$page.children(blockToShow).show();
});
I'm not sure if I understood what you want.
But if you just want to replace all html inside page-2, you simply can do that (with jQuery):
var html = // Here comes your html
$('#page-2').html(html);
So im not sure if this is the correct way but what i ended up doing was this
function myFunction(){
document.getElementById("fisk").innerHTML = "Hvem er du"
}
<button onclick="myFunction()">Click me</button>
Now i just have to find a way to make it replace more than text. to replace divs and other tags all together.
Just add this link and execute the below code:
script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"
Click to read about me
Click to show my education
Click to read about the name Bravitus
<div id="about_me" class="container">
<h1>This is about me section</h1>
<div>about me about me about me</div>
</div>
<!-- Hidden blocks that you show when the appropriate button is clicked. -->
<div id="education" class="container" style="display: none;">
<h1>This is about my education</h1>
<div>education education education</div>
</div>
<div id="about_name_bravitus" class="container" style="display: none;">
<h1>This is about the name bravitus</h1>
<div>bravitus bravitus bravitus</div>
</div>
JS (you need jQuery)
// Listening to a button click.
$('[data-switch]').on('click', function (e)
{
var $page = $('#page-2'),
blockToShow = e.currentTarget.getAttribute('data-switch');
// Hide all children.
$page.children().hide();
// And show the requested component.
$page.children(blockToShow).show();
});