Get id of element within ckeditor - javascript

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>

Related

I would like to get useful link at the end with jquery

At the end would like to get this: mondaysoupcall.html and call into another div.
This is the target div:
<div class="description"></div>
This is the label where I want to click and read "data-id" <--(I dont know why this is my idea) I'm newbie
<label for="sel1" id="mondaysoupcall" data-id="mondaysoupcall">Soup</label>
and this is my part of the jquery code. I can get attributes easily but calling back or convert to text is quiet difficult to me. (I am still newbie).
var dab = $(this).attr('data-id');
$('label').click(function(){
alert( $(this).attr('dataid'));
$(".description").load(dab+'.html');
});
The alert window is comes up if i click on the label. And the consol log says:
http://localhost/wichkitchen/undefined.html 404 (Not Found). Undefined because of my variable is still attrinbute not text.
So somewhat I would like to call in the little html into the "description" div. The name should be in the label tag, no anchor. Any solution I am interested in jquery. Thank you guys.
console log about link
allert window calling attribute.
I think you are calling your data attribute wrong.
$('label').on('click', (e) => {
let dataId = $(this).attr('data-id') + '.html';
// alternative let dataId = $(this).data('id') + '.html';
$('.description').load(dataId, () => {
alert('Data loaded!');
})
});

Trying to use jQuery to trigger an anchor click after the page loads

So this has been asked a number of times on here, and while I've read all of the threads I can find, this still isn't working for me.
A little background: I'm working on a Wordpress site with a grid plugin, and I'm trying to trigger a filter when the page loads, depending on a url parameter. For the purpose of this thread I've just hardcoded a url parameter (the category variable) as an example because that functionality is working fine.
The anchor tag I'm trying to trigger:
Tarps and Covers
The broken code I'm trying to use to trigger the click event:
<script type="text/javascript">
$(document).ready(function() {
var hash = window.location.hash;
var category = '55';
var anchor = $("[data-category=" + category + "]");
anchor.click();
});
</script>
A console log returning the anchor variable confirms that I'm selecting the correct jQuery object, and I've also tried anchor[0].click() to trigger it with no success. Does anyone see any problems that I'm overlooking?
I tried it :
$(document).ready(function() {
var hash = window.location.hash;
var category = '55';
var anchor = $("[data-category=" + category + "]");
anchor.click();
anchor.on('click',()=>{
alert();
})
});
Everything is working

jQuery .load by element ID

