• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 297
  • Last Modified:

jQuery ViewTree

Im attempting to build a simple Tree navigation structure using jQuery (very unexperienced with jQuery), and when I run the code, I get 'Expected identidier' on the line '$("#divBranch_" . nodeID . "_open").html(html);'

The idea is when you click on a folder it fires an AJAX request to fill in the code, and puts in the responded HTML into id "divBranch_00000-00000-00000_open"

<HTML>
<HEAD>
    <script type="text/javascript" src="jquery-1.6.4.min.js"></script>
</HEAD>
<BODY>
			<div id="divTree" style="width:200px; height:500px; float:left;">
				<script type="text/javascript">
					$(document).ready(function() {
						$(".folderTriggerShow").click(function(nodeID) {
							$.ajax({
								type: 'GET',
								url: 'viewTree.htm?TreeNode=' . nodeID,
								dataType: 'html',
								success: function(html, textStatus) {
									$("#divBranch_" . nodeID . "_open").html(html);
									$("#divBranch_" . nodeID . "_open").css('display','inline');
									$("#divBranch_" . nodeID . "_closed").css('display','none' );
								},
								error: function (xhr, textStatus, errorThrown) {
									$("#error").append("Failed - " + errorThrown ? errorThrown : xhr.status);
								}
							})
						});
					})
					
					$(document).ready(function() {
						$(".folderTriggerHide").click(function(nodeID) {
							$("#folderTriggerHide").html("");
							$("#divBranch_" . nodeID . "_open").css('display','none');
							$("#divBranch_" . nodeID . "_closed").css('display','inline' );
						});
					})
				</script>
				
				<div class="folderTriggerShow" id="divBranch_00000-00000-00000_closed" style="display:inline;">
					<img src="closedFolder.jpg" />Base Folder<br>
				</div>
				<div class="folderTriggerHide" id="divBranch_00000-00000-00000_open" style="display:none;">
				</div>
			</div>
</BODY>
</HTML>

Open in new window


Any ideas what Im doing wrong?

Thank you for any assistance.
0
tonelm54
Asked:
tonelm54
2 Solutions
 
Gurvinder Pal SinghCommented:
make it

$("#divBranch_" + nodeID + "_open").css('display','none');

I guess you are confusing this with php :)
0
 
Kiran SonawaneProject LeadCommented:
Couple of things
1) + sign is used to concat the string instead of .
2) Your nodeID is wrong. See below how to get the nodeID

Check below code

<HTML>
<HEAD>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
</HEAD>
<BODY>
      <div id="divTree" style="width:200px; height:500px; float:left;">
        <script type="text/javascript">
          $(document).ready(function() {
            $(".folderTriggerShow").click(function() { 
            nodeID = $(this).attr("id").replace("divBranch_","").replace("_closed","");
              $.ajax({
                type: 'GET',
                url: 'viewTree.htm?TreeNode=' . nodeID,
                dataType: 'html',
                success: function(html, textStatus) {
                  $("#divBranch_" + nodeID + "_open").html(html);
                  $("#divBranch_" + nodeID + "_open").css('display','inline');
                  $("#divBranch_" + nodeID + "_closed").css('display','none' );
                },
                error: function (xhr, textStatus, errorThrown) {
                  $("#error").append("Failed - " + errorThrown ? errorThrown : xhr.status);
                }
              })
            });
          })
          
          $(document).ready(function() {
            $(".folderTriggerHide").click(function(nodeID) {
              $("#folderTriggerHide").html("");
              $("#divBranch_" + nodeID + "_open").css('display','none');
              $("#divBranch_" + nodeID + "_closed").css('display','inline' );
            });
          })
        </script>
        
        <div class="folderTriggerShow" id="divBranch_00000-00000-00000_closed" style="display:inline;">
          <img src="closedFolder.jpg" />Base Folder<br>
        </div>
        <div class="folderTriggerHide" id="divBranch_00000-00000-00000_open" style="display:none;">
        </div>
      </div>
</BODY>
</HTML>

Open in new window

0
 
tonelm54Author Commented:
Stupid me and concat!!!


Thank you
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now