why is the following script targeting only the first element
Jquery:
$(document).ready(function () {
$(".edit_post_tab").click(function () {
var utility_id = $(this).attr("rel");
$(this).siblings("#post_utilities" + utility_id).toggle();
});
});
HTML/PHP:(the following is receieved through another page)
<div class="edit_post_tab" rel="'.$rand_id.'"></div>
<div class="post_utilities" id="post_utilities'.$rand_id.'" style="display:none;">
<div class="post_utilities-arrow"></div>
<div class="post_utilities-window">
<div id="post_utility" class="tab1-post" rel="'.$rand_id.'">Edit my post</div>
<div id="post_utility" class="tab2-post" rel="'.$rand_id.'">Delete my post</div>
</div>
</div>
MY QUESTION:
the problem i face is that when i post the data and prepend it it works fine but when two prepended elements exist the jquery selector only targets the first of the twoprepended elements.when i refresh the page the problem disappears
Related
I'd like to preface that I am new to web development, so I apologize, I know this question seems to be out there a lot. I have tried many solutions, but I just can't seem to get anything to work.
I am working on a webpage that has a series of tutorial videos, each is in their own modal with descriptions. Is there a way I can stop the video from playing upon closing without needing to create ID tags for each video or use bootstrap? (I'm honestly not even sure how to use it, if I'm being honest.) I've seen a lot of solutions, but none of them seem directly applicable to my existing code.
<button id="myBtn">Video Title</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h3>Video Title</h3>
</div>
<div class="modal-body">
<p>
Video description Prose
<div class="video-container">
<iframe class="responsive-iframe" src="https://drive.google.com/file/d/1M-nlvbG_WUuIq-sjHdntgk1VrhdVnKDh/preview" width="950" height="550"></iframe>
</div>
</p>
</div>
<div class="modal-footer">
<h3></h3>
</div>
</div>
</div>
Here is the corresponding script I'm using at the bottom of the page.
<script>
var datamap = new Map([
[document.getElementById("myBtn"), document.getElementById("myModal")],
[document.getElementById("myBtn1"), document.getElementById("myModal1")],
[document.getElementById("myBtn2"), document.getElementById("myModal2")],
[document.getElementById("myBtn3"), document.getElementById("myModal3")],
[document.getElementById("myBtn4"), document.getElementById("myModal4")],
[document.getElementById("myBtn5"), document.getElementById("myModal5")],
[document.getElementById("myBtn6"), document.getElementById("myModal6")],
[document.getElementById("myBtn7"), document.getElementById("myModal7")]
]);
datamap.forEach((value, key) => {
doModal(key, value);
});
function doModal(anchor, popupbox) {
// Get the <span> element that closes the modal
var span = popupbox.getElementsByClassName("close")[0];
anchor.addEventListener("click", function (event) {
popupbox.style.display = "block";
});
span.addEventListener("click", function (event) {
popupbox.style.display = "none";
});
window.addEventListener("click", function (event) {
if (event.target == popupbox) {
popupbox.style.display = "none";
}
var
});
}
</script>
You can register handlers for custom modal events that Bootstrap fires, just as you can for built-in events like "click."
It's been a long while since I've done it without jQuery, but something like this should work:
const modals = document.getElementsByClassName("modal");
for (let i = 0; i < modals.length; i++) {
window.addEventListener("hide.bs.modal", function(e) {
// do your stuff
});
}
That's as far as I can go since you haven't included in your question is any detail on the video file itself. I would also question why you're using an iframe instead of a video element.
I am trying to create a show/hide toggle button using jQuery. It seems to work, until I close the div that the button is within, making the two elements in different divs.
For example, the below works:
<div class="col span_1_of_3">
<button class="reveal">Show Filters</button>
<div class="filter-hide">
<p>CONTENT</p>
</div>
</div>
But this code does not:
<div class="col span_1_of_3">
<button class="reveal">Show Filters</button>
</div> <!-- THIS CLOSING DIV HAS BEEN ADDED -->
<div class="filter-hide">
<p>CONTENT</p>
</div>
JQuery is as follows:
$(".filter-hide").hide();
$("button.reveal").click(function(){
$(this).toggleClass("active").next().slideToggle();
if ($.trim($(this).text()) === 'Show Filters') {
$(this).text('Hide Filters');
} else {
$(this).text('Show Filters');
}
return false;
});
Can anyone tell me why this is and how to fix it? The reason I am doing this is because I need the button to be 1/3 of the page and then the content to show full width below. I can work around it but then come across other problems.
Thanks in advance.
You can traverse up to parent div using .closest() then use .next() to target its sibling.
$("button.reveal").click(function () {
$(this).closest('div').next().slideToggle();
$(this).toggleClass("active");
//Rest of code
});
$("button.reveal").click(function() {
$(this).closest('div').next().slideToggle();
$(this).toggleClass("active");
//Rest of code
if ($.trim($(this).text()) === 'Show Filters') {
$(this).text('Hide Filters');
} else {
$(this).text('Show Filters');
}
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col span_1_of_3">
<button class="reveal">Show Filters</button>
</div>
<!-- THIS CLOSING DIV HAS BEEN ADDED -->
<div class="filter-hide">
<p>CONTENT</p>
</div>
You're using .next() which gets the next sibling. As it's no longer a sibling, it no longer finds it.
Your best bet if the control/content are in separate locations is to pair them up. You can do this with a class or a data- attribute, eg:
<div>
<button class="reveal" data-content='filter1'>Show Filters</button>
</div>
<div class="filter-hide" data-filter='filter1'>
<p>CONTENT</p>
</div>
Then your button click code would be:
$("button.reveal").click(function() {
var filter = $(this).data("content");
$(this).toggleClass("active");
$(".filter-hide[data-filter=" + filter + "]").slideToggle();
Using the pattern, you can add/remove buttons and content and never have to change your javascript to handle them individually and, more importantly, you won't need to change your javascript if you change the HTML again, which you would have to if you used any form of traversing (eg .closest().next().find() would work if this scenario, but not if you changed the html).
Since you are using next() to get to the another button, closing the div on the 1st button no longer makes it available. So that you can target the div no matter where you put it on, use the following:
$("button.reveal").click(function(){
$(this).toggleClass("active");
$('.filter-hide').slideToggle(); //Change here.
if ($.trim($(this).text()) === 'Show Filters') {
$(this).text('Hide Filters');
} else {
$(this).text('Show Filters');
}
return false;
});
Hey folks I have content being displayed on a page by using jQuery and Ajax to query my php page. On click I check for all elements with the class edit. I am trying to then grab the unique id of the link that was chosen. I know it should be this.id but it returns nothing. Does anyone have any insight on how to dynamically check the clicked link and get a stored value in any way?
The bellow works for getting a link clicked. but cannot get the id still.
$("body").on("click", ".edit", function(){
var id = this.id;
alert($(this).val());
});
Here is the HTML that is being put on the page via Ajax
<div class="row">
<div class="small-2 large-2 columns">3</div>
<div class="small-10 large-6 columns">Andrew</div>
<div class="small-6 large-2 columns">2013-08-12</div>
<div class="small-6 large-2 columns edit"> Edit </div>
</div>
Solved solution was to use '.edit > a' as the selector. I had edit as the class of the div, not the anchor tag. Thanks for all the help folks!
The sample HTML helped:
You need to select the anchor within the .edit div.
$("body").on("click", ".edit > a", function () {
var id = this.id;
alert(id);
});
JSFiddle: http://jsfiddle.net/QckbT/
Does this works ?
$("a.edit").on("click", function(){
alert($(this).val());
});
alert($(this).val());
relate to body, not to #id.
Is it possible to use jquery to use a callback in a div and show the full text in another div? Currently I have in the right div:
$(document).ready(function(){
setInterval(function(){
$.post("status.php?_="+ $.now(), {day : "<?php echo $day;?>"}, function(upcoming){
$(".ticker").html(upcoming);
}),
"html"
}, 45000);
});
And I need something like:
$(".view").hover(function(){
$("#left").load("a.php");
});
<div id="left">
<div class="show">
</div>
</div>
<div id="right">
<div class="ticker">
</div>
</div>
My php spits back html: EventID
What I want to do is hover over the hyper link and have the full status shown in .show
I know I'll have to do a query with the event number, but my search in doing this comes up empty. As always, any help is appreciated
$("body").on("hover", ".view", function(){
$("#left").load("a.php");
});
As you're adding .view to DOM after page load i.e dynamically so, you need delegate event handler for dynamic element using .on().
And instead of body you can use any parent selector of .view which is static-element.
i have done frame for drag and drop elements in jQuery. now i want to delete the element from the frame as per requirements.the deletion should from the keyboard. I am trying and can select the item, but cant delete the selected item.
my code like that..
//Select the element
jQuery(function() {
jQuery ("#frame").selectable();
});
//move to trash_icon
jQuery
HTML code...
<div id="frame">
<span id="title"></span>
<div id="tbldevs" > </div>
</div><!-- end of frame -->
i want to know is there any function in jQuery delete can be happened from keyboard.
You need to simply handle keyboard events, like so:
HTML:
<div id="frame">
<span id="title">My Title</span>
<div id="tbldevs">
<div id="item1"> This is item 1</div>
<div id="item2"> This is item 2</div>
</div>
<input type="button" id="sel-cancel" value="Cancel Select"/>
</div>
JS:
jQuery(function() {
//make the elements selectable
$("#tbldevs").selectable();
//handle the events in every element. Only applies to elements which can be handle focus
$('*').keypress(function(event) {
if ( event.which == 100 ) { //this is the keycode. 100 is the 'd' key. The delete key is difficult to bind.
$('.ui-selected').remove();
//you can add ajax calls here to remove items from the backend
}
});
});
NOTE: The following code only removes the elements from the HTML tree.