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
Related
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.
I know this has been asked on SO a lot, but I have trawled through the posts for a few hours now and nothing works.
I'm working on a Wordpress blog where the prev/next buttons on a single post page have to load the prev/next post by Ajax. I have written the code (jQuery Ajax) all fine (I think - if you want to improve it, be my guest!), but in each post there a few bits of jQuery that need to work. However, after I click either of the prev/next buttons to move between posts, the jQuery won't work (it works absolutely perfectly when the page is first loaded). I know this is due to the content not being 'connected' to the JS anymore but I'm not sure what to do about it.
Here is my code:
$(".page-feed").on('click', '.post-nav>a', function() {
event.preventDefault ? event.preventDefault() : event.returnValue = false;
var link = $(this).attr('href'); // get the value of the href attribute on the links
$(".post-content").html("Loading...");
$.get(link, function(result) {
$result = $(result);
$content = $result.find(".post-content");
$(".post-content").replaceWith($content);
}, 'html');
});
I know that you're probably going to ask what I've already tried, but if I'm honest, not a lot that would be worth putting here.
The code above is located right at the top of a file called script.js, with all the other JS below it (which doesn't currently work after the Ajax call). The script is started by the standard $(document).ready(function() { statement.
Thanks for any help :)
First, you need to accept the event object as an argument.
$(".page-feed").on('click', '.post-nav>a', function(event) {
Next, by using the jQuery event object, you can simplify the next line because event is normalized by jQuery to work cross-browser.
event.preventDefault();
Now, as far as it working on the first click but not after, that's likely because .page-feed is a dynamic element. You'll need to instead select an element that is an ancestor of .post-content. document is a decent replacement, but it would be better if you picked one more local.
$(document).on('click', '.post-nav>a', function(event) {
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.
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.
in some pages i see when you arrive at the end of the page the page automatic loads new data. For example, some blogs when you get to the end of the page (that only loads 10 articles when you get there), the page load 10 articles more without pressing anything, so the questions will be, How do i execute/triger a php/javascript commands when something is displaying or the user gets to a particular position of the page? (USING A LOADER IMAGE OF COURSE)
--edit--
IMPORTANT: Please i dont need a triger by scroll, i need to triger from a display object, like when some image is in focus. Thanks!
Here is some code that runs on .scroll() and calculates how far from the bottom the current scroll is ..
http://jsfiddle.net/hRSE8/ (in this example, i add manually some text to showcase the effect of adding content and the scroll system adjusting to it)
At a specified distance you can load content with .ajax()
in short
$(window).scroll(function(){
var $this = $(this);
var $body = $('body');
var distance = $body.outerHeight() - $this.height() - $this.scrollTop() );
});
Update
Here is an updated example that will show when an element is in view (additional update to match specs in comment)
Demo
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function(){
var $window = $(window);
var visibleTop = $window.scrollTop();
var visibleBottom = visibleTop + $window.height();
var elementTop = $('#myloader').offset().top;
if ( elementTop > visibleTop && elementTop < visibleBottom)
{
// loader in view
// so we remove the loader from the DOM
$('#myloader').remove();
// and run the code ..
$('#tweetsFeed').jTweetsAnywhere(
{ searchParams: ['ors=patanemo+bocaina+cuyagua+todasana+parguito+%23surfVE&lang=es&geocode=8,-66,1000km'],
count: 6 });
}
});
});
</script>
And you need to put in your page the loader with <img src="loader.gif" id="myloader" />
If you're using the jQuery framework, have a look at infinite scroll:
http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/
I have never had to do this before but how I would do it is like this:
I would calculate the scroll position of the page using:
$(window).scrollTop();
Then I would find the scroll position an element on the page:
$(element selector).scrollTop()
Once the first number is bigger than the second number (plus maybe a buffer) then go ahead and make your ajax call to load whatever content you want.
This is all theoretical as I have never done but it seems logical. Anyone feel free to correct me where I might be wrong.
EDIT: You could also use the answer from this post:
Check if element is visible after scrolling
to see if an element is visible on the screen and then load at that time.
Though either of these solutions would require you to add an event handler for the scroll event.