Moving inline javascript function to external file and convert to jQuery - javascript

I am trying to optimize my "spoiler" bbcode on phpBB3.
Right now, I have a working solution, but the inline javascript is injected by phpBB every time the "spoiler" bbcode tag is used. I want to call a common function instead of adding it inline every time the bbcode is used.
Here is that working inline javascript:
<div class="spoiler">
<div class="spoiler-title">
<span onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.parentNode.getElementsByTagName('a')[0].innerText = 'hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.parentNode.getElementsByTagName('a')[0].innerText = 'show'; }">
<strong>{TEXT1}</strong> (show)
</span>
</div>
<div class="spoiler-text">
<div style="display: none;">
{TEXT2}
</div>
</div>
</div>
For ease of reading, the inline onclick function is repeated here:
if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') {
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';
this.parentNode.getElementsByTagName('a')[0].innerText = 'hide';
} else {
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none';
this.parentNode.getElementsByTagName('a')[0].innerText = 'show';
}
Clicking the anchor with the class of "spoiler-btn" has a preventDefaults on it, to prevent the click from taking you to the top of the page:
$(document).ready(function(){
$(".spoiler-btn").click(
function(e) {
e.preventDefault();
}
);
});
I was trying to replace the span onclick inline javascript with a function call that passes 'this' to an external javascript file. I couldn't seem to get that working, so I tried using jQuery to capture 'this' to traverse up the DOM to find the "div" contained within the "spoiler-text" div and manipulate the display:none. There can be multiple of these spoiler tags on the page, so I cannot give the div inside of the "spoiler-text" div an id.
Here I changed the onclick of the span to the external function:
onclick="spoilerToggle(this);"
I then have the following in my external file:
var spoilerToggle = function(param) {
if ($(this).parent('div').parent('div').hasClass('spoiler-text').css('style') == 'none') {
($(this).parent('div').parent('div').hasClass('spoiler-text').removeAttr('style'));
($(this).parent('div').$('a').text('hide'));
} else {
($(this).parent('div').parent('div').hasClass('spoiler-text').css('display', 'none'));
($(this).parent('div').$('a').text('show'));
}
}
The console then gives the following error:
bbcode.js:22 Uncaught TypeError: $(...).parent(...).parent(...).hasClass(...).css is not a function
Line 22 is the line with the "if" check.
jQuery is loaded on the site, and I've made sure to call my external javascript file right before the close of the body tag.
I feel like I've gone down the rabbit hole and cannot see the light. I'm sure this is much easier than I am making it out to be.
Any help is greatly appreciated. Thank you!

