I am trying to put modal
<td>
<div class="btn-group">
<button type="button" class="btn btn-sm card-button1 dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Actions
</button>
<ul class="dropdown-menu">
<li><%# <i class="icon-diff-modified position-left"></i> %>
<a class="dropdown-item text-info"
data-toggle="modal"
data-target="#editUser"
data-id="<%= users.id %>"
data-name="<%= users.name %>"
data-email="<%= users.email %>"
data-mobile="<%= users.mobile %>"
data-branch_code="<%= users.branch_code %>"
data-user_type="<%= users.user_type %>"
data-status="<%= users.status %>"
>
Edit
</a>
</div>
</td>
I intended for it to pass data to the editUser modal, however no data is been received. I am new to modals and the challenge is i cannot use online scripts or cdn links. All i am finding online is using Phoenix LiveView. Any advise on what the best approach is for static site?
All i am finding online is using Phoenix LiveView.
Do I understand correctly that you are not using phoenix liveview?
the challenge is i cannot use online scripts or cdn links
Are you able to bundle assets/js/app.js and load on your page? If so, you can create modals by toggling display on an element, and you can define that behaviour in app.js. And if you can bundle alpine.jsapp.js, it’s even easier.
Or are you using a bootstrap.css template (judging by the HTML snippet you provided)? If so, you should have some JS files that came with it, and functionality for toggling modals is defined there already.
I intended for it to pass data to the editUser modal, however no data is been received.
How are you passing down data in your controller and are you passing that data into a render/3?
If you are passing down the users assign in your render/3, then you are missing the @users in your template.
<td>
<div class="btn-group">
<button type="button" class="btn btn-sm card-button1 dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Actions
</button>
<ul class="dropdown-menu">
<li>
<%# <i class="icon-diff-modified position-left"></i> %>
<a class="dropdown-item text-info"
data-toggle="modal"
data-target="#editUser"
data-id="<%= @users.id %>"
data-name="<%= @users.name %>"
data-email="<%= @users.email %>"
data-mobile="<%= @users.mobile %>"
data-branch_code="<%= @users.branch_code %>"
data-user_type="<%= @users.user_type %>"
data-status="<%= @users.status %>" >
Edit
</a>
</li>
</ul>
</div>
</td>
But if users is a List, then you can render each user in a <td>...</td> by doing
<%= for user <- @users do %>
<td>
<div class="btn-group">
<button type="button" class="btn btn-sm card-button1 dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Actions
</button>
<ul class="dropdown-menu">
<li>
<%# <i class="icon-diff-modified position-left"></i> %>
<a class="dropdown-item text-info"
data-toggle="modal"
data-target="#editUser"
data-id="<%= user.id %>"
data-name="<%= user.name %>"
data-email="<%= user.email %>"
data-mobile="<%= user.mobile %>"
data-branch_code="<%= user.branch_code %>"
data-user_type="<%= user.user_type %>"
data-status="<%= user.status %>" >
Edit
</a>
</li>
</ul>
</div>
</td>
<% end %>
Hopefully that helps you somewhat with your data not being passed problem.
Yes i am not using Phoenix LiveView
Or are you using a bootstrap.css template (judging by the HTML snippet you provided)? If so, you should have some JS files that came with it, and functionality for toggling modals is defined there already.
Yes i am using bootstrap, however i am not well conversed with JS to bundle
alpine.jsapp.js
I am already passing through render in controller, and page is able to render/pull data the table is able to display
<div class="card">
<div class="card-header text-center h5">
<strong>Users List</strong>
</div>
<hr>
<div class="card-body">
<div class="table-responsive">
<table id="example" class="table table-bordered text-center" style="width: 100%;">
<thead>
<tr>
<th><b>Name</b></th>
<th><b>Email</b></th>
<th><b>Mobile</b></th>
<th><b>Branch</b> Code</th>
<th><b>Type</b></th>
<th><b>Status</b></th>
<th><b>Action</b></th>
</tr>
</thead>
<tbody>
<%= for users <- @users do %>
<tr>
<td><%= users.name %> </td>
<td><%= users.email %></td>
<td><%= users.mobile %></td>
<td><%= users.bank_branches.branch_code %></td>
<td><%= users.user_type %></td>
<td><%= users.status %></td>
<td>
<div class="input-group">
<div class="input-group-prepend">
<span data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<a class="btn card-button1">
Actions
</a>
</span>
<div class="dropdown-menu">
<a class="dropdown-item" class="card-button1"
data-toggle="modal"
data-target="#edit"
data-id="<%= users.id %>"
data-name="<%= users.name %>"
data-email="<%= users.email %>"
data-mobile="<%= users.mobile %>"
data-branch_code="<%= users.bank_branches.branch_code %>"
data-user_type="<%= users.user_type %>"
data-status="<%= users.status %>">
Edit
</a>
</div>
</div>
</div>
</td>
</tr>
<% end %>
<div class="form-group">
<button class="btn btn-secondary" style="color: white; background: #af144b; border-radius: 5px;" data-toggle="modal" data-target="#createUser">
Create User
</button>
</div>
</tbody>
</table>
</div>
</div>
</div>
The modal however not able to return any data
