Cannot read property 'preventDefault' of undefined in javascript error - javascript

In Console I got following error using e.preventDefault() method
I used e as a function parameter
function function1(e){
e.preventDefault();
}
1533 Uncaught TypeError: Cannot read property 'preventDefault' of undefined.
Called function1 like
Click Me

You have to pass event in the used function:
function1(event); // where you called it
For example:
Click Me
Make sure you call this function within an event handler. Such as :
$(document).click(function(event){
function1(event);
});

I remove event from function and invoke function in this way:
<button class="btn btn-primary" runat="server" id="btnSave" type="submit"
onserverclick="btnSave_OnServerClick" onclick="return
jsFunction();">Save</button>
In JavaScript:
function jsFunction() {
alert('call');
if ($('#form1').bootstrapValidator('validate').has('.has-error').length) {
alert('SOMETHING WRONG');
} else {
alert('EVERYTHING IS GOOD');
__doPostBack('<%=btnSave.UniqueID%>', '');
}
return false;
}

You are writing the function wrong. Suppose you are using function on a particular button click having id as 'clickBtn' then you need to write function like this.
$("#clickBtn").on("click", function(e){
e.preventDefault();
});

You failed to pass the event as a parameter in your in luck event in the html.
So it should be written as the sample below:
Click Me
function function1(event){
e.preventDefault();
}

Related

Javascript - Statements skipped

I have a button in my html:
<button id="confirm-download" onclick="submit(getStudentsDetails)" data-dismiss="modal" class="btn btn-success">Confirm</button>
and these are the submit and getStudentsDetails functions
function submit(callback) {
$('#download_resumes').attr('action', '/api/studentsdetails/');
$('#download_resumes').submit();
callback()
}
function getStudentsDetails() {
$('#download_resumes').attr('action', '/api/studentsdetails/');
$('#download_resumes').submit();
}
Now these functions are referring to this form:
<form id = "download_resumes" action="api/" method = "POST">
The problem here is that, only the second api (/api/studentsdetails/) is getting called here. I want both of these apis to be called onClick of the button.
The 2 APIs that need to be called are '/api/resumes/', '/api/studentsdetails/'.
Use Handler of submit and then call your second function like the following
function submit(callback) {
$('#download_resumes').attr('action', '/api/studentsdetails/');
$('#download_resumes').submit(function( event ) {
alert( "Handler for .submit() called." );
callback()
});
}
function getStudentsDetails() {
$('#download_resumes').attr('action', '/api/studentsdetails/');
$('#download_resumes').submit();
}
you can use ajax request to submit form and on success you can call that callback method
function submit(callback) {
//assuming callback is method name you want to call
$.ajax({
url:'/api/studentsdetails/',
data:$('#download_resumes').serialize(),
success:function(response){
window[callback]();
}
});
}
window[callback] (); will call your callbackmethod on success refer this link for more information.

Get contents of a JavaScript function

