onClick li item in frame focus move on top

zohaib82 · January 12, 2013, 8:26am

Hi,

In my project I am calling ul and li data in Iframe and when I click on link then it move fucus on top instead of selected item.

Following is the example of the problem.

testFrame.htm



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Tree Frame</title>
</head>
<body>
<table width="50%" border="0">
<tr id="frameRow">
<td>
<iframe id="treeFrame" src="treeFrame2.htm" width="50%" height="100%" scrolling="yes" frameborder="0">
</iframe>
<td>
</tr>
</table>
</body>
</html>

testFrame2.htm



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test Frame2</title>
<script language="javascript" type="text/javascript">
function focusMe(id)
{
documentBygetelementsbyid(id).focus();

}
</script>
</head>

<body>
<ul>
  <li><a href="#" id="1" onclick="javascript:focusMe('1');">menu1</a></li>
  <li><a href="#" id="2" onclick="javascript:focusMe('2');">menu2</a></li>
  <li><a href="#" id="3" onclick="javascript:focusMe('3');">memnu3</a></li>
  <li><a href="#" id="4" onclick="javascript:focusMe('4');">menu4</a></li>
  <li><a href="#" id="5" onclick="javascript:focusMe('5');">menu5</a></li>
  <li><a href="#" id="6" onclick="javascript:focusMe('6');">menu6</a></li>
  <li><a href="#" id="7" onclick="javascript:focusMe('7');">menu7</a></li>
  <li><a href="#" id="8" onclick="javascript:focusMe('8');">menu8</a></li>
  <li><a href="#" id="9" onclick="javascript:focusMe('9');">menu9</a></li>
  <li><a href="#" id="10" onclick="javascript:focusMe('10');">menu10</a></li>
  <li><a href="#" id="11" onclick="javascript:focusMe('11');">menu11</a></li>
  <li><a href="#" id="12" onclick="javascript:focusMe('12');">menu12</a></li>
  <li><a href="#" id="13" onclick="javascript:focusMe('13');">menu13</a></li>
  <li><a href="#" id="14" onclick="javascript:focusMe('14');">menu14</a></li>
  <li><a href="#" id="15" onclick="javascript:focusMe('15');">menu15</a></li>

</ul>
</body>
</html>

Any Solution?

Thanks
Zohaib.

James_Hibbard · January 12, 2013, 11:04am

Hi Zohaib,

The problem is here:

function focusMe(id){
  documentBygetelementsbyid(id).focus();
}

Change that to this:

function focusMe(id){
  document.getElementById(id).focus();
}

And all should be good.

zohaib82 · January 12, 2013, 5:33pm

hi,

sorry I got to update in last post code.

the problem still exists


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript">
function focusMe(id)
{

document.getElementById(id).focus();

}
</script>
</head>

<body>
<ul>
  <li><a href="#" id="1" onclick="javascript:focusMe('1');">menu1</a></li>
  <li><a href="#" id="2" onclick="javascript:focusMe('2');">menu2</a></li>
  <li><a href="#" id="3" onclick="javascript:focusMe('3');">memnu3</a></li>
  <li><a href="#" id="4" onclick="javascript:focusMe('4');">menu4</a></li>
  <li><a href="#" id="5" onclick="javascript:focusMe('5');">menu5</a></li>
  <li><a href="#" id="6" onclick="javascript:focusMe('6');">menu6</a></li>
  <li><a href="#" id="7" onclick="javascript:focusMe('7');">menu7</a></li>
  <li><a href="#" id="8" onclick="javascript:focusMe('8');">menu8</a></li>
  <li><a href="#" id="9" onclick="javascript:focusMe('9');">menu9</a></li>
  <li><a href="#" id="10" onclick="javascript:focusMe('10');">menu10</a></li>
  <li><a href="#" id="11" onclick="javascript:focusMe('11');">menu11</a></li>
  <li><a href="#" id="12" onclick="javascript:focusMe('12');">menu12</a></li>
  <li><a href="#" id="13" onclick="javascript:focusMe('13');">menu13</a></li>
  <li><a href="#" id="14" onclick="javascript:focusMe('14');">menu14</a></li>
  <li><a href="#" id="15" onclick="javascript:focusMe('15');">menu15</a></li>

</ul>

</body>
</html>

Thanks
Zohaib

James_Hibbard · January 12, 2013, 6:24pm

Ahh, I understand your problem now. Sorry.

The reason this is happening is that the link is still being followed.
You need to change your function to this:

function focusMe(id){
  document.getElementById(id).focus();
  return false;
}

I also took the liberty of refactoring your code a little.

The iframe:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>iFrame</title>
  </head>

  <body>
    <ul id="list">
      <li><a href="#">menu1</a></li>
      <li><a href="#">menu2</a></li>
      <li><a href="#">memnu3</a></li>
      <li><a href="#">menu4</a></li>
      <li><a href="#">menu5</a></li>
      <li><a href="#">menu6</a></li>
      <li><a href="#">menu7</a></li>
      <li><a href="#">menu8</a></li>
      <li><a href="#">menu9</a></li>
      <li><a href="#">menu10</a></li>
      <li><a href="#">menu11</a></li>
      <li><a href="#">menu12</a></li>
      <li><a href="#">menu13</a></li>
      <li><a href="#">menu14</a></li>
      <li><a href="#">menu15</a></li>
    </ul>
    
    <script type="text/javascript">
      var ul = document.getElementById("list");
      var items = ul.getElementsByTagName("a");
      for (var i = 0; i < items.length; ++i) {
        items[i].onclick = function(){
          this.focus();
          return false;
        }
      }
    </script>
  </body>
