calling a javascript function in onClick

Question

When i deploy my code it gives me an error: saveRows is not a function So what's wrong ?

dataGrid.prototype = {
      display: function() {
        var self = this;
        var html = [];
        var check = 0;
        var lastSelection;
        html.push("<div style='margin-left:20px'>");
        html.push("<input class='btn btn-default' type='button' value='Save All Rows' onclick='saveRows()'' />");
        html.push("<table id='" + this.id + "" + "'class='table'>\n</table>");
        html.push("<div id='pagger_" + this.id + "'></div>");
        html.push("</div>");
        $('body').append(html.join(""));
        $("#" + this.id).jqGrid({
          // ...
        });
      },
      // ...
      saveRows: function() {
        var ids = $("#" + this.id).jqGrid('getDataIDs');
        for (var i = 0; i < ids.length; i++) {
          $("#" + this.id).jqGrid('saveRow', ids[i]);
        }
      }
    };

so any other suggestions ??

Shouldn't it be `onclick='saveRows()'`instead of `onclick='saveRows()''` (with two `'`) ? — Tim B, Apr 21 '16 at 13:31
You post fragments of JavaScript code only, which are difficult to follow. Do you have some working demo online to see what you try to implement? I'd recommend you to make more changes in your code to simplify other code. First of all the usage of `onclick='saveRows()'` is bad way. It's better to use `beforeSelectRow` to process onclick event *on any cell of the grid*. It's important to know which version of jqGrid you use and from which fork of jqGrid. — Oleg, Apr 21 '16 at 13:37
If you use `onclick='saveRows()'` then `saveRows` must be global function. It `dataGrid` global or `$.dataGrid.saveRows` is global or ... then you can use full path to access it. If you would use `beforeSelectRow` then the problem will not exist. If the button is **outside of the grid** then you can add id to `` and use `$("#theId").click(function () { alert("Cllicked");})` instead. — Oleg, Apr 21 '16 at 13:40
The html you append to the page has no context to `saveRows()`. Where's the context? It can't magically infer that you mean the instance of the data grid that created it without being explicit. — Brett, Apr 21 '16 at 13:42
@dinaosama: It's the callback function of `jqGrid` which could be placed in the part between `$("#" + this.id).jqGrid({` and `});` Look at [here](http://stackoverflow.com/a/31647943/315935) or [the demo](http://jsfiddle.net/OlegKi/HJema/190/) created for [the answer](http://stackoverflow.com/a/32951019/315935) — Oleg, Apr 21 '16 at 13:50

score 0 · Answer 1 · answered Apr 21 '16 at 13:45

You can change

<input class='btn btn-default' type='button' value='Save All Rows'
       onclick='saveRows()'' />

to

<input id='mysave' class='btn btn-default' type='button' value='Save All Rows'/>

and to use

$("#mysave").click(function () {
    // any code executed on click on the button
});

score 0 · Answer 2 · answered Apr 21 '16 at 13:51

The saveRows function is part of the dataGrid prototype. It is therefore not defined as a global function - and cannot be defined as an onclick handler in plain HTML.

You could solve your issue by creating the DOM elements using jQuery, instead of HTML strings, and directly bind the onclick callback. For example (untested):

$(body).append(
    $('<div/>').style('margin-left', '20px').append(
        $('<button/>', {
            'class': 'btn btn-default',
            'text': 'Save All Rows'
        }).on('click', function () {
            self.saveRows();
        }),
        $('<table/>', {
            'id': self.id,
            'class': 'table'
        }),
        $('<div/>', {
            'id': 'pager_' + self.id
        })
    )
);

Hugo S. Mendes · Answer 3 · 2016-04-21T14:08:29.050

0

change this:

html.push("<input class='btn btn-default' type='button' value='Save All Rows' onclick='saveRows()'' />");

to actually an object:

var theInput = $("<input class='btn btn-default' type='button' value='Save All Rows'>");
    $(document).on("click", theInput, function(){self.saveRows()});

and then, add it to the html array.

html.push($(theInput)[0].outerHTML);

https://jsfiddle.net/atg5m6ym/3524/

edited Apr 21 '16 at 14:08

answered Apr 21 '16 at 13:52

Hugo S. Mendes

1,076
11
23

score 0 · Answer 4 · answered Apr 21 '16 at 13:58

0

You can try this

$('body').on('click','#yourButtonId',function(){  
    saveRows(); 
});

answered Apr 21 '16 at 13:58

Rafael Mota

127
4

calling a javascript function in onClick

4 Answers4