1) I'm using jquery waypoint plugin and trying to do infinite scroll with php/mysql data.
I initially populate the container, which works, and then when scroll to bottom of page the "More" link appends more data. But... it only appends one time. I'm guessing I need to use a callback to re-enable or something? But, total noob, don't know how to do this.
2) What is a good way to let load-more.php know what "page" we're on? Just use a session var to keep track, or is there a way to send param from the main file?
div class="infinite-container">
<?
include("load-more.php");
?>
</div>
More
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script>
<script src="js/waypoints.min.js"></script>
<script src="js/waypoints-infinite.js"></script>
<script>
$( document ).ready(function() {
$('.infinite-container').waypoint('infinite');
});
</script>
If your problem is the same as mine then your issue is likely due to 'waypoint' not being able to find your .infinite-more-link. My "load-more.php" was returning a partial result and not the whole page. waypoint uses JQuery.find to try and locate the more-link in your html, if it cannot find it then it turns off infinite scroll. The problem with this is that find only looks amongst descendants and not at root elements. I wrapped my infinite-more-link in a span tag and waypoint worked as expected.
e.g.
<span>More</span>
Here is a working fiddle, remove the div around the anchor to replicate your problem.
Related
I need to be about to tell a page when it loads which jquery tab to use as the selected / active tab -- I've tried all the solutions I've found here, and have searched elsewhere extensively, but I'm handicapped by knowing very little about js and jquery. I'm also under a severe time crunch, so if anyone can help me I would be extremely grateful.
Here is my code:
In the page head section, I have:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript" src="jquery-tabs.js"></script>
and
<script>$(document).ready(function()
$("#tabs > ul").tabs();</script>
In the body, I have the tab div set up, with the tabs as li items (sample below), and everything works fine except that I can't seem to select a tab programmatically.
li class="tabstuff"><a class="tabstuff" href="#tab1"><span>First Tab</span></a></li>
I haven't even been able to force my second tab to select on page load when I've tried using the code I saw in one of your question posts:
First I got the index of the tab I wanted (which I know worked, because I displayed it to myself using an alert box), using this:
var index = $('#tabs a[href="#tab2"]').parent().index();
Then I tried each of these two methods (separately):
$("#tabs").tabs("option", "active", index);
I also tried:
$('#tabs').tabs('select', index);
Nothing works, and I don't know enough about jquery to see where I'm going wrong.
A second issue is how to tell the function which tab to select and display as active on page load. I can pass in a post or get variable, but I've tested code I found that says I can use this:
var qry = window.location.search;
if (qry.indexOf("showlist=yes") > 0) {
//I added an alert box here and it never got triggered
}
to check for a post or get variable, and that doesn't seem to work either.
My web page builds the html via php, but I don't yet understand enough about triggering a jquery function to know how to do that anywhere except on page load or an onclick/onchange event.
Thanks for any help anyone can give!
In order to select a different tab than the first you have to do
$("#tabs").tabs({ active: 2 });
Where 2 can be changed by any index you want
For a website I'm making for school, I'm trying my hand at using Jquery extensively for the first time, and even though I managed quite a bit so far, I'm stuck at two (most likely related) problems.
I'm aware that the upcoming case is somewhat long, but I feel it's necessary to submit all relevant code for everyone reading this to get a good image of what is happening.
Basically, the website is one index.html file, with the CSS thrown in, a few buttons, and one div with the ID content. I use this code to make this work:
<script type="text/javascript">
if ($('#content').innerHTML == " "){
$(document).ready(function(){
$('#content').load('main_text.html');
});
}
</script>
<script type="text/javascript">
function loadContent(elementSelector, sourceURL) {
$(""+elementSelector+"").load(""+sourceURL+"");
}
</script>
Then there is one content page, named search.html, which only contains a form that submits a search string to a search.php page (through ajax) that should then place the search results immediately back into a div called search_results in that same search.html file. The jquery that I use for this:
<script type='text/javascript'>
$(document).ready(function(){
$("#search_results").slideUp();
$("#search_button").click(function(e){
e.preventDefault();
ajax_search();
});
$("#search_term").keyup(function(e){
e.preventDefault();
ajax_search();
});
});
function ajax_search(){
$("#search_results").show();
var search_val=$("#search_term").val();
$.post("Functions/search.php", {search_term : search_val}, function(data){
if (data.length>0){
$("#search_results").html(data);
}
})
}
</script>
The issue that I'm having is as followed:
Before I had the first line of code: if ($('#content').innerHTML == " "){; implemented, I would open the site, main_text.html would nicely be loaded in, I could navigate to other subpages fine. But typing in something in the form field in search.html did not display any results (just typing should already trigger the function). When I hit the search button on this form, instead of seeing query results, the main_text.html file load again in the #content div. This made me assume that perhaps, somehow, that the code:
$(document).ready(function(){
$('#content').load('main_text.html');
});
was being called again unwanted. Hency why I implemented that check for whether innerHTML existed.
However, now, when I first load the page, the #content div does not load any initial content at all. (The section on the webpage just becomes black, like my page background) I have to click any button to get some content loaded again in my main content div. Also, when I now go back to the search.html, the typing anything to get results, like previously, still does not work. If I now hit the search button, I get the initial result again of what I'd see when I just opened the page: a blacked out #content div.
So somehow, the biggest issue is in the fact that the jquery to get results from my PHP do not seem to work. My problem with the content.innerhtml check might well be obsolete if the issue with the searchresults not displaying in the #search_result div on the search.html is fixed.
Anyone have any idea's what I could do to fix this. Or otherwise, what other approaches I could take for the kind of website I'm making. Since I'm trying to learn jquery here, better approaches are always appreciated, I'd rather learn myself doing this the right way and all. :)
Thanks for your time.
Few things to note here:
<script type="text/javascript">
if ($('#content').innerHTML == " "){
$(document).ready(function(){
$('#content').load('main_text.html');
});
}
</script>
<script type="text/javascript">
function loadContent(elementSelector, sourceURL) {
$(""+elementSelector+"").load(""+sourceURL+"");
}
</script>
In the above, you are testing to see if there is a space in the innerHTML of the element with an id of content.
jQuery uses .html() or .text() to make comparisons against the data being held within a container, so if you want to maintain using jQuery principles, change this line. Going along the same thought process, you are preparing an IF statement on an element before the document is actually ready and loaded.
You should move the document.ready function to the outside of the if statement. This will allow you to ensure that the element is available at DOM, and you can indeed perform checks against this element.
<script type="text/javascript">
$(document).ready(function(){
if ($('#content').html("")){
$('#content').load('main_text.html');
}
});
</script>
Also, while being readily provided and fully functional, I would recommend starting off using $.ajax instead of $.get / $.post. I have personal preferences as to why I think this, but I won't go into that, it's just that, personal.
$.ajax({
url: "Functions/search.php",
type: 'POST',
data: "search_term="+search_val,
success: function(data){
if (data.length>0){
$("#search_results").html(data);
}
});
Lastly, you should be using the GET method and NOT the POST method. Based on REST/SOAP practices, you are retrieving data from the server, and not posting data to the server. It's best practice to follow those two simple ideas. This isn't because web servers will have a difficult time interpreting the data; but, instead, it's to prepare you for working on larger scale application deployment, or future team-environments. This way everyone on the team has an expectation as to what method will be used for what purpose.
Anyway, long story short, you also leave semicolons off of the end of your closing }) brackets. While this is not an issue, nor will it cause flaws in your development, coding is all about uniformity. You've used the closing ; everywhere else, so try and maintain that same uniform design.
Best of luck.
I am working on a revamp of my companies website, a js vertical scrolling menu of buttons on the left are links to change the contents of the main div under the header. I have it set up with php include statements right now, which works, but every time it reloads the whole page, so the scrolling menu on the left resets to the top of the list, losing the visitors place.
You can see the prototype at http://www.nbtc.org/nv, click on 'Bicycling' or 'Carpool' to see it in action.
Instead of doing that I want to use js to change the contents of the div with innerHTML, I want one function where the link includes the variable, so the link would look like:
<a class="button" href="javascript:changecontent(bike)">Bicycling</a>
The following function would than run:
<script type="text/javascript">
function changecontent(var1)
{
document.getElementById('content').innerHTML="<?php include(" var1 .php"); ?>";
}
</script>
And the div with the id'content' would change to include bike.php. Clicking a different link would change the div to something else.
I am new to this, so please help me with the syntax of the script, I know I have to separate out the 'var1' in the function statement but I don't know how.
This seems like a straight solution, but if there is a better way I am all ears. The vertical scrolling menu already uses jquery, and I read about the 'load' function, maybe that would be better?
Thanks for your help! Brenden
$.load would definitely be good here.
$(function(){
$(".menutable").on("click", ".button", function(event){
event.preventDefault();
$("#content1").load(event.target.href);
});
});
Then change all of your links to contain their actual destination in the href value:
<a class="button" href="bike.php">Bicycling</a>
Demo: http://jsbin.com/uyasux/edit#javascript,html
I'm testing some Jquery Ajax scripts and one of them is actually quite nice. The only problem I have with it, is that when it refreshes my div, it takes you back to the top of the div.
The div loads MYSQL results from an outside php script. So if the user is halfway down the page reading, when the ajax call goes out, it takes them to the top of the div.
It's important for them to be able to read uninterrupted.
Here's my code:
<script>
var auto_refresh = setInterval(
function()
{
$('#test').fadeOut("slow").load('tehloader2.php?load=tester').fadeIn("slow");
}, 20000);
</script>
<br /><br />
<div id="test"></div>
So would it be possible to have just a stack effect by modifying the code, or would I need to look at a completely different option?
Also I would like to note that after so long, this script starts to fail. It gets to the point where it's constantly refreshing the div. No 20 second wait, just again and again.
This should stop it from going to the top:
<script>
var auto_refresh = setInterval(
function()
{
$('#test').load('tehloader2.php?load=tester');
}, 20000);
</script>
<br /><br />
<div id="test"></div>
This will make it just load instead of fading the element out and then back in.
I hope this helps.
You can use jQuery's .scrollTop() and .scrollLeft() to save the scroll position before loading your content and then set the scroll position back to those values after loading the content. If the content has changed significantly above the reading position, it won't necessarily go back to the exact same position, but if the content hasn't changed significantly or if the place that it changed is below what was being viewed, it should restore back to the exact same spot.
A more complicated approach would involve identifying a marker object that's on screen and visible and using jQuery .offset() and position(), you obtain that objects location on screen and then after loading the new content, you adjust the scroll position until that marker object is again positioned in the same place. This approach is a lot more work, but would give better results if the content changes significantly.
The effect occur because when the content is loaded the div probably is recreated, and that makes the browser go to the top of the div.
You can save the scroll position and try to restore it after.
But depending on what you're doing, if you're loading new content probably it will be helpfull to load the content into another hidden div and then append the new content to the visible div using the effects u want.
Hope it helps.
Here the scenario:
I want to apply a datepicker on a input field in a form.
When clicking a link a colorbox will open containing the form.
Somehow the datepicker doesn't work, so I searched the internet.
I was confused by this post datepicker inside a thickbox where the following statement was made:
JavaScript/jQuery is not working inside of ColorBox.
It confused me because other people seem to have worked it out.
I'll show the code of the colorbox call:
<script type="text/javascript">
$(document).ready(function() {
$(".customer").colorbox(
{
transition:'fade',
width:'750',
speed:'500',
height:'400',
iframe:true
});
});
</script>
The colorbox opens successfully although my error console says there is a } missing after the first }); occurrence.
The code for the datepicker:
<script type="text/javascript">$(document).ready(function() {
$('.datepick').datepicker({
changeYear:true,
yearRange:'c-65:c+0',
changeMonth:true
});
$('.datepick').datepicker($.datepicker.regional['nl']);});</script>
This code does work somewhere else on my website where it is not located in a colorbox.
What I have tried:
I tried to give the class datepick a z-index of 10000 or higher since colorbox has a z-index of 9999 by default.
I tried the oncomplete function() on the colorbox, but couldn't get the colorbox work when applied.
I tried setting iframe to false in combination with the previous two options.
My question(s):
Is it possible to have a datepicker working inside a colorbox?
Is my code about the colorbox correct?
How to fix it?!
UPDATE
Solution: I made a stupid mistake :P...
Yet I found the answers on my first question, which may be of some value.
Yes it is possible to have a datepicker working inside a colorbox without using the onComplete:function().
Does your loaded iframe contain the datepicker instantiation code?
My assumption is this:
you have an anchor with a class="customer"
this anchor has an href, which points the the page you want to show in the colorbox
this page loads in an iframe (due to iframe:true)
and this page doesn't have your datepicker instantiation code
The easiest thing to do is to move the datepicker code to the onready function of the customer page.
As noted in ColorBox documentation:
This is often due to trying to access an element before it has been loaded into the document and can be resolved by moving the JavaScript into ColorBox's onComplete callback.
Example (using jQuery Forms plugin):
$('#login_window').colorbox({
...
onComplete:function(){
$('form#login').ajaxForm();
}});
You can adapt the example to load the datepicker.
I got the same issue.
I used an id as selector, but colorbox duplicate the whole html content and the id's too.
So if I use $('#myid').doSomething() I got an error, because "myid" was duplicated.
Thats the issus.
Use a better selector like $('#colorbox .myidasclass').doSomething() to solve the issue.
The same problem is with class selector without the '#colorbox' as additional selector.