We Keep Coding

Refresh html Editable table on adding new rows - Bootstable

I use the boostable plugin to edit HTML rows inline on runtime. The plugin is on https://www.jqueryscript.net/table/Editable-Tables-jQuery-Bootstrap-Bootstable.html. The problem is now when I want to dynamically add new rows to the table, I am not able to re-initialize the table or refresh so as to make all rows Bootstable(editable)
After adding /assets/plugins/editable/bootstable.js">
The following code is the one I use ti initialize the table
$('#tbl_deposists').SetEditable({
columnsEd: "1",
onEdit: function() {},
onDelete: function() {},
onBeforeDelete: function() {},
onAdd: function() {}
});
The following code is the one I use to add extra rows on runtime
$("#add_deposit").click(function(){
var name = $("#deposit_name").val();
var amount = $("#deposit_amount").val();
var markup = "<tr><td>" + name + "</td><td class='text-right'>" + amount + "</td></tr>";
$("#tbl_deposists tbody").append(markup);
});

I will suggest this . The initialize will look like below, you can set the button. This will automatically add the new row. You can add your other settings like columnsEd while initializing, but the example show how can you tell bootstable which button to use to add new rows.
$('#tbl_deposists').SetEditable({ $addButton: $('#add_deposit')});
button can look like this
<button class="btn btn-info" id="add"><span class="glyphicon glyphicon-plus-sign"></span>Add</button>
EDITED :
I tried this and looks like this works. You can actually put the html for last TD and everything will work, I mean edit, delete etc.
$("#add_deposit").click(function(){
var name = $("#deposit_name").val();
var amount = $("#deposit_amount").val();
var markup = "<tr><td>" + name + "</td><td class='text-right'>" + amount + "</td><td name='buttons'><div class='btn-group pull-right'><button id='bEdit' type='button' class='btn btn-sm btn-default' onclick='rowEdit(this);'><span class='glyphicon glyphicon-pencil'> </span></button><button id='bElim' type='button' class='btn btn-sm btn-default' onclick='rowElim(this);'><span class='glyphicon glyphicon-trash'> </span></button><button id='bAcep' type='button' class='btn btn-sm btn-default' style='display:none;' onclick='rowAcep(this);'><span class='glyphicon glyphicon-ok'> </span></button><button id='bCanc' type='button' class='btn btn-sm btn-default' style='display:none;' onclick='rowCancel(this);'><span class='glyphicon glyphicon-remove'> </span></button></div></td></tr>";
$("#tbl_deposists tbody").append(markup);
});

MVC Data passage from Javascript Function with Bootstrap Modal

I have a button that open a confirmation modal created with bootstrap.
When the modal is confirmed i execute a Javascript function with the data passed from the first button.
This is the button that open the modal:
<input class='btn btn-info btnChiusura' type='button' value='Close Day' data-corriere="Bartolini" data-magazzino="#item.NomeMagazzino" data-committente="#ViewBag.comm" />
This is the code for click on each btnChiusura of my page:
$('.btnChiusura').on('click', function (event) {
event.preventDefault();
_self = $(this);
var corriere = _self.data('corriere');
var magazzino = _self.data('magazzino');
var committente = _self.data('committente');
$("#myModalLabel").text("Close day " + _self.data('corriere') + " " + _self.data('magazzino'));
$("#myModaBody").text("Conferm close day for " +_self.data('corriere') + " " + _self.data('magazzino')+"?");
$("#myModalClick").attr("onclick", "Close(" + _self + ");");
$("#myModal").modal();
});
});
I try to call this function:
function ChiusuraGiornata(el) {
alert(el.data('corriere'));};
But i have this error on console:
Unexpected identifier
How can i pass _self data to another javascript funtion?
Thanks to all

With your current code you are reading the data attribute of the clicked button and using that to set the title and body content of the modal dialog. If you want to access that later using the data attribute again when the button in modal is clicked. You need to set those same values to some elements's data attribute.
You can set those to the "save"/"delete" button which is in the modal so that you can access it when user click on one of them.
Assuming your modal footer has these 2 buttons.
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="btn-save" class="btn btn-primary">Save changes</button>
</div>
Now, before firing the modal, find the button with id "btn-save" and set it's data attribute.
$('.btnChiusura').on('click', function (event) {
event.preventDefault();
_self = $(this);
var corriere = _self.data('corriere');
var magazzino = _self.data('magazzino');
var committente = _self.data('committente');
$("#myModalLabel").text("Close day " + _self.data('corriere') +
" " + _self.data('magazzino'));
$("#myModaBody").text("Conferm close day for " + _self.data('corriere') + " "
+ _self.data('magazzino') + "?");
$("#myModalClick").attr("onclick", "Close(" + _self + ");");
// Set the attributes to the button in modal.
$("#btn-save").attr("data-magazzino", magazzino).attr("data-corriere", corriere);
$("#myModal").modal();
});
Now when the button is clicked,you can read it's data("magazzino") to get the value you set.
$(document).on("click","#btn-save",function (e) {
e.preventDefault();
alert($(this).attr("data-corriere"));
alert($(this).attr("data-magazzino"));
});

Prevent page reload when blank link is clicked?

I have a web page to download files using a button.But for some cases the files does not exit and download links are blank...So whenever the user clicks the link page just reloads.It would have been great if i could somehow disable the page reload and display an alert that says file not yet available..
This is the download link button code.row["slink"] gives the download link and may become empty sometime.
'<button type="button" class="btn btn-info " data-row-id="' + row.id + '">Download</buttn> ';

