Creating a model clears the screen

Question

This a code i have made, this is a form that takes Name and Phone Number and has a submit button and a button to navigate to page named formentries to show the entries. I have created a view and written some HTML stuff and the entries when are input and submit is clicked an alert box shows the input. I need to create a model, collection (and 1 more view) to show all the entries on a different page. But when i create a model

   FormView = backbone.Model.extend({
      defaults: {
           First Name: "Unknown",
           Phone Number: "Not Defined
      }
   });

The form on the index page disappears.

The remaining code is

 <html>
 <meta charset="utf-8">
 <title>BackboneJs Tutorial</title>
 <head>

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-

1.4.2.min.css">

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script src="underscore.js"></script>
<script src="backbone.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone-
 localstorage.js/1.0/backbone.localStorage-min.js" type="text/javascript"></script>  

</head>
<body>

<div id="form_container">a</div>
<script type="text/template" id="form_template">
<label class="ui-hidden-accessible"><b>First Name</b></label>
<input type="text" id="input_name" placeholder="First Name"/>
<label class="ui-hidden-accessible"><b>Phone Number</b></label>
<input type = "text" id="input_phonenumber" placeholder="Phone Number" />
<input type="button" id="search_button" value="Search" />
<a href="#/formentries" class="ui-btn ui-corner-all ">Form Entries</a>
</script>




 <script type="text/javascript">

 FormView = Backbone.View.extend({
    initialize: function(){
        this.render();
        alert("DOM Ready.!!");
    },
    render: function(){
        // Compile the template using underscore
        var template = _.template( $("#form_template").html(), {} );
        // Load the compiled HTML into the Backbone "el"
        this.$el.html( template );
    },
    events: {
        "click input[type=button]": "doAction"
    },
    doAction: function( event ){
        // Button clicked, you can access the element that was clicked with 
    event.currentTarget
        alert( "Form Inputs are " + $("#input_name").val() +" and " + 
    $("#input_phonenumber").val() );
     }
  });

 var form_view = new FormView({ el: $("#form_container") });

</script>
</body>
</html>

Please look at the field names in the defaults object literal: "First Name" is not a valid variable name. — mrak, May 20 '14 at 10:06

score 0 · Answer 1 · edited May 23 '17 at 10:32

0

@mrak is right - change First Name and Phone Number to First_Name" and "Phone_Number"

General Pointer

When some JS weirdly stops other, seemingly unrelated parts of your JS from executing, it points to an error in parsing. The V8 interpreter (in webkit at least) just stops and doesn't execute the rest. If you open up your DevTools the console should direct you to the error.

Word of advice

In this case, just remember all JS Objects are associative arrays, and there are some rules governing the characters in the keys of the array. Please see Valid javascript object property names - there are some differences between Dot Notation . and Bracket Notation []. To play safe, use the old-school rules: Avoid special characters and use underscores for spaces. Makes for better looking code as well!

edited May 23 '17 at 10:32

Community

1
1

answered May 20 '14 at 10:52

Sharadh

1,298
9
15

after posting the question I chaged the names to firstname and phonenumber myself, thanks for the quicky here. I am also stuck at a place where i m getting confused as to how to proceed, I want that the form entries button must open a next page and show the entries. I have made a collection, 1 more view whoz el is
of id form_listing. I have also made a router where the '' route executes a function and throws an alert box, but how to navigate to other page that too smoothly coz i am using jquery mobile. Any tutorial or
– MixedVeg May 20 '14 at 12:06
Any tutorial help..?? @Sharadh – MixedVeg May 21 '14 at 04:18
It's unlikely that you will get such detailed walkthroughs on here. Try this http://stackoverflow.com/questions/21597910/which-could-be-the-best-backbonejs-tutorial-for-beginners – Sharadh May 21 '14 at 04:43
can i show you the code i have made so far to navigate.>?? – MixedVeg May 21 '14 at 04:55
Please debug the code to the best of your ability, read the official docs, and if it is *still* not solvable, post a **different question** with the relevant code alone, the specific problem you're facing and the community will definitely help... It's not good form to change the question as you go along, nor to ask large questions. Cheers! – Sharadh May 21 '14 at 06:33
Yes i understand that is why i am not posting a new question unless i completely brainstorm :D – MixedVeg May 21 '14 at 07:57

Creating a model clears the screen

1 Answers1