MVC Model property works intermittently with Javascript - javascript

I have a pretty basic MVC application and I am using a little bit of jQuery/JavaScript in it.
I am passing a Model parameter of type string into a function call. It works with some input but not others and I am wondering why and if it is any of the characters in the string.
Here are my functions:
//In the View
$().ready(function () {
alert(#Model.PartNumber); // Returns nothing on second input value below
LoadMenus(#Model.PartNumber);
});
// In an external js file referenced in _layout.cshtml
LoadMenus(partNumber){
alert(partNumber) // Returns nothing on my second value from below
$('#something').append('<div class="col-12 sidebar-link">Part</div>');
...
}
These are two of the values that I have used:
'100226' and the function is executed successfully, loading my menu
'5237HES-06' and the function doesn't execute
I have put console log and alert statements to see what gets loaded and what doesn't. No JS alerts are triggered in the jquery or javascript functions.
Please shed some light. Hopefully something silly that I am overlooking.

Related

update to boostrap 4 implicit call of function undefined asp.net mvc

I am recently working on a task of an existing website, updating Bootstrap from version 3.3.4 to 4.4.1 . The problem that I encountered is when you implicitly call a js function in the cshtml, function is undefined even though it's in the Bundle.config file and I think that it's correctly arranged. But when you call a function inside of ex. a button on a onclick attribute the function works fine, also the called functions works when you explicitly add the script reference ( ex. ) inside the cshtml file. I'm still new at web development and in mvc, have anyone encountered this? can someone help me, I would really appreaciate a helping hand..
Bundle.config
bundles.Add(new ScriptBundle("~/Scripts/js").Include(
"~/Scripts/jquery-3.4.1.min.js",
"~/Scripts/jquery-{version}.js",
"~/Scripts/jquery.cookie.js",
"~/Scripts/login.js",
"~/Scripts/jquery-ui-1.12.1.min.js",
"~/Scripts/umd/popper.min.js",
"~/Scripts/bootstrap-submenu-min.js",
"~/Scripts/loyalty-members.js",
"~/Scripts/prepaid-card.js",
"~/Scripts/contactus.js",
"~/Scripts/loading.js",
"~/Scripts/jquery.flexslider.js",
"~/Scripts/home.js",
"~/Scripts/myprofile.js",
"~/Scripts/alertmsg.js",
"~/Scripts/merchants.js",
"~/Scripts/flipclock/flipclock.js",
"~/Scripts/bootstrap.min.js",
"~/scripts/adjustmentbs4/navbar-customize.js" --> this is a test js file with function with alert
));
This is just a test function to call inside the cshtml
function ShowDropdownMenu() {
alert("Test");
}
This is the script inside the cshmtl, as you can see the test function ShowDropdownMenu is called, but originally below that is the alertMessagePrompt function that is also when called is undefined or not defined. but I tested other functions as well like that ShowDropdownMenu and it has the same error the alertMessagePrompt function
<script>
ShowDropdownMenu();
if ('#TempData["Message"]' != null && '#TempData["Message"]' != "") {
if ('#TempData["pc_result"]' == '0') {
} else {
alertMessagePrompt("Registration Error", "#TempData["Message"]", 1, [["Ok", "btnOkCloseId", 2, "closeMsgPrompt()"]]);
}
changeValue("pc_firstname");
changeValue("pc_middlename");
changeValue("pc_lastname");
validateMobile("pc_mobile");
changeValue("pc_bdate");
validateEmail('pc_youremail');
changeValue("pc_cardName");
changeValue("pc_cityResidence");
changeValue("pc_cityWork");
}
</script>
I've also tested from the original version of this project, I first updated the jquery and functions implicitly called inside cshtml are still working fine, but after updating bootstrap 4 that is when the error begins.

Running client side javascript without loading a new (blank) view on Odoo 8

I need to run some client-side javascript from a button in a form view in Odoo 8. This button runs a python method which returns this dictionary:
{"type": "ir.actions.client",
"tag": "my_module.do_something",}
do_something is defined in a .js file as follows:
openerp.my_module = function (instance) {
instance.web.client_actions.add("my_module.do_something", "instance.my_module.Action");
instance.my_module.Action = instance.web.Widget.extend({
init: function() {
// Do a lot of nice things here
}
});
};
Now, the javascript is loaded and executed properly, but even before launching the init function, Odoo loads a brand new, blank view, and once the javascript is over I can't get browse any other menu entry. In fact, wherever I click I get this error:
Uncaught TypeError: Cannot read property 'callbackList' of undefined
What I need instead is to run the javascript from the form view where the button belongs, without loading a new view, so both getting the javascript stuff done and leaving all callbacks and the whole environment in a good state. My gut feeling is that I shouldn't override the init funcion (or maybe the whole thing is broken, I'm quite new to Odoo client-side js) , but I couldn't find docs neither a good example to call js the way I want. Any idea to get that?
Sorry, I don't work on v8 since a lot of time and I don't remember how to add that, but this might help you: https://github.com/odoo/odoo/blob/8.0/doc/howtos/web.rst
Plus, if you search into v8 code base you can find some occurence of client actions in web module docs https://github.com/odoo/odoo/search?utf8=%E2%9C%93&q=instance.web.client_actions.add
Thanks to the pointers simahawk posted in another answer, I have been able to fix my js, which is now doing exactly what I needed. For your reference, the code is as follows:
openerp.my_module = function (instance) {
instance.web.client_actions.add("my_module.do_something", "instance.my_module.action");
instance.my_module.action = function (parent, action) {
// Do a lot of nice things here
}
};

Qt function runJavaScript() does not execute JavaScript code

I am trying to implement the displaying of a web page in Qt. I chose to use the Qt WebEngine to achieve my task. Here's what I did :
Wrote a sample web page consisting of a empty form.
Wrote a JS file with just an API to create a radio button inside the form.
In my code, it looks like this :
View = new QWebEngineView(this);
// read the js file using qfile
file.open("path to jsFile");
myJsApi = file.Readall();
View->page()->runjavascript (myjsapi);
View->page()->runjavascript ("createRadioButton(\"button1\");");
I find that the runJavaScript() function has no effect on the web page. I can see the web page in the output window, but the radio button I expected is not present. What am I doing wrong?
I think you will have to connect the signal loadFinished(bool) of your page() to a slot, then execute runJavaScript() in this slot.
void yourClass::mainFunction()
{
View = new QWebEngineView(this);
connect( View->page(), SIGNAL(loadFinished(bool)), this, SLOT(slotForRunJS(bool)));
}
void yourClass::slotForRunJS(bool ok)
{
// read the js file using qfile
file.open("path to jsFile");
myJsApi = file.Readall();
View->page()->runJavaScript(myjsapi);
View->page()->runJavaScript("createRadioButton(\"button1\");");
}
I had this problem, runJavascript didn't have any effect. I had to put some html content into the view (with page().setHtml("") before running it.
Check the application output, it might contain JavaScript errors. Even if your JS code is valid, you might encounter the situation where the script is run before DOMContentLoaded event, that is document.readyState == 'loading'. Therefore, the DOM might not be available yet, as well as variables or functions provided by other scripts. If you depend on them for your code to run, when you detect this readyState, either wait for the event or try calling the function later, after a timeout. The second approach with timeout might be needed if you need to get the result of the code execution, as this can be done only synchronously.

Debugging Javascript functions in Firebug

I am trying to debug legacy scripts with Firebug. As per my knowledge (Which I got yesterday)
we use Step over (F10) to debug line by line and Step into (F11) to dig into JS function.
But when I use Step into on any JS function call, it takes control to next line. I want to see what is hidden inside the function. How can we do it ?
I kept break-point inside the function and then tried Step into then it takes control inside the function body. But it is tedious to find each function method and set break-point.
Is there any other way to do it ? or which is the right way ?
For example :
i2b2.ONT.ctrlr.FindBy = {
clickSearchName: function() {
// do some stuff
i2b2.ONT.ctrlr.FindBy.doNameSearch(search_info); // I tried Step into here
// some more stuff
}
doNameSearch: function(inSearchData) {
// If I set break-point here then only I can debug it
// or it directly takes control to `// some more stuff` in `clickSearchName:function`
}
}
PS: It also more external JS function calls.
Thanks,
Ajinkya.
"Step into" will step into the function if there is JS source for the function. If not (like for document.getElementById("foo"), it will step over it since it doesn't have anything that it understand to step into.
If you can point us to a working example where you are having the problem (either a jsFiddle reduction of the problem or a working web page) with instruction on where the relevant code is, we can probably help more.
Judging by your code example, I'm wondering what you're trying to step into. The line of code that starts with clickSearchName defines a function. It doesn't execute it. So, it won't go into that function until some later code actually calls clickSearchName. So, perhaps you're breaking on the definition of the function and trying to step into the function when it isn't being executed. That's just a guess though since we don't have a working example to try ourselves.
Add the line debugger; to your code at the place where you want to break into the debugger, it's a JavaScript keyword, which should do what you want. Just remember to take it out when you're done debugging your code.

Google Website Optimiser Control Javascript

Could someone explain the javascript that makes up Google's Website Optimiser Control script? Specifically: the first two lines, which seem to be empty functions, and why is the third function wrapped parentheses () ?
As far as I can tell this script is basically writing out a new <script> which presumably loads something for A/B testing.
function utmx_section(){}
function utmx(){}
(function() {
var k='0634742331',d=document,l=d.location,c=d.cookie;
function f(n) {
if(c) {
var i=c.indexOf(n+'=');
if (i>-1) {
var j=c.indexOf(';',i);
return escape(c.substring(i+n.length+1,j<0?c.length:j))
}
}
}
var x=f('__utmx'),xx=f('__utmxx'),h=l.hash;
d.write('<sc'+'ript src="'+'http'+(l.protocol=='https:'?'s://ssl':'://www')+'.google-analytics.com'+'/siteopt.js?v=1&utmxkey='+k+'&utmx='+(x?x:'')+'&utmxx='+(xx?xx:'')+'&utmxtime='+new Date().valueOf()+(h?'&utmxhash='+escape(h.substr(1)):'')+'" type="text/javascript" charset="utf-8"></sc'+'ript>')
}
)();
I've attempted to step through with the firebug debugger but it doesn't seem to like it. Any insights much appreciated.
Many thanks
inside anonymous function it shortens names of document and cookies inside it at first, function f(n) gets value of cookie under name n. Then Google reads its cookies and with help of d.write it loads its scripts (as I see they are related to Google Analytic). This way it makes On-Demand JavaScript loading... Actually you load these scripts all the time, Google just needs some additional parameters in url, so this is done this way - save parameters in cookie, which next time are used to get script again.
And finally back to the first two magic lines :) After Google loads its script (after executing d.write), there are some functions which uses utmx and utmx_section, as well as definition of these functions, or better to say overriding. I think they are empty at first just because another function can execute it before its real definition, and having empty functions nothing will happen (and no JS error), otherwise script would not work. E.g. after first iteration there is some data, which is used to make real definition of these functions and everything starts to work :)
The first 2 functions are in fact empty, and are probably overridden later on.
The third function is an anonymous self-executing function. The brackets are a convention to make you aware of the fact that it is self executing.
the "f" function looks up the value given to it in the document's cookies and returns it. Then a new script tag is written to document (and requested from server) with these values as part of its URL.

Categories

Resources