We Keep Coding

JS file not being found in .NET visual studio using Blazor WebAssembly

I am trying to add a JS script file called chatfunction.js into my index.html in Blazor but it gives me an error that it cannot find a file. My CSS is linked correctly and the HTML and CSS both show up but it does not provide any of the JS functionality that I have implemented.
I am adding it at the bottom of my HTML in index.html like this:
....
<script src="_framework/blazor.webassembly.js"></script>
<script src="chatfunction.js"></script>
</body>
</html>
Here is my project structure
Now when I try compiling it gives me this error:
(JS) File 'C:/Users/darka/source/repos/chatproject/wwwroot/js/mysrc.js' not found.
I don't get why it can't find it and I am confused as to why it thinks my file is mysrc.js as there is no file like that in my project structure.
Any pointers how to fix this?
Here is the layout of my JS file
var botController = (function () {
})();
var uiController = (function () {
})();
var controller = (function (botCntr, uiCntr) {
var $chatCircle,
$chatBox,
$chatBoxClose,
$chatBoxWelcome,
$chatWraper,
$submitBtn,
$chatInput,
$msg;
/*toggle*/
function hideCircle(evt) {
evt.preventDefault();
$chatCircle.hide('scale');
$chatBox.show('scale');
$chatBoxWelcome.show('scale');
}
function chatBoxCl(evt) {
evt.preventDefault();
$chatCircle.show('scale');
$chatBox.hide('scale');
$chatBoxWelcome.hide('scale');
$chatWraper.hide('scale');
}
function chatOpenMessage(evt) {
evt.preventDefault();
$chatBoxWelcome.hide();
$chatWraper.show();
}
//generate messages on submit click
function submitMsg(evt) {
evt.preventDefault();
//1. get input message data
msg = $chatSubmitBtn.val();
//2.if there is no string button send shoudn't work
if (msg.trim() == '') {
return false;
}
//3. add message to bot controller
callbot(msg);
//4. display message to ui controller
generate_message(msg, 'self');
}
function chatSbmBtn(evt) {
if (evt.keyCode === 13 || evt.which === 13) {
console.log("btn pushed");
}
}
/* var input = uiCntr.getInput();*/
/* $chatSubmitBtn.on("click", hideCircle);*/
function init() {
$chatCircle = $("#chat-circle");
$chatBox = $(".chat-box");
$chatBoxClose = $(".chat-box-toggle");
$chatBoxWelcome = $(".chat-box-welcome__header");
$chatWraper = $("#chat-box__wraper");
$chatInput = $("#chat-input__text");
$submitBtn = $("#chat-submit");
//1. call toggle
$chatCircle.on("click", hideCircle);
$chatBoxClose.on("click", chatBoxCl);
$chatInput.on("click", chatOpenMessage);
//2. call wait message from CRM-human
$submitBtn.on("click", chatSbmBtn);
$chatInput.on("keypress", chatSbmBtn);
//6. get message from bot controller-back end
//7. display bot message to ui controller
}
return {
init: init
};
})(botController, uiController);
$('.chat-input__form').on('submit', function (e) {
e.preventDefault();
msg = $('.chat-input__text').val();
$('.chat-logs').append('<div id="cm-msg-0" class="chat-msg background-warning push-right bot"><div class="cm-msg-text">' + msg + '</div><span class="msg-avatar"><img class="chat-box-overlay_robot" src="https://www.meetsource.com//userStyles/images/user.png"></span></div>');
$('.chat-input__text').val('');
});
$(document).ready(controller.init);
function talk() {
var user = document.getElementById("userBox").value;
document.getElementById("userBox").value = "";
document.getElementById("chatLog").innerHTML += user + "<br>";
}

I think your script line needs to be:
<script src="js/chatfunction.js"></script>

HTML Object is shown as undefined in Javascript when using ContentPlaceHolder

I have a COM Object whose methods i can call in a HTML page using the code .But when i use the same code in an aspx page with a Master Page and keep the object in ContentPlaceHolder tag i get the error MyObject is undefined
My Javascript is:
function setText()
{
txtIdCardNo.value = MyObject.getIdCard;
if (MyObject.getIdType() == "R") {
rdbCardType2.checked = true;
}
else {
rdbCardType.checked = true;
}
txtCardExpiryDate.value = MyObject.getCardexpirydate();
txtNameEnglish.value = MyObject.getNameEnglish();
txtNameArabic.value = MyObject.getNameArabic();
if (MyObject.getGender() == "M") {
rdbMale.checked = true;
} else {
rdbFemale.checked = true;
}
TxtDob.value = MyObject.getDob();
txtNationality.value = MyObject.getNationality();
txtSponsorName.value = MyObject.getSponsorEng();
txtSponsorNameArabic.value = MyObject.getSponsorArb();
txtBirthPlace.value=MyObject.getBirthPlace();
txtPassportExpiry.value = MyObject.getPassport();
txtPassportNo.value = MyObject.getPassportexp();
txtSmartCardId.value = MyObject.getSmartCard();
txtSamCardId.value = MyObject.getSAMCard();
}
My Html Object is
<object id="MyObject" name="MyObject"
classid="clsid:37123a95-5afb-4f68-b95b-b735c505d8d9"></object>

