Load an HTML file via a button using jQuery - javascript

I am trying to call a HTML file when a button is clicked using jQuery.
Here is my html code:
<!DOCTYPE html>
<head>
<title>Buttons</title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="buttonscript.js">
</script>
</head>
<body>
<input type ="button" id="myButton" value="Click Here">
<div id="dictionary">
</div>
</body>
</html>
then here is my script:
$(document).ready(function(){
$('myButton').click(function(){
$('dictionary').load('a.html');
return false;
});
});

You have two wrong things in your script:
You are not assigning the selectors with the right syntax;
You are using document ready syntax on an external file;
The first point is fixed using # before the id name and . before the class name (see below the fix).
The document.ready() function should be included into the html itself: it tells jquery to run the script only when the DOM is ready. Including it in an external file will make jQuery check for DOM ready on the external file and not on the one you are including to.
So move your script to the html itself and change it a bit:
.
$(document).ready(function(){
$('#myButton').click(function(e){
// prevent page submit
e.preventDefault();
// load the page into #dictionary
$('#dictionary').load('a.html');
});
});

Add # to your selectors like, and instead of using return false, you could prevent default behavior of the button (if the type attribute is set to submit).
$(document).ready(function(){
$('#myButton').click(function(event){
// prevent page submit
event.preventDefault();
// load the page into #dictionary
$('#dictionary').load('a.html');
});
});

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.

JQuery & advanced javascript

i am trying to get a value in input box automatically by clicking button "get name", from database. how can i implement it...?
my so far work is below...
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var n = $("#div2").load("getTotal.html #p1").val();
$("#div2").val(n);
});
});
</script>
</head>
<body>
<input type="text" id="div2" value=""/>
<button>Get Name</button>
</body>
</html>
and getTotal.html page contents...
<h2>jQuery and AJAX is FUN!!!</h2>
<p id="p1">John D. Feller</p>
in doing so.... i am getting an error "[object, Object]".
Help me out....with this error and advice me how can i take values from database.
Issues in the code:
1) $("#div2").load(...) doesn't make much sense because it's telling jQuery to pull the content of the URL as HTML content of #div2. Here #div2 is an input which is not supposed to have HTML content. http://api.jquery.com/load/
2) You may want to load only the content of #p1 by using getTotal.html #p1, but this syntax won't work as you expected. jQuery can only pull the full content of getTotal.html, then you need to extract content of #p1 from it.
Assuming getTotal.html page is in same directory as your main page, the JS code can be modified to:
$(document).ready(function(){
$("button").click(function(){
$.get("getTotal.html", null, function(text) {
$("#div2").val($(text).filter("#p1").html());
});
});
});

Why doesn't my listener work when I put it in a Wordpress page?

I have some very simple code below that listens for an event (a click on an anchor tag). It works fine if I create a standalone html file. But if I create a file for just the script, register and enqueue it and then add that anchor tag to a Wordpress page, nothing happens when I click it. I can see in the console that the script file was loaded. I get no error when I click the link but neither do I get the results from the script. Do I have my anchor tag written correctly? Where is my error?
<html>
<head>
<script language="javascript" type="text/javascript" src="/wp-includes/js/jquery/jquery.js"></script>
</head>
<body>
Click here
<script id="source" language="javascript" type="text/javascript">
var $j = jQuery.noConflict();
$j( ".citation" ).click(function ( )
{
event.preventDefault();
// do stuff
});
</script>
</body>
</html>
event is not defined. Make it as an argument
$j(".citation").click(function(event) {
event.preventDefault();
// do stuff
});

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>

Why doesn't the following jquery script work?

I have a simple single page setup. Under a root folder, I have 3 subfolders (js, css, and images). In the root folder, I have an index.html page with the following content:
<html>
<head>
<title></title>
<script language="javascript" src="js/jquery-1.3.2.min.js"></script>
<script language="javascript" src="js/myscript.js"></script>
</head>
<body>
<a onclick="doSomething()" href="#" class="doSomething">Click!</a>
</body>
<html>
myscript.js contains the following code:
$('a.doSomething').click(function(){
//Do Something here!
alert('You did sometihng, woo hoo!');
});
When I click the link, nothing happens. What am I missing?
Wrap document.ready around the code:
$(document).ready(function() {
$('a.doSomething').click(function(){
//Do Something here!
alert('You did sometihng, woo hoo!');
return false; // return false to prevent default action
});
});
As it is right now, you are trying to bind an event to an element that does not yet exist in the DOM.
Also, not sure why you have the onclick on the link itself, as the whole point of jQuery is to be able to take those ugly inline events out of there and bind them cleanly in the javascript. If you do this:
yay click me
And then use the code above, it should work fine.
At first I thought you were just missing a function named "doSomething". Then I realized you where expecting your selector to find the anchor tag anyway. However, that won't happen. At the time your script runs, the anchor hasn't been added to the DOM yet.

Categories

Resources