function is not defined at HTMLButtonElement.onclick - javascript

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>

Related

How can i get my url parameter right on Javascript?

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>

How to quote/add javascript variable in html string?

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>`;

Bootbox Prompt call back function not working as expected

I want the buttons to show-up when user enters the correct string in the prompt dialog. But currently, the call back function gets invoked properly, but for the buttons to be visible, I have to call "checkPassword" twice.
Template:
<div class="form-group" ng-if="showEdit">
<input type="submit" class="btn btn-primary pull-right" value="Add New">
</div>
<button type='button' class='btn btn-primary' ng-click="checkPassword()">Edit</`button>
Script
$scope.checkPassword = function() {
bootbox.prompt("This is the default prompt!", function(result){
if(result == "password"){
$scope.showEdit = true;
}
else{
bootbox.alert("Wrong password");
}
});
}

How to pass value from php to jquery function my code is given below

The following is my code. Without passing value working well.
function add(name) {
alert(name);
}
<button type="button" id="button" class="btn btn-success" onclick="add("Aftab");">
Send
</button>
You can do it like that:
<button type="button" id="button" class="btn btn-success" onclick="add('<?php echo $name; ?>');">
Send
</button>
function add(name){
alert(name);
}
You have added in this way value to function in this way which is wrong.
The issue is due to double quotes.
onclick="add("Aftab");"
Use this
onclick="add('Aftab');"
or
onclick='add("Aftab");'
function add(name) {
alert(name);
}
<button type="button" id="button" class="btn btn-success" onclick="add('Aftab');">
Send
</button>

bootstrap buttons onclick events

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();
})
});

Categories