How to add a row on button click?

Question

in this fiddle there is an add timing button. There is default row having week day dropdown,from time textfield,to time textfield and hospital drop down.Now when I click on the add timing button I want another row having week day dropdown,from time textfield,to time textfield and hospital dropdown.

Can any body please tell me how to do that?

This is my knockout code

var DocSchedule = function (id, day, fromtime, totime, hospital, hospitalId) {
    this.id = ko.observable(id);
    this.day = ko.observable(day);
    this.fromtime = ko.observable(fromtime);
    this.totime = ko.observable(totime);
    this.hospital = ko.observable(hospital);
    this.hospitalId = ko.observable(hospitalId);
};

var Patientp = function () {
    this.id = ko.observable(idValue);
    this.name = ko.observable(nameValue);
    this.degree = ko.observable(degreeValue);
    this.gender = ko.observable(genderValue);
    //this.consultant= ko.observableArray(consultantArrValue);
    this.username = ko.observable(usernameValue);
    this.password = ko.observable(passwordValue);
    this.email = ko.observable(emailValue);
    this.mobile = ko.observable(mobileValue);
    this.imgFile = ko.observable(imgFileValue);
    this.imgSrc = ko.observable(imgSrcValue);
    this.imagePath = ko.observable(imagePathValue);
    this.userid = ko.observable(useridValue);
    this.department = ko.observable(departmentValue);
    //this.consultant= ko.observableArray(consultantArrValue);
    //this.consultant= ko.observable(consultantValue);
    this.addSlot = function (doctor) {


        var docSchedule = new DocSchedule();
        iter = iter + 1;
        docSchedule.id(iter);

    }


}
idValue = 'hi';
useridValue = 'hi';
nameValue = 'hi';
addressValue = 'adress';
genderValue = 'hi';
mobileValue = 'hi';
//these fields are not available
usernameValue = 'hi';
passwordValue = 'hi';
emailValue = 'hi';
imgFileValue = 'imagefileValue';
imgSrcValue = 'ui_resources/img/profile_pic.png';
imagePathValue = 'imagePathValue';
consultantArrValue = null; //'${currentpatient.user.name}';
consultantValue = "d1";
degreeValue = 'hi';
departmentValue = 'hi';



var iter = 0;
var patp = new Patientp();
ko.applyBindings(patp);

Have you checked any of the examples on the knockout webpage? There are plenty of examples simpler and more complex showing this exact use case like: http://knockoutjs.com/examples/contactsEditor.html... — nemesv, May 03 '14 at 06:44
@nemesv yes,I have tried and yes I have seen that too but I do not why that another row is not appearing. — SpringLearner, May 03 '14 at 06:46
You need an observable array http://knockoutjs.com/documentation/observableArrays.html and the foreach binding http://knockoutjs.com/documentation/foreach-binding.html the documentation of the foreach also contains an example about how to add items to a list... — nemesv, May 03 '14 at 07:23

super · Accepted Answer · 2014-05-03T08:25:37.183

You don't have observableArray schedules in Patientp doctor.schedules.push(docSchedule); throws Uncaught TypeError: Cannot read property 'push' of undefined

Try this:

var iter = 0;
var DocSchedule = function (id, day, fromtime, totime, hospital, hospitalId) {
    this.id = ko.observable(id);
    this.day = ko.observable(day);
    this.fromtime = ko.observable(fromtime);
    this.totime = ko.observable(totime);
    this.hospital = ko.observable(hospital);
    this.hospitalId = ko.observable(hospitalId);
};

var Patientp = function () {
    this.id = ko.observable(idValue);
    this.name = ko.observable(nameValue);
    this.degree = ko.observable(degreeValue);
    this.gender = ko.observable(genderValue);
    this.username = ko.observable(usernameValue);
    this.password = ko.observable(passwordValue);
    this.email = ko.observable(emailValue);
    this.mobile = ko.observable(mobileValue);
    this.imgFile = ko.observable(imgFileValue);
    this.imgSrc = ko.observable(imgSrcValue);
    this.imagePath = ko.observable(imagePathValue);
    this.userid = ko.observable(useridValue);
    this.department = ko.observable(departmentValue);
    this.schedulers = ko.observableArray([]);
}
idValue = 'hi';
useridValue = 'hi';
nameValue = 'hi';
addressValue = 'adress';
genderValue = 'hi';
mobileValue = 'hi';
usernameValue = 'hi';
passwordValue = 'hi';
emailValue = 'hi';
imgFileValue = 'imagefileValue';
imgSrcValue = 'ui_resources/img/profile_pic.png';
imagePathValue = 'imagePathValue';
consultantArrValue = null;
consultantValue = "d1";
degreeValue = 'hi';
departmentValue = 'hi';

function vm() {
    var self = this;
    self.person = new Patientp();
    self.schedule = new DocSchedule();
    self.schedules = ko.observableArray([new DocSchedule(iter)]);

    self.addSlot = function () {
        console.log('added');
        iter++;
        var docSchedule = new DocSchedule(iter);
        self.schedules.push(docSchedule);
    };

    self.removeSlot = function () {
        console.log('removed');
        self.schedules.remove(this);
    }
};
var viewModel = new vm();
ko.applyBindings(viewModel, document.getElementById('addDoctorSchedules'));

Here is the `Demo`

Thanks for answering,I was trying myself and did not succeed so posted here the question but for got to remove doctor.schedules.push(docSchedule); — SpringLearner, May 03 '14 at 06:55
What you want exactly. in the fiddle there is Week Day,From Time, To Time, Available hospital, you want to add them as row from the user input — super, May 03 '14 at 07:02
when I press add timing then I want another row containing weekday,fromtime,totime,hospital.If I press another time add timing button then another row will be created — SpringLearner, May 03 '14 at 07:06
I'm working on that please wait, its raining here and electricity is gone i'l update when it's over. — super, May 03 '14 at 08:19
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/51927/discussion-between-aneesh-a-e-and-jquerylearner) — super, May 03 '14 at 08:27

How to add a row on button click?

1 Answers1

Here is the `Demo`

Linked

How to add a row on button click?

1 Answers1

Here is the Demo

Linked

Here is the `Demo`