generating link using Url.Action with jquery href attr - javascript

I'm trying to generate a link using following
$(this).parent().attr('href', '#Url.Action("Create", "Home"' + '?clientId=' + clientId + '&clientName=' + clientName);
somewhere I read that I need to isolate this Url.Action with controller and action into variable so I tried with this
var a = '#Url.Action("Create", "Home"';
$(this).parent().attr('href', a + '?clientId=' + clientId + '&clientName=' + clientName);
But this still doesn't work.
In browser I'm getting
http://localhost:1328/Home/Index2/#Url.Action%28%22Create%22,%20%22Home%22?clientId=181&clientName=undefined

Another option is to store the url with data-* attributes and access them. In the View you can add the below attribute:
data-url='#Url.Action("Create", "Home")'
Now you can access this in the script with:
var base = $(this).data('url');
$(this).parent().attr('href', base + '?clientId='+ clientId +'&clientName=' + clientName);

Your script should be on Razor page in order to make #Url.Action helper work.
When you place it there this should work:
//this line should generate /Home/Create string
var urlNoParam = '#Url.Action("Create", "Home")';
//and here you just add params as you want
$(this).parent().attr('href', urlNoParam + '?clientId=' + clientId + '&clientName=' + clientName);

Related

converting URL to Action Link #url.action

I have problem with IIS does not read the URL.
Failed to load resource: the server responded with a status of 503 (Service Unavailable)
My project is on Asp.net MVC
I have used a Jqx grid on my project but the grid does not load data on IIS.
How can I convert the URL to Action Link #url.action, so the IIS can read?
My URL on my grid.
url: "/Home/GetIMScompinfo?CompanyName=" + $("#CompanyName").val() + "&StoreName=" + $("#StoreName").val() + "&ComputerName=" + $("#ComputerName").val() + params
url: "/Home/GetSubItems?scopeId=" + id
url: "/Home/GetIMScompinfo?CompanyName=" + $("#CompanyName").val() + "&StoreName=" + $("#StoreName").val() + "&ComputerName=" + $("#ComputerName").val() + params
url: "/Home/GetSubItems?scopeId=" + id
I don't know what is the difference between the two getting the value. So I give the sample script for the first url.
<button class="btn-class" id="press" type="button" onclick="changeHref1()">Genrate first url</button>
<script type="text/javascript">
function changeHref1() {
var url = '#Url.Action("About","Home")';
var company = $('#CompanyName').val();
var store = $('#StoreName').val();
var computer = $('#ComputerName').val();
window.location.href = url + '?CompanyName=' + company + '&StoreName=' + store + '&ComputerName=' + computer;
}
</script>

Send non executable script in body by mailto:

