We are using jQuery and Javascript to build a CV/resume from data. To help with the page breaks with these tables we are utilizing a jQuery plugin called Columnizer. It works pretty well, but we still have the occasional header that doesn't render properly at the end of a page.
Rather than try to fix the plugin, we really just need to hide the "empty" table which is really just a couple of header rows. It's proving difficult. Either I am not detecting the rows that need to be removed or the order of operations is off. It seems to me that it would be easiest to remove these rows as the very last operation. That doesn't seem to be happening though.
Here is the script we trying. It's at the very bottom of the HTML page.
<script>
$(document).load(function () {
var x = document.getElementsByTagName("table");
//alert(x.length);
//alert(x[0]);
for (var i = 0; i < x.length; i++) {
alert(x[i].innerHTML);
try {
var childBody = x[i].getElementsByTagName("tbody");
//alert(childBody[0].innerHTML);
var childRows = childBody[0].getElementsByTagName("tr");
} catch (e) {
//alert("no child rows");
x[i].className = "hidden";
//$(x[i]).removeClass().addClass("hidden");
}
}
});
</script>
I appreciate your help. If you need more info, please let me know. I am a novice at this!
This can be solved with :not(:has(*)) and .closest:
$('tbody:not(:has(*))').closest('table').hide();
DEMO
Related
I'm using Search & Filter pro WP plugin for the ease of a client using it.
I've created a results page and filter on a demo site (for testing) that works fine but I know the categories will get large on the real site. So I turned the plugins' filters into an Accordion style list.
It works fine until certain searches reload all those filter results with AJAX and they remove my event listeners (which are sitting on elements for the moment, I know it's not ideal but for now I just want to see if it could work).
I imagine because my script has already been parsed when the DOM loaded, the AJAX from the plugin is just redefining those elements and they are then missing the Event Listeners or something.
Any help would be appreciated.
Here's my script:
<?php
add_action( 'wp_footer', function () { ?>
<script>
const clicker = document.querySelectorAll('#search-filter-form-4346 > ul > li > h4');
// looping through the <h4> elements and adding an event listener onto each, the class toggle just adds an animation to a pseudo-element spinner
for (let i = 0; i < clicker.length; i++) {
clicker[i].addEventListener("click", function() {
this.classList.toggle("open-filter-dropdown");
console.log('EL was created');
// declaring the <ul> as a variable
const openFilterPanel = this.nextElementSibling;
// animating the <ul> elements max-height
if (openFilterPanel.style.maxHeight) {
openFilterPanel.style.maxHeight = null;
} else {
openFilterPanel.style.maxHeight = openFilterPanel.scrollHeight + "px";
}
console.log('openFilterPanel style is changed');
});
}
</script>
<?php } );
I'm pretty new to javascript, I get the basic concepts but this kind of an interference is above my head. I tried refactoring my code, forcing the page to refresh and other such measures. None of these work very well. I also thought I could use a 'loadend' event on the document to re-add my ELs but that didn't work either.
Hoping there is a workaround here, otherwise I might have to find another solution or plugin.
Thanks in advance!
Manually, I will have to click on the Quick Edit button for each post. Update the title field and then click update.
I tried to do it using some JavaScript code in the console:
window.setInterval(function(){
var allPosts = document.querySelectorAll("tr.status-publish td div.row-actions a.editinline");
for(var i=0; i < allPosts.length; i++) {
document.querySelectorAll("tr.status-publish td div.row-actions a.editinline")[0].click();
var titleInput = document.querySelectorAll("tr.quick-edit-row-post .input-text-wrap input.ptitle")[0];
if(titleInput.value.indexOf("Old Value") > 0) {
titleInput.value = titleInput.value.replace("Old Value", "New Value");
}
document.querySelectorAll("div.inline-edit-save .save")[0].click();
}
}, 2000);
It works but seems a bit hacky because the code keeps clicking on update for a single post multiple times and it seems to randomly succeed or fail.
I think it has something to do with AJAX. Could anyone guide me on how I should proceed? What do I need to change in this code? Is there some other better way to update multiple titles at once?
I'm working on a HTML5 friendly drag and drop system and I've encountered another mystery that seems to make no sense...
The system is working in Edge - it's when I'm emulating IE8 that I encounter this latest problem.
I have a set of '.draggable' divs that get the following listener attached:
$(document).ready(function() {
$('#reset-button').click(resetDraggables);
if (!dragAndDropSupported()) {
var $draggables = $('.draggable');
$draggables.each( function (index) {
$(this).mousedown( jQueryStartDrag );
});
}
}
The draggables can be sent back to their original locations by hitting a 'reset' button. That all works fine.
The problem is - any divs that get sent back to their origins are no longer draggable. Even if I re-attach the listener in the reset function, it does not fire. Once again, this issue is only happening when I'm emulating IE8 and I don't remove the listener anywhere in my code.
function resetDraggables() {
if ( !$('#reset-button').hasClass('inactive') ) {
var $dropTargets = $('.drop-target');
$dropTargets.each(function (index) {
var draggableId = $(this).attr('data-contains');
var $originDraggable = $('#' + draggableId);
if ($originDraggable.attr('id')!=undefined) {
var $droppedDraggable = $(this).find('.draggable');
$droppedDraggable.remove();
$originDraggable.removeClass('inactive').addClass('draggable').attr('draggable', 'true').css('filter', 'alpha(opacity=100)').hide().fadeIn('fast');
$('#' + draggableId).mousedown( jQueryStartDrag );
$(this).removeClass('occupied').attr('data-contains', '');
$('#reset-button').addClass('inactive');
}
});
}
}
I've realised it's the $droppedDraggable.remove() line that's causing the problem. I'm not sure why a line to remove ONE object would remove the listener from another. The $droppedDraggable object was cloned from the other; Is that causing the issue?
Any ideas what might be going on?
OK, so I replaced the jQuery remove() lines with...
var droppedDraggable = document.getElementById('dropped-' + draggableId);
droppedDraggable.outerHTML = "";
...and that has done the trick. I'm guessing there must have been some hidden association made between the objects when one was cloned from the other and remove()ing one removed the mousedown listener from the other.
If anyone has a better theory, feel free to let me know, but this seems to have solved the problem.
Edit
I've just realised the above fixed the problem in IE8, but not in 9. Great! If anyone has any pointers on how NOT to include a bunch of browser-specific work arounds in my code, I'd be very keen to hear them. Thanks.
I have groups of related images that I would like to be able to change (but position in the same div) by clicking on different radio buttons.
Currently I am using arrays to handle the html,
var marketingImages = [image1HTML, image2HTML, image3HTML, image4HTML];
var salaryImages = [image1HTML, image2HTML, image3HTML, image4HTML];
And when a relevant radio button is clicked, a function runs to clear the html in the div (of possible previous images), and load the new images using .append.
$(document).ready(function() {
$("#marketing, #salary").click(leed);
function leed() {
$("#portfolio-images").html("");
if ($("#marketing").is(':checked')) {
var portfolioArray = marketingImages;
} else if ($("#salary").is(':checked')) {
var portfolioArray = salaryImages;
}
for (var i=0; i<portfolioArray.length; i++) {
$("#portfolio-images").append(portfolioArray[i]);
}
...
}
It seems to work well, but being a noob though I have to wonder if there's a better way to handle this. Technically these images are just thumbnails (that can be clicked on to load larger Lightbox versions), but I'm unsure of how well that would "really" load for someone.
Does somebody know if there's a better way to handle loading groups of images? Thanks.
I am trying to make a auto expanding div on a website I am designing, but it does not seem t work on the page (while working fine on jsfiddle.net)
Script: http://jsfiddle.net/tJugd/1057/
var lol;
lol = 0;
$('#question').click(function(){
if (lol==0){
$('#question').animate({height:'300'});
lol = 1;
}else{
$('#question').animate({height:'0'});
lol = 0;
}
})
And here is the page I am trying to implemet it on: http://www.trulyscience.com/test/index.html (the red "questions" thing on the sie)
I really don't know what I am doing wrong, I've checked many related threads, and most of the worked but also only on Jsfiddle and not my page.
Can anyone please help?
You can use the trigger method to do this, calling it after declaring the event click on the "#question":
function loadQuestion(){
var lol;
lol = 0;
$('#question').click(function(){
if (lol==0){
$('#question').animate({height:'300'});
lol = 1;
}else{
$('#question').animate({height:'0'});
lol = 0;
}
});
$('#question').trigger('click'); // Simulating click
}
$(document).ready(function(){
loadQuestion();
});
http://jsfiddle.net/tJugd/1058/
You use two time the id question in the same html document, this may cause the issue. If you want to use the same name for elements use class instead id.
Also try to wrap your code with $(document).ready(function(){ /*your code*/ });
Well, for starters, on your website, $ is not jQuery. It's a shortcut for document.getElementById.
I ran this code in the console after the page loaded, and the animation worked fine:
var lol = 0;
jQuery('#question').click(function (){
if (lol === 0){
jQuery('#question').animate({height:'300'});
lol = 1;
}else{
jQuery('#question').animate({height:'20'});
lol = 0;
}
});