How to modify my asp.net controls to work with this dynamic drive script

Question

1.00/5 (1 vote)

See more:

Hi all,

I wrote this webform markup, and I'm trying to get this script from Dynamic Drive to work with it. But I'm not sure why it won't work with my current web form markup.

The script uses jquery, and when you click on a hyperlink in my details view, it's suppose to fire off a jquery function, that will open a flyout tab on the right, and fill it with content from another page.

XML

<asp:DetailsView ID="DetailsView1" runat="server" AllowPaging="True" BackColor="LightGoldenrodYellow" BorderColor="Tan" BorderWidth="1px" CellPadding="2" DataSourceID="SqlDataSource2" ForeColor="Black" GridLines="None" Height="50px" Width="350px" EmptyDataText="There is no data in your profile...">
                                <AlternatingRowStyle BackColor="PaleGoldenrod" />
                                <EditRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />
                                <Fields>
                                    <asp:ImageField DataImageUrlField="photo" DataImageUrlFormatString="~/UserPhotoUploads/{0}">
                                        <ControlStyle Height="400px" Width="400px" />
                                    </asp:ImageField>
                                    <asp:CommandField ShowDeleteButton="True" />
                                    <asp:HyperLinkField DataNavigateUrlFields="product_id" DataNavigateUrlFormatString="~/ProductDetailes.aspx?product_id={0}" DataTextField="name" DataTextFormatString="See product detailes.." />
                                </Fields>

                                <FooterStyle BackColor="Tan" />
                                <HeaderStyle BackColor="Tan" Font-Bold="True" />
                                <PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue" HorizontalAlign="Center" />
                            </asp:DetailsView>

The link works fine as just a link to navigate to a new page, but it won't trigger or fire the dynamic drive script below to stay on the same page.
http://www.dynamicdrive.com/dynamicindex17/ajaxsidepanel.htm[^]
I'm just trying to figure out how to fire the script now, so my flyout panel from the script will load and display other html.

Posted 17-Apr-13 15:05pm

ALNAJJARALI

Updated 18-Apr-13 7:06am

jkirkerx

v2

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

jkirkerx · Answer 1 · 2013-04-18T06:44:00

That script from dynamic drive was designed to be used with PHP or just regular HTML, and was not considered to be used in ASP.Net, in which your using asp.net objects.

In other words, your using the detail views control, with the appropriate hyperlink control, and the server picks up the "rel" tag as a control property attribute, and not just an A tag attribute, and doesn't know what to do with it.

You could try replacing the hyperlink control with just the plain html version of it

<a href=""></a>

My take on it is that you saw a feature that looked cool, but you don't fully understand how it works, and are not able to incorporate it into your project. That script works for that particular situation, and was written to accommodate those particular needs.

So what is it, it's jquery and javascript that produces a sort of a modal flyout panel from the left, that floats above the current z-index or main surface. The action brings up the panel compressed with no width, and slides out to the left side using panel.slide() animating to the left, and then appending html in the panel to fill in the content, or vice versus.

Yes I could make that work, but it would take me about an 2 hours, and this is voluntary.

In situations like this, it's best to start from scratch, and write your own script, make a panel first and hide it on the right, and write some jquery to show and slide the panel width out to the left. It's just css manipulation on the panel, and a little html appending to it.