Ibraheem Osama Mohamed (ابراهيم اسامه محمد)

Welcome to my blog :)

Control html a tag’s href in code in Windows 8 WinJs (ex Navigation)

leave a comment »

I was working in an application that have many pages. A customer requirement was to handle clicking on a text in the Windows 8 JavaScript  application , The first idea I got is to put this text inside an a tag and make the navigation using href attribute.
But what would be the situation if you need to pass data to the other page ??
The best practice in Windows 8 navigation is to use WinJS  Navigation.
I found something in the MSDN , how to listen to the a tag click event and stop it then do your own navigation
So I registered this event at the beginning of the application at the ready function

WinJS.Utilities.query(“a”).listen(“click”, linkClickEventHandler, false);

and I added LinkClickEventHandler function event handler. But now how do I know which a is clicked ??
In the href of the target a I put the id of the text I want like (href=’id=5′) then I made a check
if the clicked a href contains id don’t navigate (Because I ll navigate my own way) and I needed to  pass more data so I put this data into the data- attr in the a like data-name=’MyName’. the following code will illustrate more

 function linkClickEventHandler(eventInfo) {

        if (eventInfo.target.nameProp.indexOf("id=") >= 0) {
            eventInfo.preventDefault();

            var ment = $(eventInfo.target).attr('data-ment');
            var inf = $(eventInfo.target).attr('data-inf');
            var imgUrl = $(eventInfo.target).attr('data-url');
            var text = eventInfo.currentTarget.innerHTML;
            var user = { id: data, text: text, ment: ment, inf: inf, imgUrl: imgUrl };
            WinJS.Navigation.navigate('/pages/tweeps/tweeps.html', JSON.stringify(user));
        }
    }
Hope you get the point :)2056910448_thanks_xlarge
Advertisements

Written by Ibraheem Osama Mohamed

May 26, 2013 at 4:44 pm

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: