CODEWITHSUNDEEP
javascriptjquery
McFly
McFly

Reputation: 173

jQuery .prepend() Not Working

and I am trying to prepend an option value from a select. I need the output to start with a capital "K". Here is my jQuery:

    $(document).ready(function () {
$(".dialogbox").dialog({
    modal: true,
    autoOpen: false
});
$(".dropdown").change(function () {
    $(".dialogbox").dialog("open");
    $(".dialogbox").change("puff");
});
$('select.dropdown').change(function () {
    var capacityValue = $('select.dropdown').find(':selected').data('capacity').toUpperCase();   
    $('.dialogbox').val(capacityValue);
});

});

and here is my fiddle

I've tried 

$('.dialogbox').val(capacityValue).prepend( 'K' );

but that didn't seem to work. All the examples I've seen indicate that this should work. Thanks in advance for the help.

Upvotes: 0

Views: 4471

Answers (5)

John S
John S

Reputation: 21482

There are quite a few problems with your code:

(1) .prepend() is for prepending an element as a child of another element. You are trying to call it on a string. I think you want to use string concatenation:

"K" + $('select.dropdown').find(':selected').data('capacity')

(2) You are missing an = in your html for the dropdown's "name" attribute:

<select class='dropdown' name='dropdown'>

(3) You have two elements with class="dialogbox", so the following opens two dialogs:

$(".dialogbox").dialog("open");

You could either use two different class names, or include the element types in the selectors to distinguish between them: 'div.dialogbox' & 'input.dialogbox'

(4) You are attaching two change event handlers to the dropdown. There's no guarantee on the order they are called. You should combine them into one.

(5) You should use .text() or .html() to insert text into an element, not .val(). Use .val() just for setting the value of an input element.

(6) You can establish the animation effect for the opening of a dialog by including the show option:

show: 'puff'

Or:

show: { effect: 'puff', duration: 1000 }

Try the following:

$(".dropdown").change(function () {
    var capacityValue = "K" +  $(this).find(':selected').data('capacity').toUpperCase();

    $('div.dialogbox').text(capacityValue).dialog("open");

    $('input.dialogbox').val(capacityValue);
});

jsfiddle

Upvotes: 2

Wilmer
Wilmer

Reputation: 2511

I've updated your fiddle, check here.

HTML:

<select class='dropdown' name 'dropdown'>
    <option data-selected='opts1' data-capacity='opt1' value='opt1'>Option 1</option>
    <option data-selected='opts2' data-capacity='opt2' value='opt2'>Option 2</option>
    <option data-selected='opts3' data-capacity='opt3' value='opt3'>Option 3</option>
</select>
<div class='dialogbox' title='Dialogbox'></div>
<input type="text" class="dialogbox" readonly />-->

Javascript:

$(document).ready(function () {

    $("div.dialogbox").dialog({
        modal: true,
        autoOpen: false
    });
    $("input.dialogbox").change(function () {
        $("div.dialogbox").dialog("open");
    });

    $('select.dropdown').change(function () {
        var capacityValue = "k".toUpperCase() +  $(this).find(':selected').data('capacity');
        $('div.dialogbox').text(capacityValue);
        $('input.dialogbox').val(capacityValue);
        $('input.dialogbox').change();

    });

});

Upvotes: 0

Suraj Rawat
Suraj Rawat

Reputation: 3763

Reduced code to one line and corrected it ! **

    $('select.dropdown').change(function () {
     $('.dialogbox').val("k"+$(this).val());
    });

you can easily achieve it without prepend method

solution is here

Upvotes: 0

Subash Selvaraj
Subash Selvaraj

Reputation: 3385

.prepend() is to prepend a dom element. In your case just Try to prepend the text like this,

var capacityValue = "K"+ $('select.dropdown').find(':selected').data('capacity');

Updated fiddle

Upvotes: 0

Daniil Grankin
Daniil Grankin

Reputation: 3933

I saw your fiddle I think you don't undestand what prepend does. capacityValue it's just value of attribute.

.prepend

Description: Insert content, specified by the parameter, to the beginning of each element in the set of matched elements.

http://api.jquery.com/prepend/

capacityValue it is not element, it's object string, not more.

Upvotes: 0

Related Questions