Geek Answers Handbook

Runat = "server" violates my jquery / css functions

I have a page that changes the media on the page, such as images or PDF, using jQuery so that every user does not require page refresh / access to a new database.

I have a DIV container that contains all this activity. It works and looks great! When I add runat = "server" to the DIV tag, all my nice behavior breaks. This is without code written yet to manipulate the server side of the objects. For some reason, my styles / behaviors are not applied correctly.

I suppose there is something simple, but I'm tired of guessing. I hope someone here knows why this could happen.

Edit: this is an ASP.Net application.

<div id="slidingContent" runat="server" > <div class="item" id="media3" name="media3"> My media here. </div> </div>
+4
source share
4 answers

I assume you have this in the context of a .net application. If so, you should indicate that somewhere in your question. runat="server" will cripple id ; Browse the HTML source in your browser to see what it does. You need to add classes to your markup and change your CSS and JavaScript to use classes instead of ids.

+8
source

As already mentioned, if you use ASP.NET, it will change your identifier if you have runat = "server". To get a workaround in your JS, use:

 document.getElementByID("<%=slidingContent.ClientID%>");

or

 $("#<%=slidingContent.ClientID%>");
+7
source

Make a view source on the displayed page. Id = "slideContent" was probably changed by asp.net.

+2
source

I don’t know if you use Master / Content pages, but if so, then what I found works, gives your Master / Content pages an identifier.

If you just use one of them and assume that you provide the main page with the identifier "Mstr" and the page "Content" with the identifier "Cont", you can create JavaScript prefixes as follows:

 var masterPrefix = "Mstr_", contentPrefix = "Cont_";

Then you can create a function called $getElement() that allows you to pass the identifier that you specify in your markup as follows:

 function $getElement(id) { return $("#" + masterPrefix + contentPrefix + id); }

Then, according to your specific example, you can get the jQuery object for your runat = "server" div by doing the following:

 var $slidingContent = $getElement("slidingContent");

I found this method to be a lifesaver when you get into big projects with heavy client-side scenarios.

Alternatively, if you don't like calling another function to return your object, you can always do this:

 var $slidingContent = $('div[id$="slidingContent"]');

Here you just say give me a div that has an identifier ending in "slideContent".

0
source

More articles:


All Articles