Develop Reference

Refresh Table without refreshing page with html helper PagedListPager

I have the following line of code which uses html helper's PagedListPager:
#Html.PagedListPager(Model.kyc_paged_list, page => Url.Action("ClientDetails", new { id = ViewBag.ID, kyc_page = page, transaction_page = Model.transaction_page, active = "kyc" }))
When clicking on the the pager the entire page reloads. But I only want the table with id="kyc-history" to refresh.
I know how to reload the table using a JavaScript function but I don't know how to call it from the PagedListPager.
Any ideas how I can call it? Let's say that the JS function is called reloadTable()

I was having the same problem and this article (done by Anders Lybecker) helped me out and now everything working!
It's very clear with steps, But make sure to make backup before starting!
Take a look:
AJAX paging for ASP.NET MVC sites
In summary you make 2 Action Results in your Controler with 2 Views 1 for your page (in my case it's Index View) the other for the List that contain the PagedListPager control (List View). And put the list View inside the Index View. And write the JQuery code for the PagedListPager in the Index View.
You can read the article for the details!
And this is my code with a little extra things I noticed to help you more:
The List View:
#model IPagedList<StudentRegSys.Models.Student>
#{
Layout = null;
}
#using PagedList.Mvc;
#using PagedList;
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400italic,400,600,700" rel="stylesheet">
#Styles.Render("~/template/css")
<div class="container">
<div class="row">
<!-- The List Code-->
<div class="pagination-control">
#Html.PagedListPager(Model, i => Url.Action("List", "Home", new { i, search = Request.QueryString["search"] }))
</div>
</div>
</div>
#Scripts.Render("~/template/js")
Note: Make sure to make Layout = null; and put the Styles Links & the Scripts manual in this View to avoid design issues.
In the Controller: (it's Home Controller in my case)
// GET: /Home/Index
public ViewResult Index()
{
return View();
}
// GET: /Home/List
public ActionResult List(int? i, string search = "")
{
try
{
var students = _context.Student.Include(s => s.Major)
.OrderBy(s => s.Name)
.Where(s => s.Name.Contains(search) || s.Major.Name.Contains(search) ||
s.Address.Contains(search) || s.Phone.Contains(search))
.ToList().ToPagedList(i ?? 1, 8);
return View(students);
}
catch (Exception)
{
return HttpNotFound();
}
}
The Index View:
#{
ViewBag.title = "Home";
}
<section id="intro">
<!-- Some Code -->
</section>
<section id="maincontent">
#Html.Action("List") <!-- to call the List view -->
</section>
<script>
$(document).ready(function () {
$(document).on("click", ".pagination-control a[href]", function () {
$.ajax({
url: $(this).attr("href"),
type: 'GET',
cache: false,
success: function (result) {
$('#maincontent').html(result);
}
});
return false;
});
});
</script>
Note: Make sure to put the html(result) in the root container of the list in my case was <section id="maincontent">.
Hope this help you out :)

Why can't I access javascript function from HTML file?