I was trying to make a function in JavaScript that could set the onClick property of an HTML button.
So, say I have this as my function:
function myFunc(action){
document.getElementById('mybtn').setAttribute("onClick", action);
}
That would set mybtn's attribute onClick to the contents of the variable action (which should be a function).
So, if I ran the function like this:
myFunc(function(){
alert("Hello, World!");
});
Then the variable action would be set to
function (){
alert("Hello, World!");
}
If I ran myFunc as shown, it would successfully add the contents of action to the button's onClick attribute. The only problem is, if I click the button after myFunc has been run, I just get an error. It says:
Uncaught SyntaxError: Unexpected token (
I think that's because in the onClick attribute, you can't have a new function defined.
How can I get only what's inside the function in the variable action?
You can add an event listener instead of altering the attribute for onclick like this:
function myFunc(action) {
document.getElementById('mybtn').addEventListener('click', action);
}
myFunc(function() {
alert('foo');
});
<button id="mybtn">Foo</button>
Attribute values can only be strings. Your function is stringified to something like
'function(){ alert("Hello, World!"); }'
And then the event handler parses it as a function body. That means it will be treated as a function declaration, but function declarations require a name. Therefore, yes, there is an unexpected (: there should be a name before it. Firefox provides a more meaningful error
SyntaxError: function statement requires a name
function() {
alert("Hello, World!");
}
If you really want to use event handler content attributes, you should pass a string containing only the body of the function:
myFunc('alert("Hello, World!")');
function myFunc(action){
document.getElementById('mybtn').setAttribute("onclick", action);
}
myFunc('alert("Hello, World!")');
<button id="mybtn">Click me</button>
But I strongly discourage event handler content attributes. Instead, use event handler IDL attributes:
function myFunc(action) {
document.getElementById('mybtn').onclick = action;
}
function myFunc(action) {
document.getElementById('mybtn').onclick = action;
}
myFunc(function (){
alert("Hello, World!");
});
<button id="mybtn">Click me</button>
Or even better, event listeners
function myFunc(action) {
document.getElementById('mybtn').addEventListener('click', action);
}
function myFunc(action) {
document.getElementById('mybtn').addEventListener('click', action);
}
myFunc(function (){
alert("Hello, World!");
});
<button id="mybtn">Click me</button>
html onclick event attribute expects a string, not a function. You can defined function to be called then pass string referencing function to myFunc
<div id="mybtn">click</div>
<script>
function myFunc(action) {
document.getElementById("mybtn").setAttribute("onclick", action);
}
function clickHandler() {
alert("Hello, World!");
}
myFunc("clickHandler()");
</script>

Javascript call special function after confirm

I made confirm function which shows special div to confirm or not. The task is, when I confirm some action I need to call another function, which I need to write into onClick attribute in my button.
There is what I want:
<button onClick="jsShowConfirmDiv(); jsMyFunction()">
<span>Edit</span>
</button>
This is one button, but another will be something like this:
<button onClick="jsShowConfirmDiv(); jsAnotherFunction()">
<span>Detail</span>
</button>
I need to call my functions (jsMyFunction() and jsAnotherFunction() only when I click on button yes.
For better imagination there is function in actual version (working, but limitless by parameter, and I think, than that is bad solution):
function jsShowConfirmMessage(content, yesFunction, par1, par2, par3) {
$("id_confirm_message").setAttribute("classType", "confirm");
$("id_popup_confirm_content").innerHTML = content;
$("id_confirm_message_overlay").className = "popup_visible";
window.location.hash = "#id_confirm_message_overlay";
$("id_confirm_yes").stopObserving('click');
$("id_confirm_yes").observe('click', function() {
jsHideConfirmMessage();
if (!par1) {
yesFunction();
} else if (!par2) {
yesFunction(par1);
} else if (!par3) {
yesFunction(par1, par2);
} else {
yesFunction(par1, par2, par3);
}
});
}
And I call it like this:
<button onClick="jsShowConfirmMessage('Really?', jsSpecialFunction, 'param')">
<span>Edit</span>
</button>
Thank you for your answer.
If user click no (or cancel, ...) you can throw an exception. Exception stop executing commands and second (third, ....) function will not be called.

setting boolean values on void functions?

The following is my code:
$.win.addEventListener('click', function(e) {
$.txtAbout.blur();
});
Event handler is called if someone clicks on the parent div/window, invoking the method. I would like to amend the code, so this happens:
$.win.addEventListener('click', function(e) {
$.txtAbout.blur();
//do something else if the above function is successfully called
//code....
});
I am not sure what is the best way to do this? Is wrapping the above method call in another function then calling in the event handler with a boolean value the way to do it?
function test(){
$.txtAbout.blur();
return true;
}
$.win.addEventListener('click', function(e) {
var check = test();
if(check==true)
{
//do something else if the above function is successfully called
//code....
}
});

Backbone.js event always activated [duplicate]

i have the following code which extends the JQuery and adds a method to the JQuery:
$.fn.attachWithMessage = function () {
$(this).focusin(showMessage());
}
function showMessage() {
alert('hi');
}
so I can use that code as follows :
<input type="text" name="name" id="textbox" />
$(document).ready(function () {
$("#textbox").attachWithMessage ();
});
when I load the page for the first time, a message box shows up with ('hi') message.
even if I didn't click in the text box.
I also tried the click event, and the message still shows automatically.
any ideas ??
The issue here is that when you pass showMessage() as a parameter to focusin, the function showMessage is executed and the return value is passed to focusin.
Instead you need to pass a reference to the function (without the paranthesis).
Use the following code to extend:
$.fn.attachWithMessage = function () {
$(this).focusin(showMessage);
}
Working example# http://jsfiddle.net/eXEP5/
EDIT:
If you want to pass a parameter to showMessage then try this:
$.fn.attachWithMessage = function () {
var param1 = "Some Param";
$(this).focusin(function(){
showMessage(param1); //Make sure showMessage is modified accordingly for the parameters.
});
}
just remove the parenthesis
$(this).focusin(showMessage());
should be
$(this).focusin(showMessage);
Hope this helps

Categories

Resources