I really thought at first that my code is not working.. but then i tried to create a very simple click event in a clean page and my jquery works on .html but when i open the .php on my XAMPP server it does nothing when it's clicked but it alerts the first one.
index.php
<html>
<head>
<script src="js/jquery-3.2.0.min.js"></script>
</head>
<body>
<?php include "includes/widgets/login.php"; ?>
</body>
</html>
login.php
<script type="text/javascript">
$(document).ready(function() {
alert("Something");
t = clicked();
$('#login').click(function() {
alert("Login Alert!");
});
function clicked() {
alert("I was clicked!");
}
});
</script>
<input type="button" value="Login" id="login" onclick="clicked()">
place the function clicked(); outside from the document.ready();
Change login code to following and it will work.
<script type="text/javascript">
$(document).ready(function() {
alert("Something");
t = clicked();
$('#login').click(function() {
alert("Login Alert!");
});
});
function clicked() {
alert("I was clicked!");
}
</script>
<input type="button" value="Login" id="login" onclick="clicked()">
Uncaught ReferenceError: clicked is not defined at HTMLInputElement.onclick (index.php:22)
This problem will also solved. I don't know properly but i thought that browser can't find function inside jquery.
JQuery create function when DOM is ready.But Control onclick property was read by browser while creating a page but they can't find the function becuse it was not ready yet
So I think procedure may be like :
1) Browser read the page and find the function.
2) JQuery ready event will fire.
Place your function like this:
<script type="text/javascript">
$(document).ready(function() {
alert("Something");
t = clicked();
$('#login').click(function() {
alert("Login Alert!");
});
});
function clicked() {
alert("I was clicked!");
}
</script>
Related
I am attempting to click a button dynamically using javascript to call a js function, when I launch the page, the javascript function is never called by the button to be clicked dynamically. here is my snippet
<button id="deSubmit" type="submit" >
To be clicked automatically
</button>
<script type="text/javascript">
document.getElementById("deSubmit").click();
</script>
Here is the js function I want to be called dynamically
$("#deSubmit").click(function () {
$(function () {
url_redirect({
url: "${url}",
method: "post"
});
});
........
Please what could be wrong
Call it in document.ready
$("#deSubmit").click(function () {
console.log("teste")
/*$(function () {
url_redirect({
url: "${url}",
method: "post"
});
});*/
});
$( document ).ready(function() {
document.getElementById("deSubmit").click();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="deSubmit" type="submit" >To be clicked automatically</button>
Attach click event inside document.ready. Also $(function () { this wrapper is not required
$(document).ready(function() {
document.getElementById("deSubmit").click();
})
$("#deSubmit").click(function() {
console.log('test')
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="deSubmit" type="submit">To be clicked automatically</button>
I don't know why you want to click a button, you can write this function on load of script as well.
You need to enclose your code inside the document ready function to make sure your document loads before any JavaScript code is executed.
And for simplicity purpose, I have invoked click event using JQuery onlu.
$(document).ready(function() {
$("#deSubmit").click(function() {
/* url_redirect({
url: "${url}",
method: "post"
});
*/
alert('function called');
});
$('#deSubmit').click();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<button id="deSubmit" type="submit">
To be clicked automatically
</button>
Don't complicate with jQuery and Javascript.
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
const btn = document.getElementById("deSubmit");
btn.addEventListener("click", function() {
alert("here2")
});
btn.click();
});
</script>
Use above code this will work.. just put your code in place of the alert.
I am creating a web app using asp.net mvc. I want to detect a manual refresh by a user,
but I am not able to get the following events
1: beforeunload
2: unload
the following way I Tried
1
$(window).on('beforeunload', function () {
pageCleanup();
});
2
$(window).on("unload", function () {
pageCleanup();
});
function pageCleanup() {
alert(1)
}
3
window.addEventListener("unload", logData);
function logData() {
alert(1)
}
4
$(window).unload(function () {
alert('1');
});
the above is an example with alert, I want to have an ajax call in
unload function
but none of these seems to execute when a user press any kind of refresh(F5, ctrl-shift-R, ctrl-R, from url tab)
what should I try now?
Hi Check Once and Let me know
<html>
<head>
<title>Refresh a page in jQuery</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
</head>
<body>
<h1>Stop a page from exit with jQuery</h1>
<button id="reload">Refresh a Page in jQuery</button>
<script type="text/javascript">
$('#reload').click(function() {
location.reload();
});
$(window).bind('beforeunload', function(){
return '>>>>>Before You Go<<<<<<<< \n bro!!Working';
});
</script>
</body>
</html>
You should use bind for beforeunload:
$(window).bind("beforeunload", () => alert(1));
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
I am new at using MVC 4 and Javascript. I created a javascript that does not send the alert when the page is ready. I cant seem to figure out what i am doing wrong.
my code:
#{
ViewBag.Title = "Import";
}
<script type="text/javascript">
$(this).ready(function () {
alert("test");
});
</script>
<h2>Import</h2>
<form id="form1">
#Html.DropDownList("TableDDL")
</form>
what am i doing wrong ?
Try this:
<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
alert("test");
});
</script>
Note: Make sure you have included reference of jQuery Library on your page.
You should pass in document:
$(document).ready(function () {
alert("test");
});
which is equivalent to:
$(function () {
alert("test");
});
Did you included the jQuery correctly?
$(this).ready(function () {
alert("test");
});
This code should work.
Check http://jsfiddle.net/yM5PC/
this is my code...append is working but removing is not working. how to remove the appended div?
<html>
<head>
<script type="text/javascript">
function view(){
$('body').append('<div class="added"><p>something</p></div>');
};
function close(){
$('.added').remove();
} ;
</script>
</head>
<body>
<a onclick="view();">something</a>
<a onclick="close();">close</a>
</body>
</html>
Specify window.close in your html handler:
<a onclick="window.close();">close<a>
http://jsfiddle.net/ZTwd7/1/
Otherwise close() refers to the native close method, which doesn't do anything.
Here's how you would emulate it with a "javascript" (as opposed to inline html attribute) handler:
elem.onclick = function(event) {
with(Window.prototype) {
with(document) {
with(this) {
close();
}
}
}
};
This is not exact reproduction (nor does it work in IE etc, that's not the point) but it would put the .close in Window.prototype in front of the global window.close in the scope, so it shadows it. You can still refer to it explicitly with window.close().
You should also totally drop the above and use jQuery instead:
<a id="view">something<a>
<a id="close">close<a>
JS:
$(function() {
$("#view").click(function() {
$('body').append('<div class="added"><p>something</p></div>');
});
$("#close").click(function() {
$('.added').remove();
});
});
http://jsfiddle.net/ZTwd7/5/
Making an ajax request that fetches a html file to be appended:
$.get("myhtml.html", function(html) {
$("body").append(html);
}, "html");
Don't know why but by putting another name to close function instead of close() it works
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function view(){
$('body').append('<div class="added"><p>something</p></div>');
};
function close_it(){
$('.added').remove();
} ;
</script>
</head>
<body>
<a onclick="view();">something<a>
<a onclick="close_it();">close<a>
</body></html>
<script type="text/javascript" src="jscripts/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert("funciton");
$(function(){
$.fn.gotof(){
alert("I am calling form jquery");
}
});
});
</script>
<input type="button" onclick="dofunc();">
<script type="text/javascript">
function dofunc(){
gotof();
}
</script>
how do i call gotof() that is present in jquery
and below is the code written over jsfiddle
There are a few errors in your code. Fixed it should look like this:
$.fn.gotof = function() { // has to be defined as a function, does not need to be inside a nested document ready function
alert("I am calling form jquery");
};
$(document).ready(function() {
alert("function is ready to use now");
});
function dofunc() {
$.fn.gotof(); // can call it using $.fn.gotof(), but it should really be called properly via a selector $('div').gotof();
}
http://jsfiddle.net/pSJL4/8/
Check out http://docs.jquery.com/Plugins/Authoring - this should answer your questior. You also are not defining your function correctly; instead of
$.fn.gotof(){
alert("I am calling form jquery");
}
you need
$.fn.gotof = function(){
alert("I am calling from jquery");
};