Fairly basic question here. I've run into a situation where I can't seem to access Javascript functions from within my HTML file, even though I've linked the JS file as a script src. It seems like a pretty simple issue but I can't figure out what the problem is.
I'm trying to add a function called startLogin to an HTML button. I added it as an onclick, but then when I try to click the button, the console says the function is undefined. However the function is clearly defined in the JS file and as far as I can tell the syntax I'm using for the onclick and the script src link is correct.
In addition I've confirmed that the JS file is linked to the HTML file. If I try to manipulate the DOM from the JS file just to do something simple, like set the background to red, that works fine. The problem is when I try to call a function defined in the JS file. Also I've made sure the function I'm trying to call does actually work. If I stick it right in the HTML file inside script tags, it works fine.
I've already tried moving the script tags inside the body at the end of the HTML, as I know that's often the issue, but in this case it didn't work. Can anyone help me identify why I'm unable to access the "startLogin" function from the HTML button?
FYI, this is a javascript project and I'm using Vite.js for bundling. All the other HTML/JS files in my project are playing nicely together, I'm only having an issue with the Login page.
file structure:
|-pages
|-login.html
|-login.js
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-
scale=1.0" />
<title>Document</title>
<!-- LINK JS FILE -->
<!-- MODULE TYPE IS RELATED TO VITE.JS -->
<script type="module" src="./login.js"></script>
</head>
<body>
<!-- email login form -->
<form name="emailLogin" id="emailLogin" style="display: none">
<div class="row" style="width: 600px">
<div class="col">
<div class="form-row" style="padding-bottom: 10px">
<input
type="email"
class="form-control"
id="emailAddress"
placeholder="email associated with your login"
style="width: 576px"
/>
</div>
</div>
<div class="form-row">
<br />
<button type="button" class="btn btn-primary" onclick="startLogin('email')">
Send Email Login
</button>
</div>
</div>
</form>
</body>
</html>
login.js
// start the login process by generating a code sent either SMS or EMAIL
function startLogin(login_type) {
// local variables
var ajaxResult;
var subs;
var tempString;
// get the login values and set up the call
if (login_type == "phone") {
// get the values
use_country_code = $("#country").val();
use_phone = $("#phoneNumber").val();
use_phone = use_phone.replace(/\D/g, "");
// do the validation
if (use_phone.length < 10) {
$("#errorText").html(
"Phone number doesn't have enough digits, please try again."
);
$("#errorModal").modal("show");
return;
}
// build the url
post_url =
"https://us-central1-dev-api-327415.cloudfunctions.net/user-login?cc=" +
use_country_code +
"&phone=" +
use_phone;
} else {
// get the values
use_email = $("#emailAddress").val();
// do the validation
if (!validateEmail(use_email)) {
$("#errorText").html(
"Email address does not appear to be valid, please check the format and try again."
);
$("#errorModal").modal("show");
return;
}
// build the url
post_url =
"https://us-central1-dev-api-327415.cloudfunctions.net/user-login?email=" +
use_email;
}
// send the request to the server and process the results
$.LoadingOverlay("show");
$.ajax({
type: "POST",
url: post_url,
// process the returned result of the Ajax call
success: function (ajaxResult) {
// see if we have a session token and handle the response
session_token = ajaxResult["session_token"];
if (session_token == "None") {
// hide the login and show the text message area if phone, otherwise hide email and show email message
if (login_type == "phone") {
$("#loginMethod").hide();
$("#phoneLogin").hide();
$("#codeLogin").show();
$("#loginMessage").hide();
$("#textMessage").show();
} else {
$("#loginMethod").hide();
$("#emailLogin").hide();
$("#loginMessage").hide();
$("#codeLogin").show();
$("#emailMessage").show();
}
} else {
// hide everything since already logged in and show the right message
$("#phoneLogin").hide();
$("#emailLogin").hide();
$("#loginMethod").hide();
$("#loginMessage").hide();
$("#codeLogin").hide();
$("#continueLoginAlready").show();
}
},
// process after the Ajax call has been fully completed
complete: function () {
$.LoadingOverlay("hide");
},
// handle total failure
error: function (jqXHR, exception) {
console.log(jqXHR);
console.log(exception);
json_error = jqXHR["responseJSON"];
$("#errorText").html(json_error.error_message);
$("#errorModal").modal("show");
},
});
}

Javascript modules work a bit differently. There, variables and functions are not exposed to the global scope.
If you want to use your function from other parts of the code, you have to set it explicitly on the window object:
function startLogin(...) {
...
}
window.startLogin = startLogin;

