Insert selected item into text area jquery - javascript

Im creating a form where you can add/create standard and custom comments. I've got it already working bout inserting it blablabla. Now im trying to add a select box with 6-7 standard comments. I got that working and I can also log that in to the console which is selected.
Now I'm trying to insert that selected comment into my redactor. The internet can't help me so far yet and I have no clue what to do left. Can you guys help me a little bit or give me tips on how to do it.
Comment Choice is my selector. Editor is my redactor. Here is what I've tried:
$('.commentChoice').change(function(){
//Logging to see what i selected with my .commentChoice
console.log($(this).val());
//Trying to add the value of the .commentChoice to the .editor class.
$('.editor').val($(this).val());
});
Thanks in advance.

Related

jQuery toggle a box inside a box

Trying to build a guestbook with some jQuery features..
Now when im clicking at the "Post"box it appears a new box with the name "MenuBox" (This box is always hidden) i got the toggle part to work ALMOST.
The meaning of the MenuBox, is that it should show over the PostBox with a delete button so they can delete the post.
But now when i try to toggle it, it toggles all the boxes, is there a possible way of like making $("$(this) .MenuBox").click(
Anyone got any clue?
Sorry if the explanation is bad..
Provided that .MenuBox is a child of $(this):
$(this).find('.MenuBox').click(...);

jquery selectize error: issue with adding new select fields and combox-ifying them

I am trying to the Selectize library so I can have a comboboxes on my form.
So my form has a way to dynamically add more dropdowns (that i want to be comboboxes), so whenever the user adds a new dropdown, I want to apply Selectize combobox to it. So within my function that adds the new dropdown, after I have appended it, I use the following code:
$('select').each(function() {
if (!$(this).is('selectized')) {
$(this).selectize({
create: true,
sortField: 'text'
});
}
});
I thought that this would only apply it to dropdowns that do not already have Selectized combo box applied to it, but something is going wrong. Basically it is applying it to new comboboxes but something strange is going on with the existing ones. It's adding some kind of blank dropdown each time.
I tried to look around but I cannot find an "official" solution for combobox-ifying a newly added select fields. I don't know if it's an issue with how I am applying it, or if it's some kind of weird conflict with twitter bootstrap or jquery-ui or jquery itself (I included all of those in the fiddle)
Anyways, here is a link where you can see this issue in action:
http://jsfiddle.net/Qz7Ar/2/
Does anybody have experience with this or know what's going on here?
edit:
I also made a fork removing jquery-ui and bootstrap, so it's just jquery (required for Selectize) and Serialze, and the issue is still happening:
http://jsfiddle.net/Wxxub/1/
Okay well I figured out how to fix it..
If I add an id attrib to the new element and target by that instead, it works. Here is another fork demonstrating it:
http://jsfiddle.net/Wg7J6/1/
I can't find anywhere in the Selectize doc that it's necessary (I could be blind though!) that the select field must have an id or if it would work without one but i'm just doing it wrong or what, though.

Hide span with jquery is not working

I have a sharepoint webpart that shows some information from some lists, the lists are security trimmed, so if the user does not have permission to that list, it will show access denied. Which is fine.
I want to hide that part of the page.
I found how to solve it here:
http://www.timferro.com/wordpress/archives/227
This is the code I have:
<script src="/_layouts/Scripts/jquery1.8.1.min.js"></script><script language="javascript">
$("span:contains('Error')").hide();
$("div:contains('Access denied'):not(:has(div))").hide();</script>
And this is the screenshot that shows what I need to hide.
1
Better pic here
Update:
when I hide it, now sharepoint its showing me a blue line that I want to get rid off, but If I hide the blue line only, then a strange space will be between webparts, I think the best is to hide that TD that contains the rest of the things? How can I hide that?
Please see new screeenshot
looks like you forgot to put it inside the jQuery ready function:
$(function(){
$("span:contains('Error')").hide();
$("div:contains('Access denied'):not(:has(div))").hide();
});
Try below,
$(".UserGeneric span.ms-bold:contains('Error')").hide();
or If you want to hide the whole error then
$(".UserGeneric span.ms-bold:contains('Error')").parent().hide();

Get value of multiple select list values jquery

Im wanting to collect the selected value of a select list, and insert the value into span tag. I am using the msDropdown jquery plugin which skins the select list.
The code below initiates the plugin, but how i would alter it to so that it outputs the value of the selected option to a span tag each time user selects an option?
I know the answer is simple, and I do have some rough skills with jquery, but my brain has buckled because ive been coding in PHP for the past week and am finding it hard to remember how to tackle this.
$(document).ready(function() {
$("#websites2").msDropDown({mainCSS:'dd2'});
})
All help is appreciated, cheers Lea
First add the change listener to your select and then initialize the msDropDown. This works for me on the demo at http://www.marghoobsuleman.com/jquery-image-dropdown.
$('#websites2').change(function() {
$('#id-span').html($('#websites2').val());
});
$("#websites2").msDropDown({mainCSS:'dd2'});

Add span on selected text in a contenteditable div

I want the user to be able to select the text in the div and add the <span style="color: #ff3300;"> to it.
Example code # http://jsfiddle.net/SkDA8/1/
Hover over to div and click on the missing picture to display the color-swatch
Thanks for your help!
PS
I want it to work in all modern browsers.
I was about to respond to your post to the Rangy group about this, but I'll respond here too.
This is one task that is achievable using document.execCommand():
document.execCommand("ForeColor", false, "#ff3300")
I've created an update to your jsfiddle: http://jsfiddle.net/timdown/SkDA8/3/
Not exactly certain what you are trying to do. Here is an updated jsFiddle that gets the value of the colored swatch that is clicked and updates the header color.
http://jsfiddle.net/SkDA8/4/
Hope this helps.
Bob

Categories