Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

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?

share|improve this question

2 Answers 2

up vote 1 down vote accepted

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.

share|improve this answer
    
I think i understand the gist of it, but when you say find('a'), what is this a? Perhaps the name of the tag? –  Carel Oct 24 '12 at 10:38
    
An <a> element in the DOM –  Hugh Wood Oct 24 '12 at 11:25

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.

share|improve this answer
    
This is a good technique for custom web parts definitely. –  Hugh Wood Oct 24 '12 at 11:26

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.