Ajax load php into div giving me issues - javascript

I've been hammering away at this for a couple of days trying to resolve it before turning to StackOverflow. But I simply can't see where I'm going wrong.
All I want to do is on document load, bring in dansearch.php into the "displayresults" Div with the following code.
Can anyone shed any light here on how to fix this and more importantly why so I can fully understand the issue? Thanks in advance!
<script>
$(document).ready(function() {
$("#displayresults").load("dansearch.php");
});
</script>
<div id="displayresults"></div>

There are only 2 possibilities, if your code is not working,
Jquery inclusion may not proper.
Your php page or its location is not correct.

Use a .get
<script>
$(document).ready(function() {
$.get("dansearch.php", function(data) {
$("#displayresults").html(data);
});
});
</script>
<div id="displayresults"></div>

Related

Button on-click scrolling not working

quite new to coding with javascript and such, having an issue with an on-click scroll where it goes to another div. I've checked a lot of the posts on here but can't seem to find out why it won't work. Any help would be greatly appreciated! It's probably a simple fix that I just don't have the experience to be able to notice..
Here's the code (I'll try to condense it but imagine there's a lot of content in between so it's actually worth scrolling to)
HTML
<div class="button-div"><button type="button">Click here</button></div>
<div class="div-2-under-top">Content here</div>
Jscript
$("button").click(function() {
$('html,body').animate({
scrollTop: $(".div-2-under-top").offset().top},
'slow')
})
I have the latest jquery V3.3.1 so I wouldn't think that would be the issue... any ideas?
Here's a picture of the actual code itself in-case there's something important I missed (apologies if the code is dirty)
#TylerRoper found the answer for me.
I'll paste his answer here in-case anyone stumbles across this and is looking for the answer.
OP, your button click event needs to be inside of the $(function() { ... }) section. This section will be executed after waiting for the page to load. By trying to attach an event to $("button") outside of this, the button has not loaded yet, so the event can't be attached.
$("button").click(function() {
$('html,body').animate({
scrollTop: $(".div-2-under-top").offset().top},
1000);
});
Try see can work or not ? hope this help you

Problems with Masonry, jQuery and imagesLoaded

Web noobie here. I'm having a problem getting Masonry to work properly with the site I'm building. Here is the code I'm trying to execute:
$( document ).ready(function() {
...
var $article_display = $('#article_display');
$article_display.imagesLoaded(function() {
$article_display.masonry({
columnWidth: Math.floor($('#article_display').width() *.3) + 2,
itemSelector: '.article',
isAnimated: !Modernizr.csstransitions
});
});
...
});
I'm getting this error: "Uncaught TypeError: Object [object Object] has no method 'imagesLoaded' ." I've looked around for the past two days to find some kind of solution to this before posting this question here and have been unsuccessful so far. It seems like my browser isn't recognizing that I've included the imagesloaded.pkgd.min.js file...? According to the reference material here: http://masonry.desandro.com/appendix.html this code should work.
Any help would be greatly appreciated, I can try to get a jsfiddle set up if that would make a difference.
Thanks!
Edit: Here's a JSFiddle showing the issue: http://jsfiddle.net/DDQtD/
Figured it out. I had a typo when I was loading my scripts, it looked like this:
<script type="filepath/imagesloaded.pkgd.min.js"></script>
I needed to switch out type with src. So many simple mistakes!
I would try Salvattore, it works in a different way so images don't have to load before the script is loaded, and you can configure the script with CSS and HTML.
http://salvattore.com/

Hide Image when another image is clicked

