Function for adding an element to div does not work.

Question

0.00/5 (No votes)

See more:

Hi,
I have written a simple application in Javascript, that inserts images or text into a div and user can drag around with the images or text in the div. From some moment, the button "Pridat" (in english "Add") was doing nothing and when I debugged it, it threw no error. Here is the whole HTML file, copy it, create css and try to fix it. I can't see any error. I even commented the lines where the error could be, but I haven't found it.
Can you fix my Javascript simple function and tell me where is an error?

Thanks a lot!

Pepin z Hane

XML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Designer</title>
    <link rel="Stylesheet" href="StyleSheet.css" type="text/css" media="screen"/>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js "></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js "></script>
    <script type="text/javascript">
        $(function () {
            $(".draggable").draggable({ containment: "parent" });
        });

    </script>
    <script type="text/javascript">
        function AddElement() {
            var path = $("#ListBox1").val();    //value of the selected item
            var ImgID = "Img" + $("#Counter").text();   //gets a value of the label with the id Counter and saves it into the ImgID, which is used as a unique id for each object.
            var count = parseInt($("#Counter").text()) + 1; //increments Counters value for another object.
            $("#Counter").text(count);  //saves incremented value

            if ($("#Textbox1").val().toString() == "") {
                //if user has not write any text, insert to screen image.
                $("#divStyle").append("<div class=\"draggable\" id=\"" + ImgID + "\"><img class=\"img\"  src=\"" + path.toString() + "\"></div>");
            }
            else {
                //else insert Text
                $("#divStyle").append("<div class=\"draggable\" id=\"" + ImgID + "\"><p class=\"text\">" + $("Textbox1").val() + "</p></div>");
            }
            $(".draggable").draggable({ containment: "parent" });   //call draggable for dragging the elements (included the new element) by user.
        }
    </script>
</head>
<body>
<table>
<tr>
    <td>
        <form name="form1" action="Index.htm">
        <select id="ListBox1" name="lbItems" multiple="multiple">
        <option value="/Images/Devotion.bmp">Devotion</option>

        <option value="/Images/Devotion3.bmp">Devotion3</option>

        <option value="/Images/DSK.jpg">DSK</option>

        <option value="/Images/HC Oceláři Třinec.png">HC Oceláři Třinec</option>

        <option value="/Images/Logo_Auto_Skoda.jpg">Škoda Auto</option>
        </select>
        <br/>
        <input name="Textbox1" id="Textbox1" type="text" value=""/>
        <br />
        <button class="styleButton" onclick="AddElement()">Přidat</button>
        <label id="lb1">vybráno</label>
        <br/>
        <button class="styleButton" onclick="PrintElementProperties()">Vypiš</button>
        </form>
    </td>
    <td>
        &nbsp; &nbsp; &nbsp; &nbsp;
    </td>
    <td>
        <div id="platno">
            <p class="draggable" style="height:75px; width:100px;">Drag me around</p>
        </div>
    </td>

</tr>
<tr>
    <td>
        <label id="Counter">0</label>
    </td>
    <td>
        &nbsp; &nbsp; &nbsp; &nbsp;
    </td>
    <td>
        <div id="vypis">

        </div>
    </td>
</tr>
</table>


</body>
</html>

Posted 20-Apr-13 13:52pm

Pepin z Hane

Add a Solution

Comments

Sergey Alexandrovich Kryukov 20-Apr-13 21:30pm

First of all, it's good to start any jQuery-based script with document.ready...
Why did you tell as about Pridat function is you never show it?
—SA

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Moykn · Accepted Answer · 2013-04-20T15:38:00

I will not fix it to you but i will try to put you in the right direction.

First thing i could notice is that you don't have a div(or any element) with the ID="divStyle".
The second thing is that you are probably receiving error messages because there are no one option active in the SELECT list
Third, you could use a single quote ' inside double-quoted "" strings.
Fourth, Here..

JavaScript

$("#divStyle").append("<div class="\"draggable\"" id="\""" imgid=""><p class="\"text\"">" + $("Textbox1").val() + "</p></div>");

you have forgoten to add the "#" to the selector

JavaScript

//this...
$("Textbox1").val()
//should be this
$("#Textbox1").val()

Fifth, if you need a counter you could use a var instead of always be reading and parsing an element's text, and is a good practice to pass the radix to the parseInt function -> parseInt("10", 10)

http://www.w3schools.com/jsref/jsref_parseint.asp[^]

Sixth, your button

HTML

<button class="styleButton" onclick="AddElement()">Přidat</button>

should have the type "Button"