JQuery Mobile giving me "undefined"

Hi all,

i have coded a website to have a text item that will when you click the add button, add the item to a listview. I am struggling to get it to read the text from the textbox and keep getting "undefined" instead of the text.

Can you please tell me where i have gone wrong

thanks

<!DOCTYPE html>
<html>
  <head>
    <title>Scripting listview</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>    
    <script>
	var $txtbox = $("#txtbox").val();
      <!-- var count = 0; -->
      $("#main").live("pagecreate", function(event) {
        $("#numlist").listview({create: function(event, ui) {
          $("#addBtn").bind("click", function(event, ui) {
            var str = "<li><a href='#'>Item " + ($txtbox) + "</a></li>";
            $("#numlist").append(str);
            $("#numlist").listview("refresh");
          });
          $("#removeBtn").bind("click", function(event, ui) {
           // if (--count < 0) {
             // count = 0;
             // return;
           // }
            $("#numlist").find("li").remove();
            $("#numlist").listview("refresh");
          });
        }});
      });
    </script>
    
  </head>
  <body>
    <!-- Main Page -->
    <div id="main" data-role="page" data-theme="a">
      <div data-role="header" data-theme="a">
        <h1>Scripting listview</h1>
      </div>
	  <div data-role="fieldcontain">
    <label for="txtbox">Text Input:</label>
    <input type="text" name="txtbox" id="txtbox" value=""  />
</div>	
      <div data-role="content">
        <div data-role="fieldcontain">
          <fieldset class="ui-grid-b">
            <div class="ui-block-a" style="width: 65%">
              <ul id="numlist" data-role="listview" data-theme="e" data-inset="true">
              </ul>
            </div>
            <div class="ui-block-b">
              <button data-theme="b" id="addBtn">Add</button>
              <button data-theme="b" id="removeBtn">Remove</button>
            </div>
          </fieldset>
        </div>
      </div>
    </div>
  </body>

Open in new window

auschocAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

WebDevEMCommented:
Hi,

It was a minor issue, but enough to make you pull some hair out... the var $txtbox = $("#txtbox").val(); line was getting the value BEFORE the button was clicked because it was outside the function.  So the script started, value was empty, then the function ran later and looked for the value.  I moved it inside the click function and everything added properly.
<!DOCTYPE html>
<html>
	<head>
		<title>Scripting listview</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
		<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
		<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
		<script>
			//var count = 0; -->
			$("#main").live("pagecreate", function(event) {
				$("#numlist").listview({
					create : function(event, ui) {
						$("#addBtn").bind("click", function(event, ui) {
							var $txtbox = $("#txtbox").val();
							console.log(txtbox);
							var str = "<li><a href='#'>Item " + $txtbox + "</a></li>";
							$("#numlist").append(str);
							$("#numlist").listview("refresh");
						});
						$("#removeBtn").bind("click", function(event, ui) {
							// if (--count < 0) {
							// count = 0;
							// return;
							// }
							$("#numlist").find("li").remove();
							$("#numlist").listview("refresh");
						});
					}
				});
			});
		</script>

	</head>
	<body>
		<!-- Main Page -->
		<div id="main" data-role="page" data-theme="a">
			<div data-role="header" data-theme="a">
				<h1>Scripting listview</h1>
			</div>
			<div data-role="fieldcontain">
				<label for="txtbox">Text Input:</label>
				<input type="text" name="txtbox" id="txtbox" value=""  />
			</div>
			<div data-role="content">
				<div data-role="fieldcontain">
					<fieldset class="ui-grid-b">
						<div class="ui-block-a" style="width: 65%">
							<ul id="numlist" data-role="listview" data-theme="e" data-inset="true"></ul>
						</div>
						<div class="ui-block-b">
							<button data-theme="b" id="addBtn">
								Add
							</button>
							<button data-theme="b" id="removeBtn">
								Remove
							</button>
						</div>
					</fieldset>
				</div>
			</div>
		</div>
	</body>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.