this seems to be simple.. but I am a bit noobish with jquery, maybe I am doing something silly wrong?
I want to click an image, and on that click, hide another image right next to it.
<script type="text/javascript">
$("#butShowMeSomeUnits").click(function() {
$('#arrowUnitspic').hide();
});
</script>
Id's are correct as per the two images. What am I missing? Debugging it, the code never gets fired...
Thanks
EDIT
I had my control as a nested control on an asp masterpage, and its id was being rewritten. I have now fixed the id, but I still cant get any joy... I also see my markup is being rendered as an "input", would that make a difference?
<head>
<script src="js/jquery.min.1.5.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#butShowMeSomeUnits").click(function () {
$('#arrowUnitspic').hide();
});
});
</script>
</head>
<body>
<input type="image" src="bookings_media/buttons/show-me-some-units.png" onmouseout="this.src='bookings_media/buttons/show-me-some-units.png'" onmouseover="this.src='bookings_media/buttons/show-me-some-units_orange.png'" id="butShowMeSomeUnits" name="ctl00$ctl00$ContentPlaceHolder1$bookings_right_content$butShowMeSomeUnits">
</body>
EDIT
JS Fiddle
If there is any confusion... the JS fiddle I spooled up with the exact code also does not work...
You need to do do on page ready:
<script type="text/javascript">
$(document).ready(function() {
$("#butShowMeSomeUnits").click(function() {
$('#arrowUnitspic').hide();
});
});
</script>
Edit:
The fiddle you provided did not work until I chose jQuery 1.10.1 from the dropdown. You will notice your onmouseover changes the element first, but once you click on the input it does hide the image. Can you verify this works the same for you?
If the answer is no then I don't think you are loading the jQuery library on your page. To check this should work:
if (typeof jQuery != 'undefined') {
alert("jQuery library is loaded!");
}else{
alert("jQuery library is not found!");
}
In addition it might be helpful to see what errors your browser console /dev tools is showing.
Wrap the code in jQuery.ready() event. And also check whether jquery js file is loaded or not.
$(document).ready(function(){
$("#butShowMeSomeUnits").click(function() {
$('#arrowUnitspic').hide();
});
});
You code looks good and works check here
What you might be missisng is either:
to load jQuery script in the head of your page.
to include $(document).ready(function() { //code here }); in case your <img> tags are after the script in the page code. This is so your code loads when page is ready/loaded.
Steps that may help you:
make sure you integrate jQuery lib right. (to check that you might wanna open console on chrome and type $("html").hide(); and see if the current page dissapears)
make sure your custom JS file or code is UNDER the including of jQuery lib.
very good starting point with jQuery is to put everything in $(document).ready() as below example:
$(document).ready(function(){
$("img").click(function(){
$("img").hide();
$(this).show();
});
});

Problems with original Jquery script, it won't start!

I'm suck a noob when it comes to java/jquery, I don't even know the basics. So please have understanding.
I've fetched this script from the jQuery website, but it won't start for me :/
What am I doing wrong?
The whole script is found on http://jsfiddle.net/xZUue/
Thank you for your help!
You have to call the miniscroller function on your div, like so:
$(function() {
$("#scroller").miniscroller();
});
see http://jsfiddle.net/qJkdy/
jQuery is loaded and so is the plugin, but your not making any use of it!
Do:
$('#scroller').miniscroller();
Check out..Its working...u were missing
<script>
$(function () {
$("#scroller").miniscroller();
});
</script>
updated link: http://jsfiddle.net/xZUue/5/

Stacking Images When Page Loads

I've read through a number of similar questions but nothing has worked for me yet. The url is here: http://www.promotion1.com/home-wmc-slide
I've installed a slider and the images are stacking before the script, I do not know JavaScript...
Would anyone be willing to look at the site and see if there might be a quick fix? I seriously need the help.
Thank you!
Try changing your javascript from $(window).load(...) to $(document).ready(..)
$(document).ready(function (){
$("#pikame").PikaChoose();
});
Make sure you're using the newest version of PikaChoose and then do the following.
For your css:
#pikame{ display:none; }
In your js:
$(document).ready(function (){
var showUL = function(){ $("#pikame").show(); };
$("#pikame").PikaChoose({buildFinished:showUL});
});

Categories