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.
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 5 years ago.
Improve this question
Please I'm trying to knockoff a loading bar on my site, I have searched through the files, still can't find it. I also tried inspecting using google chrome, but I couldn't target the loader. Kindly help out
Click here for to visit website.
<div class="pace pace-inactive">
<div class="pace-progress" style="width: 100%;" data-progress-text="100%" data-progress="99">
<div class="pace-progress-inner"></div>
</div>
<div class="pace-activity"></div>
</div>
Remove this html construct. There also should be a javascript/css which triggers the loading bar. You can remove that too.
It's inside your head:
<script src="assets/plugins/pace/pace.min.js"></script>
<link href="assets/plugins/pace/pace.css" rel="stylesheet">
just go the HTML of your page. there from the top, search for <body> tag. Just below it you'll find this :
<div class="pace pace-inactive"><div class="pace-progress" data-progress-text="100%" data-progress="99" style="width: 100%;">
<div class="pace-progress-inner"></div>
</div>
<div class="pace-activity"></div></div>
Remove all these lines and you'll be fine
and remove these two lines in your <head> tag
<link href="assets/plugins/pace/pace.css" rel="stylesheet">
<script src="assets/plugins/pace/pace.min.js"></script>
Remove Pace library/plugin from your index.html in head section
& from assets folder inside your application.
<link href="assets/plugins/pace/pace.css" rel="stylesheet">
<script src="assets/plugins/pace/pace.min.js"></script>
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
here below is my code i can't seem to find what is wrong it is not redirecting to the link.
<html>
<head>
<script type="text/javascript" src="<?= baseurl(); ?>/public/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(function() { $("formRedirect").submit(); });
});
</script>
</head>
<body>
<form id='formRedirect' action="http://www.example.com/something/something.aspx" method="post"><input type="submit" name="redirect" value='<?= $token ?>'</form>
</body>
Try this:
<html>
<head>
<script type="text/javascript" src="<?= baseurl(); ?>/public/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#formRedirect").submit();
});
</script>
</head>
<body>
<form id='formRedirect' action="http://www.example.com/something/something.aspx" method="post"><input type="submit" name="redirect" value='<?= $token ?>'</form>
</body>
For id jquery detect them with #
Try like this
$("#formRedirect")[0].submit();
Use
$(document).ready(function() {});
or
$(function(){})
Both same
U have added $(function(){}); inside document.ready
$(function(){}); is similar to $(document).ready(function() {});
Use following code:
$(document).ready(function() {
$("#formRedirect").submit();
});
I find the Chrome console to be very helpful in debugging situations like this. I would start by making sure you are getting a result from your jQuery selector.
You can open the Chrome console by pressing F12
In the Chrome console, type $("formRedirect") and see if you get any results. You probably won't, since you are missing the # ID selector.
Next, try submitting your corrected jQuery object. If it doesn't work, try accessing the actual HTML object by adding in a [0] at the end of your selector, as suggested by #Anik.
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 8 years ago.
Improve this question
i have this jquery code and html it is working on jsfiddle.com(http://jsfiddle.net/9rJev/) and this is the working example but when i get it to notepad++ its not working, and this is my code on notepad++
<html>
<head>
<script type="text/javascript" src="js/jquery.1.3.2.min.js" ></script>
<script type="text/javascript" src="js/jquery.1.6.4.min.js" ></script>
<script type="text/javascript" src="js/jquery-ui.min.js" ></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$('#movedown').ready(function(){
`$('#test').slideUp();`
})
$('#movedown').mouseover(function() {
$('#test').slideDown();
});
$('#movedown').mouseleave(function(){
$('#test').slideUp();
});
</script>
</head>
<body>
<div id="movedown">
<h4>yazan</h4>
<div id="test" style="background-color:lightgrey; border:2px solid grey;padding:10px;">Hello, this will slide down.</div>
</div>
</body>
</html>
but its not working on google chrome anyone have any idea what is the issu.
please help.and thanks
Change your JS to this:
$(document).ready(function(){
$('#movedown').ready(function(){
$('#test').slideUp();
})
$('#movedown').mouseover(function() {
$('#test').slideDown();
});
$('#movedown').mouseleave(function(){
$('#test').slideUp();
});
});
And also remove all but 1 jquery reference. Note you need to include the ready function, and you had some odd characters around $('#test').slideUp(); which caused JS errors. After these minor changes your code performed fine for me.
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.
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/