how extract title from link and place into other page on click event using jquery

[pranavpatil19]

1)i have two page abc. html and xyz .html

in abc.html i place a link

dadad

2) in xyz .html

but i cant extract title from that link and place it into div tag pf xyz.html page ..on same click event how can i do that please help me

here i just want to give name of my video…..if this not work plese telll onother meth0d

[JohnMotylJr]

@pranavpatil19,

Not too sure what the pros would do but i got a SUPER SIMPLE solution. If you just need a title from an element to a different page that’s too easy:

The html

<a title="dasdasdadad" href="xyz.html?http://www.youtube.com/embed/Aw03bV9mlQU">dadad</a>

Get the title

var getTitle = function(el) {

return $(el).attr('title');

};



getTitle('a');

// returns 'dasdasdadad'

Next take that data and set it into local storage

window.localStorage.setItem('title',getTitle('a'));

var s = window.localStorage.getItem('title');

On your xyz.html page call your stored data

var new_title = window.localStorage.getItem('title');

$(element).attr('title', new_title);

One last thing, im not really sure what your code above is trying to do since some is in pre/code and some aren’t. I suggest making a use-case, like Code Pen, that way others can clearly see the code you are having trouble with.

http://codepen.io/johnmotyljr/pen/zpFKm

[pranavpatil19]

http://www.sendspace.com/file/fuqrcm <=== download my demo file
or
http://www.megafileupload.com/en/file/398577/chek-this-code-zip.html

please check whre i am wrong. in index.html page .i click on link..then this redirecrt me to a.html

at click event video load in iframe but my link title not load in div tag .div tag presnt in a.html

[JohnMotylJr]

@pranavpatil19 ,

Not 100% if this is what you wanted but what I did here was:

1. Cleaned your code up
2. Added a link to jQuery
3. Created a function to get the anchor tag title attribute
4. Parsed the anchor tag to extract only the youtube link (everything AFTER the ?)
5. Stored both values into local storage
6. On second page created a function to get and set the new attributes for your iframe
7. ** i heavily commented the code **

If you need anything further feel free to give me a hollar. Below is a link to the corrections with the same files ( index.html && a.html ).
Download link for: Your finished code

[pranavpatil19]

problem accor..
check this code where i wrong
http://www.sendspace.com/file/6tl3x6

in my second page contain attribute have title tag

whaen i run this code all title present in webpage attribute show

what can i do now.. i just tryind to change title atttriblte to titl and change according to jquery put it cant help ..i got mesage undefined

[JohnMotylJr]

Solutions by file:

index.html

1. Line *: Try using some kind of text editor so you dont have crazy amounts of white space and tabs. Indentation is important because:

       a. Clean and readable

       b. Easily shows parent/child relationship

   

2. Line 5: Try loading your script files into the head or at least bottom of the body. They are being wrapped in the html element.
3. Line 6: In HTML5 there is no need to include type="text/javascript" in your script tags.
4. Line 17: Missing a closing </nav> tag.
5. Line 12: Suggest maybe changing the anchor’s id="titl" into something more semantic or at least, less confusing. ie id="youtube-link"
6. Line 12: a tag cannot have a property of titl, change to title=””.

Permitted parent elements

Any element that can contain phrasing elements, any element that can contain flow elements

Source: W3C

7. Line 12: Your anchor tag includes two divs and one img (Not saying we cant work around having content clickable).
8. Line 12: data-iframe="true" is kind of redundant and not needed.

What shouldn’t I use data attributes for?

Although flexible, data attributes aren’t an appropriate solution for all problems.

Data attributes should not be used if there is a existing attribute or element which is more appropriate for storing your data. For example, date/time data should probably be presented semantically in a time element instead rather than stored in custom data attributes.

Source: HTML5 Doctor

9. Line 12: Rather then using <data-title="The Huner <small>Video Opens in ColorBox</small>" try using title=””.
10. Line 15: You are using the same title over. You could always leave the title blank and have a possible jQuery solution:

    $('a').attr('title', 'Video opens in ColorBox');

a.js

1. Line 8: Spelled title incorrectly, try return $(el).attr('title');

output.html

1. Line *: Good practice to refrain from CAPITALIZING some of your tags, stick to lowercase all around.
2. Line 18: List elements are formed without <ul> or <ol>.

b.js

1. Line 23: Missing semicolon;

Other suggestions!

1. For your example, it wouldn’t hurt to just have one(1) javascript file that both your pages link to.
2. In order to not throw any errors & you have local videos to add, you can use the <video>&ltvideo> tags. An iframe cannot set MIME types.

Download the latest code.

[pranavpatil19]

this is code work only for link1

when i enter anothr link on the index page..

every time first video is playing…this code work only for link1 ..

[pranavpatil19]

hey hi

you actually help me , topic is how extract title from link and place into other page on click event using jquery

you send me a complete code…. but in that code have one bug

this code work only for link 1

when i type 2nd url and click on second url….. video of first url is start playing…why this happen

check this=> just add second link in index.html and provide new video link and click on second link.. you will understand what is error
http://cloud.johnmotyljr.com/demos/pranavpatil19/Code_Complete_2.zip

https://css-tricks.com/forums/discussion/23073/how-extract-title-from-link-and-place-into-other-page-on-click-event-using-jquery#Item_7

[JohnMotylJr]

You need to understand why it is not working, hence, look into jQuery selectors.

[pranavpatil19]

i tried but its not help me…please help me

[Author]

Posts