href link in jqxMenu built from JSON data

[zohaibMember]

Hi,

I am using jqxMenu built from JSON data.

I can see text,parentid and id attribute in JSON data.

I want to know how to add href link to menu items so that after click on menu I can redirect.

– Thanks
Zohaib.

[DimitarParticipant]

Hello Zohaib,

Please take a look at the forum topic JSON menu page navigation. We hope it is helpful to you.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[zohaibMember]

Hi Dimitar,

Thanks for reply.

I can see for each menu item I need to specify url in itemclick event.

I have menu of around 30 to 40 submenu.

It will be difficult to write if condition for each menu and sub menu item.

Can we have “href” or “URL” attribute in JSON data and based on it will work. OR any other modular way.

– Thanks
Zohaib.

[DimitarParticipant]

Hi Zohaib,

Unfortunately there is no other way to add a link functionality to a menu item in jqxMenu built from JSON data.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[zohaibMember]

Hi Dimitar,

I have added one attribute name “url” in JSON data.

I want to access this attribute in itemclick event and alert url same like id and text.

Following code shows url added in JSON data and alert in itemclick event.

Do you have any idea?

"id": "2",
"parentid": "1",
"url": "www.google.com",
"text": "Sub Menu2"

$("#jqxWidget").bind('itemclick', function (event) 
{
	alert(event.args.id);
	alert($(event.args).text());
	//alert($(event.args).url()); 
	test();
	//$("#eventLog").html("Id: " + event.args.id + ", Text: " + $(event.args).text());
});
	

– Thanks
Zohaib.

[DimitarParticipant]

Hi Zohaib,

Other data fields except id and text cannot be accessed. These can be accessed due to different reasons:

1) There is a source id property where you explicitly set it, e.g.:

            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'name' },
                    { name: 'type' },
                    { name: 'calories', type: 'int' },
                    { name: 'totalfat' },
                    { name: 'protein' },
                ],
                id: 'id',
                url: url
            };

2) As for the text, it is accessed via the jQuery .text() method.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[zohaibMember]

Hi Dimitar,

Many thanks for reply and solution.

Now url attribute is set.

How can I alert url of selected item from menu using itemclick function.

Any Idea?

I try following but no success.

 // prepare the data
                var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'id' },
                        { name: 'parentid' },
						{ name: 'url' },
                        { name: 'text' },
                        { name: 'subMenuWidth' }
                    ],
                    id: 'id',
					url: 'url',
                    localdata: data
                };
 
                // create data adapter.
                var dataAdapter = new $.jqx.dataAdapter(source);
                // perform Data Binding.
                dataAdapter.dataBind();
                // get the menu items. The first parameter is the item's id. The second parameter is the parent item's id. The 'items' parameter represents 
                // the sub items collection name. Each jqxTree item has a 'label' property, but in the JSON data, we have a 'text' field. The last parameter 
                // specifies the mapping between the 'text' and 'label' fields.  
                var records = dataAdapter.getRecordsHierarchy('id', 'parentid','items', [{ name: 'text', map: 'label'}],'url');
                $('#jqxWidget').jqxMenu({ source: records, height: 30, theme: theme, width: '800px' });
                $("#jqxWidget").bind('itemclick', function (event) 
				{
                    alert(event.args.id);
					alert(event.args.url);
					/*
					var htmlElement = event.args.element;
					var item = $('#jqxWidget').jqxMenu('getItem', htmlElement);
					var parentId = item.parentId;
					alert(parentId);
					/*
					alert(event.args.url);
					alert($(event.args).url());
					*/
					//alert($(event.args).url()); 
					var url ="http://www.google.com";
					header_url(url);
					//$("#eventLog").html("Id: " + event.args.id + ", Text: " + $(event.args).text());
                });

[zohaibMember]

Hi Dimitar,

If I set url in li element then it is possible alert in itemclick function event.

Any idea?

