Develop Reference

How to set value in .net tag helper attribute using javascript?

I am trying to set parameter value read from a textbox on the page to this link:
<a asp-action="RetrieveEmailRecipients" asp-route-clientnumber="getClientNumber()">Retrieve Email Recipients</a>
And I have Javascript down somewhere else at the bottom of the page. But appreatly this is not the right way to pass value to MVC action method's parameter.
What parameter ClientNumber read in action is whatever the string/value in asp-route-clientnumber, in this case the value is getClientNumber().
What is the correct way to set value in the attribute using javascript/jquery?

you are mixing server side code and client side code together
I am assuming your getClientNumber() is a javascript function
Tag Helper is generated before javascript comes in, so when server is generating the html, it has no knowledge of what getClientNumber()
is so will treated as literal string
So the proper way of doing it will be modify the url with jquery when client number available
Something like:
give the anchor an identifier - so you can access it using jquery easily and remove the route
<a id="aRetriveEmail" asp-action="RetrieveEmailRecipients">Retrieve Email Recipients</a>
modify the attribute of the anchor to include your clientNumber whenever you have clientNumber ready, or use javascript to navigate to it
$(function(){
$("#aRetriveEmail").click(function(){
// example of how modifying href when client number ready
// $(this).attr("href", $(this).attr("href") + "?clientnumber=" + getClientNumber());
// or navigate to the url
location.href = $(this).attr("href") + "?clientnumber=" + getClientNumber();
})
})

Django custom template tags in javascript

I have a custom template tag that returns suppose name of a student and roll number if passed as an argument id of the student.
#register.inclusion_tag('snippet/student_name.html')
def st_name_tag(profile, disp_roll=True, disp_name=True):
#some calculations
return {'full_name':student.name,
'roll':student.roll_number,
}
The template(included) consists of some Html file which is written in a single line(to avoid unterminated string literal error from js).
I simply want to call the st_name_tag from inside the JS function.
My JS looks like:
{% load profile_tag %}
<script type = "text/javascript">
eventclick : function(st){
var div = ('<div></div>');
var st_id = st.id;
if (st.status == 'pass'){
div.append('<p>Student Name:{% st_name_tag '+st_id+' %}</p>');
}
}
So far I tried the above method along with removing the + and '' signs from st_id varaible. That hasnt helped me at all. Help Please!

You are trying to render a template based on the interaction by user. The first happens on the server (server-side as it is often referred to), and the latter happens on the user's browser.
The order that these happen is first to render the template on server, send and present in browser, then user interacts with js. Because of this fact, as I mentioned in the comment, it is not possible to affect the template rendered within javascript.
I would recommend you to use ajax in order to accomplish this. Whenever an iteraction occurs, you asynchronously make a request to the server to present you with new data.

How can one incorporate JSON data with the returned HTML on the first request to the home page?

My scenario is this - the user asks for the home page and then the javascript code of the page executes an ajax GET request to the same server to get some object.
The server keeps the home page as a jade template.
So, right now it takes two roundtrips to load the home page:
GET the home page
GET the JSON object
I am OK with it, but just out of curiosity - what are my options to incorporate the object requested later into the initial GET request of the home page?
I see one way is to have a hidden html element, which inner HTML would be the string representation of the object. A bit awkward, but pretty simple on the server side, given that the home page jade template is preprocessed anyway.
What are my other options?
Please, note that I am perfectly aware that sparing this one roundtrip does not really matter. I am just curious about the techniques.

Another option is to always return a JSON object, then the HTML for your home page would be the value of some property on this object. This would probably require some changes on your client-side logic, though.
One more option: instead of a hidden HTML input/textarea containing a JSON string, the home page code could contain a script block where an object literal is declared as a variable. Something like this:
<script>
var myObj = ... // Your JSON string here.
// myObj will be an object literal, and you won't need
// to parse the JSON.
</script>

The initial GET request will retrieve just that document. You can have additional documents loaded defined as scripts at the bottom of your page, so you don't need to do a XHR, for the initial load.
For instance:
GET /index.html
//At the bottom you have a <script src="/somedata.js"></script>
GET /somedata.js
//here you define you var myObj = {}.... as suggested by bfavertto
Depending on which server side technology are you using, this could be for instance in MVC3
public partial class SomeDataController : BaseController
{
public virtual ContentResult SomeData()
{
var someObject = //GET the JSON
return Content("var myObj = " + someObject, "application/javascript");
}
}

You can embed the Json data inside a hidden tag in your HTML. At runtime, your javascript reads the data from this hidden tag instead of making a Json call (or make the call if this data is not available).
<!--the contents of this div will be filled at server side with a Json string-->
<div id="my-json-data" style="display:hidden">[...json data...]</div>
on document ready:
var jsonStr = document.getElementById( "my-json-data" ).innerHTML;

Extracting part of current page's URL in javascript

In ASP.NET MVC 3 site, I open the following uri
http://myserver/incidents/supercompany/register
That page needs to make use of ajax JSON retrieval mechanism with the help of jQuery:
$.getJSON('/Incidents/[[COMPANY NAME GOES HERE]]/SearchPeople/' + request.term, function (data)
I am new to javascript. How can I obtain supercompany part of my current url to build the
/Incidents/supercompany/SearchPeople/ string?

Assuming your URLs follow a logical structure, you can do this
var URLparts = window.location.toString().substr(7).split('/');
And you can now access URLparts[1] to get the company name. Obviously, you need to be able to know that that will ALWAYS be there, but it's a solution if you can guarantee that (eg. with htaccess).

.load() with data

I want to load data into a checkout page using .load() to load the pages in a modal window. The data that needs to be loaded is a shipping price value, that needs to be usable on the loaded page.
JS
function totalCalc() {
var shipping = ($('#shippingform input[name="shipping"]').val());
$('#cartdialog').load("/ash/shop/checkout.php",[$('#shippingform input[name="shipping"]')]);
alert(shipping);
}
CHECKOUT.PHP
$myTotal = ($subtotal + $_POST['shipping']);
I need the value which is shown through the "alert(shipping);" to be a usable value on checkout.php. You'll see I try to $_POST[] it in a php variable, but it wont work. I must be sending the data wrong...

Per the jQuery API, data sent as a query-string format string through .load() is treated as GET. Data sent as a JSON object is treated as POST. Basically, send it like this:
.load("/ash/show/checkout.php", {shipping: shipping});

As it seems you're using jQuery: http://api.jquery.com/jQuery.post/
or if you want proper control over it, use the ajax method: http://api.jquery.com/jQuery.ajax/
Alternatively, you could add the shipping cost to the URL and use $_GET