Hi I'm trying to load an element from a webpage via ID.
My code reads the url from the 'href' attribute of the tag and then loads the page. I'm stripping the document anchor.
This script works but won't discard the surround elements and loads the entire page.
<script type="text/javascript">
$(function() {
var a_href = $('#pycom').attr('href').split('#');
$('div#pop-up').load(a_href[0] + '#synopsis');
});
</script>
<body>
<a id="pycom" href="content/documentation/CommandsPython/ls.html#hFlags">ls</a>
</body>
http://help.autodesk.com/cloudhelp/2015/ENU/Maya-Tech-Docs/CommandsPython/ls.html
The above link exists locally on my server (XAMPP) as per the 'html' code above.
Below is the element I would like to extract.
<p id="synopsis">
<code>
xform([objects...],
[absolute=<i>boolean</i>],
[boundingBox=<i>boolean</i>],
.....
.....
</code>
Thanks
Jamie
At first get your page, and then inside the
content find your element with id named 'synopsis' as below:
var a_href = $('#pycom').attr('href').split('#');
$("div#pop-up").load(a_href[0] + " #synopsis" );
It should work, but before that check whether your browser supports mixed content. If your url contains http inside https then browser may not support, In that case you have to disallow the checking in the browser.
Thanks.
OK solved. I was using jQuery 2.4.1 which apparently has a bug that is supposed to be fixed.. but appears to be not?? see here http://bugs.jquery.com/ticket/14773
I am instead using jQuery 1.11.3
below is my final code:
<script type="text/javascript" src="content/scripts/jquery-1.11.3.js"></script>
<script type="text/javascript">
$(function() {
var moveLeft = -10;
var moveDown = 10;
$('a#pycom').hover(function(e) {
var a_href = $(this).attr('href').split('#');
$('#pop-up').load(a_href[0] + ' #synopsis');
$('div#pop-up').show().css('top', e.pageY + moveDown).css('left', ((e.width/100)*1) + moveLeft);
}, function() {
$('div#pop-up').hide();
});
});
</script>
The following method using .get also works exactly the same except gives the benefit of being able to process the returned string in the callback.. in this case the trailing section of the requested selected element... very nice stuff.
$('a#pycom').hover(function(e) {
var a_href = $(this).attr('href').split('#');
$.get(a_href[0], function(response) {
$('#pop-up').html($(response).filter('#synopsis').html().split('<br>')[0]);
});
});
Now owning jQuery like a BOSS!!
Thank you to all those who helped out.
Chur!
J
You should not give any space in the URL. There is a space before ' #synopsis'.
$('div#pop-up').load(a_href[0] + '#synopsis');

Jquery: Put variable from attribute into <p>, live() won't work [duplicate]

This question already has answers here:
Turning live() into on() in jQuery
(5 answers)
Event handler not working on dynamic content [duplicate]
(2 answers)
Closed 9 years ago.
I have been using this code to get a simple lightbox working on a site of mine.
And I tried to modify it slightly so:
a) The lightbox fades in- Done
b) The script pulls in the src attribute not the href- Done
b) I can pull in data from a custom "data-description" attribute on the <img> that is being clicked (or tapped I suppose) to a <p> in the lightbox.
Issues
With the second, when the image is first clicked, It works fine. When any other is clicked, or it is clicked again, nothing happens- I can't work out why as I seem to be doing it right?
Also, when using jQuery 1.9, live() is apparently depreciated- I was using 1.8.2 before and didn't notice until now, I have tried on() with no sucess, and being a JS beginner am puzzled as to how to fix it, this issue means that the lightbox won't close.
Almost-working-but-broken code here: http://codepen.io/hwg/pen/ybEAw - Sorry about all the comments but I find it easier that way.
JS:
$(document).ready(function() { //Document Ready
$('.inner_img').click(function(e) {
//prevent default action (hyperlink)
e.preventDefault();
//Get clicked link href
var image_src = $(this).attr("src");
// Get Description
var desc = $(this).attr("data-description");
/*
If the lightbox window HTML already exists in document,
change the img src to to match the href of whatever link was clicked
If the lightbox window HTML doesn't exists, create it and insert it.
(This will only happen the first time around)
*/
if ($('#lightbox').length > 0) { // #lightbox exists
//place href as img src value
$('#content').html('<img src="' + image_src + '" />');
// Change Description in the P tag
$('.desc').html(' '+ desc +' ');
//show lightbox window - you could use .show('fast') for a transition
$('#lightbox').fadeIn(); // Fades it in
}
else { //#lightbox does not exist - create and insert (runs 1st time only)
//create HTML markup for lightbox window
var lightbox =
'<div id="lightbox">' +
'<p>Click to close</p>' +
'<div id="content">' + //insert clicked link's href into img src
'<img src="' + image_src +'" />' +
'<p class="desc">'+ desc +'</p>' + // Adds Description from <img data-description="..">
'</div>' +
'</div>';
//insert lightbox HTML into page
$(lightbox).hide().appendTo("body").fadeIn();
}
});
//Click anywhere on the page to get rid of lightbox window
$('#lightbox').on('click', function() { //must use live, as the lightbox element is inserted into the DOM
$("#lightbox").fadeOut(); // Fades it out
});
}); // End
Thanks for any help.
EDIT: I have been shown that the live/on issue is very common, I can see where I went wrong. Thanks for the assistance on this commenters.
However, why won't my code work for the second issue?
use event delegation with on -
$(document.body).on('click','#lightbox', function() {
$("#lightbox").fadeOut(); // Fades it out
});
Demo ---> http://codepen.io/anon/pen/ywJhe
You can change
$('.inner_img').click(function(e) {
to
$(document.body).on('click', '.inner_img', function(e) {
so that events occurring after the binding will still be delegated to the new elements.

.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

Categories