• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 294
  • 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
 
sonawanekiranCommented:
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

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

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