Develop Reference

ajax.post returns index html but not the html that I should get after a post

So I'm trying to build a JS script that allows me to automatically enroll in courses in uni once they're available, and what I've gotten so far is filling the boxes with course IDs and then clicking submit but then I realized using ajax to post would be a better way than simulating a click.
The problem is, the returned html after a post is just a normal html with no success msg on enrolling neither failure. Here is my code:
const courses = ['56895', '56712', '56812']
function findnewreg() {
var index = 0
courses.forEach(element => {
index++;
var ind = "crn_id" + index;
document.getElementById(ind).value = element
form = document.getElementById(ind).form
});
var regbtn = document.getElementsByName('REG_BTN')
regbtn.forEach(element =>{
if(element.value=='تنفيذ التغييرات'){
//element.click();//<form action="/PROD/xwckcoms.P_Regs" method="post" onSubmit="return checkSubmit()">
submitForm()
console.log("clicked")
document.addEventListener("DOMContentLoaded", function(event){
if (document.body.textContent.includes("لقد قمت بإجراء العديد من المحاولات لتسجيل هذا الفصل الدراسي، اتصل بمكتب التسجيل للحصول على مساعدة. ")) {
console.log('⛔️ error retrying...');
//history.back();
findnewreg()
}else{
console.log('✅ success');
}});
}
})
}
function submitForm(){
var form = form = document.getElementById("crn_id1").form
var href = '/PROD/xwckcoms.P_Regs'//form.getAttribute("action");
var formData = {};
jQuery(form)?.find("input[type=text]").each(function (index, node) {
console.log(index, node)
formData[node.name] = node.value;
});
// formData = jQuery(form).serialize() //also tried this, same result
jQuery.post(href, formData).done(function (data) {
prompt('DATA:' , data)
findnewreg();
});
}
findnewreg();

How can I make data visible on an alert box?

It is fully functional. I want to check all the data. Using this, I can't see all the data.
alert("SHOW FORM DATA");
alert(PreparedFormObj());
FORM DATA
var PreparedFormObj = function () {
var _FormData = new FormData()
_FormData.append('Id', $("#Id").val())
_FormData.append('CreatedDate', $("#CreatedDate").val())
_FormData.append('CreatedBy', $("#CreatedBy").val())
_FormData.append('ProductId', $("#ProductId").val())
_FormData.append('ProductModelNo', $("#ProductModelNo").val())
_FormData.append('Name', $("#Name").val())
return _FormData;
}
SAVE DATA
var SaveProduct = function () {
alert("SHOW FORM DATA");
alert(PreparedFormObj());
}

for example convert to json
alert(JSON.stringify(Object.fromEntries(PreparedFormObj())));

Fat-Free Framework + JQuery AJAX GET = no response

I have a mapped Fat-Free Framework class declared as follows in my index.php:
$f3->map('/user', 'User');
The User class looks like this:
<?php
class User {
function __construct($f3) {
$this->users = new \DB\SQL\Mapper($f3->db, 'users');
}
function get($f3) {
return json_encode('Just some text');
}
function post($f3) {
// There is tested, working code in here but I've omitted it for simplicity's sake
}
function put($f3) {
}
function delete() {
}
}
I have my Javascript first loaded by app.js like this:
$(document).ready(function(){
var currentPage = $(location).attr('pathname'),
requiredJS = document.createElement('script'),
requiredJS.type = 'text/javascript';
switch(currentPage) {
case '/mypage':
requiredJS.src = 'myscript.js';
$('body').append(requiredJS);
break;
// more cases...
}
});
Then my simple AJAX call in mypage.js looks like this:
$.get('/user', function (data) {
console.log(data);
});
When I go to the /mypage route, I get only an empty string in my console. Why is this happening? Where am I messing up?

You should echo the result:
echo json_encode(array('Just some text'));

how to get data from javascript ajax from another page

I am using a script with jQuery:
$(document).ready(function () {
var button;
var line;
var inputs;
var params = {};
var updatefield;
$('button.update').click(function () {
button = $(this);
params['button'] = button.val();
line = button.closest('.line');
updatefield = line.find('td.resultFromGet');
inputs = line.find('input');
inputs.each(function (id, item) {
switch($(item).attr('type')){
case 'checkbox':{
params[$(item).attr('name')] = new Array($(item).is(':checked'));
break;
}
default:{
params[$(item).attr('name')] = new Array($(item).attr('value'));
break;
}
}
});
//alert(JSON.stringify(params, null, 4));
$.get( 'core/ajax/correct_exec.php', params )
.done(function (data){
if(data == '1'){
$(updatefield).html('UPDATE_RECORD_SUCCESS');
} else {
$(updatefield).html( data );
}
});
});
});
The page I am getting is doing echo '1'; from PHP in case of success.
I try to test this with data == 1 but it doesn't work even though it is a success. In fact, it sends me $(updatefield).html( data ); which is 1. So why can't it just print UPDATE_RECORD_SUCCESS?

The data response is coming with white space, if you use trim() function something like this, then if condition should be executed.
if(data.trim() == '1'){
$('#updatefield').html('UPDATE_RECORD_SUCCESS'); //this should be executed
} else {
$('#updatefield').html( data );
}
Here you can see the space with data in chrome debugger.

How to Update View For new Data from Database

<script type="text/javascript">
$(document).ready(function () {
function getPlanetFeeds() {
$("#planetFeedsDiv").load('/PlanetFeed/GetPlanetFeeds', function (data) {
});
var refreshPartial = setInterval(function () { getPlanetFeeds() }, 3000);
function myStopFunction() {
clearInterval(refreshPartial);
}
<div id="planetFeedsDiv">
</div>
I am trying to get Feed from database when updated in it but the problem is that if i am uploading the video than it is getting refresh and not able to watch video continuously
if i am removing this function of time interval or increasing the time interval
var refreshPartial = setInterval(function () { getPlanetFeeds() }, 3000);
function myStopFunction() {
clearInterval(refreshPartial);
}
than i am not able to get updated feed regularly
and i am getting the planetfeed from controller as follows
public ActionResult GetPlanetFeeds()
{
var planetfeedsOrder = from a in db.PlanetFeeds
join c in db.Graphs
on a.PlanetFeedItemGraphId equals c.GraphID
join u in db.UserInfos
on c.ItemUserID equals u.UserID
orderby a.PostDate descending
select new UserInfoViewModel
{
FirstName = u.FirstName,
LastName = u.LastName,
UserID = u.UserID,
AvatarURL = u.AvatarURL,
GraphItemDescription = c.GraphItemDescription,
GraphItemURL = c.GraphItemURL,
GraphID = c.GraphID,
ItemType = c.ItemType,
ItemUserID = c.ItemUserID,
GraphItemTitle = c.GraphItemTitle
} ;
return PartialView("_PlanetFeeds", planetfeedsOrder.ToList());
}

check count with old and update value by searching in database and call getPartial method when NewDataCount is greater than old data