an other solution is to set the js at end of the html, than you don't need to use the window object (memory lag)
<html lang="en">
<head>...</head>
<body>
<button type="button" id="myButton">Title</button>
</body>
<script>
function myFunction(){
console.log('running myFunction');
}
const button = document.querySelector('#myButton');
button.addEventListener('click', function clickListener(
{
myFunction();
}
</script>
</html>
the browser is simply stupid, it loads the page from top to bottom and if you load your js after the body all your html is present and you can do it this way.

Using basic jQuery append function, how would you put user-submitted text into it?

function createPost(){
$('#body').append("<p>Welcome to calmspace.</p>");
}
How would I utilize user input so the user can create a post with their own message? I am a newbie with jQuery so if this is a stupid question please forgive me. Possible duplicate but I couldn't find another post like this.

First things first - you should not have added '#' in front of body, it'd mean that the body element is of id 'body', assigning id to an element that is unique does not bear that much sense, instead you should just target the tag - $('body').
In order to provide some sort of message you first have to capture it, for instance using some sort of input. Here is a working demo.
$('#submit').click(function(){
createPost($('#text').val());
})
You read it as follows, grab element of id 'submit', assign it a click event, grab the value of input box of id 'text' and pass it to a function named create post which accepts a string parameter and then prints it in a <p> tag.

#Simion Benderschii a working example of a post which appends to the document or sends via ajax. Hope this helps
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<title>JS Bin</title>
</head>
<body>
<div>
<h2>Enter your post here</h2>
<form>
<textarea id='user-input-post'></textarea>
<div>
<button id=user-post-button>Post</button>
</div>
</form>
</div>
<div>
<h2>Below are your posts</h2>
<ul id='user-post-display'>
</ul>
</div>
</body>
<script>
/*possible options can be
'display' - which shows the post in the UI in a unordered list
'ajax' - which send the post to the server via ajax
*/
var post_type = 'display';
//the id of the list where the post will be appended
var list_id = '#user-post-display';
//the id where the post will be entered
var post_id = '#user-input-post';
//the id of the button which triggers some action
var button_id = '#user-post-button';
//this gets the post from the textarea
var get_post = function() {
var post = $(post_id).val();
return encodeURIComponent(post);
};
//this appends the post to the list
var append_post = function() {
var post = get_post();
var html_string = '';
if (post) {
html_string = '<li>' + post + '</li>';
$(list_id).append(html_string);
}
};
//this sends the post via ajax and triggers callbacks
var send_post = function() {
var post = get_post();
var post_created_on = Date.now();
var url = 'dummy_url_for_posting';
$.ajax({
method: 'POST',
url: url,
data: { data: {
post: post,
post_created_on: post_created_on
}}
})
.done(function() {
window.alert('post success');
})
.fail(function() {
window.alert('post fail');
})
.always(function() {
window.alert('post triggered');
});
}
//main function which is the entry point
var main = function() {
$(button_id).on('click', function() {
event.preventDefault();
debugger;
if (post_type === 'display') {
append_post();
} else if (post_type === 'ajax') {
send_post();
}
});
};
//triggers the main function
main();
</script>
</html>

I am not exactly sure what you want to do from your question. In future questions you will find it helpful to provide more detail on exactly what you want to do with your application or function.
The basic idea here is to use a button or any action you can capture with jQuery (like pressing enter or checking $(element).on('click',... and then putting that info where you want using $(element).html(...) or .append(...).
Here is a fiddle I made with the rough idea. Try to use this fiddle tool a lot, and you can also post the link to what you have tried in future questions. Good luck :-)
JSFiddle example of submitting a post

appending elements in jquery

i am trying to append a div to other div here :
<script>if($(window).width()>500){
$("body").append("<?php include('includes/middle.php') ?>");
}
</script>
Which becomes:
<script>if($(window).width()>500){
$("body").append("<div class='middle'>
<div class='middleOne'>
<a href='http://localhost/jhandwa/story/11-illustrations-that-perfectly-capture-how-life-changes-when-we-grow-up'>
<img src='https://files.brightside.me/files/news/part_31/310360/12086810-10111660-1-0-1487765591-1487765607-0-1488442321-0-1488458395-1488458410-650-1-1488458410-650-0c369e17e2-1488484030.jpg'>
<div class='miniTitle'>11 Illustrations That Perfectly Capture How Life Changes When We Grow Up<br /><span>2017-03-17 17:12:36</span></div>
</a>
</div>
<div class='middleOne'>
<a href='http://localhost/jhandwa/story/10-things-you-didnt-know-about-the-us-secret-service'>
<img src='https://www.whitehouse.gov/sites/whitehouse.gov/files/images/first-family/44_barack_obama%5B1%5D.jpg'>
<div class='miniTitle'>10 Things You Didn't Know About<br /><span>2017-03-17 15:15:29</span></div>
</a>
</div>
<div class='middleOne'>
<a href='http://localhost/jhandwa/story/who-is-actually-dumb-and-dumber-after-watching-these-crime-serials'>
<img src='https://s-media-cache-ak0.pinimg.com/originals/36/45/e6/3645e66b26b611a30fabf923f7247d23.jpg'>
<div class='miniTitle'>Who is Actually 'dumb' and 'dumber' after this? <br /><span>2017-02-28 00:00:00</span></div>
</a>
</div>
</div>");
}
</script>
what am i doing wrong here? i feel its something wrong because of double or single quotes.why isn't it working?

Updating my original answer:
First, you need to wrap your code in document.ready(). It should append when the dom is ready.
Second, it is not working because your outputted HTML is on multiple lines. If you look at your console, you would see the following errors:
Uncaught SyntaxError: Invalid or unexpected token
There are many ways to solve this issue, the simplest would be to use template literals, this means you should wrap your code within backtick.
$(document).ready(function () {
if ($(window).width() > 500) {
$("body").append(`<?php include('includes/middle.php') ?>`);
}
});
However, this solution may not be compatible with all browsers as this feature has been introduced in ES6.
A much better way would be to call the sidebar.php via ajax.
$(document).ready(function () {
if ($(window).width() > 500) {
$.get("includes/middle.php", function (data, status) {
$("body").append(data);
})
}
});

This script can not execute because your PHP file have multiple line. And multiple line will make your JS syntax wrong.
You need include this php file in a hidden script, and use jQuery to get this div content and append into body.
And as #Hyder B say, you need put this script execute when document has been ready.
You can try this way:
<div id="included_content" style="display:none">
<?php include('includes/middle.php') ?>
</div>
<script>
$(document).ready(function() {
if($(window).width() > 500){
$("body").append($("#included_content").html());
}
});
</script>

Try this:
if($(window).width()>500){
$.ajax({
url: 'includes/middle.php',
success: function(html) {
$("body").append(html);
}
});
}

Based on this answer and as you directly echo inside the included page, you can use backtick (`) to wrap multiline string in js properly.
<script>
$(document).ready(function() {
if($(window).width()>500){
$("body").append(`<?php include('includes/middle.php'); ?>`);
}
});
</script>

Syntax Highlighting using javascript

I created a logger window for my Django website - basically just grabs lines from a .txt log file that my views.py python logger creates and displays them in a popup window. The code I created to do this grabs lines from the log file every second and uses javascript to write them to a <span> element. I want to be able to color code the messages based on the message level (ERROR = red, WARNING = yellow, etc) but can't seem to figure it out.
EDIT
I was able to color the first WARNING message but am not sure how to get it to color all of them.
The html/javascript code to create the log window looks like this:
<body>
<div class="container-fluid">
<div class="panel panel-default">
<div class="panel-heading text-center">
<h4 class="text-center">Log Messages</h4>
</div>
<div class="panel-body">
<div class="content" id="logtext">
<font face="courier">
<span id="show" class='value'></span>
</font>
</div>
</div>
</div>
<script language="javascript" type="text/javascript">
function saveLogs(data){
sessionStorage.setItem("logs",data.message);
}
$(document).ready(
function() {
setInterval(function() {
Dajaxice.InterfaceApp.getLogs(saveLogs);
var logs = sessionStorage.getItem("logs");
document.querySelector('.content .value').innerText = logs;
$("div:contains('WARNING')").each(function () {
$(this).html($(this).html().replace("WARNING", "<span class='red'>WARNING</span>"));
});
}, 1000);
});
</script>
</div>
</body>
The Dajaxice calls this python function:
def getLogs(request):
fname = log_path
with open(fname,"r") as f:
lines = f.readlines()
lines = lines[-1000:]
return json.dumps({'message':lines})
The log window currently looks like this:
and I want to be able to color code the messages based on the level. I've tried a couple things (this, and this) but no luck.

Looks the log messages have a fix and simple format, a string replace on the whole log could be used, without the JQuery part:
document.querySelector('.content .value').innerHTML = colorize(logs);
function colorize(logs) {
return logs.replace("(WARNING)", "(<span class='red'>WARNING</span>)");
}