Open all links with jQuery .load - javascript

<html>
<head>
<title></title>
<script type="text/Javascript" src="includes/scripts/jquery-1.7.2.min.js"></script>
<script type="text/Javascript">
$('a').click(function() {
window.open($(this).attr('href') );
});
</script>
</head>
<body>
<div id="content">
Somepage
<br />
Somepage
<br />
Somepage
<br />
Somepage
<br />
Somepage
</div>
</body>
</html>
I want to open all links found in the page with jQuery .load().
But my code doesn't seem to work.
Any ideas?

$(function () {
$('a').each(function() {
window.open($(this).attr('href') );
});
});
click is actually the action of clicking the HTMLElement. each is a loop through them.
And wrapping everything in $(); tells jQuery,
"Hey don't you run me until everything is ready. I want all DOM
elements addressable."
It is short hand for $(document).ready [doc].

$('a').click(function(e) {
$("#content").load($(this).attr('href') );
e.preventDefault();
});
This code will make it so that when a user clicks on a link on your page, instead of going to the page, the contents of that page will be loaded into your content div. e.preventDefault() will prevent the default action of the link (leaveing the page) and keep the user on your page.
Now, the problem with this is that once you have clicked one link, any content loaded into the div will not have this code applied. You can get around this by using event delegation with jquery's on (or delegate in older jquery versions).
$("#content").on("click", "a", function(e) {
$("#content").load($(this).attr('href') );
e.preventDefault();
});
This code will work on all links within #content, those there initially as well as those loaded later.

Related

Issue When Dynamically Removing Script Tags With Jquery

I have created two short javascript files, each containing a $(document).ready function that has javascript to detect a button click from the html file that has included it. My main html file has the script tags pointing to each file in the header:
file1.js:
$(document).ready(function(){
$('.wrapper').on('click', '.click_1', function(){
alert('hello from the first file');
});
});
file2.js:
$(document).ready(function(){
$('.wrapper').on('click', '.click_2', function(){
alert('hello from the second file');
});
});
My goal, however, is to be able to dynamically remove one of the script tags (the javascript from the second file) from the header, and its functionality along with it. To do so, I created a script in my main html file to remove the target script tag via the src attribute. However, while an inspection of the page source reveals that the third script tag has indeed been removed, its functionality remains. For instance, even after clicking the .remove_2 button, I can still click the .click_2 button and receive the "hello from the second file" alert:
main.html:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="file1.js"></script>
<script type="text/javascript" src="file2.js"></script>
</head>
<body>
<div class="wrapper">
<button class='click_1'>File1</button>
<button class='click_2'>File2</button>
<button class='remove_2'>Remove File2</button>
</div>
</body>
<script>
$(document).ready(function(){
$('.wrapper').on('click', '.remove_2', function(){
$('script[src="file2.js"]').remove();
});
});
</script>
</html>
In short, I wish to be able to dynamically remove a script tag so that the javascript in the file that the tag points to no longer has any affect on the html page. However, I have not been able to accomplish this. Can anyone tell me what is wrong with my code? Also, is what I am trying to accomplish even possible? Thank you.
Removing an external script does not remove event handlers. They are attached to current document.
A solution can be:
remove the script
get all html page
replace html page with new content
$('.wrapper').on('click', '.remove_2', function(){
$('script[src="file2.js"]').remove();
var html = document.documentElement.innerHTML;
document.open('text/html');
document.write(html);
document.close();
});
In jQuery, replacing only the header after removing the script:
$('.wrapper').on('click', '.remove_2', function(){
var header = $('html head');
header.find('script[src="file2.js"]').remove();
$('html head').replaceWith(header);
});
Try unbinding the click event from the second button before removing it:
$('.click_2').unbind("click");
Although unbind is now deprecated. The newer form is 'off':
$('.click_2').off( "click", "**" );
http://api.jquery.com/off/
That said, you do seem to be using a rather peculiar approach to disable click functionality.

Getting Jquery to work with div within html5 <template> tag

For some reason, we have a page, mainpage.html with sections wrapped in <template>...</template> tags.
Ordinarily, the sections are not rendered on page load, but is there a way to get jquery to be able to
acccess a div within a <template> tag on loading page mainpage.html and execute the following script:
<script type="text/javascript">
$(document).ready(function() {
$("#inner-div").click(function(e) {
alert('The div was clicked');
})
});
</script>
Assuming mainpage.html is:
<html>
<head>
<script src="/path/to/jquery"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#inner-div").click(function(e) {
alert('The div was clicked');
})
});
</script>
</head>
<body>
<template id="temp1">
<div id="inner-div"> </div>
</template>
<template id="temp2">
</template>
<template id="temp3">
</template>
</body>
</html>
This is a duplicate of this question.
Because the element is created dynamically, you need to modify how you access it. Instead of directly targeting #inner-div, you should target the body or parent container.
jQuery click function will not attach an event handler if the div is not rendered when the script runs.
Instead you can use jQuery's on function.
$(document).ready(function() {
$("#temp1").on("click","#inner-div",function(e) {
alert('The div was clicked');
})
});
Here the #inner-div element doesn't necessarily have to be present at the time when this script runs.

How to execute script written in main html file from another html page loaded using jquery load()

