jquery script works only on firefox

Question

After 2 weeks of hard work on my first, simple site/database I'm stuck. Friend of mine helped me on adding jquery, but now it works only in Mozilla, and he dont have idea why. I dont know java at all (and barely php). Can you take a look?

Chrome console point an error at

Uncaught SyntaxError: Unexpected token =

at line 49 which is

self.dataAdapter = function(id = 0, imie = '', nazwisko = '', kredyt = 0)

Do you have any idea what is the most compatible syntax?

The whole script:

$(document).ready(function()
{
    sui = new swiezakUI();
    sui.getData();
});

function swiezakUI() 
{
    var self = this;
    self.scriptURL = "/data.php";

    self.send = function(key, stuff)
    {
        var post = {};
        post[key] = JSON.stringify(stuff);

        $.ajax({
            type: "POST",
            url: self.scriptURL,
            data: post,
            contentType: "application/x-www-form-urlencoded",
            dataType: "json",
            success: function(data)
            {
                self.getData();
                self.cleanForm();
            },
            failure: function(errMsg)
            {
                alert('fail');
            },
            error: function(errMsg)
            {
                alert("Blad \n" + errMsg.responseText);
            }
        });     
    }

    self.id2Id = function(id)
    {
        for(var i = 0; i < self.myData.length; i++)
        {
            if(id == self.myData[i].id) 
                return i;
        }
    }

    self.dataAdapter = function(id = 0, imie = '', nazwisko = '', kredyt = 0)
    {
        var data = new Object();
        data.id = id;
        data.imie = imie;
        data.nazwisko = nazwisko;
        data.kredyt = kredyt;
        return data;
    }

    self.dodajNowy = function()
    {
        return function()
        {
            var data = self.dataAdapter(null, $('#imie').val(), $('#nazwisko').val(), $('#kredyt').val().replace(/\D+/g,""));
            self.send('nowy',data);
        }
    }

    self.edytujWpis = function(id)
    {
        return function()
        {
            var data = self.dataAdapter(id, $('#imie').val(), $('#nazwisko').val(), $('#kredyt').val().replace(/\D+/g,""));
            self.send('edycja',data);
        }
    }

    self.kasujWpis = function(id)
    {
        return function()
        {
            var data = self.dataAdapter(id);
            self.send('kasuj',data);
        }
    }

    self.cleanForm = function()
    {
        $('#imie').val('');
        $('#nazwisko').val('');
        $('#kredyt').val('');
        $('#bZapisz').unbind();
        $('#bZapisz').click(self.dodajNowy());
    }

    self.editButtons = function()
    {
        $('.edit').click(function()
        {   
            var did = $(this).attr('id').replace(/\D+/g,"");
            id = self.id2Id(did);
            $('#imie').val(self.myData[id].imie);
            $('#nazwisko').val(self.myData[id].nazwisko);
            $('#kredyt').val(self.myData[id].kredyt);
            $('#bZapisz').unbind();
            $('#bZapisz').click(self.edytujWpis(did));          
        });
    }

    self.delButtons = function()
    {
        $('.delete').click(function()
        {
            var id = $(this).attr('id').replace(/\D+/g,"");
            console.log(id);
            self.kasujWpis(id)();
        });
    }

    $('#bZapisz').click(self.dodajNowy());

    $('#bCzysc').click(function(){
        self.cleanForm();
    });

    self.getData = function()
    {
        $('#lista').children('table').html("<tr><th>id</th><th>imie</th><th>nazwisko</th><th>kredyt</th>"+ 
            "<th>edycja</th><th>usun</th></tr>");
        $.getJSON(self.scriptURL, function(data)
        {           
            console.log(data);
            self.myData = data;

            for(var i = 0; i < data.length; i++)
            {
                $('#lista').children('table').append(
                    '<tr><td>'+ data[i].id +'</td>'+
                    '<td>'+ data[i].imie +'</td>'+
                    '<td>'+ data[i].nazwisko +'</td>'+
                    '<td>'+ data[i].kredyt +'</td>'+
                    '<td><button class="edit" id="e#'+data[i].id+'">e</button></td>'+
                    '<td><button class="delete" id="d#'+data[i].id+'">d</button></td></tr>');
            }

            self.editButtons();
            self.delButtons();
        });
    }
}

That's not valid syntax, JavaScript doesn't have default arguments (yet). It might work in FF because they have implemented some future ES6 features, but you shouldn't use it in production. — elclanrs, Dec 05 '13 at 00:35
Thanks for the reply! What do you suggest? Should i check for correct syntax in documentation, and try to fix it somehow, or maybe should I leave this method/library and try something easier? — Adalbert, Dec 05 '13 at 00:40
See here http://stackoverflow.com/questions/894860/set-a-default-parameter-value-for-a-javascript-function — elclanrs, Dec 05 '13 at 00:41

score 2 · Accepted Answer · edited May 23 '17 at 10:28

Default parameters are currently part of the ES6 draft. This feature is not part of the most recent final ECMAScript standard (5.1), hence browser support is currently minimal. As of this writing, only Firefox (experimentally) implements default parameters.

There are many ways to simulate default parameters. An alternative to ES6's default parameters would be comparing arg === undefined to set the default value for it:

//if the kredyt argument has not been passed or is undefined
if (kredyt === undefined) {
   kredyt = 0;
}

When a function is called passing less arguments than its parameters count, the parameters without corresponding arguments are initialized to undefined.

This way, not passing a value for the argument as well as explicitly passing undefined as the argument value will use the default parameter value, the same behavior as ES6's default parameters.

So here's the complete example:

self.dataAdapter = function(id, imie, nazwisko, kredyt)
{
    //default parameters
    if (id === undefined) {
        id = 0;
    }
    if (imie === undefined) {
        imie = '';
    }
    if (nazwisko === undefined) {
        nazwisko = '';
    }
    if (kredyt === undefined) {
        kredyt = 0;
    }

    //function code
    var data = new Object();
    data.id = id;
    data.imie = imie;
    data.nazwisko = nazwisko;
    data.kredyt = kredyt;
    return data;
}

Another common approach is comparing arg == null, which has the same effect but also accepts passing null to use the default parameter value:

//if kredyt is null, undefined or not passed
if (kredyt == null) {
   kredyt = 0;
}

This works because == does type coercion, and null coerces to, and only to, undefined (ES5#11.9.3).

Yet another common approach is to use the || as the "default operator" (see related question):

kredyt = kredyt || 0; //in the beginning of the function
//...
data.kredyt = kredyt;

Or if the parameter is used only in a single place, it is possible to inline it as well:

data.kredyt = kredyt || 0;

The benefit is basically shorter code, but note that it will use the default parameter value not only when the argument is undefined, but also null, false, 0, empty string or NaN. Hence this is not a viable approach when one of these values is an acceptable parameter value different from its default parameter value.

Lastly, for use cases that need to differentiate a null/undefined value from a not passed argument (which is rare and not the case here), it's possible to check the arguments object's length property:

if (arguments.length < 4) {
    kredyt = 0;
}

Ok, I got the idea. I've even tried to put it into jss file here and there (plus the same way to simulate others parameters), but I havent worked yet. Where should I put it? — Adalbert, Dec 05 '13 at 01:27
in the first lines of the function definition. I've added a full example to the answer. — Fabrício Matté, Dec 05 '13 at 01:31
It works just fine. Without your help I wouldnt handle it. Thank you VERY much. — Adalbert, Dec 05 '13 at 01:39

jquery script works only on firefox

1 Answers1