The issue here is that the javascript
in your script tags
runs only when the page is initialized.
Meaning that the data
variable you define has the value of the HTML Elements at the time the script runs.
let data = {
prefix: $('#Prefix').val(),
welcomeChannelID: $('#welcomeChannelID').val(),
logchannelID: $('#logchannelID').val(),
voicelogchannelID: $('#voicelogchannelID').val(),
defaultchannelID: $('#defaultchannelID').val(),
guildautoroleID: $('#guildautoroleID').val(),
playervolume: $('#guildautoroleID').val(),
}
So you will have to get the data only once the button is clicked, for example:
function getData() {
return {
prefix: $('#Prefix').val(),
welcomeChannelID: $('#welcomeChannelID').val(),
logchannelID: $('#logchannelID').val(),
voicelogchannelID: $('#voicelogchannelID').val(),
defaultchannelID: $('#defaultchannelID').val(),
guildautoroleID: $('#guildautoroleID').val(),
playervolume: $('#guildautoroleID').val(),
}
}
$('.btn-primary.btn').click(function() {
$.ajax({
url: `/dashboard/${guildID}/set`,
type: "POST",
dataType: "json",
data: JSON.stringify(getData()),
...
} ... )
})
i have a ejs page looks like
<%- include('../blocks/header', {bot, user, path}) %>
<div class="row" style="min-width: 400px;">
<div class="col" style="min-width: 400px;">
<div class="card text-white mb-3" >
<%- include('../blocks/guild-nav', {active: "manage", guild}) %>
<table class="table table-hover">
<thead>
<tr>
<th scope="col">Setting Name</th>
<th scope="col">Current Setting</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" class="list-group-item d-flex justify-content-between align-items-center"
data-toggle="tooltip" title="prefix"> Prefix<font color="red">*</font> </th>
<td width="80%"><input type="text" class="form-control form-control-sm" style="text-align: left;"
name="Prefix" id="Prefix" value="<%= prefix %>" placeholder="Enter prefix "></td>
</tr>
<tr>
<th scope="row" class="list-group-item d-flex justify-content-between align-items-center"
data-toggle="tooltip" title="welcomeChannelID"> welcomeChannelID </th>
<td width="80%"><input type="text" class="form-control form-control-sm" style="text-align: left;"
name="welcomeChannelID" id="welcomeChannelID" value="<%= welcomeChannelID %>"
placeholder="Enter welcomeChannelID "></td>
</tr>
<tr>
<th scope="row" class="list-group-item d-flex justify-content-between align-items-center"
data-toggle="tooltip" title="logchannelID"> logchannelID </th>
<td width="80%"><input type="text" class="form-control form-control-sm" style="text-align: left;"
name="logchannelID" id="logchannelID" value="<%= logchannel %>" placeholder="Enter logchannelID ">
</tr>
<tr>
<th scope="row" class="list-group-item d-flex justify-content-between align-items-center"
data-toggle="tooltip" title="voicelogchannelID"> voicelogchannelID </th>
<td width="80%"><input type="text" class="form-control form-control-sm" style="text-align: left;"
name="voicelogchannelID" id="voicelogchannelID" value="<%= voicelogchannel %>"
placeholder="Enter voicelogchannelID "></td>
</tr>
<tr>
<th scope="row" class="list-group-item d-flex justify-content-between align-items-center"
data-toggle="tooltip" title="defaultchannelID"> defaultchannelID</th>
<td width="80%"><input type="text" class="form-control form-control-sm" style="text-align: left;"
name="defaultchannelID" id="defaultchannelID" value="<%= defaultchannelID %>"
placeholder="Enter defaultchannelID "></td>
</tr>
<tr>
<th scope="row" class="list-group-item d-flex justify-content-between align-items-center"
data-toggle="tooltip" title="guildautoroleIDt"> guildautoroleID</th>
<td width="80%"><input type="text" class="form-control form-control-sm" style="text-align: left;"
name="guildautoroleID" id="guildautoroleID" value="<%= guildautorole %>"
placeholder="Enter guildautoroleID "></td>
</tr>
<tr>
<th scope="row" class="list-group-item d-flex justify-content-between align-items-center"
data-toggle="tooltip" title="playervolume"> playervolume</th>
<td width="80%"><input type="text" class="form-control form-control-sm" style="text-align: left;"
name="playervolume" id="playervolume" value="<%= playervolume %>" placeholder="Enter playervolume ">
</tr>
%>
%>
</tbody>
</table>
<div style="width: 100%; text-align: right; margin-top: 20px;">
<a class="btn btn-danger" data-toggle="modal" data-target="#settingsResetModal" role="button">Reset Defaults
<i class="fa fa-fw fa-cogs" aria-hidden="true"></i></a>
<button type="submit" class="btn btn-primary" role="button">Save Changes <i class="fa fa-fw fa-save"
aria-hidden="true"></i></button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var guildID = "<%= guild.id %>";
let data = {
prefix: $('#Prefix').val(),
welcomeChannelID: $('#welcomeChannelID').val(),
logchannelID: $('#logchannelID').val(),
voicelogchannelID: $('#voicelogchannelID').val(),
defaultchannelID: $('#defaultchannelID').val(),
guildautoroleID: $('#guildautoroleID').val(),
playervolume: $('#guildautoroleID').val(),
}
$('.btn-primary.btn').click(function() {
$.ajax({
url: `/dashboard/${guildID}/set`,
type: "POST",
dataType: "json",
data: JSON.stringify(data),
contentType: "application/json",
cache: false,
timeout: 5000,
complete: function() {
//called when complete
console.log('process complete');
},
success: function(data) {
console.log(data);
console.log('process sucess');
},
error: function(e) {
console.log(e)
console.log('process error');
},
});
})
</script>
<% include ../blocks/footer %>
I tried sending the text to my node but i data i am receiving is the data i send to that site not the new fresh edited by user
my dashboard.js file looks like this all methods that send data to client works but i am stuck here
app.get("/dashboard/:guildID/set", checkAuth, async (req, res) => {
const guild = client.guilds.get(req.params.guildID);
if (!guild) return res.status(404);
const isManaged = guild && !!guild.member(req.user.id) ? guild.member(req.user.id).permissions.has("MANAGE_GUILD") : false;
if (!isManaged && !req.session.isAdmin) res.redirect("/");
if(welcomeChannelID !== `<#${(req.body.welcomeChannelID).replace(/[^0-9a-zA-Z_]/g, '')}>`) welcomeChannelID = `<#${(req.body.welcomeChannelID).replace(/[^0-9a-zA-Z_]/g, '')}>`
db.collection('guilds').doc(guild.id).update({
'prefix': req.body.prefix,
'welcomeChannelID': welcomeChannelID.slice(2,-1) ,
'logchannel': logchannel.slice(2,-1),
'voicelogchannel': voicelogchannel.slice(2,-1),
'guildautorole': guildautorole.slice(2,-1),
'defaultchannelID':defaultchannelID.slice(2,-1),
'playervolume': req.body.playervolume,
})
res.send(req.body);
res.redirect("/dashboard/"+req.params.guildID);
});
i removed the other defined var only here all are there in main code
am i missing something