getting jQuery scripts and content through ajax dynamically
I've got a page which loads a file tree with links to the actual pages and such, with subtrees and everything. But since large folders create huge files, a jQuery script to hide folders would be awesome. There is a problem tho, since the tree is loaded through ajax, and never looks the same, nether does the jQuery. I can generate the jQuery dynamically, but it doesn't load any javascript which is loaded through ajax. Specially not events. (jQuery, onclick)
<ul>
<li><b>www</b> - 5 files, 14 directories, 1877 KB total.
<ul>
<li><b>Admin</b> - 4 files, 3 directories, 44 KB total.
<ul>
<li><b>Editera</b> - 2 files, 16 KB total.
<ul>
<li><a href="../../../lh10fego/Admin/Editera/gastbok_edit.asp">gastbok_edit.asp</a> - <a href="viewSource4.asp?page=lh10fego/www/Admin/Editera/gastbok_edit.asp"> View Source</a> - 1100 bytes, last modified on 2011-01-17 12:06:43. <b> table names found:</b> Gastbok</li>
<li><a href="../../../lh10fego/Admin/Editera/Medlem_edit.asp">Medlem_edit.asp</a> - <a href="viewSource4.asp?page=lh10fego/www/Admin/Editera/Medlem_edit.asp"> View Source</a> - 15671 bytes, last modified on 2011-01-17 12:06:44. <b> table names found:</b> Inlogg</li>
</ul>
</li>
<li><b>Radera</b> - 2 files, 2 KB total.
<ul>
<li><a href="../../../lh10fego/Admin/Radera/gastbok_radera.asp">gastbok_radera.asp</a> - <a href="viewSource4.asp?page=lh10fego/www/Admin/Radera/gastbok_radera.asp"> View Source</a> - 813 bytes, last modified on 2011-01-17 12:06:45. <b> table names found:</b> Gastbok</li>
<li><a href="../../../lh10fego/Admin/Radera/medlem_radera.asp">medlem_radera.asp</a> - <a href="viewSource4.asp?page=lh10fego/www/Admin/Radera/medlem_radera.asp"> View Source</a> - 811 bytes, last modified on 2011-01-17 12:06:45. <b> table names found:</b> Inlogg</li>
</ul>
</li>
<li><b>Uppdatera</b> - 2 files, 2 KB total.
<ul>
sry for the big code, but there is an example of a rendered page and the items in it. I thought that the path variable could be used as a class, therefore giving all items in a path the same class. Thank you for reading my awesome textblock. example: "../../lh10fego/Admin/Radera". Will . and / cause problems? Probably.
Can anyone give me an jQuery code which works in such a way that it will hide/show every item with a class like "myClass" nomatter where they are on the page?
And also a way to activate that code after being added through an ajax-request.
The injected html, including the javascript ends up inside a div in the head of the document.
EDIT: I managed to get almost the needed functionality, but still not through ajax. I used this-keyword and hidden all with the specific class beneath. The problem now is that since the link is inside another link, both the one you clicked and the one at the very top will trigger, hiding everything aswell.
EDIT2:
set fs = CreateObject("Scripting.FileSystemObject")
set folder = fs.GetFolder(path)
currentfolder = path
fname = Replace(folder.path,"/","x")
fname = Replace(fname,".","2")
fname = Replace(fname,":","5") 'removing wierd chars and adding "asd" in middle
fname = Replace(fname,"\","3") 'to avoid multiple hits when searching
fname = Replace(fname,Right(fname,7),"asd" & Right(fname,7))
'Display the target folder and info.
Response.Write("<li onclick=""$(this).find('li." & fname & "').slideToggle();""><b>" & folder.Name & "</b> - " _
& folder.Files.Count & " files, ")
if folder.SubFolders.Count > 0 then
Response.Write(folder.SubFolders.Count & " directories, ")
end if
Response.Write(Round(folder.Size / 1024) & " KB total." _
& vbCrLf)
The problem right now is that since it's applied to nested li-tags whenever i click something, both the one i clicked and the highest li-tag will hide. Also, this test i'm working in right now is without ajax just to ge开发者_高级运维t my jQuery sorted.
for a better understanding: You use ajax for load HTML and Javascript code and injecting those into another HTML page. My question to you is: will also simple Javascript, e.g. alert("test");
, not work after injection?
after ten days I think I've got a soloution:
<html><head>
<script src="./jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function jqueryAjax(url)
{
$.ajax({
url: ""+url,
cache: false,
dataType: "script",
success: function(html){
$("#content").append(html);
}
});
}
</script>
</head>
<body>
<div id="control" style="border: 1px solid green;">
<p><a href="#" onclick="jqueryAjax('htmljs.js'); return false">Ajax with Jquery (1.2.6)</a></p>
</div>
<div id="content" style="border: 1px solid red; width: 640px; height: 480px; top: 200px"></div>
</body></html>
The bad news is: an error message comes up in the error console and I cannot remove those. But it works...
精彩评论