I want to prepare an email to send with mailto:
This email contains a few words and a js script. This script does not need to be executed. It's just for the receiver to copy and paste.
The script :
<script id="myID">var script = document.createElement("script");script.src="script-to-inject.js?id=myID&type=0&name=Name&size=120";document.head.appendChild(script); </script>
And my mailto:
window.location.href = "mailto:"+email+"?subject="+subject+"&body=FewWords"+ script;
When my mail isopen i have something like that :
<script id="myID">var script = document.createElement("script");script.src="script-to-inject.js?id=myID
The end of the script does not appear (after the first &)
How can i fix this ?
Thanks !
You forgot to encode the URL parameters, so the & starts the next parameter.
You can use the encodeURIComponent function:
window.location.href = "mailto:" + encodeURIComponent(email) +
"?subject=" + encodeURIComponent(subject) +
"&body=" + encodeURIComponent("FewWords" + script);
Another, cleaner, way would be to use URLSearchParams:
const url = new URL(`mailto:${encodeURIComponent(email)}`)
url.searchParams.set('subject', subject)
url.searchParams.set('body', 'FewWords' + script)
window.location.href = url
You need to be escaping email, subject, and script properly when setting the href attribute. What if these variables contain the & or the = characters? You can see how this would get misinterpreted.
Try this:
window.location.href = "mailto:"
+ encodeURIComponent(email)
+ "?subject="
+ encodeURIComponent(subject)
+ "&body=FewWords"
+ encodeURIComponent(script);
(I'm not sure that you can pass HTML in the body parameter, by the way, it might get interpreted as plain text.)
You can also use URLSearchParams:
const params = new URLSearchParams();
params.append('subject', subject);
params.append('body', 'FewWords' + script);
window.location.href = 'mailto:' + encodeURIComponent(email) + '?' + params.toString();

Add params to URL if page gets reloaded

Heyho, I want to add GET params like?USER_NAME=Max&USER_ID=01 to the URL if the page gets reloaded. I already got a few snippets for changing the URL / adding params. But I need something to detect the page reload and execute a function. Or a way to change the path of the Url directly if the page gets reloaded.
I tried several things like beforeunload and navigation types.
$(window).bind('beforeunload', function() {
// EDIT: vars like uname etc are defined
var newurlgetstring = "?USER_NAME=" + uname + "&USER_EMAIL=" + uemail + "&LAST_NAME=" + lname + "&PRE_NAME=" + fname + "&UTITEL=" + utitel + "&U_ID_T=" + uidt + "&MV=" + mv + "&V=" + uv ;
var newurl = window.location.protocol + "//" + window.location.host +window.location.pathname + newurlgetstring;
window.history.pushState({path:newurl},'',newurl);
});
But I want able to execute a function with beforeunload. I was just able to display a return question.

Replicating base_url in external JS file in CodeIgniter

I have a button in my external js file that, when clicked, I want to be sent to a controller that I have. When I have the on click function in JQuery with the url set to my localhost, it works fine, but how do I set it so that it would work similar to the way the base_url works in CodeIgniter, so that it would work in any environment? I've tried using window.location.origin, or window.location.host instead of the localhost, but neither work. Any ideas?
My external JS button:
var html = '<div class="alert alert-success" role="alert"><p class="instruction_text text-center">' + completedText + '</p></div><input id="next_task" class="btn btn-lg btn-default text-center" style="margin-top: 150px; font-weight: bold;" type="button" value="' + text[lang]['continue'] + '"data-url="http://localhost:8888/oda/sample/instructions/' + task_id + '/' + lang + '/' + type + '">';
$('#final_message').append(html);
$(document).on('click', '#next_task', function(e) {
e.preventDefault();
location.href = $(this).data('url');
});
Thanks!
You can leave that work to the browser. If the page is within the same domain you don't need to put it verbosely on your code, you can put something like that:
'"data-url="/oda/sample/instructions/' + task_id + '/' + lang + '/' + type + '"'
note that the / on the beginning says that it will always get to the same place, disregard the current url.
But, if you need for some reason to write the full url window.location.origin will not include the port part of your url, you would have to include window.location.port too to make it work with your environment. and it's not a necessary thing to do in production.
window.location.host should work if you put http:// and / on your string:
'"data-url="http://' + window.location.host + '/oda/sample/instructions/' + task_id + '/' + lang + '/' + type + '"'
You can define base_url value to the JS variable in view and include all external JS below that
Here, I am giving section of example head.php which is located at /your_root/application/views
<script>
var base_url = "<?php echo base_url(); ?>";
</script>

Inherit just the javascript code from a master page

So I have a Javascript function on my master page. It works fine when I call it from pages that derive from this master page, however, on pages that don't, it obviously doesn't work. I am not able to put it in another .js file either because it uses some embedded c# code in it, so it has to be within a <script> tag.
This is the function:
function GridExport(viewUrl, fileName)
{
var actionUrl = "<%= System.Web.VirtualPathUtility.ToAbsolute("~/mvc/Indications.cfc/ExportToExcel")%>";
var guid = GetGUIDValue();
window.open((actionUrl + "?id=" + guid + "&viewName=" + viewUrl + "&fileName=" + fileName), null, null, null);
}
is there a way I can just include the Javascript definitions from my master page in another view without deriving from the master page?
You could create a UserControl containing this <script> or abstract out the actionUrl to a parameter of the GridExport function
function GridExport(viewUrl, fileName, actionUrl)
{
var guid = GetGUIDValue();
window.open((actionUrl + "?id=" + guid + "&viewName=" + viewUrl + "&fileName=" + fileName), null, null, null);
}
Another handy way to avoid this path problem would be to have a global variable to define the root of the site:
var root = "<%= System.Web.VirtualPathUtility.ToAbsolute("~/") %>";
then your function could always use this variable and append what it needs:
function GridExport(viewUrl, fileName)
{
var actionUrl = root + "mvc/Indications.cfc/ExportToExcel";
var guid = GetGUIDValue();
window.open((actionUrl + "?id=" + guid + "&viewName=" + viewUrl + "&fileName=" + fileName), null, null, null);
}
Master pages can be embedded within each other. Why not just make a master page with only your javascript in it. Then make another master page that has the javascript master page as it's master. When creating new pages you can choose which one to use.
MasterPage1 -> Just javascript
MasterPage2 -> Contains your other stuff and has MasterPage1 as it's master
If you just want the javascript then user MasterPage1, for everything else user MasterPage2.

Categories

Resources