Check if row['slink'] is present, else replace href with javascript:alert(...)(This won't do page reload for blank href, and show an alert):
var href = row["slink"].trim().length > 0 ? row["slink"] : "javascript:alert('File Not Yet Available')"
'<button type="button" class="btn btn-info " data-row-id="' + row.id + '">Download</buttn> ';

Simple Solution
You can set target to blank:
<a ... ... target="_blank" > ... </a>
This will open it in a new tab instead of refreshing.
More Sophisticated Approach:
You can also use a conditional to build your anchor tag.
if (row["slink"] == "")
{
var atag = '<button type="button" class="btn btn-info " data-row-id="' + row.id + '">Download</button> ';
}
This will give an alert if there is no file.

Links not working in IE and Firefox with jquery generated markup

I'm writing a javascript app that dynamically generates buttons that lead users to links about different products.
They look like this:
The problem is when they're generated the links contained within them work in chrome but not in IE or Firefox.
Here's the HTML:
HTML
<div class="row">
<div class="button-class">
</div>
</div>
This is the code I use to generate them:
JQUERY
buttons: function(num) {
$(".button-class").html("<div class='text-center'><ul class='list-inline'><li><button class='btn btn-success'><a href=" + state.greens[num].website + " target='_blank'>Company Website</a></button></li> <li><button class='btn btn-success' data-toggle='modal' data-target='#myModal'>View the Label</button></li></ul></div>");
if (state.greens[num].link !== false) {
$(".button-class ul").append("<li><button class='btn btn-success'><a href=" + state.greens[num].link + " rel='nofollow' target='_blank'>Get It On Amazon</a></button></li>");
}
if (state.greens[num].review !== false) {
$(".button-class ul").append("<li><button class='btn btn-success'><a href=" + state.greens[num].review + " target='_blank'>Read The Review</a></button></li>");
}
},
buttons is part of an object called display and is called by display.buttons();
The two if statements check to see if certain types of links exist within a product's object and then appends them to the UL if the ydo.
The buttons generate correctly but they don't open up the links when clicked in Firefox and IE (maybe Safari but I haven't checked).
What's more confusing to me is that the html being generated looks semantically correct.
For example this is the html shown in the Firefox debugger that's not working:
Doesn't make sense to me.
If you want to go to a live version of the page you can see it here: superfood picker
Then go to the last section that reads "Click On A Product's Detail Page To Learn More" and looks like this:
Click on one of the products and it'll take you to the buttons that I'm talking about.

It's not semantically correct because you need to wrap in quotes the href
buttons: function(num) {
$(".button-class").html("<div class='text-center'><ul class='list-inline'><li><button class='btn btn-success'><a href='" + state.greens[num].website + "' target='_blank'>Company Website</a></button></li> <li><button class='btn btn-success' data-toggle='modal' data-target='#myModal'>View the Label</button></li></ul></div>");
if (state.greens[num].link !== false) {
$(".button-class ul").append("<li><button class='btn btn-success'><a href='" + state.greens[num].link + "' rel='nofollow' target='_blank'>Get It On Amazon</a></button></li>");
}
if (state.greens[num].review !== false) {
$(".button-class ul").append("<li><button class='btn btn-success'><a href='" + state.greens[num].review + "' target='_blank'>Read The Review</a></button></li>");
}
},
Note that's it's best if you change double quotes instead single quotes and viceversa.

how to create button dynamically and add the onclick event for html page

i have created one button in my javascript code, after clicking on this button it should go to the product.html
var outputb2 = "<p align=right>"+ "<input type=button value=productandservices onClick=window.location=product.html>" + "</input>" +"</p>";
$('#product').append(outputb2);
where product is the div id in the product.html.but when i click on this button product and services..its not going to this product.html.how can i do..?

I don't know why you are using javascript for this, unless you are sending some data with the click event. there is a simple html code to do what you want.
product and services
If you must use java-script try this
onclick="javascript:location.href='product.html#product'"

Check this out
<script>
var outputb2 = "<p align=right>"+ "<input type=button id='productandservices' value=productandservices >" + "</input>" +"</p>";//added id
$('#product').append(outputb2);
$(document).ready(function()
{
$(document).on("click","#productandservices",function()
{
alert('clcik');
window.location='product.html';
});
});
</script>
or
Enclose filename in quotes '
<script>
var outputb2 = "<p align=right>"+ "<input type=button id='productandservices' value=productandservices onClick=window.location='product.html' >" + "</input>" +"</p>";
$('#product').append(outputb2);
</script>

Probably you need some escape characters in your code, it will work
var outputb2 = "<p 'align=right'>"+ "<input type='button' value='productandservices' onClick='window.location=\"product.html?someParam=hi\"'>" + "</input>" +"</p>";
$('#product').append(outputb2);

var outputb2 = "<p align=right>";
outputb2 += "<input type='button' value='productandservices' onClick='window.location=product.html'>"
outputb2 += "</p>";
$('#product').append(outputb2);

var outputb2 = "<p align='right'><input type='button' value='productandservices' onClick='window.location=product.html'></input></p>";
$('#product').append(outputb2);

right syntax to use:
<input TYPE="button" value=productandservices onclick="window.location.href='http://www.wherever.com'">
Another option is to create a link in the button:
<button type="button">Link link</button>
Then use CSS to style the link and button, so that the link takes up the entire space within the button (so there's no miss-clicking by the user):
button, button a{position:relative;}
button a{top:0;left:0;bottom:0;right:0;}
but the point of a link is to go to another page. So trying to make a button act like a link is the wrong solution. My suggestion is that you should use a link and style it to look like a button.
<a href="/page2>Continue</a>

Try this :
var outputb2 = "<p align='right'>"+
"<input type='button' value='productandservices 'onClick='window.location=\"product.html\"' />" +
"</p>";
$('#product').append(outputb2);
Add ' like this : onClick='window.location=\"product.html\"'
Live demo