We Keep Coding

Unable to update javascript file in .net core

I trying to study .net core with a test project.
In this project there is a user javascript javascript file called "booklist.js" that call some functions like edit and delete button.
For some strange think any modifications of this file don't do any effect.
After delete this file, the project continue to work.
But if i disable these lines:
#section Scripts{
<script src="~/js/bookList.js"></script>
}
on the view page the project not read the data.
I'am new with MVC and I don't have any idea about.
Can you help me please ?
Thanks !

One of the reasons of this issue could be browser caching the old js in file, as a solution is to append a parameter to your js source like a timestamp
Then your js tag becomes:
<script type="text/javascript" language="javascript">
var versionUpdate = (new Date()).getTime();
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "~/js/bookList.js?v=" + versionUpdate;
document.body.appendChild(script);
</script>
Reference: https://www.c-sharpcorner.com/article/how-to-force-the-browser-to-reload-cached-js-css-files-to-reflect-latest-chan/
or
You can use the new feature in .Net Core
asp-append-version="true"
Then your js tag becomes:
<script src="~/js/bookList.js" asp-append-version="true"></script>
Reference: https://www.c-sharpcorner.com/blogs/aspappendversion-feature-in-asp-net-core

Jquery datepicker control is not working inside child control of master page

Jquery datepicker is working in normal webpage but not with master page concept.It's throwing error saying "0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'datepicker'".
Tried following approaches but no luck.
1st Approach:
$('#<%= datepicker.ClientID %>').datepicker();
2nd Approach:
$(".datepicker").datepicker();
3rd Approach:
Placed jquery script files in master page and datepicker code between script tag inside content placeholder like below
<script type="text/javascript">
$('#<%= datepicker.ClientID %>').datepicker();
</script>
Please suggest other approaches to make it work.

Printing in Javascript whilst using <%# %>

I need to print a DataViewGrid from a website made in ASP.NET and have am using JavaScript to do it as it seems much easier that achieving it is C#. Below is the code that I am using to try and print the document.
<script type="text/javascript">
function doPrint() {
var prtContent = document.getElementById('<%# dgvInvoices.ClientID %>');
prtContent.border = 0;
var WinPrint = window.open('', '', 'left=100,top=100,width=1000,height=1000,toolbar=0,scrollbars=1,status=0,resizable=1');
WinPrint.document.write(prtContent.outerHTML);
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
WinPrint.close();
}
I had to change line 3 from ('<%= dgvInvoices.ClientID %>'); because it was giving me a control error, and now I believe this is stopping my document from printing. Does anyone have any work around or fixes for this? Or an easy way to print in C#?
The original error was:
The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).

If you are using ASP.NET Ajax and have a ScriptManager in your page or master page, you could do:
var prtContent = $get('<%= this.dgvInvoices.ClientID %>');
Also, if you are using the .Net framework version 4 or above, you can set the property ClientIDMode="Static" in the control, so the ClientID will be rendered as declared and you'll be able to use the document.getElementById javascript function passing the declared ID as parameter.

JQuery in ASP.Net User Control in C#

I'm having problems using JQuery inside an ASP.Net User Control I've created a sample and here is the markup for my user control:
<%# Control Language="C#" ClassName="UC" AutoEventWireup="true"
CodeFile="UC.ascx.cs" Inherits="UserControls_UC" %>
<span id="Licenses"></span>
<script type="text/javascript">
$(document).ready(function() {
var ctlID = $("span[id$='Licenses']");
ctlID.text = "Testing";
});
</script>
If I include this script tag <script type="text/javascript" src="js/jquery-1.3.2.js" /> in the aspx file containing the user control to reference JQuery, nothing happens. If I don't include it, I get a JavaScript error dialog saying there was a runtime error and that an Object was expected. Any ideas what I may be doing wrong?

text is a function in jQuery. Try:
ctlID.text("Testing");

Prefixing the '$' to the id gets all elements that ends with "Licenses" .
Make a quick change to test this to '#' will get you exactly one element.
$(document).ready(function() {
var ctlID = $("#Licenses");
ctlID.text = "Testing";
});
To make it work with attribute selector try
$('span[#id=Licenses]') // You can omit the # in the latest version of jquery.

I think you should use something like this:
var ctlID = $("span[id$='Licenses']").get(0);
ctlID.text = "Testing";

Have you included the jquery library correctly on master page?
Is that not meant to be dollar before id, i.e. $id='Licenses' ? or even a #

Ajax Control Toolkit HTML Editor Customization Problem?

How to Change default setting for ACT HTML Editor? I want to load editor with for example Selected Bold Button or with rtl direction instead of ltr defaultly.
How can I perform that?
I overrided FillTopToolbar() method to add Custom buttons but I dont Know how to change default settings. as Default ltr is selected I want to change it to rtl.

I edited my answer to correct some things
The HTMLEditor doesn't provide a way to set the state of those buttons using serverside code. Although, on the client, it initializes by using Sys.Application.load Event. If you ran your code after their initializers, but before the user will interact with the UI, you could then set whatever properties you want to set in that event handler.
Here is the code you need to set the bold button and the rtl buttons states. You can take it from here if you want to change the states of other buttons:
// Attach a handler to the load event.
Sys.Application.add_load(myOnLoadLoader);
function myOnLoadLoader() {
//This will run JUST after ALL code that was set to run during the load event has run
window.setTimeout(myOnLoad, 0);
}
function myOnLoad() {
var editor = $find('<% =editor.ClientID %>');
var toolbar = editor.get_changingToolbar();
var toolbarButtons = toolbar.get_buttons();
for (var i = 0; i < toolbarButtons.length; i++) {
var toolbarButton = toolbarButtons[i];
if (toolbarButton instanceof AjaxControlToolkit.HTMLEditor.ToolbarButton.Rtl ||
toolbarButton instanceof AjaxControlToolkit.HTMLEditor.ToolbarButton.Bold) {
toolbarButton.set_activeEditPanel(editor.get_editPanel());
toolbarButton.callMethod();
}
}
}
Sys (and therefore Sys.Application) is a namespace that comes from the ASP.Net AJAX javascript (file(s) that are added thanks to the ScriptManager that you add to your page). If you use this, you need to be sure that this line Sys.Application.add_load(myOnLoad); runs after the ASP.Net AJAX files load. You can do this a couple of ways:
Add this script lower in the page than the scriptManager.
Move your script into a separate JS file, and use the ScriptManager to load it (recommended).
If you move your script into a separate file, you'll notice that var editor = $find('<% =youreditor.ClientID %>'); no longer works. That is because javascript files do not parse out server tags and replace them with the server side value (as aspx pages do). So the part that is a problem here is <% =youreditor.ClientID %>.
To fix that, here is what you do:
Add this to your aspx markup (in the head section):
<script language="javascript">
var myEditorId = '<%= youreditor.ClientID %>';
</script>
So it looks something like this:
<head runat="server">
<script language="javascript">
var myEditorId = '<%= youreditor.ClientID %>';
</script>
<title></title>
</head>
(If you are using a Master Page, you'll just add the script tag below the ScriptManager in your page)
And in your JS file, replace this
var editor = $find('<% =youreditor.ClientID %>');
with this
var editor = $find(myEditorId);

You will need to do this using CSS as the editor control doesn't support rtl natively. The following CSS will set direction to rtl -
div
{
direction:rtl;
}
The default styles for the HTML editor can be found in the Editor.css file.