Develop Reference

MVC Model property works intermittently with 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.

Dojo aspect before not working on dojo request

I have a Dojo class that uses dojo/request to submit various requests to the server.
I need to use dojo/aspect to add a before advice to those requests.
The docs seem relatively easy to understand.
My class declaration looks something like this:
'myPackage/MyClass':function(){
define("myPackage/MyClass", [
"dojo/request",
// etc. etc.
"dojo/aspect"
], function(request, ..., aspect) {
return declare("myPackage.MyClass", null, {
constructor: function(options){
aspect.before(dojo, "request",
function(url, args){
// TODO
alert("before advice applied");
}
);
},
// various functions that use dojo request
});
}
);
}
My problem is that the before advice is never executed.
I've tried a few variants, such as targeting this instead of dojo, or targeting request directly and its only visible function when inspected, xhr.
I even went back to the doc page in desperation and tried targeting dojo with method "xhr" to see if it couldn't by chance be invoked internally, but nothing ever worked.
Is there maybe something obvious that I've overlooked?
Edit
I tried modifying my code so that the before advice was executed targeting this and a frequently used function.
Something like: aspect.before(this, "theFrequentlyUsedFunction",
That worked just fine right out of the box, which means I can use a cumbersome workaround and add a before advice for each of the functions invoking request, assuming the time complexity of statements preceding the request call in those functions is trivial.
My conclusion so far is that I'm not referencing the right target and function name when applying advice before Dojo request calls, but I'm still baffled as per why this doesn't work.

In your case "request" is not a property of "dojo" object. It's just a name of argument passed in function. So you can assign it to any property of any object, even to property of your module. So you was close to solution. Take a look on my example:
define([
"dojo/_base/declare",
.....
"dojo/request",
"dojo/aspect"
], function (
declare,
.....
request,
aspect
) {
return declare("Test", [...], {
request: request,
constructor: function () {
aspect.before(this, "request", function () {
console.log("before advice applied");
});
}
......
});
});

Async Problems with jQuery & Javascript

I'm going round in circles and can't seem to figure out a solution from the resources currently available here on Stack or Google. There's got to be something obvious that I'm missing, perhaps you might be able to help?
Story summary:
A javascript function launches when clicked and creates a new contact in our database.
Additional functions are then called upon successful creation to toggle some settings where necessary, dependant on a few checkboxes.
Calls are currently being made asynchronously, resulting in only the last function call to successfully update the contact.
I can't, for the life of me, get the call to work one after the other instead.
Each call returns a JsonResult upon successful completion, if that helps at all (needed for other areas of the application.
Code currently looks like:
function CreateClicked(){
Contact.Create(**bunch of params**, function(data){
if(data.success) {
togglePrimary(data.newId);
toggleBilling(data.newId);
toggleTechnical(data.newId);
toggleBalance(data.newId);
toggleSecurity(data.newId);
toggleMarketing(data.newId);
Modal.Load(**loads a modal view**);
}
}
}
The toggle functions then look like:
function togglePrimary(id) {
if ($("#contact_admin_primaryrole").prop('checked'))
{Contact.TogglePrimaryRole(id);}
}
Which calls a controller function that looks like this:
public JsonResult TogglePrimaryRole(int contactId){
try{
var c = new Contact(contactId);
c.IsPrimaryContact = !c.IsPrimaryContact;
c.Update(AuthenticatedUser.Username, !c.IsPrimaryContact);
return Json(JSONResponseFactory.SuccessResponse("Contact updated successfully"));
}
catch (Exception ex){
return Json(JSONResponseFactory.ErrorResponse(ex.Message));
}
}
How should I go about setting this up so that each toggle function doesn't start until the previous one has finished and returned a Json response, regardless of success?
Any ideas?
Cheers,
Dez

Using jQuery promises should help:
togglePrimary(data.newId).then(toggleBilling(data.newId)).then(toggleTechnical(data.newId)
etc.
This will run the next function only if the last one was a success. If you want to call the function irrelevent of the outcome then use always() instead of then()
togglePrimary(data.newId).always(toggleBilling(data.newId)).always(toggleTechnical(data.newId)
This will require jquery 1.6 or higher to be referenced. To reference from the CDN add the following
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>

I couldn't seem to get anywhere with promises, or javascript function chaining with callbacks... so I turned the values of each status into an array of strings and parsed it within the controller instead!
Thanks for helping :)

HTML5 drag event using a $(function() { ... } library

I have been playing around with HTML5 and Javascript for the first time and I am stuck. My question in short is how do I call a method (in html) inside a JS file which starts with
$(function() { ... }
Basically I used azure which gives you a code project to start but when it gave me the files there was a page.js which started with:
$(function() {
var client = new WindowsAzure.MobileServiceClient('[...]', '[...]'),
todoItemTable = client.getTable('todoitem');
...
The azure service has a very simple database which I need to use to create a Kanban boardesc webpage.
I made my task element draggable and added events to handle it but I am unable to create the event method in this JS file and if I have it in my HTML I am unable to call any of the methods in the .js
I have asked around work and no one seems to have seen the $(function() { ... } thing before and I can't find the info that I need anywhere.
Thanks

You do not call this method directly; the syntax you're looking at is JQuery's document.ready in other words this function gets called when your document is finished loading.
JQuery Link - Document.Ready

That is the jQuery shorthand for the $(document).ready(handler) function. Anything you put in the function will be executed when the document is finished loading.
jQuery ready function

That syntax is jQuery - specifically an an alias of the "DOMReady" function
( http://api.jquery.com/ready/ ) which is called after the DOM has finished loading.
Try looking at this question's suggested answer by Derick Bailey.
Why define an anonymous function and pass it jQuery as the argument?
He includes some sample code of how to write a code using a JavaScript Module pattern.
Good luck!
Anthony

Querying the DOM in Windows 8 Apps from within a method

I'm struggling with this even after reading the MSDN documentation and the following online guides:
Codefoster
Stephen Walter
I think my problem is easy to fix and that I just am thinking about something in the wrong way. Basically I am querying my web service and on success running the following method. I am then trying to bind the result to my listview. For now I am using a hardcoded value publicMembers.itemlistwhich has been declared at the top of the document just to make sure I can actually bind to the list before doing it with my query results. Ignore line 2 for now.
Success Method:
_lookUpSuccess: function xhrSucceed(Result) {
var response = JSON.parse(Result.responseText);
listView = document.querySelector("#termTest");
ui.setOptions(listView, {
itemDataSource: publicMembers.itemList,
itemTemplate: document.querySelector(".itemtemplate"),
})
},
Now, instead of using document.querySelector, I have also tried with WinJS.Utilities.id and WinJS.Utilities.query, neither of which worked either. This doesn't break my code and introduce an error but it doesn't bind to the listview either so I think I have an issue in querying the right DOM element. However exactly the same code does work if I add it to the top of the script, it is only when I place it in this method that it stops working.
EDIT: Also to clarify, when I debug publicMembers.itemList is storing the values I expect them to be.
Please point out if I have explained things poorly and I will try and improve my question.
Thanks.

I haven't used WinJS.UI.setOptions, but rather this other way of setting the data source. Can you see if it works?
_lookUpSuccess: function xhrSucceed(result) {
var response = JSON.parse(result.responseText);
listView = document.querySelector("#termTest");
listView.winControl.itemDataSource = publicMembers.itemList;
},
This would assume you're defining the itemTemplate as part of the data-win-options attribute of your ListView's HTML element. You could also probably just do listView.winControl.itemTemplate = document.querySelector(".itemtemplate") if you prefer to set it programmatically.