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/
Related
I am using a fluid variable inside Javascript code in a Fluid Template. The code is:
<script type="text/javascript">
$(function () {
$('#{element.uniqueIdentifier}').datetimepicker();
/*Call AJAX*/
$('#{element.uniqueIdentifier}').change(function (event) {
.... //Other code lines
});
});
</script>
The HTML rendered is:
<script type="text/javascript">
$(function () {
$('#solicituddeAuditorios-repeatablecontainer-1_0_datetimepicker-2').datetimepicker();
/*Call AJAX*/
$('#{element.uniqueIdentifier}').change(function (event) {
.... //Other code lines
});
});
</script>
When render the first value is replaced correctly but the next not and generate a syntax error in javascript. I have tried to use a variable for save value but in that case none fluid variable is replaced; and using <![CDATA[ { ]]> generate other error where escaped the javascript and show only variable.
I am using TYPO3 8.7.
I do not understand what happend, because many times works differents solutions as plain fluid keys ({}) or <![CDATA. In this case the other alternative that works was used the f:format.raw fluid tag
<script type="text/javascript">
$(function () {
$('#solicituddeAuditorios-repeatablecontainer-1_0_datetimepicker-2').datetimepicker();
/*Call AJAX*/
$('#<f:format.raw>{element.uniqueIdentifier}</f:format.raw>').change(function (event) {
.... //Other code lines
});
});
</script>
I think you should wrap your code like this:
<script type="text/javascript">
<![CDATA[var myUniqueElementIdentifier = "#" + ]]>{element.uniqueIdentifier}<![CDATA[;]]>
$(function () {
$(myUniqueElementIdentifier).datetimepicker();
/*Call AJAX*/
$(myUniqueElementIdentifier).change(function (event) {
.... //Other code lines
});
});
</script>
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>
<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");
};
I'm having hard time getting this snippet to work. I have made a minimal example. You can view it online: http://jsfiddle.net/qnnZe/ where it is working!
test.html
<!DOCTYPE html>
<head>
<title>test</title>
<meta charset="utf-8">
<script src="jquery.min.js"></script>
<script src="test.js"></script>
</head>
<body>
<p>I am going to test right now.</p>
</body>
</html>
test.js
$("p").click(function () {
$(this).hide("slow");
});
However, on my server it does not work. Here is the link to my server: http://techinf.de/sleepytime/test.html
As always, any help appreciated.
Because in jsFiddle your script code is executed after the DOM has loaded (that's the default option, see the dropdown set to "onDomReady"), on your page it's executed before that. It would work if you wrap your code in a ready() handler:
$(function()
{
$("p").click(function () {
$(this).hide("slow");
});
});
You need to wrap your click handler in a document ready function.
Try either:
$(document).ready(function () {
$("p").click(function () {
$(this).hide("slow");
});
});
or
$(function () {
$("p").click(function () {
$(this).hide("slow");
});
});
It will execute before the DOM is ready. Click handlers should be added in any of the normal jQuery "ready" methods, like:
$(function() {
$("p").click(function () {
$(this).hide("slow");
});
});
I'm trying to use JQuery to have a method fire when the following code gets clicked:
<div class="content_sub_list">
<img src="/imgs/close-icon.jpg" class="exit_sub_list"/>
hello
</div>
It is not doing anything and my JQuery code looks like this:
$(document).ready(
function()
{
$('#my_accnt').click(
function()
{
$('.content_sub_list').css("display", "block");
$('.content_sub_list').css("margin-left", "4px");
$('.content_sub_list').html('<div class="sub_list_header">My A<img src="/imgs/close-icon.jpg" class="exit_sub_list"/></div><BR />text');
});
$('#my_queue').click(
function()
{
$('.content_sub_list').css("display", "block");
$('.content_sub_list').css("margin-left", "165px");
$('.content_sub_list').html('<div class="sub_list_header">My Q<img src="/imgs/close-icon.jpg" class="exit_sub_list"/></div><BR />text');
});
$('.exit_sub_list').click(
function()
{
alert("hi");
$('.content_sub_list').css("display", "none");
});
});
My header looks like this:
<script src="/js/jquery.js" type="text/javascript"></script>
<script src="/js/mContentBar.js" type="text/javascript"></script>
Other functions work in it except this one? for some reason.
So what am I doing wrong, or how i can get this to work? Thanks
This is working for me. Make sure you have jQuery loaded properly. You can either place jquery.js after your html or wrap your jquery code with a document.ready function.
like
(function() {
$('.exit_sub_list').click(
function() {
alert("hi");
});
});
Check working example at http://jsfiddle.net/p6Q2d/