We Keep Coding

Clone & Append Link to Container, but Append the entire URL — Not the Link Text

This should be easy but I can't find any topics about this, I think it's because I don't know how to phrase it correctly.
Problem:
When you hover over a link it gets cloned & appended to #container — however I want the link in #container to be the actual URL in its entirety, so if a link text says: "here is an article", I want the one that gets appended to #container to show: http:/www.myarticle.com/name-of-article.
I've tried to make my question very visually clear on CodePen, would someone check it out and advice me? :-)
http://codepen.io/StrengthandFreedom/pen/YqNrYO
The jQuery I use:
$('a').one('mouseover', function(){
$(this).clone().appendTo('#container');
});
Either JavaScript or jQuery solutions are fine, I use both.

You need to update the link text to the value of the href attribute.
$('a').one('mouseover', function(){
var href = $(this).attr('href');
$(this).clone().text(href).appendTo('#container');
});
http://codepen.io/anon/pen/eZgeNe

You may use this:
$('a').one('mouseover', function(){
$('#container').append($(this).attr('href'));
});
You need to catch the attribute of the link, which is done by using attr('attribute-handle')

Reload Div Section Only

I don't know if what I am trying to do is possible so I will explain the whole scenario and what I am attempting to do that way if there is a better way you bright people can let me know!
Here is the scenario, I have a view and a PartialView. In the PartialView I have a dropdown list that gets populated via javascript from in the View. This works fine, in the PartialView I have a div that calls a Controller to return results based on a value in the Model passed to it. What I need are the results to be based on the value from the Model AND the dropdown list. Here is the code that works just based on the model value and a hardcoded loc which is what I want to get from the dropdown.
<div id="catalogue-view-action-view-ct" class="async-partial" data-url='#Url.Content("~/Catalogue_Items/ItemsActionViewPartial/")#Model.CatalogueItemID?loc=6&AsyncUpdateID=catalogue-view'>
#if (noJs)
{
<span>
#{ Html.RenderAction("ItemsActionViewPartial", "Catalogue_Items", new { id = Model.CatalogueItemID, location = 6, AsyncUpdateID = "catalogue-view-action-view-ct" }); }
</span>
}
else
{
<img src="#Url.Content("~/assets/images/busy.gif")" /><span> Loading...</span>
}
</div>
This div in the PartialView works great, in the View I have been able to set the data-url attribute no problem with javascript but the page is already loaded so it doesn't update. Is there a way to "refresh" or "reload" just a div not the whole PartialView? If I do the whole PartialView I am just back in the same situation with the html being loaded before the javascript sets the data-url attribute. Here is the javascript in the view:
var myDiv = document.getElementById('catalogue-view-action-view-ct');
url = '~/Catalogue_Items/ItemsActionViewPartial/20144?loc=' + $('#LocationID').val() + '&AsyncUpdateID=catalogue-view-action-view-ct';
myDiv.setAttribute('data-url', url);
$('#catalogue-view-action-view-ct').load(url);
Any help would be greatly appreciated.
UPDATE:
When using a relative path as I do above the data-url gets set properly but the load path is incorrect because it is appended. This is what happens:
data-url="~/Catalogue_Items/ItemsActionViewPartial/20144?loc=40&AsyncUpdateID=catalogue-view-action-view-ct"
This is perfect, exactly what I need, but the path loaded is:
http://www.example.com/catalogue-items/20144/myItem~/Catalogue_Items/ItemsActionViewPartial/20144?loc=40&AsyncUpdateID=catalogue-view-action-view-ct
The relative path get added to the end of my current location, I can fix this except I need to remove the "/myItem" portion as that is a parameter for the view that I don't want in the url. When I use an absolute path I get a cross-origin error. Any suggestions?

