I have tried to use like this
$(nTd).html("<div class='btn-group'> <button class='btn btn-info btn-sm' onclick='viewskpd('"+oData.id+"')' data-toggle='tooltip' title='Detail SKPD'><i class='fa fa-eye' style='color:white'></i></button>");
But it went like this:
<button class="btn btn-info btn-sm" onclick="viewskpd(" 00cc72988f8240428b25ac5327b2a3c6')'="" data-toggle="tooltip" title="" data-original-title="Detail SKPD"><i class="fa fa-eye" style="color:white"></i></button>
But I am not sure why the onclick function that trigger viewskpd() didnt work.
I have checked the console and it tell me like this.
Uncaught SyntaxError: Invalid or unexpected token
Why is this happen ?
The oData.id needs to be quoted so it's a string that is quoted with different quotes than enclosing the onclick attribute:
onclick='viewskpd(\""+oData.id+"\")'
In full:
$($0).html("<div class='btn-group'> <button class='btn btn-info btn-sm' onclick='viewskpd(\""+oData.id+"\")' data-toggle='tooltip' title='Detail SKPD'><i class='fa fa-eye' style='color:white'></i></button>");
You're entering some pretty wild territory... script injected into markup attributes by scripts which were probably originally inside of markup language itself. Don't do this, it's a nightmare.
Try something like this instead:
<button data-action="viewskpd" data-skpd-id="00cc72988f8240428b25ac5327b2a3c6" ...
In your script...
$(body).on('click', 'button[data-action="viewskpd"]', (e) => {
console.log(e.target); //
});
Untested, but that should get you started. Put your data in the markup, but your script in your script. Keep them separate.
Why don't you assign an ID to <button class='btn btn-info btn-sm' ... and program its click event in JS?
At whereever the location that you are having oData.id, you could do something like follows.
<button id='id1' class='btn btn-info btn-sm' ...
Then use this id1 as the selector and program that element's click event, which would be like,
$(document).on("click", "#id1", function(){
viewskpd(oData.id); // Call the required function
});
Actually you need a string variable inside viewskpd function. Use toString() function for it, you must write like below:
$(nTd).html("<div class='btn-group'> <button class='btn btn-info btn-sm' onclick='viewskpd("+oData.id.toStirng()+")' data-toggle='tooltip' title='Detail SKPD'><i class='fa fa-eye' style='color:white'></i></button>");
The 00cc72988f8240428b25ac5327b2a3c6 has no meaning for JavaScript until you turn it to string .
Alternatively you may use `. Please note that this is a specific character different from " and '. Then enclose the variable into ${}, it allows better readability:
let ntd = document.getElementById("ntd");
ntd.outerHTML = `<div class='btn-group'>
<button class='btn btn-info btn-sm'
onclick='viewskpd("${oData.id}")'
data-toggle='tooltip' title='Detail SKPD'>
<i class='fa fa-eye' style='color:white'>
</i></button></div>`;
Related
i'm trying to parse a giphy url into a javascript parameter and it removes all my //.
This is my js:
var $save = $("<input type=\"button\" class=\"btn btn-sm btn-success\" value=\"Save\" onclick=\"SaveGif(\"" + gif.fixed_height.url +"\")\" />");
the url is:
https://media1.giphy.com/media/tJqyalvo9ahykfykAj/200.gif?cid=487fb615lw0p7lcstn5iqghh0mxvk4n889nope6ven1n897i&rid=200.gif
and this is what Chrome parses:
<input type="button" class="btn btn-sm btn-success" value="Save" onclick="SaveGif(" https:="" media1.giphy.com="" media="" tjqyalvo9ahykfykaj="" 200.gif?cid="487fb615lw0p7lcstn5iqghh0mxvk4n889nope6ven1n897i&rid=200.gif")"">
Also if i remove the quotes i get the correct url but without "":
<input type="button" class="btn btn-sm btn-success" value="Save" onclick="SaveGif(https://media1.giphy.com/media/tJqyalvo9ahykfykAj/200.gif?cid=487fb615lw0p7lcstn5iqghh0mxvk4n889nope6ven1n897i&rid=200.gif)">
what i'm doing wrong?
thanks!
Use single quotes
var $save = $("<input type=\"button\" class=\"btn btn-sm btn-success\" value=\"Save\" onclick=\"SaveGif('" + gif.fixed_height.url + "')\" />");
wrap everything in ` backticks it allows you to use " " freely so it will be like this
var $save = $(`<input type="button" class="btn btn-sm btn-success" value="Save" onclick=SaveGif( + gif.fixed_height.url +/>`);
If you open and close all that html string with single quotes you don't need any of the attribute double quotes escaped which makes it much easier to both read and write
Then rather than messing with inline onclick just add a jQuery event listener that calls your function with the appropriate variable passed in
var $save = $('<input type="button" class="btn btn-sm btn-success" value="Save" />');
$save.on('click', function(evt) {
SaveGif(gif.fixed_height.url)
});
// demo code only below
const gif = {fixed_height: {url: 'https://media1.giphy.com/media/tJqyalvo9ahykfykAj/200.gif?cid=487fb615lw0p7lcstn5iqghh0mxvk4n889nope6ven1n897i&rid=200.gif'}};
$('body').append($save)
function SaveGif(url) {
console.log(url)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I want to call the function DeleteRow and EditRow on click of Delete Button and Edit Buttton.
<button style="margin-right: 5px;" type='button' onclick='return EditRow(#i)' id='#editrow' class='btn btn-primary btn-sm pull-right'><i class='glyphicon glyphicon-edit'></i> </button>
<button style="margin-right:5px;" type='button' onclick='return DeleteRow(#i)' id='' class='btn btn-danger btn-sm pull-right'><i class='fa fa-times-circle'></i> </button>
I have also made functions on my JavaScript file but I am getting this "undefined Error function error".
JavaScript Function here
<script type="text/javascript">
function DeleteRow(id) {
debugger
//logic here
return false;
}
function EditRow(id) {
//logic here
return false;
}
</script>
I have got similar error before but at that time I only changed the function name in onClick at html and changed the function name at JavaScript but now no matters what I rename the function, I am getting the same error.
Can anyone explain why I am getting this error
Your code works if you make sure that your JS is defined before your buttons (or as long as you use some DOM ready event).
Also, make sure #i renders the right value. I don't recognize this pattern...
function DeleteRow(id) {
console.log('Delete ' + id);
return false;
}
function EditRow(id) {
console.log('Edit ' + id)
return false;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<button type='button' onclick='return EditRow(1)' id='#editrow' class='btn btn-primary btn-sm'><i class='glyphicon glyphicon-edit'></i> </button>
<button type='button' onclick='return DeleteRow(1)' id='' class='btn btn-danger btn-sm'><i class='fa fa-times-circle'></i> </button>
I have 2 bootstrap buttons, I is a direct link to another page on the website and the other one I want to activate a javascript onclick event. I have no problem with a basic link but when adding it to a button it doesnt seem to work? I have included the code I am using with the link thats works but the button doesnt.
The code is :
<div style="margin-top:10px" class="form-group">
<!-- Button -->
<div class="col-sm-12 controls">
Are you already registered?
<a href='login' button type='button' class='btn btn-block btn-success'><span class='glyphicon glyphicon-user'></span> Login</button></a>
<div class="spacing3"></div>Not yet?
<button id='next' name ='next' type='button' class='btn btn-block btn-primary'>Continue</button>
</div>
</div>
Login here
And the js for the button is
$(document).ready(function() {
$('#btn-next').on('click', function() {
$('#loginbox').hide(); $('#1box').show();
}
change this
<button id='next' name ='next' type='button' class='btn btn-block btn-primary'>Continue</button>
to
<button id='btn-next' name ='next' type='button' class='btn btn-block btn-primary'>Continue</button>
as you are applying event on btn-next ID $('#btn-next').on('click'
Change your code to:
$(document).ready(function() {
$('#next').on('click', function() {
$('#loginbox').hide();
$('#1box').show();
})
});
Acyually u r using wrong id.
$('#btn-next')
should be
$('#next')
Another solution could be, change your id from html like:
<button id='btn-next' name ='next' type='button' class='btn btn-block btn-primary'>Continue</button>
And then jquery as:
$(document).ready(function() {
$('#btn-next').on('click', function() {
$('#loginbox').hide();
$('#1box').show();
})
});
well guys i need to know how give a button a name like dont paye attention to the link it's not that necessary:
<button class="btn btn-success pull-right" name="next">Suivant</button>
here what i did in javascript but i need to add the attribute "name" with value "next" in "q" button
function(a){a.fn.smartWizard=function(m){var c=a.extend({},a.fn.smartWizard.defaults,m),x=arguments;
return this.each(function(){function C(){var e=b.children("div");
b.children("ul").addClass("anchor");
e.addClass("content");
n=a("<div>Loading</div>").addClass("loader");
k=a("<div></div>").addClass("actionBar");
p=a("<div></div>").addClass("stepContainer");
q=a("<a>"+c.labelNext+"</a>").attr("href","#").addClass("btn btn-default pull-right");
r=a("<a>"+c.labelPrevious+"</a>").attr("href","#").addClass("btn btn-default pull-left");
s=a("<a>"+c.labelFinish+"</a>").attr("href","#").addClass("btn btn-success pull-right");
c.errorSteps&&0<c.errorSteps.length&&a.each(c.errorSteps,function(a,b){y(b,!0)});
p.append(e);
k.append(n);
b.append(p);
b.append(k);
c.includeFinishButton&&k.append(s);
k.append(q).append(r);
How about using the attr() function like you use for defining a href:
$('#yourButton').attr('name', 'yourName');
To create a button on the fly:
var btn = $('<button/>').attr('name', 'next').addClass('btn btn-success pull-right');
Which results in the following HTML:
<button class="btn btn-success pull-right" name="next"></button>
I'm using Bootstrap as framework.
I'm new in JS so help me out.
I need a "button value" to change when clicked.
Button looks like this:
<button id="btn_out" name="btn_in_out" class="btn btn-lg btn-danger primary col-xs-offset-7" type="submit" onclick="sayThanks()" value="out">Ut</button>
And here is my JS:
<script>
function sayThanks(){
var element = document.getElementByld('btn_out');
element.innerHTML="Tack";
</script>
It's place between "head" tags.
Why doesn't it work?
Change getElementByld to getElementById(with an I) and close the function curly brace
function sayThanks(){
var element = document.getElementById('btn_out');
element.innerHTML="Tack";
}
function sayThanks(){
var element = document.getElementById('btn_out');
element.innerHTML="Tack";
}
<button id="btn_out" name="btn_in_out" class="btn btn-lg btn-danger primary col-xs-offset-7" type="submit" onclick="sayThanks()" value="out">Ut</button>
You have couple of problems
1.getElementById misspelled
2.Missing closing }
function sayThanks(){
var element = document.getElementById('btn_out');
element.innerHTML="Tack";
}
Well, it looks like you misstyped the function getElementByld and did not close the whole function itself. If you changed it to getElementById it is probably going to work.
<button id="btn_out" name="btn_in_out" class="btn btn-lg btn-danger primary col-xs-offset-7" type="submit" onclick="sayThanks()" value="out">Ut</button>
function sayThanks(){
var tE = document.getElementById('btn_out');
if (tE) tE.innerHTML = 'Tack';
}
Furthermore, I would just pass the element to the function instead of searching for it, since it is the caller anyway.
<button id="btn_out" name="btn_in_out" class="btn btn-lg btn-danger primary col-xs-offset-7" type="submit" onclick="sayThanks(this)" value="out">Ut</button>
function sayThanks(e){
e.innerHTML = 'Tack';
}
I think this code will help you
html:
<button id="btn_out" name="btn_in_out" class="btn btn-lg btn-danger primary col-xs-offset-7" type="submit" value="out">Ut</button>
javascript:
document.getElementById("btn_out").onclick = sayThanks;
function sayThanks(){
this.innerHTML="Tack";
}
Fiddle
You have misspelled the getElementById: getElementById not getElementByld
http://jsfiddle.net/hn0j9tra/
If you use inline javascript, you should provide an id as a parameters into your function:
<script>
function sayThanks(id){
document.getElementById(id).innerHTML="Tack";
}
</script>
<button id="btn_out" name="btn_in_out" class="btn btn-lg btn-danger primary col-xs-offset-7" type="submit" value="out" onclick="sayThanks(this.id)">Ut</button>
Working demo