We Keep Coding

Get id of element within ckeditor

Unfortunately I have to open a new question for this as I cannot yet add comments to replies (in foreign posts).
In this question (Clicking CKEditor content to show alert) Palec posted a solution to get onclick events within CKEditor that works very well for me but as I hardly know jQuery I would need to know how I can get the id of the element (in this case the id of a div) within CKEditor using the code below.
This is the piece of code that I'm talking about.
CKEDITOR.on('instanceReady', function() {
$('.cke_contents iframe').contents().click(function() {
alert('Clicked!');
});
});
Thanks for your help,
Pascal

You can get the id of an element in native Javascript using
element.id
and in jQuery using
$('element').attr('id')
Working Example:
// Native Javascript
var myDiv = document.getElementsByTagName('div')[0];
var myDivId = myDiv.id;
window.alert('Native javascript has found the id of the <div> is "' + myDivId + '"');
// jQuery
$(document).ready(function(){
alert('jQuery Library has found the id of the <div> is "' + $('div').attr('id') + '"');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="my-div"></div>

Refer to ID (as selector) that is already inside HTML link tags

I have a link that is generated by a core module (meaning I can't modify the code) as such:
<a id="my-unique-id-1" class="my-link-class" href="/switch off">Switch off</a>
Problem is, the ID and class are within the <a> tag and I do not have any useable elements wrapped around the link that I can use.
When clicked, it goes and do what it has to do server side (see code following), and then returns this:
<a id="my-unique-id-1" class="my-link-class it-is-off" href="/switch on">Switch on</a>
I want to replace or amend the complete first link.
First the jQuery script:
$(".my-link-class").click(function() {
var current_id = $(this).attr('id');
var link = $(this).attr('href');
$.ajax({url: link, success: function (result) {
//All works fine up to here. The changes are made in server side and returns the new link as the result.
//Following is my problem:
if(result){
$(current_id).replaceWith(result); //the selector is wrong, I know.
}
}
}
My problem is that the id (current_id) is already within a <a> tag.
How can I refer to the selector in the tag.
I tried:
$(current_id).replaceWith(result); //nothing happens
$('#' + current_id).replaceWith(result);
$('a#' + current_id).replaceWith(result);
But I get with the last two TypeError: Argument 1 of Node.appendChild does not implement interface Node.
(I know I can do other things than replaceWith such as changing text and href in link, but the problem here is to find the selector first).

You can just use $(this).replaceWith():
$(document).on('click', '.my-link-class', function() {
var html = '<a id="my-unique-id-1" class="my-link-class it-is-off" href="/switch on">Switch on</a>';
$(this).replaceWith(html);
return false;
});
.it-is-off {
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="my-unique-id-1" class="my-link-class" href="/switch off">Switch off</a>

I think there are two things happening here.
You are trying to use an ID to replace an element, when it would be easier to just keep a reference to the DOM element you want to replace rather than finding it twice.
You are binding an event to an anchor tag that you are then trying to replace. Once you replace it, the event will go away. The way to avoid this issue is bind your event to something that won't be changing. That can be the element right above the one you are going to replace, or it can be a much higher up element like the body element.
Here's a possible solution that fixes both problems. I've written a function called simulatedAjax to give an idea of what I think you're saying the backend code is doing. It follows the same idea as the jQuery $.get using the configurationObject, callback(result) signature.
function simulatedAjax(config, done){
var onOffText = (config.url === "on" ? "off" : "on");
done('Switch '+ onOffText +'');
}
And now your client code
$(function(){
// Bind the click to the body element, but with a delegate to your link class .custom-link
$('body').on('click', '.custom-link', function(e){
// Store a reference to the A tag, name is irrelevant but self is easy to understand
var self = this;
// Keep the page from actually navigating to the href
e.preventDefault();
//Replace with real jQuery $.get or $.ajax with configuration
simulatedAjax({
url: $(this).attr('href')
}, function(resultHTML){
// Since we stored a reference to the original in the self variable, we can just replace it here. Note that if we tried to use `this` here, it wouldn't refer to the right `this`
$(self).replaceWith(resultHTML);
});
});
});
You can see this code sample working in this JSFiddle http://jsfiddle.net/x83vfmuw/
Hope this helps!

.removeClass not functioning within .replaceWith

I'm trying to make a button that will hide a specific -- and then replace it with another hidden . However, when I test the code, everything fires correctly except for the .removeClass which contains the "display: none."
Here is the code:
<script type="text/javascript">
$(document).ready(function(){
var webform = document.getElementById('block-webform-client-block-18');
var unmarriedbutton = document.getElementById('unmarried');
var buyingblock = document.getElementById('block-block-10');
$(unmarriedbutton).click(function () {
$(buyingblock).fadeOut('slow', function() {
$(this).replaceWith(function () {
$(webform).removeClass('hiddenbox')
});
});
});
});
</script>
The CSS on 'hiddenbox' is nothing more than "display: none.'
There is a with the id of unmarried, which when clicked fades out a div and replaces it with a hidden div that removes the class to reveal it. However, the last part doesn't fire -- everything else does and functions properly. When I look at in the console too, it shows no errors.
Can someone please tell me where the error is? Thanks!
Edit: I may be using the wrong function to replace the div with, so here's the site: http://drjohncurtis.com/happily-un-married. If you click the "download the book" button, the the div disappears and is replaced correctly with the div#block-webform-client-block-18. However, it remains hidden.

The function you pass to replaceWith has to return the content you want to replace it with. You have to actually return the content.
I don't know exactly what you're trying to accomplish, but you could use this if the goal is to replace it with the webform object:
$(this).replaceWith(function () {
return($(webform).removeClass('hiddenbox'));
});

NB, use jquery !
var webform = $('#block-webform-client-block-18');
var unmarriedbutton = $('#unmarried');
var buyingblock =$('#block-block-10');
unmarriedbutton.click(function () {
buyingblock.fadeOut('slow', function() {
$(this).replaceWith( webform.removeClass('hiddenbox'));
});
});
Was too fast, i believe it's the way you select your object (getelementbyid) then you create a jquery object from it... -> use jquery API

Remove text in 'a' but not in 'href'

please take a look at my website: moskah.nl
As you can see there is a pre-filled input. Click 'save' and you will see the url is being saved with a favicon next to it. Do this a couple of times to create a list.
If you refresh the page you will see the part that says 'http://' is being removed because of a function:
function replace() {
$("a").text(function(i, h){
return h.replace('http://', "");
});
}
Now the problem is that if you then click on a list item (NOT the href) you will see the item is being removed. Now if you refresh agian you will see all the favicons are gone. I think this is because somehow the function 'replace' is also removing the 'href' part which is strange because I explicitly stated it should remove 'text'. So how do I remove an item list without its favicon? (Basically keeping its url(href) intact)
ps. I cant give you a demo on jsfiddle because it doesnt work there.

jQuery('a[href^="http://"]', this).each(function () {
// ...
}
You add the favicon inside this function; this means that if your a tag's href attribute doesn't start with http:// it won't have a favicon.
When you populate the list with the jquery cookie:
if (cookie){
var values = $.parseJSON(cookie);
var li;
for (var v in values) {
li = $('<li>' + values[v] + '</li>');
$('.jq-text').append(li).show();
}
// ...
}
the attribute href is set the same as the a tag's text:
li = $('<li>' + values[v] + '</li>');
You have to save the href attribute inside the cookie too or to manually add http:// when you load from the jquery cookie.
PS: sorry for my bad english; I wish that it's understandable what I've written.

Javascript - how do I minimise this code example?

a quick question.
At the moment I have 12 links on a page, and 12 corresponding javascript codes that run when a each button is clicked.
I know 100% there must be a method of having 1 javascript code and the link passing a variable to it, so I don't have to have 12 different codes.
EG. Here is a link I'm currently using:
Anatomical Pathology
And the Javascript function that is run when the link is clicked loads some html from a php script into a div which is previously defined as level2:
$('#button1').click(function() {
level2.load("http://hello/script.php?url=poodles");
});
What I'd really like to do is something like this with the link:
Anatomical Pathology
And the function something like this, so I only need the 1 function not 12:
$('#button1').click(function() {
level2.load("http://hello/script.php?url=' + passurl + '");
});
How do I go about getting the data from the link tag into javascript, and also how do I add this passed variable into the url I want the javascript to pull data in from?

passurl isn't standard attribute, you should use data-passurl
$('#button1').click(function() {
var passurl = $(this).data('passurl'); // or $(this).attr('data-passurl');
level2.load("http://hello/script.php?url=" + passurl);
});

Why don't you utilize your hash there...
Anatomical Pathology
In your script
$(".button").each(function() {
// get the hash and extract the part we want store it in this enclosure
var url = $(this).attr("href").replace(/^#\//, "");
// create a click handler that loads the url
$(this).click(function() {
level2.load("http://hello/script.php?url=" + url);
});
});
This also brings about the possibility to extrapolate from that so that a hash passed through the url can also operate the script loading...

You can use the rel attributte (or any data- attributes if your using HTML5 Doctype) to save your URL and add a class to the links you want to execute your callback.
Anatomical Pathology
Your Callback:
$('a.button').click(function() {
level2.load("http://hello/script.php?url=' + $(this).attr('rel') + '");
});

For a more extensible solution you could consider making a json structure for your urls:
var urls = [{
"poodle":{
"url":"http://hello/script.php?url=poodle",
"someOtherData":"data"
},
"otherDog":{
"url":"http://hello/script.php?url=otherDog",
"someOtherData":"data"
}
}];
You would store some sort of key somewhere in your HTML element:
Anatomical Pathology
Then you would leverage this data structure in your functional code:
$('a').click(function () {
var key = $(this).attr('rel');
level2.load(urls[key].url);
});

As per Stuie, add a class to the links so that you can target them all at once. However, I don't see the need to fool with the hash, and I wouldn't add a bunch of click events either. Just delegate once and you're done:
<div id="wrapper">
Poodles
Schnausers
</div>
and the JS:
$('#wrapper').delegate('a.button', 'click', function(e) {
e.preventDefault();
var passurl = $(this).attr("href");
level2.load("http://hello/script.php?url=" + passurl); // assuming "level2" is valid from elsewhere
});
Where I have "#wrapper" you would designate any unique selector that is an ancestor of all your links. It's an element that listens for clicks on the a.button elements within.