I have some results that are loaded via Ajax in the #results container and anothers, the same content in #last_results (this one loads without ajax). The same scripts that work on #last_results doesnt work in #results I think due to they are not binded.
HTML
<ul id="results"></ul>
<ul id="last_results">
<li class=showLb>[click to show LightBox]</li>
<li class=showLb>[click to show LightBox]</li>
<li class=showLb>[click to show LightBox]</li>
</ul>
JQUERY This is a basic Jquery script:
$('.showLb').on('click',function(e){
alert('Show LightBox');
});
This script works in the page li but not in the loaded via Ajax li. I knew I have to delegate or use on, How
You have to define your on click method directly after you execute you ajax call.
$.ajax({
...
success: funtion(data){
//your code
$('.showLb').on('click',function(e){ alert('Show LightBox'); });
}
...
Here you go. Now, My preference would be to ask you to actually go and check what this change does. Remember, we are here to help you understand.
$('.results').on('click', '.showLb' ,function(e){
alert('Show LightBox');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="results"></ul>
<ul id="last_results">
<li class=showLb>[click to show LightBox]</li>
<li class=showLb>[click to show LightBox]</li>
<li class=showLb>[click to show LightBox]</li>
</ul>
Related
I'm working on a small project using Bootstrap, and I've come across a weird problem.
Basically, I have this menu with two items, where the first loads another page inside a div, and the second triggers a dropdown menu.
The problem is that if I click on the first item right after I run the file on browser, the dropdown will stop working until I click the first item again.
If I click the second item first, the dropdown will also stop working until I click the first item.
Here's the code:
$('#usuarios').click(function() {
$('#main').load('cns_usuarios.html');
});
$('#canal').click(function() {
$('#main').load('canal.html');
});
$('#campos').click(function() {
$('#main').load('cns_campos.html');
});
<link href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css' rel='stylesheet'>
<link href='index.css' rel='stylesheet'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js'></script>
<ul class='breadcrumb menu'>
<li id='usuarios'><a href='#'>Listar Usuários</a>
</li>
<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>
Configurações
<span class = 'caret'></span>
</a>
<ul class='dropdown-menu'>
<li id='canal'><a href='#'>Canal</a>
</li>
<li id='campos'><a href='#'>Campos</a>
</li>
</ul>
</li>
<li><a href='../index.html'>Sair</a>
</li>
</ul>
<div id='main' class='main'>
</div>
The code contains some stuff in portuguese, but it's pretty much irrelevant so just ignore it.
Also, I've added a few things of my own, but only on the css side. If anyone thinks it might be causing my problem I'll show that part of the code too.
Try this:
<script>
$(document).on('click', '#usuarios', function() {
$('#main').load('cns_usuarios.html');
});
$(document).on('click', '#canal', function() {
$('#main').load('canal.html');
});
$(document).on('click', '#campos', function() {
$('#main').load('cns_campos.html');
});
</script>
I'm really new at trying to use jQuery, so please forgive me for asking what is likely a simple question. Perhaps it isn't even related to jQuery, but anyway, here's the scenario. I'm trying to put in a hidden div which I only want to show up when the user hovers their mouse over the Learner's anchor tag on the page. I've started with only one anchor tag, to get it working first before implementing the rest of them. I've downloaded a jQuery library and included a reference to it, so here's some of what I've got in my page's head section:
<script src="js/jquery-1.11.1.js" type="text/javascript" ></script>
<style type="text/css">
#navcontainer ul { list-style-type: none; }
#navcontainer ul li { display: inline; }
#navcontainer ul li a
{
text-decoration:none;
padding: .2em 1em;
}
</style>
Next I've defined an unordered list, using the styling above to make it horizontal, and I've got a hidden div after it, which I want to show when the user moves their mouse over the first anchor in the unordered list. Here's the relevant HTML from within the body tag:
<body>
<div id="navcontainer">
<ul>
<li>Home</li>
<li>Learners</li>
<li>Teachers</li>
<li>Businesses</li>
<li>Contact Us</li>
</ul>
<div id="dropdown1" style="visibility:hidden;">
<ul>
<li>Description A</li>
<li>Description B</li>
<li>Description C</li>
</ul>
</div>
<!-- other HTML code -->
</body>
However, when I run this from within the browser (IE11) nothing happens. Using the F12 web developers tools built into IE11 I learn that it giving an error of "showHide is undefined". Why is it doing that? The showHide() function is most certainly in the jquery-1-11.1.js file, which most certainly is in my js folder. What have I done wrong, or failed to take into account?
jQuery works kinda different than that. You have to make it look like this:
$("#dropdown1").toggle()
You better make a javascript file and separate the JS from the HTML:
HTML:
<body>
<div id="navcontainer">
<ul>
<li>Home</li>
<li>Learners</li>
<li>Teachers</li>
<li>Businesses</li>
<li>Contact Us</li>
</ul>
<div id="dropdown1" style="visibility:hidden;">
<ul>
<li>Description A</li>
<li>Description B</li>
<li>Description C</li>
</ul>
</div>
<!-- other HTML code -->
</body>
The JS
$(function(){
$("#navcontainer li a").click(function(){
if( this.href.indexOf("#") != -1 ) {
$( $(this).attr("href") ).toggle(); // $( "#container1" )
}
});
});
What this does is on the navcontainer li click, we make a handler, which does something if it contains a #. Then we select that element #container1 which is in the href, also is the selector for the element which we want to show. And we toggle that element.
There is no such function as showHide you could use toggle() or show() or hide()
in you current scenario uou would couple them with $(this). or your chosen selector.
As an example of targetting a particular element with jQuery we have added the class hover-learners and target it with the selector below.
HTML:
<div id="navcontainer">
<ul>
<li>Home
</li>
<li>Learners
</li>
<li>Teachers
</li>
<li>Businesses
</li>
<li>Contact Us
</li>
</ul>
<div id="dropdown1">
<ul>
<li>Description A
</li>
<li>Description B
</li>
<li>Description C
</li>
</ul>
</div>
Add the below javascript as a file or within <script type="text/javascript"> code here</script> after including your jQuery library file.
Javascript:
// wrap everything in jQuery's ready function to make sure the page has fully loaded before executing the javascript
$(document).ready(function () {
//select learners and apply mouseover event
$('.hover-learners').on('mouseover', function () {
$('#dropdown1').show();
});
//select learners and apply mouseout event
$('.hover-learners').on('mouseout', function () {
$('#dropdown1').hide();
});
});
Also since the show and hide methods manipulate the display CSS property I have added
CSS:
#dropdown1 {
display:none;
}
and remove the inline style="visibility:hidden" from the #dropdown1
Working demo here: http://jsfiddle.net/robschmuecker/J6U7d/
I'm trying to load a default tab in the tabbed ajax code that I've got, this is the source from the head tags
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://www.hastiefitness.com.au/wp-content/themes/hastie/jquery.fwd_tabs.js"></script>
And this is what I'm using in HTML:
<div class="tabs">
<ul class="tab-menu">
<li>TEAM TRAINING PROGRAM</li>
<li>VIRTUAL EDUCATION AND COACHING PROGRAM</li>
<li>PERSONAL COACHING PROGRAM</li>
</ul>
<div class="tab-content" id="tab-1">
The page in question is :
http://www.hastiefitness.com.au/programs/
The default tab is meant to be the middle one, which is tab-2.
How would I be able to perform this? I've searched and haven't been able to get it working at all.
Looks like the plugin used does not have any direct support for setting active tab so once the plugin is initialized trigger a click event on the desired anchor element
jQuery(function(){
$('.tabs').fwd_tabs();
$('.tabs a[href="#tab-2"]').click()
})
Demo: Fiddle
I actually didn't really know how to phrase the question title, but here is the description. Suppose I'm using jQuery to show/hide uls that are stacked on top of each other (absolutely positioned). For example:
<ul id="one">
<li>blah</li>
<li>blah2</li>
</ul>
<ul id="two">
<li>blah</li>
<li>blah2</li>
</ul>
I have a controller button, that when pressed, simply changes the z-index of these uls. The controller button is literally just:
My button
With jQuery code that does: (I'm using the jQuery cycle plugin)
$('#mybutton').click(function() {
// check which ul is currently shown
// change z-index, so that the next ul is to be shown
});
THE QUESTION:
In my site, I have several pages that I would like to point to the second ul, so that when clicked, it'll bring them to the page with all of the uls, but only the second one will be shown. It would be the same if the person went to the page, had the default first ul shown, and then clicked "next" to proceed to the next ul. I am simply wondering if it's possible to avoid pressing "next", and just bring the user directly to the page and have the second ul shown.
I think you can use the hash-tag from the URL. You can then write an if statement like this:
if(location.hash === "#2"){
$("#one").hide();
}else{
$("#two").hide();
}
Or directly as a copy and paste example:
<html>
<script src="http:////ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>
$(function(){
if(location.hash === "#2"){
$("#one").hide();
}else{
$("#two").hide();
}
$('#mybutton').click(function(e) {
$("ul").toggle(); //quick n dirty! only works with 2 lists :)
e.preventDefault();
});
});
</script>
<body>
My button
<ul id="one">
<li>First Item!</li>
<li>blah</li>
<li>blah2</li>
</ul>
<ul id="two">
<li>Second Item!</li>
<li>blah</li>
<li>blah2</li>
</ul>
To second page (you might have to refresh, notice the #2 at the end of the url!)
</body>
</html>
Also notice I've inserted a e.preventDefault(); at #mybutton's click listener to prevent the URL changing back on clicking.
If I am understanding you correctly, perhaps you can accomplish this via a page wrap with a unique id per page? You can swap the id out with JS or server side logic, depending on what you're trying to do.
<div id="page-one">
<ul id="one">
<li>blah</li>
<li>blah2</li>
</ul>
<ul id="two">
<li>blah</li>
<li>blah2</li>
</ul>
</div>
then your css will be #page-one #one { display:block }; #page-two #one { display : none }; etc.
When the content is static:
Click
<script>$('#nearme').bind('pageAnimationEnd', function(event, info){});</script>
When the content is AJAX:
Click
How do I bind something to occur after the AJAX (page.html) is loaded?
This question pertains to jqtouch which makes AJAX requests from regular anchor tags
Take a look at the demo, in particular the "GET Example" under AJAX section. Essentially, you want to have the anchor element to link to a page which returns a "jQTouch page", i.e. <div id="pageID">...</div>.
So, in your case, you may have this anchor:
Click
And the page.html may be something like:
<div id="ajaxPage">
<div class="toolbar"><h1>Title</h1></div>
<div>
<ul>
<li>item 1</li>
<li>item 1</li>
</ul>
</div>
</div>