Hi ,
I would like to use a Single Page Application (SPA) with PHP, but I couldn’t determine if there is a bug or not. My issue is that I’ve created a SPA page, and I’m sure everything is set up correctly. However, when I click on the link I’ve created, the entire page loads instead. What should happen is that only the content of the page should appear on the screen. I’ve tried this with both Wappler 5.8.2 and Wappler 6 Release 3, but the result is the same. I even checked the websites I prepared in the same way before and couldn’t find any differences. Could you please review it and help me identify where I might be making a mistake?
Test Link : https://tys.turkmobil.com.tr/dashboard
I need to fix this issue today .
if would be very grateful if you could provide a temporary solution.
*** After struggling for a while to fix the issue, I manually replaced the “dmxRouting.js” and “dmxAppConnect.js” files with ones from an older version, which temporarily resolved the problem. However, since I cannot predict what other issues this change might cause, I don’t want to proceed with this method. If @patrick or @George could provide me with a temporary/alternative solution, I would greatly appreciate it.
.htaccess
## Wappler routing
RewriteEngine On
<IfModule mod_negotiation.c>
Options -MultiViews
</IfModule>
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^/?login(?:/)?$ login.html [QSA,NC,L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^/?(?:/)?$ index.html [QSA,NC,L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^/?dashboard(?:/)?$ index.html [QSA,NC,L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^/?kullanicilar(?:/)?$ index.html [QSA,NC,L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^/?arizakayitlari(?:/)?$ index.html [QSA,NC,L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^/?test2(?:/)?$ index.html [QSA,NC,L]
## End Wappler routing
Routing
<!-- Content -->
<div is="dmx-route" path="/dashboard" url="view/_dashboard.php" id="dashboardSPA" exact="true"></div>
<!--/ Content -->
<!-- Content -->
<div is="dmx-route" path="/kullanicilar" url="view/_users.php" id="kullanicilar"></div>
<!--/ Content -->
<div is="dmx-route" path="/arizakayitlari" url="view/_arizakayitlari.php" id="arizakayitlariSPA"></div>
<div is="dmx-route" path="/test2" url="test2.html" id="test2"></div>
<!-- Footer -->
Sample Content Page (_users.php)
<!-- Wappler include head-page="../index.html" appconnect="local" is="dmx-app" bootstrap5="local" id="kullanicilar" components="{dmxBootstrap5Navigation:{}}" -->
<div class="container-xxl flex-grow-1 container-p-y">
<div class="row g-4 mb-4">
<div class="col-sm-6 col-xl-3">
<div class="card">
<div class="card-body">
<div class="d-flex align-items-start justify-content-between">
<div class="content-left">
<span>Oturumlar</span>
<div class="d-flex align-items-center my-2">
<h3 class="mb-0 me-2">21,459</h3>
<p class="text-success mb-0">(+29%)</p>
</div>
<p class="mb-0">Total Users</p>
</div>
<div class="avatar">
<span class="avatar-initial rounded bg-label-primary">
<i class="ti ti-user ti-sm"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-xl-3">
<div class="card">
<div class="card-body">
<div class="d-flex align-items-start justify-content-between">
<div class="content-left">
<span>Paid Users</span>
<div class="d-flex align-items-center my-2">
<h3 class="mb-0 me-2">4,567</h3>
<p class="text-success mb-0">(+18%)</p>
</div>
<p class="mb-0">Last week analytics</p>
</div>
<div class="avatar">
<span class="avatar-initial rounded bg-label-danger">
<i class="ti ti-user-plus ti-sm"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-xl-3">
<div class="card">
<div class="card-body">
<div class="d-flex align-items-start justify-content-between">
<div class="content-left">
<span>Active Users</span>
<div class="d-flex align-items-center my-2">
<h3 class="mb-0 me-2">19,860</h3>
<p class="text-danger mb-0">(-14%)</p>
</div>
<p class="mb-0">Last week analytics</p>
</div>
<div class="avatar">
<span class="avatar-initial rounded bg-label-success">
<i class="ti ti-user-check ti-sm"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-xl-3">
<div class="card">
<div class="card-body">
<div class="d-flex align-items-start justify-content-between">
<div class="content-left">
<span>Pending Users</span>
<div class="d-flex align-items-center my-2">
<h3 class="mb-0 me-2">237</h3>
<p class="text-success mb-0">(+42%)</p>
</div>
<p class="mb-0">Last week analytics</p>
</div>
<div class="avatar">
<span class="avatar-initial rounded bg-label-warning">
<i class="ti ti-user-exclamation ti-sm"></i>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Users List Table -->
<div class="card">
<div class="card-header border-bottom">
<h5 class="card-title mb-3">Search Filter</h5>
<div class="d-flex justify-content-between align-items-center row pb-2 gap-3 gap-md-0">
<div class="col-md-4 user_role"></div>
<div class="col-md-4 user_plan"></div>
<div class="col-md-4 user_status"></div>
</div>
</div>
<div class="card-datatable table-responsive">
<table class="datatables-users table">
<thead class="border-top">
<tr>
<th></th>
<th>User</th>
<th>Role</th>
<th>Plan</th>
<th>Billing</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
</table>
</div>
<!-- Offcanvas to add new user -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasAddUser" aria-labelledby="offcanvasAddUserLabel">
<div class="offcanvas-header">
<h5 id="offcanvasAddUserLabel" class="offcanvas-title">Add User</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body mx-0 flex-grow-0 pt-0 h-100">
<form class="add-new-user pt-0" id="addNewUserForm" onsubmit="return false">
<div class="mb-3">
<label class="form-label" for="add-user-fullname">Full Name</label>
<input type="text" class="form-control" id="add-user-fullname" placeholder="John Doe" name="userFullname" aria-label="John Doe" />
</div>
<div class="mb-3">
<label class="form-label" for="add-user-email">Email</label>
<input type="text" id="add-user-email" class="form-control" placeholder="john.doe@example.com" aria-label="john.doe@example.com" name="userEmail" />
</div>
<div class="mb-3">
<label class="form-label" for="add-user-contact">Contact</label>
<input type="text" id="add-user-contact" class="form-control phone-mask" placeholder="+1 (609) 988-44-11" aria-label="john.doe@example.com" name="userContact" />
</div>
<div class="mb-3">
<label class="form-label" for="add-user-company">Company</label>
<input type="text" id="add-user-company" class="form-control" placeholder="Web Developer" aria-label="jdoe1" name="companyName" />
</div>
<div class="mb-3">
<label class="form-label" for="country">Country</label>
<select id="country" class="select2 form-select">
<option value="">Select</option>
<option value="Australia">Australia</option>
<option value="Bangladesh">Bangladesh</option>
<option value="Belarus">Belarus</option>
<option value="Brazil">Brazil</option>
<option value="Canada">Canada</option>
<option value="China">China</option>
<option value="France">France</option>
<option value="Germany">Germany</option>
<option value="India">India</option>
<option value="Indonesia">Indonesia</option>
<option value="Israel">Israel</option>
<option value="Italy">Italy</option>
<option value="Japan">Japan</option>
<option value="Korea">Korea, Republic of</option>
<option value="Mexico">Mexico</option>
<option value="Philippines">Philippines</option>
<option value="Russia">Russian Federation</option>
<option value="South Africa">South Africa</option>
<option value="Thailand">Thailand</option>
<option value="Turkey">Turkey</option>
<option value="Ukraine">Ukraine</option>
<option value="United Arab Emirates">United Arab Emirates</option>
<option value="United Kingdom">United Kingdom</option>
<option value="United States">United States</option>
</select>
</div>
<div class="mb-3">
<label class="form-label" for="user-role">User Role</label>
<select id="user-role" class="form-select">
<option value="subscriber">Subscriber</option>
<option value="editor">Editor</option>
<option value="maintainer">Maintainer</option>
<option value="author">Author</option>
<option value="admin">Admin</option>
</select>
</div>
<div class="mb-4">
<label class="form-label" for="user-plan">Select Plan</label>
<select id="user-plan" class="form-select">
<option value="basic">Basic</option>
<option value="enterprise">Enterprise</option>
<option value="company">Company</option>
<option value="team">Team</option>
</select>
</div>
<button type="submit" class="btn btn-primary me-sm-3 me-1 data-submit">Submit</button>
<button type="reset" class="btn btn-label-secondary" data-bs-dismiss="offcanvas">Cancel</button>
</form>
</div>
</div>
</div>
</div>