I am trying to adapt this script: jQuery Example: Inserting text with drag n’ drop.
The goal is for my users to click an image thumbnail and have the appropriate markdown image code inserted into the textarea.
I am not familiar with JS, so I am aware that the meat of the script is happening here:
$('#ClickWordList li').click(function() {
$("#txtMessage").insertAtCaret($(this).text());
return false
});
specifically, the .text() bit there, but do not know how to alter the output to suit my needs for a snippet of markdown being inserted rather than just, say, the list text.
Markdown inline image syntax looks like this: 
I tried changing the list to a div with images and then changing to .insertAtCaret($(this).src); but I get "undefined" as the insertion text.
$(this).src is undefined because $(this) is a jQuery object, and jQuery objects don't have a src property. Assuming you have an image element in your selector, You can try:
$("#txtMessage").insertAtCaret($(this).attr('src'));
The .attr() jQuery method, when given only one parameter, will return the matched element's given attribute's value.
or
$("#txtMessage").insertAtCaret($(this)[0].src);
To get the literal DOM element's src.
Extra explanations (if you need)
The .text() jQuery method, when given no parameters, will return all text inside of the element referenced by this, that is, the event's target, in this case the clicked li inside the #ClickWordList element.
.insertAtCaret() is an extended function of the jQuery object provided by your drag 'n drop plugin.
return false will do exactly what it says, returning false in the click event's handler for the selected element, which simply cancels the event and prevents its propagation from bubbling up the DOM further.
Sorry if there are any typos.
Related
Some interesting JavaScript I hadn't seen before:
var html = $( 'html' );
if( html.className !== '' )
html.className = '';
I’m not sure how it works, but it seems like that assignment has the effect of changing the CSS display value of every element on the page which has the className selector from block to none.
Is anybody familiar with this behavior? Am I seeing it right?
EDIT:
OK, in response to those who say it's not valid jQuery, you're right. It's a shorthand way of describing the HTML element that was passed in by another function. And I didn't write it, just trying to understand it. It works, I want to know why.
This is actually a jQuery to select the html node and change the value of css class to it.
lets says you want to change the padding of the html document using a click event.
your onclick event would call that function to assign the css class with the desired padding.
I'm trying to allow some text of <p> (the comment) to be editable when the user clicks on 'Edit'.
function editComment(commentid,replyid){
$('#comment'+commentid).find('.comment-text').attr("contenteditable='true'");
}
However this is giving me an error (undefined) and I'm not sure why, as .comment-text is a child of #comment88? I'm probably missing something really simple
Your HTML DOM and jQuery looks fine and legit, however the attr function would cause a trouble. I would suggest that you apply the style using this,
$('#comment'+commentid).find('.comment-text').attr("contenteditable", true);
This will apply the attribute to your element.
Description: When you use attr() function to add or update the attribute value, you pass two parameters. One as a key and second as the value for that attribute (key). If you pass only one, it will return that attribute's value. This is the problem that gets raised in your case, the find function is working, but in the final function, instead of applying that attribute it returns the value (false IMO).
I have the following code:
var golden_site = '<div id="golden_site"></div>';
$('.form_content').append(golden_site);
var lookup = '<input type="text" name="lookup" value="test">';
Why is this not working:
$(golden_site).append(lookup);
But accessing the node by id works:
$('#golden_site').append(lookup);
This $('#golden_site') selects the div with id=golden_site. While this $(golden_site) doesn't select anything.
Taken from here, you have the following ways of selecting an element using jQuery
Selecting Elements by ID
Selecting Elements by Class Name
Selecting Elements by Attribute
Selecting Elements by Compound CSS Selector
Pseudo-Selectors
The way you tried to select your div doesn't follow one of the above ways. Hence you didn't make it. While using the id you made it, since this is included in the above ways.
update
As Guffa pointed out (I didn't now it) in his comment,
The call $(golden_site) doesn't try to use the string as a selector at
all. It will create an elements from the HTML string, and actually
return that element
The code is working fine, but it doesn't do what you think.
The $(golden_site) part will create a new div element from the HTML code in the string. The lookup element will then be appended to that div. As the div is an element that you just created, it's not in the page and the lookup element that you appended to it isn't in the page either.
If you create the div element first and then append that to the page, instead of using a string in the append, then you have a reference to the div element:
var golden_site = '<div id="golden_site"></div>';
var element = $(golden_site);
$('.form_content').append(element);
Now you can append things to it:
element.append(lookup);
Because when you say
$(golden_site).append(lookup);
Actually you mean:
'<div id="golden_site"></div>'
In plain words, it's just a string, not a jQuery object that can be appended to. golden_site is just a string.
The reason is because the $() is in fact a wrapper of jQuery over the document.querySelector(). So as expected both methods should behave similar, when you do:
$("#blah").append(x);
Indeed the browser is doing this:
document.querySelector("#blah").appendChild(x);
So both methods should work as they explain here -> How query Selector works
As you can see the variable passed as argument is a string that will be used as a CSS Selector, they explain here -> CSS Selector List
I will add this graphic with some of the most common ways to select elements from the DOM, don't forget the '', courtesy from W3CSchools.
I have a webpage in which I have two <div>s. Both elements are draggable; when one is dropped over the other, the positions are switched. Currently, the way the JS works is to actually switch the innerHtml property of both elements (meaning we get the innerHtml of the dragged element, the innerHtml of the drop zone element, and set both properties to the other element's value).
This works fine for switching the element's position. However, when the switch happens, data that is in <input> elements in both <div>s gets removed. How do I preserve this data when dragging and dropping?
I've tried the following:
Switching the DOM node reference itself, instead of the innerHtml property
Using cloneNode() and $.clone()
Getting the value property, in addition to innerHtml, and switching that too. This was rejected because it would be impractical due to the way the code is structured.
I have JQuery available, if that helps.
You can use jQuery's .detach() and .append() methods.
To move a div on the DOM, call $(div).detach(); to remove it from its current location, and then call $(newParent).append(div); to append it to its new location.
I'm assuming both div and newParent are either the elements themselves, or a selector to retrieve the correct element.
See also this answer.
onmouseover="javascript:parent.DivColorHover(this)"
i have a div in which values are created dynamically, i use this div as popup so that it will be used as dropdown list elements.
onMouseOver of each value i am changing background color using the above line of code in javascript. how do i achieve the same in jquery
Let's first look at the code that you are using.
The javascript: protocol is out of place (it's used when code is placed in an URL) so it just becomes an unused label.
The parent object is a reference to the page that contains the iframe that the current page is in. As you are probably not in an iframe but a regular page, it will just be a reference to the current page.
So, all that is left of the code is actually:
onmouseover="DivColorHover(this)"
To add the same event using jQuery you need some way to identify the element, for example by adding an id="something", then you can do this:
$(function(){
$('#something').mouseover(function(){
DivColorHover(this);
});
});
jQuery(document).ready(function(){
$("#yourid").mouseover(function() {
$("#yourid").parent().css("backgroundColour":"red");
}
}
When html loaded jquery binds the defined function to the mouseover event of element with id="yourid".
This way you keep behaviour (event handlers) and structure (html) separate, easier to understand (for me at least).