I am including a new page using nginclude directive. Click event defined in included page not working.
Main app
<div ng-app="">
<input type="text" ng-model="ss"/>
<div ng-include src="'include/page1.html'">
</div>
</div>
Page1.html
<body>
<div id="a">{{ss}}</div>
<script type="text/javascript">
document.getElementById("a").addEventListener("click",function(){
alert("a");
})
</script>
</body>
why does event defined in page1.html is not working in main app. Is my approach is right or wrong...
You can try with:
<div id="a" ng-click="clickHere()">{{ss}}</div>
Where clickHere:
$scope.clickHere = function(){ alert('a'); };
Related
I have the following code inside the view(partial) of AngularJS
<%# page
pageEncoding="UTF-8"%>
<p>
some text
</p>
<script>
$(document).ready(function(){ alert("WORKS"); })
</script>
I need it here and not in controller as later I want to implement Google Map.
However the alert is not triggered. What may be the reason?
Relative part in the output HTML
<div id="partials">
<!-- ngView: --><div data-ng-view="" class="ng-scope">
<p class="ng-scope">
text
</p>
<script type="text/javascript" class="ng-scope">
$(function(){ alert("WORKS"); });
</script></div>
</div>
jQuery Library must stand before AngularJS library in declaration. This has solved my problem
Am creating a mobile application using jquery mobile but after loading an external page(loggedin.html) via changePage the javascript file in the external page arent loaded but only do so after refreshing the page(loggedin.html...loaded via changePage).How can the external script be loaded without page refresh
I have two sets of file:
index.html and loggedin.html.
CODE:
1.index.html
<body>
<div data-role="page" id="indexpage">
<div data-role="content">
Load page 2
</div>
</div>
<script src="custom/scripts/index.js" type="text/javascript" ></script>
</body>
The script (index.js)
$('document').ready(function(){
$('#next').click(function(){
$.mobile.changePage('loggedin.html')
});
});
2.Loggedin.html
<body>
<div data-role="page" id="loggedin">
<div data-role="content">
You are in
</div>
</div>
<script src="custom/scripts/loggedin.js" type="text/javascript" ></script>
</body>
Script(loggedin.js)
$('document').ready(function(){
$('document').on("pageshow","#loggedin",function(){
console.log('loaded');
});
});
Base on this source : http://demos.jquerymobile.com/1.3.2/faq/scripts-and-styles-not-loading.html
The simplest approach when building a jQuery Mobile site is to reference the same set of stylesheets and scripts in the head of every page. If you need to load in specific scripts or styles for a particular page, we recommend binding logic to the pageinit event (details below) to run necessary code when a specific page is created (which can be determined by its id attribute, or a number of other ways).
The solution to this problem is : on the next page that is (loggedin.html)..That is placing the script on the page after the (data-role content/footer)
<body>
<div data-role="page" id="loggedin">
<div data-role="content">
You are in
</div>
<script type="text/javascript">
$('#loggedin').on("pagecreate",function(){
console.log('loaded');
......{Continue with stuff}
});
</script>
</div>
</body>
This is my jquery:
$(document).ready(function(){
$("div#overlay div#getFBid div#overlayClose").on("click", function(){
console.log("test")
});
});
And this is my html, which is called with ajax:
<div id="overlay">
<div id="getFBid">
<div id="overlayClose"> </div>
<h1>Wat is mijn Facebook page ID?</h1>
<div id="fbPageURLholder">
<input type="text" id="fbPageURL">
</div>
</div>
</div>
I can't figure out what I'm doing wrong, I'm obviously missing something that should be really simple I think.
Any thoughts?
PS. I should add to this that I saw on jquery.com that the live function is deprecated and I should use delegate or on.
This:
$("div#overlay div#getFBid div#overlayClose")
can be reduced to
$('#overlayClose')
since you'll only ever have one element of that ID in your document.
As for the problem; if you've loaded the content with AJAX, it won't be available in DOMReady, when you're binding your listener.
To bind to elements that have not yet been added, you need to use a live delegate:
$(document).on('click', '#overlayClose', function() {
console.log('test');
});
Where $(document) should be something as close to the element as possible, that is available at DOMReady, and that is not destroyed.
Did you import jQuery?
That works for me, clicking Close will log a test message in the console:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div id="overlay">
<div id="getFBid">
<div id="overlayClose">Close</div>
<h1>Wat is mijn Facebook page ID?</h1>
<div id="fbPageURLholder">
<input type="text" id="fbPageURL">
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
$("#overlayClose").on("click", function(){
console.log("test")
});
});
</script>
Hope that helps.
For example I have the following HTML named index.html:
<html>
<head>
<style>
#content { float:left; }
#sub { float:right; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="action.js"></script>
</head>
<body>
<h2>Test de</h2>
<div id="content">
Content
<button class="loadSub">Load</button>
</div>
<div id="sub">
Sub content
</div>
</body>
</html>
And a simple JS file named action.js:
$(document).ready(function(){
$('button.loadSub').click(function(){
$('#sub').load('test.html');
});
$('button.hide').click(function(){
$('#sub').fadeOut('slow');
});
});
As you can see, when I click the button .loadSub the div #sub will be loaded with the new content from test.html:
<h2>This is the sub content</h2>
<button class="hide">Hide</button>
I got two problems here:
Firstly, the .loadSub button did successfully load the the div of id subcontent, but the .hide button did not work.
Secondly, after I had tried inserting
script type="text/javascript" src="action.js"
inside test.html, the hide button worked and faded out its content. But then in turn, I found out that the button loadSub no longer functioned. I couldn't load the subcontent again.
Is there any other way around to just once declare source of js file and make my button.loadSub work whenever I click it? Could anybody please explain the problem and give me a hint to fix it.
You're loading dynamic HTML into your page. This means that at the time you called $('button.hide').click(), the button.hide element did not exist in your page yet, so the click handler could not be attached.
You might want to try doing a delegate attachment instead.
$('#sub').on('click', 'button.hide', function () {
$('#sub').fadeOut('slow');
});
On the first page, put this. You can insert my JQQuery code into your action.js file. On the second page, the one you are loading into your div, put the second Jquery code I added.
On First page:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<style>
#content{float:left;}
#sub{float:right;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(function(){
$('.loadSub').click(function(){
$('#sub').show();
$('#sub').load('test.html');
});
});
});
</script>
</head>
<body>
<h2>Test de</h2>
<div id="content">
Content
<button class="loadSub">Load</button>
</div>
<div id="sub">Sub content</div>
</body>
</html>
On the second page (the page that's loaded into the div, add this:
<script type="text/javascript">
$(document).ready(function(){
$(function(){
$('.hide').unbind("click").click(function(){
$('#sub').fadeOut('slow');
});
});
});
</script>
<h2>This is the sub content</h2>
<button class="hide">Hide</button>
The hide button isn't on the page when you try to bind the event so it is never registered.
Change it to use on like this (assuming version 1.7+)
$(document).on('click', 'button.hide', function(){
$('#sub').fadeOut('slow');
});
or delegate if an older version:
$(document).delegate('button.hide', 'click', function(){
$('#sub').fadeOut('slow');
});
This attaches the event handler at the document level so will work for any new content added to the page.
I have a parent page that contains a textarea and a link to open a child window. The child window has another textarea and a button. User enters some text in the textarea in the child window and clicks the button, a javascript gets fired that updates the content of the textarea in the parent window with that of the textarea of the child window and closed the child window.
I am currently doing this in javascript and it works fine, but since we will move to jQuery very soon how would one accomplish the same using jQuery.
page1.html
----------
<script type="text/javascript">
function newwin() {
window.open('page2.html','','width=600');
}
</script>
<body>
<textarea id='t1'>
Click here
</body>
page2.html
----------
<script type="text/javascript">
function updateparent() {
window.opener.document.getElementById('t1').value = document.getElementById('t2').value;
window.close();
}
</script>
<body>
<textarea id='t2'>
<input type="submit" onclick="updateparent();">
</body>
Interesting question.
As mentioned by Domonic Roger, if its working then you probably want to be leaving it.
For me the question is not "What is the JQuery code for this snippet?", but how to I use jQuery to achieve the same solution.
Sometimes it is not just a simple case of a straight code replace. Take the following:
function updateparent() {
window.opener.document.getElementById('t1').value = document.getElementById('t2').value;
window.close();
}
Now, the jQuery code might be something like this:
function updateparent() {
window.opener.$("#t1").val($("#t2").val());
window.close();
}
But, I wouldn't do this. I would use pop window functionality available in the jQuery UI, or some plugin (e.g. blockui) to acheve the popup window.
Also, this code:
<body>
<textarea id='t2'>
<input type="submit" onclick="updateparent();">
</body>
In jQuery we are encouraged to use late binding of events, so any inline JavaScript would go:
<body>
<textarea id='t2'>
<input id="MyInput" type="submit">
</body>
And be bound once the document is ready:
$(document).ready(function(){
$("#MyInput").click(updateparent());
});
A more "jquery" way to do this:
page1.html
----------
<script type="text/javascript">
$(document).ready(function() {
$("#link1").click(function(){
window.open('page2.html','','width=600');
});
});
</script>
<body>
<textarea id='t1'>
<a id="link1" href="#">Click here</a>
</body>
page2.html
----------
<script type="text/javascript">
$(document).ready(function() {
$("#link1").click(function(){
window.opener.jQuery("#t1").val($("#t2").val());
window.close();
});
});
</script>
<body>
<textarea id='t2'>
<input type="submit" id="link2">
</body>