How can I repeat the data on a button and a modal?

Question

0.00/5 (No votes)

See more:

Hello!! I was wondering if it is possible to repeat the data in the button AND the modal that matches the data together. At the moment, I have a list of buttons with the right data, but when clicking on any of them it always appears to have the first data in the modal.

Sorry for such a long piece of code :P

<asp:Repeater ID="rptMain" runat="server">
                                        <ItemTemplate>
                                        <div>
                                        <div class="list-group">
    <a href="#" class="list-group-item" data-toggle="modal" data-target="#editmember">
      <p class="list-group-item-text"><%#Eval("name")%> <%#Eval("lastname")%>, <%#Eval("jobtitle")%>, <%#Eval("subcompany")%>, <%#Eval("country")%></p>
</a>
</div>

                                        <div class="modal fade" id="editmember" role="dialog">
    <div class="modal-dialog">
    
      
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">×</button>
          <h4 class="modal-title"><%#Eval("name")%> <%#Eval("lastname")%>, <%#Eval("jobtitle")%>, <%#Eval("subcompany")%>, <%#Eval("country")%></h4>
        </div>
        <div class="modal-body">
          <p><div style="float: left; width: 100%;">
                                                    <div style="float: left; width: 13%;">
                                                        <asp:Image ID="imgPhoto" runat="server" Style="width: 90px; -moz-border-radius: 4px;border-radius: 4px;"
                                                             Visible='<%#Eval("photo").ToString()==""?false:true %>'
                                                            ImageUrl='<%#Eval("photo").ToString()==""?"photo\\no_noimage.png" : "photo\\" + Eval("photo").ToString()%>' />
                                                    </div>
                                                    <div style="float: left; width: 87%;">
                                                        <p>
                                                            <%#Eval("ContactBio")%>
                                                        </p>
                                                    </div>
                                                </div>
                                                <p>
                                                     
                                                </p>
                                                <div style="float: left; width: 100%;">
                                                    <div style="float: left; width: 13%;">
                                                        <asp:Image ID="imgLogo" runat="server" Style="width: 90px; -moz-border-radius: 4px;border-radius: 4px;"
                                                             Visible='<%#Eval("logo").ToString()==""?false:true %>'
                                                            ImageUrl='<%#Eval("logo").ToString()==""?"logo\\no_noimage.png" : "logo\\" + Eval("logo").ToString()%>'/>
                                                    </div>
                                                    <div style="float: left; width: 87%;">
                                                        <p style="font-weight: bold;">
                                                            <%#Eval("subcompany")%>
                                                        </p>
                                                        <p>
                                                            <%#Eval("CompanyDescription")%>
                                                        </p>
                                                    </div>
                                                    </div>
                                                    
                                                
                                                <p>
                                                     </p></p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
        </div>
        </div>
        </div>
        </div>
                                        
  
                                        </ItemTemplate>
                                    </asp:Repeater>

I would really appreciate some help with this :)

Posted 14-Aug-15 6:43am

Member 11909898

Add a Solution

2 solutions

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)

aspdotnet sekhar · Answer 1 · 2015-08-14T09:05:00

see the problem is all your buttons data-target attribute targets to first modal of the page with id of target, so better give target by using class names as data-target, and generate unique class names for each model, and give those in corresponding button target.

You can also handle these with jquery , like generate click event for buttons with particular class name, in that click event get the current target model class name using some data-classname="targetmodelclassname" and then open that modal calling open.

better to follow first one, just generate unique names for models, and target them in buttons.

Hope it will help you.

aspdotnet sekhar · Answer 2 · 2015-08-14T17:44:00

 <itemtemplate>
                                        <div>
                                        <div class="list-group">
    <a href="#" class="list-group-item" data-toggle="modal" data-target=".<%#Eval(" youruniqueid=")%>">
      <p class="list-group-item-text"><![CDATA[<%#Eval("name")%>]]> <%#Eval("lastname")%>, <%#Eval("jobtitle")%>, <%#Eval("subcompany")%>, <%#Eval("country")%></p>
</a>
</div>
 
                                        <div class="modal fade <%#Eval(" youruniqueid=")%>" id="editmember" role="dialog">
    <div class="modal-dialog">
    
      
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">×</button>
          <h4 class="modal-title"><![CDATA[<%#Eval("name")%>]]> <%#Eval("lastname")%>, <%#Eval("jobtitle")%>, <%#Eval("subcompany")%>, <%#Eval("country")%></h4>
        </div>


</div></div></div></div></itemtemplate>

How can I repeat the data on a button and a modal?

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0