First element triggered on Menu - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: first element clicked, Menu, trigger

This topic contains 1 reply, has 2 voices, and was last updated by Nadezhda 9 years, 9 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)

Author

First element triggered on Menu Posts

March 8, 2015 at 9:48 am First element triggered on Menu #68171

agrgal

Participant

Hi mates,

I haven’t found a proper answer to my problem on internet, so I’m now asking here. Excuse my poor English! 🙂

I have a jqxMenu working! But I’d like to trigger first element click event when the webpage is first loaded… (div “menuGrupos”).

See my code:

		$("#menuGrupos").jqxMenu({ mode: 'horizontal' , theme:'ui-sunny'});
		$("#menuGrupos").css('visibility', 'visible');
		$('#menuGrupos').on('itemclick', function (event) {
				event.preventDefault;
				// var element = event.args;
				// alert($(event.target).attr("class")); alert($(event.target).attr("id"));
				opcionMenu = $(event.target).attr("id");
				$("#zonaItems").hide();
		  	    eligeGrupoItems(); // función que oculta los items menos los escogidos
				$("#zonaItems").fadeIn("slow");
				// $("#testear").html("Opcion Menu "+$("#menuGrupos li a:first").attr("id"));
		});

I tried things like…
$("#menuGrupos li a:first").trigger("click");
$("#menuGrupos").jqxMenu('openItem', "ACTITUD"); // ACTITUD is the first id attr.

But none of them worked!

HTML:

	echo '<div id="menuGrupos" style="visibility: hidden;"><ul>';
							foreach ($opiniones->listadoDeGrupos["grupo"] as $clave => $valor) {
								echo '<li id="'.$valor.'"><img style="margin-right: 15px; width:15px;" src="imagenes/iconos/item.png"><a id="'.$valor.'" class="grupos">'.$valor.'</a></li>';
							}								
						echo '</ul></div>';

March 10, 2015 at 8:35 am First element triggered on Menu #68250

Nadezhda

Participant

Hello agrgal,

Here is an example which shows how to trigger click event of the first menu item when the webpage is loaded. If you don’t know the id selector of the first item you can use $("#jqxWidget li:first").trigger("click"); instead $("#12").trigger("click");.

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                var data = [
                {
                    "id": "12",
                    "text": "Frappuccino",
                    "parentid": "-1",
                    "subMenuWidth": '250px'
                },
                {
                    "text": "Chocolate Beverage",
                    "id": "1",
                    "parentid": "-1",
                    "subMenuWidth": '250px'
                }, {
                    "id": "2",
                    "parentid": "1",
                    "text": "Hot Chocolate"
                }, {
                    "id": "3",
                    "parentid": "1",
                    "text": "Peppermint Hot Chocolate"
                }, {
                    "id": "4",
                    "parentid": "1",
                    "text": "Salted Caramel Hot Chocolate"
                }, {
                    "id": "5",
                    "parentid": "1",
                    "text": "White Hot Chocolate"
                }, {
                    "id": "6",
                    "text": "Espresso Beverage",
                    "parentid": "-1",
                    "subMenuWidth": '200px'
                }, {
                    "id": "7",
                    "parentid": "6",
                    "text": "Caffe Americano"
                }, {
                    "id": "8",
                    "text": "Caffe Latte",
                    "parentid": "6"
                }, {
                    "id": "9",
                    "text": "Caffe Mocha",
                    "parentid": "6"
                }, {
                    "id": "10",
                    "text": "Cappuccino",
                    "parentid": "6"
                }, {
                    "id": "11",
                    "text": "Pumpkin Spice Latte",
                    "parentid": "6"
                }, {
                    "id": "13",
                    "text": "Caffe Vanilla Frappuccino",
                    "parentid": "12"
                }, {
                    "id": "15",
                    "text": "450 calories",
                    "parentid": "13"
                }, {
                    "id": "16",
                    "text": "16g fat",
                    "parentid": "13"
                }, {
                    "id": "17",
                    "text": "13g protein",
                    "parentid": "13"
                }, {
                    "id": "14",
                    "text": "Caffe Vanilla Frappuccino Light",
                    "parentid": "12"
                }]
                // prepare the data
                var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'id' },
                        { name: 'parentid' },
                        { name: 'text' },
                        { name: 'subMenuWidth' }
                    ],
                    id: 'id',
                    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' }]);
                $('#jqxWidget').jqxMenu({ source: records, height: 30, width: '400px' });
                $("#jqxWidget").on('itemclick', function (event) {
                    if (event.args.id == "12") {
                        alert("1st item is clicked");
                    }
                });
                $("#12").trigger("click");
            });
        </script>
        <div id='jqxWidget'>
        </div>
    </div>
</body>
</html>

Best Regards,
Nadezhda

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

Author

Posts

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.