Search code examples
javascriptbackbone.js

Backbone View showing then disappearing

I have a view created with Backbone.js and inserted into a div element - it shows for about a second and then disappears.

Here is my code for the view:

var addPlayerView = Backbone.View.extend({
    tagName: "div",
    model: Player,
    id: 'addPlayerDiv',

    initialize: function() {
        console.log('addPlayerView has been created');
    },

    render: function (){
        this.$el.html('<p>show this puppy</p>');
        return this;
    }
});

here is the model:

var Player = Backbone.Model.extend({
    defaults: {
        ID: "",
        firstName: '',
        lastName: ''
    },

    idAttribute: "ID"
});

and here is the HTML:

 <form onsubmit="addNewPlayer();">
        <input type="submit" value="Add New Player New"/>
 </form>

<p>
<div id="addPlayerDiv"></div>
</p>

<script>

        function addNewPlayer() {
            var player = new Player({});
            var newPlayerView = new addPlayerView({el: $("#addPlayerDiv"), model: player});
            newPlayerView.render();
        };

</script>

The addNewPlayer() function is being called correctly and the newPlayerView is rendering on the page, but only for a second, then it disappears on the page.

No idea what to do. Anyone have this problem before?

Solution

  • You need cancel the default action (in our case onsubmit tries send data to server)

    <form onsubmit="addNewPlayer(); return false;">

    or

    <form onsubmit="addNewPlayer(event);">

function addNewPlayer(e) {
  e.preventDefault();
  .....
}

    Example