With the help of a few comments I was able to find a solution for my issue!
With using $('#catalogue-view-action-view-ct').load(url); there was actually no need to set the data-url.
But in order to have the relative path work properly I needed to surround it with url.content like so:
$('#catalogue-view-action-view-ct').load('#Url.Content("~/Catalogue_Items/ItemsActionViewPartial/")#Model.CatalogueItemID?loc=' + $('#LocationID').val() + '&AsyncUpdateID=catalogue-view-action-view-ct');
loading this value produced the desired results. Thanks #Lal for leading me in the right direction!

workaround to using ID in <a> to call function

I'm using an XML file that has a number for each section. The page loads a link for each section of the XML and puts the article number in the URL parameter (page.html?aid=###). When the link is clicked an overlay iframe pops up the with more information about that article. is calling the overlay iframe popup but I can't use more than one of the same ID for a page.
$(function(){
$('#b1').frameWarp();
});
Instead of using ID="b1", am I able to use each article number for the id? I cannot use class instead of ID.
Would there be another way to do this?

You could use $('a[id^="b"]'), but that's hugely inefficient and will probably match more than what you want it to. Alternatively, you could filter on a regex:
$('a').filter(function(){
var re = /^b[0-9]+$/;
return re.test($(this).attr('id'));
}).frameWarp();
It's not much more efficient, if at all, but at least it would rule out false positives.

Here is the answer courtesy of benalpert on reddit:
$('.b1').each(function() { $(this).frameWarp(); })
This allows the class to be used instead of ID without error.
Thanks to everyone for the help.

Write a function inside jquery .html()

I am running a bg slider..."Supersized - Fullscreen Slideshow jQuery Plugin"
what i need is when a background changes some contents in a specific div must also change...
here i found a code line from script
if (options.slide_captions)
$('#slidecaption').html(options.slides[currentSlide].title);
this one pulls the image title to a specific div, but i want to load unique div for each background change...
or is there any other ways to do??
i have very little knowledge in jquery...
please help
advance thanks...

you can write this:
if (options.slide_captions) $('#slidecaption').html(options.slides[currentSlide].title, function(){
//write the code that load the unique div
});
tell me if it works

http://buildinternet.com/project/supersized/docs.html#theme-after
Check-out the theme.afterAnimation( ) documentation. You can set it to a function that changes the content after the slide changes.

Whats make different in below Jquery code?

I'm working with on developing one of the social networking site and its having some notification features in left panel.
Whenever any user have played a game it will automatically change the number of notification count.
For that i have using below code line.
jQuery('#count_id').load('mypage.php');
But it will retrieve me whole site content with header,footer and content area in the response text, which is wrong as per my requirements.
but if i used below code of line
jQuery('#count_id').load('mypage.php #count_id');
then it will retrieve me a real count but add another div in between the original,
Original html:
<div id="count_id" class="notify">2</div>
and Code after retrieving response:
<div id="count_id" class="notify">
<div id="count_id" class="notify">1</div>
</div>
which is also not as expected. count are right but i don't want to add new div inside a original one.
What should i need to change in my code?
Thanks.

jQuery('#count_id').load('mypage.php #count_id > *');
That would bring only the DOM childs (the content)

Because this is how it works. Also it enables you to attach events to the element you load and delegate them inside this element (so new elements can also benefit from attached JavaScript events) - see .delegate().
If you want to replace the element, you can try the following:
jQuery.get('mypage.php', function(data){
jQuery('#count_id').replace(jQuery(data).find('#count_id'));
}, 'html');
I did not test it, but it should work.
Ivan Castellanos is however right. According to the documentation, you can provide any selector after the first space in the .load()'s parameter.

To retrieve count_id, you can directly get the html value in the div like this:
<script type='text/javascript'>
jQuery(document).ready(function()
{
countVal = $("#count_id").html(); //returns the html content inside the div, which is the count value
countVal = parseInt(countVal); //This will convert the string to type integer
});
</script>
Note:
If you want increase the count and update the div value, you can add the following lines:
countVal++;
$("#count_id").html(countVal);