.hasClass() returns a boolean, so you can't chain other methods after it. That's why you get the error you quote.
I would implement it a different way though:
$(document).on("click", ".spoiler-title", function(e) {
e.preventDefault();
var container = $(this).closest(".spoiler");
container.find(".spoiler-btn").text(function(i, currentText) {
return currentText === "show" ? "hide" : "show"
});
container.find(".spoiler-text div").toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="spoiler">
<div class="spoiler-title">
<span>
<strong>{TEXT1}</strong> (show)
</span>
</div>
<div class="spoiler-text">
<div style="display: none;">
{TEXT2}
</div>
</div>
</div>
The above uses a single, delegated click handler bound to the document to handle clicks on all spoiler elements on the page (you could instead bind it to a lower-level container element, at whatever the lowest level is that contains all the spoilers).
Within the handler, this will refer to the clicked element, so with DOM navigation methods such as .closest() and .find() you can go up to the containing div and then down to the elements you want to manipulate. .closest() is more flexible than trying to chain .parent().parent(), because it will automatically go up until it finds an element matching the specified selector, so if you later change your HTML structure the JS probably won't need to change.
If the .text() call looks confusing, what happens there is jQuery calls the function I passed to .text() as an argument, passing it the current value of the element's text and then whatever value is returned becomes the new text.

Related

Add a Class to an existing div element

I want to display an icon for the my account section right next to the cart icon (Woocommerce).
In order to do that I would like to add another class with the name "et-account-info" to an existing div id element. The HTML-code looks like this:
<div id="et-top-navigation">
<nav id="top-menu-nav">…</nav>
…
<div id="et_mobile_nav_menu"></div>
</div>
Eventually it should look something like this. The new class should be displayed right below the first a tag.
<div id="et-top-navigation">
<nav id="top-menu-nav">…</nav>
…
…
<div id="et_mobile_nav_menu"></div>
</div>
I tried using a Javascript function which did not work at all:
<script>
var element = document.getElementById("et-top-navigation");
element.classList.add("et-account-info");
</script>
Any ideas why this is not working? Or is there a smoother way using php?
I assume you are adding the script in the <head></head> tag. Unfortunatly scripts added like this will run before the rest of the document has been loaded/parsed. You need to tell your code to wait for the DOM to be fully loaded and parsed before checking for the element.
function addClassToElement() {
var element = document.getElementById("et-top-navigation");
element.classList.add("et-account-info");
}
// Check if document is already loaded. If so, run the function.
// Otherwise, wait for the DOMContentLoaded event to fire before running it.
if (document.readyState === "complete" || document.readyState === "interactive") {
addClassToElement();
} else {
document.addEventListener("DOMContentLoaded", addClassToElement);
}
However, your code is incomplete according to the outcome you are looking for. This will just add a class to the div element with ID et-top-navigation.
Have a go at adding (hint: appending) the new element you are looking to add.

Inline CKEditor adds <br> to empty div on startup

CKEditor in Inline mode adds a <br> in the source of the document to an empty div when it is initialized. When you check the source in CKEditor it shows completely empty. I guess this is done to stop collapsing the div or whatever element it is editing on, but for me this is causing issues since I target the empty div with CSS to display a placeholder.
I have searched about everywhere on how to disable this and have seen some issues with FireFox many years ago, but that seems to be unrelated.
<div id="editarea" placeholder="Title"></div>
CKEDITOR.inline('editarea, {});
<style>
div:empty:after {
content: attr(placeholder);
}
</style>
When you look in the Developer Tools the source of the document looks like:
<div id="editarea" placeholder="Title">
<br>
</div>
Adding the following to the config does not seem to be doing anything:
config.fillEmptyBlocks = false;
Can help someone else, the solution I found, pass by the editor event listener:
// Ckeditor 4
editor.on('key', function (evt) {
var selection = editor.getSelection();
var element = selection.getStartElement();
var html = element.getHtml();
var id = element.getId();
if (evt.data.keyCode !== 13
&& id === 'editarea')) {
if (html.match(/( )?<br>$/)) {
element.setHtml('');
}
}
})
That <br> is a "filler" and is always placed at input (editor initialization) into empty block elements by function createBogusAndFillerRules to give an height to the element so the user can click on it to edit it.
Actually there is not a CKeditor configuration to avoid this behaviour but, using jQuery, we can remove the <br> on instanceReady.ckeditor event with:
if($(this).html().trim() === '<br>'){
$(this).html('');
}
Please try this code it is working for me:
For removing br on load
$('your_id').ckeditor();
CKEDITOR.on('instanceReady', function() {
$('div.application').find('br').remove(); // remove br tag added on empty divs
});
for removing &nbsp use this in destroy function:
for(CKname in CKEDITOR.instances) // delete multiple instances of ckeditor
{
CKEDITOR.instances[CKname].destroy(function(){
$("your_id").html(function (i, html) {
return html.replace(/ /g, ''); // remove
});
})
}

How do I click on a link without id

I'm not experienced in javascript. I'm trying to write a function in CasperJS, which uses javascript.
I'm trying to click on a link from a search result page. The <a href> tag does not have an id to it, but it is enclosed in a <h3 />, which is enclosed in a <div id="some_id"/>.
Essentially the code looks like this:
<div id="result_0">
<div />
<div />
<h3 class="...">
<a href="some_link">
.
.
</a>
</h3>
.
.
</div>
I want to know how to click that link in javascript.
I tried doing it like this:
document.getElementById('result_0').getElementsByTagName('div')[2].getElementsByTagName('a')[1].click();
But this doesn't seem to work. Can you guys help ?
Edit: Here is the link to my entire script: https://github.com/ctrl-shift-esc/randomamazonshopper/blob/master/myscript.js
You need a CSS selector and the thenClick method here. Something like this should work:
casper.thenClick('#result_0 h3:first-child a');
The following works for the html structure shown in the question (if you change the div's id from some_id to result_0):
document.getElementById('result_0').getElementsByTagName('h3')[0]
.getElementsByTagName('a')[0].click();
Demo (open the browser's JS console): http://jsfiddle.net/kyLXT/1/
Perhaps your code had the wrong indices in the square brackets?
Or you can do this to click the first link in the first h3 within the element with that id:
document.querySelector('#result_0 h3 a').click();
Or if you're concerned that there might not be a matching element:
var el = document.querySelector('#result_0 h3 a');
if (el)
el.click();
// optionally add an else here
Note that either way the code would need to be in a script block that appears after the elements in question and/or in a DOM ready or window onload event handler (the jsfiddle demo above put the code in an onload handler via the fiddle options on the left).
You can use the ID of the div holding the <h3>:
var oParentDiv = document.getElementById("some_id");
var arrHeaders = oParentDiv.getElementsByTagName("h3");
if (arrHeaders.length !== 1) {
alert("no header or more than one");
} else {
var oHeader = arrHeaders[0];
var arrLinks = oHeader.getElementsByTagName("a");
if (arrLinks .length !== 1) {
alert("no link or more than one");
} else {
var oLink = arrLinks[0];
oLink.click();
}
}

jQuery - how to determine which link was clicked

I have a simple piece of PHP which generates n copies of the following code:
<p class="ShowSDB_L2" class="center" onClick="FSD_L2('<?php print dbG;?>','<?php print $sLID;?>')">Click Here to See Data</p>
<div class="divSDB_L2">
</div>
It is generated using PHP, so the number of copies is unknown up front.
On another page I have the following Javascript (using jQuery)
function FSD_L2(dbG,SlID)
{
$(".divSDB_L2").load("test15.php?dbG="+dbG+"&SlID="+SlID).css('display','block');
}
When the text above (Click Here to See Data) is clicked, it should add the contents of test15.php between the the two DIV tags.
#Test15.php
<?php
$dbG = $_GET['dbG'];
$SlID = $_GET['SlID'];
print $dbG . " & " . $SlID;
?>
The problem I have is how to determine which of the links was clicked? At present, if I have three copies, and click one, all three copies are activated.
I hope I have made this clear enough. I'm sure there must be a simple way, but I'm quite new to Javascript/jQuery.
Like Brian said, you could just put the same class on all of your links and use the $(this) keyword in jQuery inside of a click function to find out which link was clicked.
Here's a basic example of changing link colors on a nav using this technique: http://jsfiddle.net/9E7WW/
HTML:
<a class="nav">Test</a>
<a class="nav">Test2</a>
<a class="nav">Test3</a>
<a class="nav">Test4</a>
Javascript:
$(document).ready(function(){
$('.nav').click(function(){
// change all to black, then change the one I clicked to red
$('.nav').css('color', 'black');
$(this).css('color', 'red');
});
});
Am not sure I fully understand what it is you are having difficulty with, but the following is how I would do it.
<p class="ShowSDB_L2" class="center" data-dbg="<?php print dbG;?>" data-slid="<?php print $sLID;?>">Click Here to See Data</p>
<div class="divSDB_L2"></div>
$(document).ready(function() {
$(document).on('click', 'p.ShowSDB_L2', function(evt) {
var $p = $(evt.currentTarget),
dbG = $p.data('dbg'),
slid = $p.data('slid'),
$div = $p.next();
FSD_L2(dbG, slid, $div);
});
});
function FSD_L2(dbG, SlID, $div)
{
$div.load("test15.php?dbG="+dbG+"&SlID="+SlID).css('display','block');
}
The click handler is not hardcoded to each p tag. Instead with each p tag we store the required data, ie dbg & slid.
The click handler is then attached once at document ready. jQuery abstracts over the various browsers and passes to its handlers the event object as its first parameter. This object can then be used to find the element on which the event occurred. Refer: http://api.jquery.com/on/
Finally, we fetch the required data from the clicked element, find the div that needs to be updated and then call your custom function.
Here is a cross-browser way to find the element (target) that triggered the event (e):
function getTarget(e){
// non-ie or ie?
e=e||window.event;
return (e.target||e.srcElement);
};
Add the complete URL to your link (or p in this case) using a data attribute:
<p class="ShowSDB_L2" class="center" data-loadurl="test15.php?dbG=<?php echo $dbG; ?>&SlID=<?php echo $SlID; ?>">Click Here to See Data</p>
<div class="divSDB_L2"></div>
Then do all the binding directly in your jQuery so you have direct access to the link that was clicked:
$(document).ready(function() {
$('.ShowSDB_L2').on('click', function(e) {
e.preventDefault();
$('.divSDB_L2').empty().load($(this).data('loadurl')).show();
});
});

How to show / hide multiple elements at the same time with javascript

So, I have this between my head tags
<script type="text/javascript">
hidden_links = document.getElementsByName("javascript_needed");
for (i = 0; i < hidden_links.length; i++) {
hidden_links[i].style.display = "visible";
}
</script>
And my divs are all similar to
<div name="javascript_needed" style="display: none;">stuff</div>
the overall goal here, is to have these divs hide when javascript is disabled, and re-enable them when javascript is enabled.... but for whatever reason, my code doesn't work. I ever tried it in the webkit console, and nothing errored =\
The JavaScript is executed before the divs are in the DOM. The standard way to do something after the DOM is ready is to use jQuery's $(document).ready(function () { });, but there are other ways as well.
The oldschool way is to use <body onload="myfunction()">.
Here's a newer way (edit: put display:none into CSS):
HTML:
<p class='javascript_needed'>hello</p>​
CSS:
.javascript_needed {display:none;}
JavaScript:
​$(document).ready(function () {
$('.javascript_needed').show();
});
​
Your JS should be setting the div's display to "block" ("visible" isn't a valid value for display).
Also, from the looks of things your elements aren't in the DOM at the time the code is fired (your code doesn't see them yet). Do any of the following:
Place your code anywhere in the document body below the divs
or, use an unobtrusive strategy to fire your function on window load, a la:
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(nameOfSomeFunctionToRunOnPageLoad);
or, Use a JS framework's "ready" functionality, a la jQuery's:
$(function () {
nameOfSomeFunctionToRunOnPageLoad();
});
"visible" is not a valid value for "display". You're after "inline" or "block".
"visible" and "hidden" are valid values for the "visibility" CSS property.
Difference between display and visible:
An element that is visible still takes up space on the page. The adjacent content is not rearranged when the element is toggled between visible and hidden.
An element that is display=none will not take up any space on the page. Other display values will cause the element to take up space. For example, display=block not only displays the element, but adds line breaks before and after it.
The disadvantage of showing elements on ready is that they will only flicker in after the page has finished loading. This usually looks odd.
Here's what I usually do. In a script in the <head> of the document (which runs before the body begins to render), do this:
document.documentElement.className = "JS";
Then, any CSS selectors that descend from .JS will only match if JavaScript is enabled. Let's say you give your links a class of javascriptNeeded (a class is more appropriate than a name here). Add this to your CSS:
.javascriptNeeded{
display: none;
}
.JS .javascriptNeeded{
display: inline;
}
…and the elements will be there from the start, but only if JavaScript is enabled.

Categories