Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 8 years ago.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Improve this question
I have these number of <a href />links in a HTML page:
<a ...>
<a ...>
.....
<a ...>
What I want is on the click of each link I have to show a text file on same html page.
a text file can be shown in a textarea or iframe.
How can I accomplish that?
.........EDIT..............
correct code
<html>
<head>
<title>Ajax Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("a").click(function(e){
e.preventDefault();
$.get( $(this).attr("href") ).done(function(e){
$("textarea").html(e);
});
});
});
</script>
</head>
<body>
foo bar<br>
<textarea></textarea>
</body>
</html>
You can use AJAX to get the text file data from the server, then put it into the text field.
Demo: http://jsfiddle.net/DerekL/63BLB/
$("a").click(function(e){ //select all <a>
e.preventDefault(); //remove default link effect
$.get( $(this).attr("href") ) /*AJAX (using jQuery)..
..and insert the URL of text file*/
.done(function(e){ //When it is downloaded,
$("textarea").html(e); //shows it in <textarea>
});
});
If you are new to jQuery, you may want to check out their documentation, especially $.ajax. :)
Note: You can only fetch text files in the same origin.
Note 2: The code above is written using jQuery. If you do not want to use jQuery, you will have to do the whole native new XMLHttpRequest thing.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
trying to load html page to div using jQuery ajax im pretty sure it's right but i don't know why exactly it's not working.
that's my code:
<div class="second">
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("button").on("click",function(){
$('#second').load($(this).data("page"));
});
});
</script>
Consider the following code.
$(function() {
$("button").click(function() {
$(".second").load($(this).data("page"));
});
});
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<button data-page="page-2.html">Get Page 2</button>
<div class="second"></div>
This will work properly as it uses a Class selector to target he proper <div> element.
Change:
$('#second')
To:
$('.second')
As second is a class, not an id.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I am trying to create an online app that needs to have multiple items of content open at one time. I have looked at JQuery dialogs and also HTML5 modal dialogs. Which of these should I choose to get the best cross-browser support? Is there a different implementation that would work better?
Sounds like maybe jQuery UI's Dialogs are what you're looking for? All you do is set aside some HTML in a container (such as a Div) and then render the dialog box.
Link: https://jqueryui.com/dialog/
To "create" the dialog, you'll just need to create a dialog from the container whenever you need it to be visible. Such as:
<script type="text/javascript">
$('#myPopup').dialog();
</script>
That page has an example of how to get started. For more detail with what you can do with them (such as adding buttons), check out the full API page:
Link: http://api.jqueryui.com/dialog/
Even better - you can also use custom themes or a variety of premade themes for jQuery UI. Check out Themeroller (http://jqueryui.com/themeroller/) to get yourself started.
Finally, you'll need to have both jQuery (https://jquery.com) and jQuery UI (https://jqueryui.com/) included in both of your projects for this to work. I'd recommend reading over the basic jQuery/jQuery UI tutorials if you are new to them.
Edit:
Here is an example on jsFiddle as well as an example of what a page would look like.
Fiddle: http://jsfiddle.net/uLGRA/
Code:
<html lang="en">
<head>
<title>Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/humanity/jquery-ui.css">
<script type="text/javascript">
// when the document has loaded..
$(document).ready(function() {
// turn this ID into a dialog
$('#popupTest').dialog();
// also, turn the input type="button" into a jQuery UI Button
// for consistency
$('#btnRandom').button();
});
</script>
</head>
<body>
<div id="popupTest" title="Stackoverflow Example">
<p>Hello, world.</p>
<p>Care for a cup of tea?</p>
<input type="text" value="" placeholder="sample input form">
<input id="btnRandom" type="button" value="this button does nothing... yet">
</div>
</body>
</html>
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I just finished the introductory course on Codecademy and I wanted to use it on a web project but I can't seem to get it working.
test.html
<html>
<head>
<title>jQuery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="test.js"></script>
</head>
<body>
<p style="font-family: verdana;">wfef</p>
</body>
</html>
test.js
$(document).ready(function() {
$('p').click(function() {
$(this).hide();
};
});
You have a syntax error in your code. You've omitted a closing parenthesis. Try this:
$(document).ready(function() {
$('p').click(function() {
$(this).hide();
}); // added a ) here.
});
Use this :
$(document).ready(function() {
$('p').click(function() {
$(this).hide();
}); // Missed ')' to close click function
});
Once you correct your actual javascript as suggested in other posts, make sure that the browser can actually find your file, test.js. In chrome you can hit ctrl + shift + j and look at the console for errors and make sure that your file can actually be found. It should be in the same directory as your other html file.
$(document).ready(function() {
$('p').click(function() {
$(this).hide();
}); //Syntax error here! Required a ) brace to close your .click(function () {
});
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 8 years ago.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Improve this question
I have a html page with a button whos onclick calls a javascript function...but I have been getting a function not defined error for two days! Can someone help?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/jquery.mobile-1.2.1.css" />
<link rel="stylesheet" href="css/jqm-docs.css"/>
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jqm-docs.js"></script>
<script src="js/jquery.mobile-1.2.1.js"></script>
<script>
function doSomething(){
alert('this is a test');
}
</script>
</head>
<body>
<div data-role="dialog">
<div data-role="content" id = "test" data-theme="c">
$confirm
Cancel
</div>
</div>
</body>
</html>
This might be handy:
http://jquerymobile.com/demos/1.2.0/docs/pages/page-scripting.html
You need to stick your scripts within the page element:
<div data-role="page">
<script>
function doSomething(){
alert('this is a test');
}
</script>
<!-- the rest of your stuff -->
</div>
In fact i have passed personally with this error even with valide HTML all what you need to do is move all of your functions to the head element.
Here is a fiddle:
http://jsfiddle.net/WekEA/1/
To demonstate what i have said in the framework & change the NoWrapToHead to onload
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I have a landing page in a website, where there is just a single image of the earth.
Now to enter the main site, I want some effect in the landing page that the earth cracks open and then the user enters the main site.
What I am currently doing: I currently divide the whole landing page image into 4 divs with a separate image in each of them (which jointly form the earth). Now when the user has to enter the site, I simple animate each of the 4 divs to each corner of the screen. But I need cracking effects & some other visually attractive effects.
Any ideas how to achieve this? Javascript (or jQuery) solution preferable.
overlay a crack image and make it slideDown() (jQuery) over the Earth img.
see http://jsfiddle.net/NKqNh/
$(function() {
$('#crack').slideDown(800);
});
<div id="earth" class="common"> </div>
<div id="crack" class="common"> </div>
Edit:
In your answer here is an updated js using a callback to an anonymous function for the explosion after the cracking.
http://jsfiddle.net/eC9HM/2/
$(function() {
$('#crack').slideDown(800, function() {
$('#earth, #crack').hide('explode', {pieces: 16}, 2000);
});
});
You can use explode effect of jQuery UI . It will break the image into many pieces(you can choose how many pieces you want) and The image will disappear
Uptdated-
Try this code-
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("img").click(function () {
$(this).hide("explode", { pieces: 24 }, 2000);
});
});
</script>
</head>
<body style="font-size:62.5%;">
<img src="http://2.bp.blogspot.com/-No5MB366RTY/T3WYGRicqUI/AAAAAAAAALQ/mDgaBLVocZE/s1600/260px-The_Earth_seen_from_Apollo_17.jpg">
</body>
</html>
Thanks for the answers, but I found my answer combining the other two answers present here.
So am just sharking the fiddle here, so that may be useful in future:
Updated fiddle:
http://jsfiddle.net/gopi1410/eC9HM/1/