Call Jquery with Link button

Question

1.00/5 (1 vote)

See more:

Hi
I have made this Jquery popup box, but I cannot get it to open when I click the linkbutton?????

JavaScript

$(document).ready(function () {
         $('#contactFormContainer').hide();
         $('a.email, #contactFormContainer, a.close').click(function () {
             $("#contactFormContainer").fadeToggle('slow');
         });
     });

And when you click the linkbutton it could show the popup box, and show the content. The linkbutton is in a datalist it looks like this:

I have try with a regular html link, but then I need to click 2 times before it will show the popup box

C#

<asp:DataList ID="VisDeli" runat="server" OnItemDataBound="VisDeli_ItemDataBound">
              <HeaderTemplate>

                  </th>
                  <tr>
                       <th colspan="2"></th>

                   </tr>
              </HeaderTemplate>
               <ItemTemplate>

               <tr>
                    <td class="height"><asp:TextBox ID="TextBox_deli" runat="server" Width="15" Height="15"></asp:TextBox></td>
                         <td><p><%#Eval("deli_navn") %></p></td>
                        <td>
                            <asp:LinkButton ID="LinkButton1" runat="server" PostBackUrl='<%# string.Format("~/delikatesse.aspx?id={0}{1}", Eval("deli_id"), "#contactFormContainer") %>' Text="Click me"/>


                            </td>


               </tr>

                    </ItemTemplate>

           </asp:DataList>

Posted 4-Nov-13 3:00am

tina_overgaard

Updated 4-Nov-13 3:53am

v2

Add a Solution

Comments

Sergey Alexandrovich Kryukov 4-Nov-13 9:51am

Excuse me, where is your question?
—SA

tina_overgaard 4-Nov-13 9:53am

To get the popup box to show when click on linkButton

Sergey Alexandrovich Kryukov 4-Nov-13 10:03am

Still not a question. Are you so reluctant in asking questions or you like others to pull then from your?
Where is your popup box element in the code? Are you trying to use jQuery Dialog or something else?
Note that the real pop-up (creation of new browser window) is evil, such pop-ups can be blocked by many; so one of the purposes of jQuery "modal pop-ups" or "dialog" is to avoid it.
—SA

tina_overgaard 4-Nov-13 10:32am

I thought i ask my question corect. I know about popups, but the customer wants it. I dont know anything about jQuery "modal pop-ups" or "dialog" is to avoid it. Thats why I need some help to figure it out

Sergey Alexandrovich Kryukov 4-Nov-13 10:40am

Adding 5 question marks cannot make non-question a question. You should have explained the purpose, the effect you wanted to achieve, what did you tried (not just code, but the code with some comments related to your goal/purpose), what did you observed and why do you feel it was wrong...
—SA

ZurdoDev 4-Nov-13 10:34am

Did you try $("#contactFormContainer").show('slow') instead?

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)

Sergey Alexandrovich Kryukov · Answer 1 · 2013-11-04T04:53:00

Solution 1

tina_overgaard wrote:
I don't know anything about jQuery "modal pop-ups" or "dialog" is to avoid it. Thats why I need some help to figure it out.

In your code, you did not try even the pop-up windows, but maybe this is only a good things, as pop-ups is evil (more exactly, they have been extensively used for evil purposes), many users will block them.

You should not be confuses by "customer wants it", because a customer may need some logical behavior, not a particular inconvenient or irritating effect associated with popup windows. Effectively, customer may need logical modal behavior and may be unaware of really good ways to present it. A jQuery "modal popup" or a dialog is really a way to go.

First of all, test these samples, all of them: http://dinbror.dk/bpopup/[^].

Please spot the difference between creation of a new browser window and a modal behavior on the same page. Can you see why first thing is so bad and the second approach can be blessing? This is really a way to go.

Now, this is the "standard" jQuery dialog: http://jqueryui.com/dialog/[^].

You will immediately see the demo. Try some of other options on your right of this demo. See the difference?

You can find a lot more: http://bit.ly/YBKflp[^].

—SA

Posted 4-Nov-13 4:53am

