Basically, I have some buttons
<div class="button">
<!--Some other stuff-->
<div class="id">HD5sjW</div>
</div>
<div class="button">
<!--Some other stuff-->
<div class="id">yqWH3X</div>
</div>
<div class="button">
<!--Some other stuff-->
<div class="id">KWZy5V</div>
</div>
and I wanted to use JavaScript to link to another page and I couldn't find an explanation so this is what I came up with and obviously doesn't work at all - how am I meant to do this?
$('.button').click(function () {
confirm("http://domain.com/thing?id=" + $(this + " .id").text());
});
The confirm is just for a blatant output
As another thing, how should I structure my questions better and type of title?
You can use .find() or a context parameter in the jQuery function.
$('.button').hover(function () {
confirm("http://domain.com/thing?id=" + $(".id", this).text());
});
$('.button').hover(function () {
confirm("http://domain.com/thing?id=" + $(this).find('.id').text());
});
Here's a solution using .click() using .hover() will cause the confirm box to trigger multiple times.
$('.button').click(function () {
//find out which buttton this is
var currentBtn = $('.button').index( $(this) );
//use currentBtn to find its matching id div using `:eq()`
var currentId = $('.id:eq('+currentBtn+')').text();
confirm("http://domain.com/thing?id=" + currentId)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="button">
<!--Some other stuff-->
<div class="id">HD5sjW</div>
</div>
<br>
<div class="button">
<!--Some other stuff-->
<div class="id">yqWH3X</div>
</div>
<br>
<div class="button">
<!--Some other stuff-->
<div class="id">KWZy5V</div>
</div>
Related
I've build myself a sign input on my website inside a modal popup. The problem is that I can have an unknown amount of modals generated in a foreach within PHP. Because of this my JavaScript code don't works anymore. Do you have any idea how I can improve my function to make it workable for a undefined amount of signature modals?
var signaturePad;
jQuery(document).ready(function () {
jQuery(document).on('opened', '#sign-modal', function () {
var signaturePadCanvas = document.querySelector('.signature-pad-canvas');
var parentWidth = jQuery(signaturePadCanvas).parent().outerWidth();
signaturePadCanvas.setAttribute("width", parentWidth);
signaturePad = new SignaturePad(signaturePadCanvas);
jQuery('#clear-signature').click(function () {
if (signaturePad) {
signaturePad.clear();
}
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/signature_pad#3.0.0-beta.3/dist/signature_pad.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/remodal#1.1.1/dist/remodal.min.js"></script>
<div id="sign-modal" class="remodal remodal remodal-is-initialized remodal-is-opened" data-remodal-id="sign-nda-modal-1234567889">
<button data-remodal-action="close" class="remodal-close"></button>
<h1>Hello</h1>
<p>I am a random text</p>
<div class="signature-pad-canvas-container">
<div class="signature-pad-canvas-wrapper">
<canvas class="signature-pad-canvas"></canvas>
</div>
<div class="clear-signature-wrapper">
<span id="clear-signature">Delete</span>
</div>
</div>
<br>
<div class="remodal-buttons">
<button data-remodal-action="cancel">Cancel</button>
<button onclick="sign('123abc', '456cdf')">Sign</button>
</div>
</div>
<div id="sign-modal" class="remodal remodal remodal-is-initialized remodal-is-opened" data-remodal-id="sign-nda-modal-9876543">
<button data-remodal-action="close" class="remodal-close"></button>
<h1>Hello</h1>
<p>I am a random text</p>
<div class="signature-pad-canvas-container">
<div class="signature-pad-canvas-wrapper">
<canvas class="signature-pad-canvas"></canvas>
</div>
<div class="clear-signature-wrapper">
<span id="clear-signature">Delete</span>
</div>
</div>
<br>
<div class="remodal-buttons">
<button data-remodal-action="cancel">Cancel</button>
<button onclick="sign('764647gc', 'iuhiz78')">Sign</button>
</div>
</div>
......
The reason why your modals have stopped working is because each modal you create is created with the same id.
This means that when you access the element with DOM, only the first element would be returned. Using a class is not the best idea as you lose the ability to target specific elements without looping.
The best solution in my opinion is to dynamically generate the id as you create your modals. This means you could have something like sign-modal-1, sign-modal-2 etc for each modal you create.
Then, in JQuery, you target elements with ID's that get opened, that begin with sign-modal, i.e. using the JQuery attribute selector.
JQuery Attribute Selector:
https://api.jquery.com/attribute-starts-with-selector/
I have a loop of posts in wordpress and I am trying to call a jquery on click show event which will show a contact form for that post when clicked.
The onclick show works only for the first post in the loop where it will display the contact form for that post no problem - but, it does not work for any of the other posts in the loop. Anyone know why this may be? The page with the post loop is https://www.salusa.co.uk/specialist-training-courses/.
The code is roughly:
<div class="archive-posts-loop">
<div class="post">
<div class="enquire">
<a class="show-form">Contact Provider</a>
</div>
<div class="contact-form-wrapper" id="contact-form-wrapper" style="display:none;">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(
function(){
$(".show-form").click(function () {
$("#contact-form-wrapper").show("fast");
});
$("#close").click(function () {
$("#contact-form-wrapper").hide("fast");
});
});
</script>
</div><!--post-->
<div class="post">
<div class="enquire">
<a class="show-form">Contact Provider</a>
</div>
<div class="contact-form-wrapper" id="contact-form-wrapper" style="display:none;">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(
function(){
$(".show-form").click(function () {
$("#contact-form-wrapper").show("fast");
});
$("#close").click(function () {
$("#contact-form-wrapper").hide("fast");
});
});
</script>
</div><!--post-->
</div><!--archive-post-loop-->
As you have a new form for each post you need to target the correct form for the post. You can listen for delegated click events and show/hide the nested form accordingly. Note that you do not need (nor should have) the script repeated for each form as shown in your example.
$(function(){
$(".post")
.on("click", ".show-form", function() {
$(this).parents(".post").find(".contact-form-wrapper").show("fast");
})
.on("click", ".close", function() {
$(this).parent().hide("fast");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post">
<div class="enquire">
<a class="show-form">Contact Provider</a>
</div>
<div class="contact-form-wrapper" id="contact-form-wrapper" style="display:none;">
[Form here] close
</div>
</div>
<div class="post">
<div class="enquire">
<a class="show-form">Contact Provider</a>
</div>
<div class="contact-form-wrapper" id="contact-form-wrapper" style="display:none;">
[Form here] close
</div>
</div>
<div class="post">
<div class="enquire">
<a class="show-form">Contact Provider</a>
</div>
<div class="contact-form-wrapper" id="contact-form-wrapper" style="display:none;">
[Form here] close
</div>
</div>
You are using multiple elements with the same id of contact-form-wrapper. Instead you need to make each element have a unique id, and then select that id in the respective jquery calls. Jquery will return the first matching element given a selector, which is why it only selects the first post each time.
Here is a codepen that does what you want.
https://codepen.io/abidhasan/pen/wpdoyO?editors=1111
This is the jQuery that you can use - basically look for the sibling and change its style
$(".post .show-form").on("click", function() {
$(this).parent().siblings()[0].style.display= "block";
});
$(".post .hide-form").on("click", function() {
$(this).parent().siblings()[0].style.display= "none";
});
I'm new to JQuery and just wanted to add new clones on a button click:
I wrote this much code:
<div class="main" id="container">
<div class="item">
items
</div>
</div>
<button id="button">
Click me
</button>
<script>
$("#button").click(function () {
});
</script>
Exactly what I am looking for is a clone, but ids should be different
$("#button").click(function () {
$('.item').append('<div>new div</div>')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="main" id="container">
<div class="item">
items
</div>
</div>
<button id="button">
Click me
</button>
hope it will help
Try this :-
$("#button").click(function () {
var clone = $("#container").find(".item").last().clone();
clone.attr("id","newId");
$("#container").append(clone);
});
I'm trying to create a list of buttons that when one is clicked it displays that DIV and hides the rest. There is also a default message that shows before any button is clicked.
I've created a codepen already and I think there is something wrong with my script, but I can't work out what I am doing wrong. Any help?
Here is the script I am trying:
<script>
$(document).on('click', '.div-toggle', function() {
var target = $(this).data('target');
var show = $("button:selected", this).data('show');
$(target).children().addClass('hide');
$(show).removeClass('hide');
});
$(document).ready(function(){
$('.div-toggle').trigger('click');
});
</script>
Here is the Codepen.
Instead of doing it on div click .
Do it by button click:
Just simple code:
$(document).on('click', '.map-point-sm', function() {
var show = $(this).data('show');
$(show).removeClass("hide").siblings().addClass("hide");
});
You can check pan code here:
http://codepen.io/sagar_arora/pen/BRBopY
Change your code
var show = $("button:selected", this).data('show');
to
var show = $("button:focus", this).data('show');
TRY THIS
$(document).on('click', '.div-toggle', function() {
var target = $(this).data('target');
var show = $("button:focus", this).data('show');
$(target).children().addClass('hide');
$(show).removeClass('hide');
});
$(document).ready(function(){
$('.div-toggle').trigger('click');
});
.hide {
display: none;
}
.map-container {
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="map-container">
<div class="inner-basic division-map div-toggle" data-target=".division-details" id="divisiondetail">
<button class="map-point" data-show=".darwin">
<div class="content">
<div class="centered-y">
<p>Darwin</p>
</div>
</div>
</button>
<button class="map-point-sm" data-show=".ptown">
<div class="content">
<div class="centered-y">
<p>Ptown</p>
</div>
</div>
</button>
<button class="map-point-sm" data-show=".philly">
<div class="content">
<div class="centered-y">
<p>Philly</p>
</div>
</div>
</button>
<button class="map-point-sm" data-show=".dela">
<div class="content">
<div class="centered-y">
<p>Dela</p>
</div>
</div>
</button>
</div><!-- end inner basic -->
</div>
<div class="map-container">
<div class="inner-basic division-details">
<div class="initialmsg">
<p>Choose button above</p>
</div>
<div class="darwin hide">
<p>Darwin Content here</p>
</div>
<div class="ptown hide">
<p>Ptown Content here</p>
</div>
<div class="philly hide">
<p>Philly Content here</p>
</div>
<div class="dela hide">
<p>Dela Content here</p>
</div>
</div>
</div>
how to append element into the closest on clicking "add-picture" button?
This is the html structure:
<div class="step"
<div class="step-wrapper>
<div class="editor"></div>
</div>
<div class="delete-picture">
<div class="add-picture">
</div>
<div class="step"
<div class="step-wrapper>
<div class="editor"></div>
</div>
<div class="delete-picture">
<div class="add-picture">
</div>
<div class="step"
<div class="step-wrapper>
<div class="editor"></div>
</div>
<div class="delete-picture">
<div class="add-picture">
</div>
and here is my wrong jquery:
$(document).on('click', '.add-picture', function() {
var imageField = $('<img class="link" >');
$(this).parent().find(".step-wrapper").after(imageField);
});
after click .step should look like:
<div class="step"
<div class="step-wrapper>
<img class="link" >
<div class="editor"></div>
</div>
<div class="delete-picture">
<div class="add-picture">
</div>
I think you want .prepnd(), not .after() to make it the first child element.
$(document).on('click', '.add-picture', function() {
var imageField = $('<img class="link" >');
$(this).parent().find(".step-wrapper").prepend(imageField);
});
See the jQuery doc for .prepend().
Though this style of code works, you could also use .closest() for slightly more robust code:
$(document).on('click', '.add-picture', function() {
var imageField = $('<img class="link" >');
$(this).closest(".step").find(".step-wrapper").prepend(imageField);
});
Use prepend() instead of after():
$(this).parent().find(".step-wrapper").prepend(imageField);
after() places the content as a sibling whereas prepend() makes it the first child element
Looks like you want to add the element before the .editor element, so try
$(document).on('click', '.add-picture', function() {
var imageField = $('<img class="link" >');
$(this).parent().find(".step-wrapper .editor").before(imageField);
});
Demo: Fiddle
2 Working demo: http://jsfiddle.net/E78VA/1/ & http://jsfiddle.net/E78VA/
Also plz note your html DOM was not right and have few minor mistakes I have rectified ur HTML as well. i.e. missing end div etc. :)
APIs could be used are
prependTo http://api.jquery.com/prependTo/
prepend http://api.jquery.com/prepend/
Hope rest fits the cause :)
Code
$(document).on('click', '.add-picture', function () {
var imageField = $('<img class="link" >');
// $(this).parent().find(".step-wrapper").prepend(imageField);
$(imageField).prependTo($(this).parent().find(".step-wrapper"));
alert($(this).parent().find(".step-wrapper").html());
});
HTML
<div class="step">
<div class="step-wrapper">
<div class="editor">test</div>
</div>
<div class="delete-picture">delete</div>
<div class="add-picture">add</div>
</div>
<div class="step">
<div class="step-wrapper">
<div class="editor"></div>
</div>
<div class="delete-picture"></div>
<div class="add-picture"></div>
</div>
<div class="step">
<div class="step-wrapper">
<div class="editor"></div>
</div>
<div class="delete-picture"></div>
<div class="add-picture"></div>
</div>