I have the script block in GSP page as shown in the code below. But the script block is not responding. Instead of printing hello in the console of the page, I get the error undefined operator $. What can be the reason?
getSpecificQuestion.gsp
<html>
<head>
<script>
$('.index').click(function() {
console.log("hello")
});
</script>
<title> Test </title>
</head>
<body>
<div id="question">
<%= "question = $question"%>
</div>
<div id="indexButtons">
<g:each in="${(1..<11)}" var="i">
<input type="button" class="index" value="${i}"/>
</g:each>
</div>
</body>
</html>
Apparently your gsp did not include any jquery in it so it complained about the missing $
Make sure that you include jquery in your gsp before the your script block. If you are using the resources plugin you can do something like this:
<html>
<head>
<r:require module="jQuery1111"/>
<r:script>
$(function() {
$('.index').click(function() {
console.log("hello")
});
})
</r:script>
<title> Test </title>
</head>
<body>
<div id="question">
<%= "question = $question"%>
</div>
<div id="indexButtons">
<g:each in="${(1..<11)}" var="i">
<input type="button" class="index" value="${i}"/>
</g:each>
</div>
</body>
</html>
Using the tag will render your javascript at the bottom of the page after all the DOM elements have been rendered and ready to be manipulated by the scripts.
Related
I have the below index.html code
<!DOCTYPE html>
<html>
<head>
<title>Myapp</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="app.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body ng-app="Myapp" ng-controller="GameController">
<div>
<div class="guessLeft">{{guesses}}</div>
<div class="incorrectGuess">InCorrect guesses : <span ng-repeat="letter in incorrectlyChoosen">{{letter}}</span></div>
<div class="correctGuess">Correct guesses : <span ng-repeat="letter in correctlyChoosen">{{letter}}</span>
</div>
<div class="youhavetoGuess">Your have to guess : {{displayWord}}</div>
<div class="takeInput">
<input type="text" name="guess" ng-model="input.letter">
<button ng-click="letterChoosen()">Submit</button>
</div>
</div>
</body>
in the below div class
<div class="guessLeft">{{guesses}}</div>
I want to use jquery knob where I would show my guess count, that would start from 6 till 0.
what should I do to achieve this? any reference would help.
I am trying to execute a simple jquery mobile code. I just linked two pages. But everytime I am switching from one page to another, it is happening in default mode.Even after mentioning data-transition = 'pop'..
<!DOCTYPE html>
<html>
<head>
<title>This is my first jquery mobile programme</title>
<meta name="viewport" content="width=device-width, initialscale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile.structure-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.11.0.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role = "page" id="first">
<div data-role = "header" >
<h1>hello world !!</h1>
</div>
<div data-role = "content">
<p>This is the content part</p>
<p><a href ="#second" data-tansition = "pop" > Go to second page </a></p>
</div>
<div data-role ="footer">
<h4>Footer</h4>
</div>
</div>
<div data-role = "page" id="second">
<div data-role ="header">
<h1>hello Praveen !!</h1>
</div>
<div data-role ="content">
<p> this is the second page</p>
<p><a href =#first> Go to first page </a></p>
</div>
<div data-role = "footer">
<h4>footer</h4>
</div>
</div>
You simply have a typo in your markup.
Change
data-tansition="pop"
to
data-transition="pop"
In my HTML file:
<div data-role="content" id="termsContent">
<div id="termDiv"></div>
</div>
in my js file:
$(function () {
$("#termsPage").live('pagecreate', function(event,ui){
$("#termDiv").load("tnc.html").trigger('create');
});
});
Then, in my tnc.html file:
<a href="http://www.xxx.com/usage-terms.html">
I seem can't find any solution in Google on how to load the local html page correctly. Does anyone have suggestion/experience on this? I want to show the clicked link directly.
You were close but not enough.
.trigger('create') can not be used after a load function. Load function is asynchronous so we need to wait for success state to trigger pagecreate.
Button example is not going to be shown, it needs to be closed.
Do not use pagecreate, in this case pagebeforeshow
Here's a working example:
index.html :
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="index.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
Next
</div>
<div data-role="content">
<div id="termDiv">
</div>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
load.html :
Onen link
index.js :
$(document).on('pagebeforeshow', '#index', function(){
$("#termDiv").load("load.html", function(){
$('#index').trigger('create');
});
});
I hope this was what you wanted all along.
If i comment out the jquery.mobile...js file, this works fine, with it included, everytime i click the checkbox, the onclick event fires twice. Same is true for onchange event. Any ideas?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<script>
function tester() { alert("I get called twice on click"); }
</script>
<input id="abc" name="myCheckbox" onchange="tester()" type="checkbox" value="true" />
<label for="myCheckbox">Click me</label>
</body>
</html>
This is by design, since both events are happening. See example: http://jsfiddle.net/Twisty/T3qmG/
HTML:
<html>
<head>
<title>Checkbox Test</title>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h2>Checkbox Test</h2>
</div>
<div data-role="content">
<input type="checkbox" id="checkbox-choice-1" />
<label for="checkbox-choice-1">Click me</label>
</div>
</div>
</body>
</html>
JQuery:
$(document).ready(function(){
$("#checkbox-choice-1").click(function(){
alert("Click event triggerd.");
});
$("#checkbox-choice-1").change(function(){
alert("Change event triggerd.");
});
});
I would advise separating your script code if possible. You can a function to one or both events.
Your markup is malformed. The <label> tag points to a non-existent id. It points to "myCheckbox" but the id of your input tag is "abc". This change fixes your issue and the markup is correctly enhanced.
<input id="abc" name="myCheckbox" onchange="tester()"
type="checkbox" value="true" />
<label for="abc">Click me</label>
Hello I understand from reading advice on this site that scripts should go at the bottom of the _layout page. My problem is that I am not sure exactly where the 'bottom' is. Some people have said it is just before the tag but that does not work for me. I have tried putting the script in many places but nowhere seems to work. Could someone please tell me what I am doing wrong.
This is my About page
#{
ViewBag.Title = "About Us";
}
<h2>About</h2>
<p>
Put content here.
</p>
<script type="text/javascript">
$(function () {
alert("Hello World");
});
</script>
This is my _Layout page
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
#* jQuery works if this line is here but not if it is at the bottom
<script src="#Url.Content("~/Scripts/jquery-1.6.2.min.js")" type="text/javascript"></script>
*#
</head>
<body>
<div class="page">
<div id="header">
<div id="title">
<h1>
My MVC Application</h1>
</div>
<div id="logindisplay">
#Html.Partial("_LogOnPartial")
</div>
<div id="menucontainer">
<ul id="menu">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
</ul>
</div>
</div>
<div id="main">
#RenderBody()
</div>
<div id="footer">
</div>
</div>
#* jQery does not work if the script is here! *#
<script src="#Url.Content("~/Scripts/jquery-1.6.2.min.js")" type="text/javascript"></script>
</body>
</html>
Some Alternatives
It is absolutely possible to have your jquery at the end of your body tag. Ideally the only js you have in your head is modernizr, html5shiv or the like.
Option 1
Put a #RenderSection("scripts", required: false) after the jQuery <script... element as the last line inside your body element. Then in any of your views you would use
#section scripts
{
<script type="text/javascript">
$(function () {
// page specific js code here
});
</script>
}
Option 2
Between your jQuery script element and the closing of your body element have a script element pointing to the relevant js file for the action/view in question:
<script
src="#Url.Content("~/Scripts/" + ViewContext.RouteData.GetRequiredString("action") + ".js")"
type="text/javascript">
</script>
Jquery file has to be included before first reference to jquery is found on the document. So, to solve this problem, i put jquery file in head section and all other script that are not used in views but in other script files are included before closing body tag