<ul class="jqx-widget-content jqx-menu-dropdown" style="overflow: hidden; position: absolute; left: 0px; display: inherit; top: -256px; margin-left: 0px; padding-left: 2px;">
			<li url="http://www.google.com" id="3" item-label="رسالة الاكاديمية" class="jqx-item jqx-menu-item jqx-rc-all">رسالة الاكاديمية</li>
			<li url="http://www.google.com" id="4" item-label="اعضاء مجلس ادارة الاكاديمية" class="jqx-item jqx-menu-item jqx-rc-all">اعضاء مجلس ادارة الاكاديمية</li>
			<li url="http://www.google.com" id="5" item-label="الرؤية الرسالة الاكاديمية" class="jqx-item jqx-menu-item jqx-rc-all">الرؤية الرسالة الاكاديمية</li>
			<li url="http://www.google.com" id="6" item-label="استراتيجيتنا" class="jqx-item jqx-menu-item jqx-rc-all">استراتيجيتنا</li>
			<li url="http://www.google.com" id="7" item-label="ضمان الجودة" class="jqx-item jqx-menu-item jqx-rc-all">ضمان الجودة</li>
			<li url="http://www.google.com" id="8" item-label="حقائق و أرقام" class="jqx-item jqx-menu-item jqx-rc-all">حقائق و أرقام</li>
			<li url="http://www.google.com" id="9" item-label="حقائق و لوائح" class="jqx-item jqx-menu-item jqx-rc-all">حقائق و لوائح</li>
			<li url="http://www.google.com" id="10" item-label="دليل الاتصال" class="jqx-item jqx-menu-item jqx-rc-all">دليل الاتصال</li>
			<li url="http://www.google.com" id="11" item-label="موقع الاكاديمية" class="jqx-item jqx-menu-item jqx-rc-all">موقع الاكاديمية</li>
		</ul>

– Thanks
Zohaib.

[DimitarParticipant]

Hi Zohaib,

As for your first query, the url property of the source specifies the grid source, not a custom value within itself.

As for your second example, a custom property to an HTML element (i.e. url) would not be recognised by jQuery an thus it is, too, not useful in this situation.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[zohaibMember]

Hi Dimitar,

Thanks for reply.

My idea when user click on menu OR submenu then call javascript and redirect using window.parent.location=url;

This solution will work for 30 to 50 more menu and sub menu items.

Writing if condition and redirecting will need lot of code as we need to write if condition for each menu or submenu (30 to 50 more)

JSON menu page navigation.

This solution will be helpful for other users and community with less code.

If you know any way to get url value of selected menu item in itemclick event will be great.

– Thanks
Zohaib.

[DimitarParticipant]

Hi Zohaib,

As of now, the only solution on this matter is the one posted in the JSON menu page navigation.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[zohaibMember]

Hi Dimitar,

I got the solution and it is working for me.

I have set url in li attribute and get attribute using JQuery using ID.

Following is the solution example.

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<ul>
	<li url="http://www.google.com" id="1">Google</li>
	<li url="http://www.yahoo.com" id="2">Yahoo</li>
	<li url="http://www.bing.com" id="3">Bing</li>
	<li url="http://www.facebook.com" id="4">Facebook</li>
	<li url="http://www.amazon.com" id="5">Amazon</li>
</ul>
<script>
$(function() {
    alert($('#3').attr('url'));
	var url = $('#'+event.args.id).attr('url');
	header_url(url);
  });
function header_url(url)
{
	window.parent.location=url;
} 
</script>
</body>
</html>

– Thanks
Zohaib.

[siouxMember]

Hi

I’ve done that by

                $("#jqxWidget").on('itemclick', function (event) {
	           href = dataAdapter.recordids[event.args.id].href;
		   if (href!=undefined) 	window.open(href, '_blank' );
                });

using:

  var source =
                {
                    datatype: "json", 
                    async: false,
                    datafields: [
                        { name: 'id' },
                        { name: 'parentid' },
                        { name: 'text' },
			{ name: 'href' },
                        { name: 'subMenuWidth' }
                    ],
                    id: 'id',
		   url: './_data/menu.json'
                };

Martin

[Author]

Posts