Sergey Alexandrovich Kryukov

Comments

tina_overgaard 4-Nov-13 12:40pm

Now I understand and know that the popup box is a no go. So I choose the dialog box.

And when you click a button it will show. But how do I fetch the ID from the datbase from the button?

I have this list from the database, where I eval the things in a datalist and when I click the button I will show the infomation in the dialog box.

Something like this I will use with a normal HTML link?
">info

But how do I do the same with a button?

tina_overgaard 4-Nov-13 12:42pm

href="delikatesse.aspx?=deli_id<%#Eval("deli_id") %>

Sergey Alexandrovich Kryukov 4-Nov-13 12:55pm

And?...
—SA

Sergey Alexandrovich Kryukov 4-Nov-13 12:55pm

Great. I doubt storing of IDs (do you mean "id" attribute of HTML elements?) Perhaps you need to explain the bigger picture, or see it yourself. And you can see the code samples for jQuery dialogs, they are quite clear...
—SA

tina_overgaard 4-Nov-13 13:08pm

When I click the button I want to show this information en the dialogbox.

Here is the list from the database with the button to open dialogbox:
<asp:DataList ID="VisDeli" runat="server" OnItemDataBound="VisDeli_ItemDataBound">
<HeaderTemplate>

</th>
<tr>
<th colspan="2"></th>

</tr>
</HeaderTemplate>
<itemtemplate>

<tr>
<td class="height"><asp:TextBox ID="TextBox_deli" runat="server" Width="15" Height="15"></td>
<td><p><%#Eval("deli_navn") %></p></td>
<td>

<asp:Button ID="btnPopup" runat="server" Text="Show Popup" />

</td>

</tr>

And this is the dialog box info that I want to show:
<div id="dialog" title="hejsa" >
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="SELECT * FROM [delikatesse] WHERE ([deli_id] = @deli_id)">
<SelectParameters>
<asp:QueryStringParameter Name="deli_id" QueryStringField="deli_id" Type="Int32" />
</SelectParameters>

<asp:Repeater ID="Repeater3" runat="server" DataSourceID="SqlDataSource2">
<itemtemplate>

<div class="tekst_info">
<p><%#Eval("deli_navn") %> <br />
<%#Eval("tekst") %></p>
</div>
<div class="tekst_pris">
<p> <%#Eval("ml") %>, <%#Eval("pris") %> kr.</p>
</div>
<div class="billede_info">
<img src="Images/upload/Thumbs/<%#Eval("billede") %>" onerror="this. önerror=null;this.src='Images/upload/Thumbs/no_image.jpg'">

</div>

</div>

Sergey Alexandrovich Kryukov 4-Nov-13 15:43pm

Okay, go ahead and show it. Code samples show how to put any content at all...
—SA

tina_overgaard 4-Nov-13 16:37pm

Hi
I have listed some things from a database in a datalist with a link tag. Look like this on front page.

ID= 21 something click me

<asp:DataList ID="VisDeli" runat="server" RepeatLayout="Table"
RepeatColumns="3" DataSourceID="SqlDataSource1" OnItemDataBound="VisDeli_ItemDataBound" CellSpacing="3" >

<HeaderTemplate>
<p class="overskrift_bestil">Ekstra varer</p>
</HeaderTemplate>

<itemtemplate>

<td><asp:TextBox ID="TextBox_deli" runat="server" Width="15" Height="15"></td>
<td><p><%#Eval("deli_navn") %></p></td>
<td>
Show the Dialog

</td>

When I click the click me link I want the popup box to show all the information on the product on ID=21. I know that I have to load some querystring when I click the html link, but I am stuck. This is what I have now:

<script type="text/javascript">
$(document).ready(function () {

$('#contactFormContainer').hide();

$('#showdialog2').click(function () {
$("#contactFormContainer").load("bekraeft.aspx?deli_id=deli_id");
$("#contactFormContainer").fadeToggle('slow');
});
});

</script>

tina_overgaard 4-Nov-13 16:39pm

Show the dialog code href="#contactFormContainer" id="showdialog2"