I have two files index.html and subpage.html. Using jquery load() i am loading subpage.html into a div #result in index.html.
I have written js in index.html for both index.html & subpage.html.
Pages goes like this:
index.html:
<script type="text/javascript">
$("document").ready(function(e) {
$("#result").load('subpage.html');
});
</script>
<div id="result"></div>
subpage.html:
<p>Sub page</p>
<input type="button" id="clickMe" value="Click" />
But here, click function written in index for button #clickMe is not triggering while clicking the button.
Is there any possible way to make this happen?
If you want to use the .on delegation, you have to attach the event to a higher level element and specify the object or class as the delegate.
$('body').on('click',"#clickMe", function(){
alert('clicked dynamic dom element');
});
http://api.jquery.com/on/
You can make a function to set your Event handler, and do not forget to use .off for setting triggers. and afer $("#result").load('subpage.html');, call that function.
function setEventHandler(){
$('#clickMe').off('click').on('click',function(){
// codes here
alert('Clicked');
});
}
and your codes will be :
<script type="text/javascript">
$("document").ready(function(e) {
$("#result").load('subpage.html');
setEventHandler();
});
</script>
<div id="result"></div>

Need to determine button clicked in a JQuery mobile popup and perform actions based thereon

I am having a problem with a JQM popup. The popup has 3 buttons, and the action taken in the main program depends on which button is clicked. The code in the main program is run more than once and I am not sure why.
The simple example below uses an alert to display which button on the popup was clicked. When the popup is called the first time, it works as hoped, the 2nd time, the alert is displayed twice, the 3rd time, the alert is displayed 3 times, etc.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" />
<script type="text/javascript" charset="utf-8" src="cordova-2.6.0.js"></script>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"/></script>
<script type="text/javascript" src="js/jquery.mobile-1.3.2.min.js"></script>
<script>
function doCustomDialog(text1,button1,button2,button3,callback)
{
$("#customDialog .customDialogDesc").text(text1);
$("#customDialog .customDialogOption1").text(button1).on("click.customDialog", function(){
callback("option1");
});
$("#customDialog .customDialogOption2").text(button2).on("click.customDialog", function(){
callback("option2");
});
$("#customDialog .customDialogOption3").text(button3).on("click.customDialog", function(){
callback("option3");
});
$("#customDialog").popup("open");
}
</script>
</head>
<body>
<div data-role="page" id="mainPage">
<div data-role="content">
<INPUT type="button" id="confirm" value="Save data" />
<div data-role="popup" id="customDialog" data-title="Are you sure?" class="ui-content">
<p class ="customDialogDesc">???</p>
Yes
No
Cancel
</div>
</div>
</div>
<script>
$("#mainPage").on("pageshow", function(e) {
$("#confirm").click(function() {
doCustomDialog("A similar record already exists. Do you want to Update the existing record or Add a new record?", "Update", "Add", "Cancel",
function( returned )
{
//Do things depending on the button clicked, for now just display which button was clicked
alert(returned);
});
});
});
</script>
</body>
</html>
Use popupafterclose to unbind any attached click event. Also, note the direct parent of data-role=popup should be data-role=page.
$(document).on("popupafterclose", "#customDialog", function () {
$('#customDialog a').off('click');
});
Demo
Note: To change button's text, use .ui-btn-inner selector i.e. $("#customDialog .customDialogOption1 .ui-btn-inner").text(button1) in order not to lose button style.
Update: If you wish to go with the above note, you then need to unbind click .ui-btn-inner i.e. $('#customDialog a .ui-btn-inner').off('click');
The issue is because you are attaching another event to each button for every successive time the popup is opened. You can prevent this by using one() to attach the events:
$("#customDialog .customDialogOption1").text(button1).one("click.customDialog", function(){
callback("option1");
});
$("#customDialog .customDialogOption2").text(button2).one("click.customDialog", function(){
callback("option2");
});
$("#customDialog .customDialogOption3").text(button3).one("click.customDialog", function(){
callback("option3");
});
Alternatively, you could remove all the events attached to the buttons first by adding the following line at the start of your doCustomDialog function:
$("#customDialog a").off();
Then you can re-attach then using on as you currently do.

Jquery show div when link gets clicked

Im trying to show/hide a div using jquery when a link gets clicked. I put this in my head section:
<script type="text/javascript">
$("#attach_box").click(function {
$("#sec_box").show()
});
</script>
I have a link that looks like this:
+ Add a Postal Address (If Different)
And a div that looks like this:
<div id="sec_box" style="display: none;">
Hello world!!
</div>
This doesn't work and I can't figure out why. Any ideas?
You need to attach the click handler in the document.ready in order to make sure that the DOM has been loaded by the browser and all the elements are available:
<script type="text/javascript">
$(function() {
$('#attach_box').click(function() {
$('#sec_box').show();
return false;
});
});
</script>
Also you forgot to put parenthesis () next to the anonymous function in the click handler.
Chances are the DOM isnt fully loaded yet.
<script type="text/javascript">
$(document).ready(function()
{
$("#attach_box").click(function() {
$("#sec_box").show()
});
});
</script>
put that in your head and put your initialization code in there.

Categories

Resources