I have created an html page, (template if you will) so what I would like to do is to leave the page all on it's own and use AJAX / jQuery to propagate the div elements with other external html pages.
Is this possible ?
I have been checking around and I have yet to find the solution.
Here is a snippet of my nav list...
<div>
<ul>
<li id="n-c"><span class="dir">Cosmo</span>
<ul id="switcheroo">
<li class="first">Special</li>
<li>Mineral</li>
<li>Lateral</li>
<li>Tangent</li>
</ul>
</li>
</ul>
</div>
In my content section I have added a
<div id="contentSwap"></div>
I tried this:
$("ul #switcheroo li a").click(function(event) {
var $parent = $(this).parent();
$parent.addClass("selected").siblings().removeClass("selected");
var href = $(this).attr('href');
$.get(href, function(data) {
$('#contentSwap').html(data);
});
event.preventDefault();
return false;
});
to no avail, can someone help me?
WDH
in the end I ended up using the simplest form to achieve my result.
<script type="text/javascript">
$(document).ready(function() {
$("#switcheroo").click(function(event){
$('#contentSwap2').load('pg2.html');
});
});
$(document).ready(function() {
$("#switcheroo2").click(function(event){
$('#contentSwap3').load('pg3.html');
});
});
</script>
... and so on ...
And ultimately swapping the div id with the one that had content already, instead of using an empty tag.
WDH
I appreciate all your insight #abdullah.abcoder #ShankarSangoli and #John Hartsock
When you get the html response in the get callback it will have all the tags starting from html, head body etc. Either you will have to make sure you only send the required markup from the server or parse the markup and and get only the markup that you want to append into contentSwap div.
The other approach is to use iframe, set the iframe source to href, onload of iframe find the required element, get the markup and then append it to contentSwap div.
$("ul #switcheroo li a").click(function(event) {
var $parent = $(this).parent();
$parent.addClass("selected").siblings().removeClass("selected");
var href = $(this).attr('href');
var dIf = $("#dummyIframe");
if(dIf.length == 0){
$(document.body).append('<iframe id="dummyIframe" style="display:none;"></iframe>');
dIf = $("#dummyIframe").onload(function(){
var iFrameContent = $("#dummyIframe").contents();
$('#contentSwap', window.parent.document)
.html(iFrameContent.find('#someDivIdOrAnyOtherSelector').html());
});
}
dIf[0].src = href;
event.preventDefault();
return false;
});
$("ul #switcheroo li a").click(function(event) {
var $parent = $(this).parent();
$parent.addClass("selected").siblings().removeClass("selected");
var href = $(this).attr('href');
$('#contentSwap').load('' + href + ''); //$('#contentSwap').empty().load(''+ href +''); you may use this for make your `#contantSwap` empty and then append contents to it
event.preventDefault();
return false;
});
I hope this will works
Assuming your data is HTML, then you can do the following using jQuery replaceWith():
$('#contentSwap').replaceWith(data);
Also, you may want to only import the portion of the HTML from the data by doing the following:
$('#contentSwap').replaceWith($('#somedivElement', data));
Related
I am using following code to show some hidden Bootstrap wells on same pages when a menu item is clicked (works like tabbed content shower). It is working fine, but I want to be able to use it to go to other pages and show a well (based on id attribute there. Its not working that way, please help.
$(document).ready(function()
{
var navItems = $('.menu-level-2 li > a');
var navListItems = $('.menu-level-2 li');
var allWells = $('.menu-level-2-content');
var allWellsExceptFirst = $('.menu-level-2-content:not(:first)');
allWellsExceptFirst.hide();
navItems.click(function(e)
{
e.preventDefault();
navListItems.removeClass('active');
$(this).closest('li').addClass('active');
allWells.hide();
var target = $(this).attr('data-target-id');
$('#' + target).show();
});
});
The question is not fully clear to me, but if you want to go to another page (when clicked on navigation), and on that another page, you want to automatically show that tabbed content, then you should do like this:
navItems.click(function(e)
{
..........
var target = $(this).attr('data-target-id');
window.location='http://example.com/mypage.php#requested_id='+target;
});
and on the target mypage.php, you should have javascript:
$(document).ready(function()
{
if (window.location.hash){
.....
allWells.hide();
$('#' + window.location.hash).show();
}
}
I'm trying to search the net, but no result...
Simple; how can I get other tag's css and add it to other on click?
For example:
I have b tag with css. I need to copy it's css to a tag on click.
var css = $('b').css();
$('.switch > a').click(function() {
$(this).css(css);
});
Is it something like this?
use cssText to get and set all the current styles
var css = $('b').css('cssText');
$('.switch > a').click(function(e) {
e.preventDefault();
$(this).css('cssText', css);
});
FIDDLE
If you know which class is on your id, just do something like that
$('#YourId').attr('class', 'yourCssClass');
If you don't know it's class:
var classA = $('#YourId').attr('class');
$('#YourIdB').attr('class', classA);
var newclass= $('b').attr('class');
$('.switch > a').click(function() {
$(this).attr('class','newclass');
});
Although I found several answers to select a href attribute neither of them is working for me. Maybe someone can help.
The html is as follows
<div class="galleryitem">
<div class="itemlink">
Page
</div>
<div class="itemimg">
test1.png
</div>
</div>
<div class="galleryitem">
<div class="itemlink">
Page 1
</div>
<div class="itemimg">
test2.png
</div>
</div>
Now i want to geht all the attribute values in the hrefs and tried with
$('.galleryitem').each(function() {
var link = $(this).children('itemlink a').attr('href');
var img = $(this).children(".itemimg a").attr("href");
//jQuery("#somediv").append("<a href='" + link + "'><img class='cloudcarousel' src='" + img + "'/></a>");
});
I dont know why link and img are undefined. Even $(this).children('.itemlink a') is undefined.
Can anyone help on this?
Try with find
$('.galleryitem').each(function() {
var link = $(this).find('itemlink a').attr('href');
var img = $(this).find(".itemimg a").attr("href");
//...
})
you want to sure the .find() method instead of .children which only grabs the immediate descendants. (you also have a small error missing the period in itemlink)
var link = $(this).find('.itemlink a').attr('href');
var img = $(this).find(".itemimg a").attr("href");
should work for you, and here is a fiddle: http://jsfiddle.net/hQeu3/
the reason .children doesn't works is that there are no immediate descendents that match this selector '.itemlink a'. jQuery grabs the divs (".itemlink"), and then tries to filter to the selector, which fails in this case. it is essentially equal to
$(this).children().filter('.itemlink a'); //won't work!
if you want to use children you could do
$(this).children('.itemlink').children("a").attr('href');
You could do as follows:
$('.galleryitem').each(function() {
var link = $('.itemlink > a', this).attr('href');
var img = $('.itemimg > a', this).attr('href');
});
which take into account that .itemlink and .itemimg are a direct parent of the <a> element.
I have few anchor tags inside a div and I need to retrieve the href values of all anchor tags.
For example
<div id="sample">
<ul>
<li>Location1</li>
<li>Location2</li>
<li>Location3</li>
<li>Location4</li>
</ul>
</div>
Assuming I am in /location1, the li that has a href="/location1" should have a separate background color, say for example red. If I am in /location2 the corresponding li should have the same red color.
I am trying to retrieve the page url first and then store it in a variable.
var pageurl = (window.location.pathname);
But not too sure on how to retrieve the href and then map it based on the page urls.
You do something like this:
// Get the active link first
var $links = $('#sample a').filter(function() {
return this.href && this.href == location.pathname;
});
// Highlight the current li having the link
$links.closest('li').addClass('active');
In the active class set whatever style you want to apply.
This is jQuery code, need to add jQuery library to work. It will work on page load
jQuery(document).ready(function(){
var url=document.URL.split('?')[1];
if(url == undefined){
url = '';
}
if(url != ''){
url = '#'+url;
jQuery(url).trigger('click');
}
var url=document.URL.split('?')[1];
if(url == undefined){
url = '';
}
if(url != ''){
// do here what you want to do
}
}
);
$(document).ready(function(){
$('#sample ul li a').each(function(e){
var href = $(this).attr('href');
// do something with href
});
});
I am working on the tabs page... I am trying to get the id's of li from the loop and then hide it. the id's is not found.
<ul>
<li id="Page1" class="tab">Page2</li>
<li id="Page2" class="tab">Page2</li>
</ul>
jquery code:
$(".tab").click(function() {
var thisclick = $(this).attr("id");
var links = $(this).parent();
$(links).each(function() {
$("#PG_" + $(this).attr("id") ).hide();
});
$("#PG_" + thisclick).show();
});
If I understand your problem correctly you have some corresponding elements on the page that should be shown only if underlying link has been clicked. If that's the case then this would work:
$(".tab").click(function() {
var thisclick = $(this).attr("id");
var links = $(this).parent().children();
$(links).each(function() {
$("#PG_" + $(this).attr("id")).hide();
});
$("#PG_" + thisclick).show();
});
http://jsfiddle.net/gdc88/4/
because the links variable is a pointer to the ul element:
var links = $(this).parent();
change to this one may help you:
$(".tab").click(function() {
var thisclick = $(this).attr("id");
var links = $(this).parent();
$(links).find("li").each(function() {
$("PG_" + $(this).attr("id") ).hide();
});
$("PG_" + thisclick).show();
});
Also, you can use
$(links).children("li").each( //etc
OR
$("li", links).each( //etc
At first glance, you want jQuery to query for a Nodename called PG_Page1 for instance, which most likely, will have no result. Unless you got tags like
<PG_Page1></PG_Page2>
somewhere on your page. So my guess is, you either forgot the prefix the string with a . for a classname, or a # for an id.
And by the way, you can just access this.id instead creating a jQuery wrapper object and finally call attr() on it.
Do you miss # in the selector?
$("#PG_" + $(this).attr("id") ).hide();
With a small class addition to your HTML, you can simplify your jQuery. Like so
<ul>
<li id="Page1" class="tab">Page1</li>
<li id="Page2" class="tab">Page2</li>
</ul>
<div id='PG_Page1' class="page"> content from page 1 here </div>
<div id='PG_Page2' class="page"> content from page 2 here </div>
jQuery
$(".tab").click(function() {
var thisclick = $(this).attr("id");
$('div.page').each(function(){
$(this).hide();
$("#PG_" + thisclick).show();
});
});
Example: http://jsfiddle.net/jasongennaro/fZNUH/