This is not a solution to the problem but an alternate route that is by using ActiveXObject we can access the COM Object in our javascript ,in which case we dont have to use HTML Object

Get IFrame's name from WebBrowser2 using VC++ COM

VARIANT varindex,varresult;
VariantInit(&varindex);
VariantInit(&varresult);
varindex.vt = VT_I4;
varresult.vt = VT_DISPATCH;
long lFrameNum = 0;
CComPtr<IHTMLFramesCollection2> pFramesCollection;
hr = m_spDoc->get_frames(&pFramesCollection); //CComPtr<IHTMLDocument2> m_spDoc
if(FAILED(hr))
{
return false;
}
hr = pFramesCollection->get_length(&lFrameNum);
if(FAILED(hr))
{
return false;
}
for(int i=0; i<lFrameNum; i++)
{
varindex.lVal = i;
if(pFramesCollection->item(&varindex, &varresult) == S_OK)
{
IDispatch *pDispatch;
pDispatch = varresult.pdispVal;
CComQIPtr< IHTMLFrameBase > spFrameBase(pDispatch);
if(!spFrameBase) return false; //failed here, E_NOINTERFACE
}
}
The codes here shows how to enum frames in a webpage, and get its name. I get the IDispatch of each iframe successfully, but when I tried to get IHTMLFrameBase (IID_IHTMLFrameBase), it failed with the error E_NOINTERFACE.
I am not familiar with COM, what did I do wrong? Help me please, thanks in advance.

Though, I didn't get the frame name directly, but I figured out how to get The IHTMLDocument2* of that specific frame. And Then, I can do something to the frame, like call its js functions etc. The codes are like below:
VARIANT varindex,varresult;
VariantInit(&varindex);
VariantInit(&varresult);
varindex.vt = VT_BSTR;
varindex.bstrVal = "Frame Name"; //the specific frame name
pFramesCollection->item(&varindex,&varresult);
IHTMLWindow2* pFrameWindow;
varresult.pdispVal->QueryInterface(IID_IHTMLWindow2, (void **)&pFrameWindow);
IHTMLDocument2* pDoc;
pFrameWindow->get_document(&pDoc);
//do something ...

Calling a JS script from C#

I have the following poorly-formed JS:
<script type="text/javascript", id="changeTabScript">
function changeTab(type) {
String.prototype.contains = function(str) {return this.indexOf(str) != -1;};
var lbl = document.getElementById('searchLabel').Value;
if (lbl.contains("Officer"))
{
type = "Officer";
}
if (type == "Officer")
$('#tab-container').easytabs('select', '#tabs1-officer');
else
$('#tab-container').easytabs('select', '#tabs1-company');
};
</script>
I have implemented Page.RegisterStartupScript("changeTab", "<script language=JavaScript>changeTab </script");,
however I haven't a clue how ClientScript.RegisterStartupScript is formed. The "key" is something I am unfamiliar with, how do I use the newer implementation?

Get the element below the ready-function code, in jQuery?

For example:
<script>
$(document).ready( function() {
alert( $(this).getBelowElementToThisScript('form').id );
});
</script>
<form id="IamTheNext"></form>
<form id="Iamnot"></form>
This code should show this message: IamTheNext
In addition, the solution needs to work with this example too:
<script src="getbelowelement.js"></script>
<form id="IamTheNext"></form>
<form id="Iamnot"></form>
Thanks

Try this:
var form = $('script[src="getbelowelement.js"]').next();
But I would suggest using the forms id:
var form = $('#IamTheNext');

You could also try giving the script tag an id.

This kind of approach is dangerous; script should never depend that much on where it is in the page.
That said, the following works in Firefox and Chrome and should work in the major browsers (use at your own risk).
See it in action at jsBin. Both <script> ... and <script src="..."> approaches are shown in the same page.
$(document).ready( function () {
invocationsOfThis = (typeof invocationsOfThis == 'number') ? invocationsOfThis + 1 : 1;
var scriptTags = document.getElementsByTagName ('script');
var thisScriptTag = null;
//--- Search scripts for scripts of this type.
for (var foundCnt = 0, J = 0, L = scriptTags.length; J < L; ++J)
{
/*--- Since the script can be either inline or included, search
both the script text and the script src link for our unique
identifier.
*/
var thisTag = scriptTags[J];
var scriptCode = thisTag.innerText || thisTag.textContent;
var scriptSrc = thisTag.src;
//--- IMPORTANT, change pastebin.com to the filename that you use.
if (/invocationsOfThis/i.test (scriptCode) || /pastebin.com/i.test (scriptSrc))
{
//--- Found a copy of this script; is it the right one, based on invocation cnt?
foundCnt++;
if (foundCnt == invocationsOfThis) {
thisScriptTag = thisTag;
break;
}
}
}
if (thisScriptTag) {
//--- Get the target node.
var nextForm = $(thisScriptTag).next ('form');
var nextFormId = nextForm.attr ('id');
//--- Act on the target node. Here we notify the user
nextForm.text ('This is form: "' + nextFormId + '".');
}
} );