</html>

zohaib82 · January 12, 2013, 7:15pm

Dear Pullo,

Excellent Many Thanks

Zohaib.

zohaib82 · January 13, 2013, 5:58am

Hi,

This is bit complicated but can you give try to apply this solution for JQWidgets Tree in iFrame

I am working on it.

http://www.jqwidgets.com/community/topic/onclick-jqxtree-focus-move-on-top/

Thanks
Zohaib.

James_Hibbard · January 13, 2013, 12:30pm

Hi Zohaib,

Could you provide a link to an example where I can see this in action?
The code in the post you linked to contains a bunch of files I cannot reference (e.g. gettheme.js).

zohaib82 · January 13, 2013, 1:14pm

Hi,

Sorry I can not upload jqwidgets-ver2.6.0.zip file because it it more than MB but you can easily download from website.

http://www.jqwidgets.com/download/ and put treeFrame.htm and treeFrame2.htm file in root and include in JQWidgets file.

Following is the file and jqxtree.js is the main file for Tree functionality.

treeFrame2.htm



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title id='Description'>In this demo the jqxTree is built from JSON data.</title>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="scripts/gettheme.js"></script>
    <script type="text/javascript" src="scripts/jquery-1.7.2.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/jqxpanel.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxtree.js"></script>
	<script language="javascript" type="text/javascript">
		function focusMe(id)
		{
			document.getElementById(id).focus();
			return false;
		}
		function returnfalse(this)
		{
			//alert('hi');
			document.getElementById("11").focus();
			this.focus();
			return false;
		}
	</script>
	<script type="text/javascript">

/*
	document.getElementById("zohaib").focus();

	var items = ul.getElementsByTagName("li");
	var x=document.getElementsByTagName("li");
	alert(x.length);

      for (var i = 0; i < items.length; ++i) {
        items[i].onclick = function(){
          this.focus();
          return false;
        }
      }
	  */

</script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                var theme = getTheme();
                var data = [
                { "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"
                }, {
                    "text": "Chocolate Beverage",
                    "id": "1",
                    "parentid": "-1"
                }, {
                    "id": "6",
                    "text": "Espresso Beverage",
                    "parentid": "-1"
                }, {
                    "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": "12",
                    "text": "Frappuccino",
                    "parentid": "-1"
                }, {
                    "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' }
                    ],
                    id: 'id',
                    localdata: data
                };
                // create data adapter.
                var dataAdapter = new $.jqx.dataAdapter(source);
                // perform Data Binding.
                dataAdapter.dataBind();
                // get the tree 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').jqxTree({ source: records, width: '300px', theme: theme });
				$('#jqxWidget').jqxTree('selectItem', $("#jqxWidget").jqxTree('expandAll'));
				$('#jqxWidget').bind('select', function (event) {
					//var htmlElement = event.args.element;
					//var item = $('#jqxWidget').jqxTree('getItem', htmlElement);
					//var parentId = item.parentId;
					//alert(event.args.element.id);
					//document.getElementById(event.args.element.id).focus();
					//return false;
					//document.getElementById("childID").value=event.args.element.id;
                	//$("#parentID").html("<div style='margin: 10px;'>" + parentId + "</div>");
				});
            });
			function expand_all(){
				$('#jqxWidget').jqxTree('expandAll');
			}

			function collapse_all(){
				$('#jqxWidget').jqxTree('collapseAll');
			}
        </script>
        <div id='jqxWidget'></div>

</div>
</body>
</html>

If this does not work then I will email you source code OR show you demo online.

Thanks
Zohaib.

James_Hibbard · January 13, 2013, 2:15pm

It would be easier for me if you could post a demo online.
I’m off out now, but I can have a look at it later.

James_Hibbard · January 13, 2013, 9:09pm

Hi again,

So, it took me a while to get to the bottom of this.
I believe the guy in the other thread was telling you that this is a kind of bug in jqwidgets and indeed, it doesn’t seem possible to cancel this behaviour and prevent the iframe from jumping (as we did in the previous example).

However, what you can do, is attach an event listener to the window of the iframe and record how far down the frame somebody has scrolled.
Then, when they click on an element, it is sufficient to reposition the the list by setting scrollTop.

Add this code to the bottom of treeFrame2.htm and things’ll work as expected.

$(document).ready(function(){
  var lastTop;
  var timeoutHandle;
  
  var handler =  function() {
    lastTop = $(this).scrollTop();
  }
  
  $(window).scroll(function(){
    clearTimeout(timeoutHandle);
    
    timeoutHandle = setTimeout(function() {
      handler();
    }, 100);  
  });
  
  $('.jqx-tree-dropdown-root').click(function(event){
    $(window).scrollTop(lastTop);
  });
});

zohaib82 · January 14, 2013, 10:47am

Dear Pullo,

You save me from . . .

You are brilliant Man and this forum has brilliant developer to support for complex problems.

Thanks
Zohaib.

James_Hibbard · January 14, 2013, 12:15pm

Hi Zohaib,

No problem. I’m gad I could help you
Thanks for taking the time to follow up.