1

Ok, I have a page that that has a DataFormWebPart that basically displays the info from a document library. Now what I want to do is, using jquery, display or hide a section in the web part.

I can do this beautifully, except for one problem: I need the id of the tags of both the hyperlink that I click to toggle the display and the id of the div that is the section that is displayed/hided.

$("#button").click(function(event) {
    $("#section").slideToggle("slow");
});

SharePoint seems to automatically add a generated id to any tags added in a web part, which makes sense as these tags can be repeated any number of times
example:

<a id="{generate-id()}">

Example of this generated id once generated which can be seen when viewing the source code of the page:

<a id="ID0ECAA">

This obviously means that any static id's used won't work in the web part.

Now, what I've done so far is try to use the SharePoint Client Object Model to put the id's of these tags into an array using javascript, but have completely failed in the attempt. One of the reasons I believe I'm failing is because I'm not trying to get any of the values of any fields, but the id of a tag that simply sits in the web part.

Is this at all possible?

Improve this question

2 Answers 2

Reset to default
2

Webparts will generally have the same generated id, that being said I still don't like this way so I do the following.

I put an id on the zone in the master page, so that you can identify the web part easier.

You can then use the coolness of JQuery to do what you want.

$('#myzone').find('a')

For example will pick up all the elements in that zone.

You can easily refine the selector with JQuery, and remember try and avoid $('#id div b a') type selectors with JQuery, it's a performance hit. find() is nicer and you can then do a for each etc on the returned values.

If you have some exact html and you are stuck, we can fire up a jsfiddle and get it working for you.

Improve this answer
2
  • I think i understand the gist of it, but when you say find('a'), what is this a? Perhaps the name of the tag? Commented Oct 24, 2012 at 10:38
  • An <a> element in the DOM Commented Oct 24, 2012 at 11:25
2

To expand upon @Hugh-wood's answer: keep in mind that, depending on what your web part does, people might wish to add more than one to a page. If that's possible, you'll need to ensure that the id you give to the DOM element is truly unique.

Personally, I declare the main container from inside my web parts, with an id that includes the webpart id. Then I pass the id along to the main javascript function as an argument.

protected override void RenderContents(HtmlTextWriter html){
    html.Write(string.Format("<div id=\"myzone-{0}\">", this.ID));

    //include your own JS functions
    html.Write("<script type=\"text/javascript\" src=\"path_to_my_js_file\"></script>");

    //output your own stuff here

    //call the function when the page is loaded
    html.Write("<script>$(document).ready(function(){MyFunction(\"" + this.ID + "\");});</script>");

    html.Write("</div>");
}

This will give each instance of your webpart its own div with a unique ID. Downside is that the .js file will still be included for each instance but I use mostly small functions so I don't consider it a big deal at the moment.

Improve this answer
1
  • This is a good technique for custom web parts definitely. Commented Oct 24, 2012 at 11:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.