I have a jqGrid with "local" source (an array).
I added a button to add a row using this code:
This is the button code:
$("#btnAddCategory").button().click(function(event) {
var newRowId = $.jgrid.randId("new");
$("#tableCategories").addRowData(newRowId, {
nome : "prova",
squadre : 16,
minutaggio : 40
}, "last");
});
This is the HTML where there are buttons definitions:
<form id="frmTCstepCategorie">
<fieldset class="ui-widget ui-widget-content">
<legend class="ui-widget">
Categorie
</legend>
<table id="tableCategories">
<tr>
<td></td>
</tr>
</table>
<div style="margin-top: 10px" class="categoriesNav">
<button id="btnAddCategory">
Aggiungi
</button>
<button id="btnDelCategory">
Rimuovi
</button>
</div>
</fieldset>
</form>
It works, but after the insert, the page are reloaded.
How can I add a row without page reloading?
May be your button is submit button or some code after adding a row causing page reload.
Try to set type of your button like this
type="button"
or add
return false;
at the end of button click handler.