Javascript Variable in Url.Content - javascript

I have a javascript variable called locid that I am trying to use as part of a URL by setting the data-url of a div as follows:
data-url='#Url.Content("~/Catalogue_Items/ItemsActionViewPartial/")#Model.CatItemID?LocationID=locid&AsyncUpdateID=catalogue-view'>
I know I can't just throw the locid in that string as I have done in my sample code but I just put it there to illustrate where I need my javascript variable to be. How can I achieve this??

The problem here is #url.content needs to be run on server, where JavaScript variable is not visible. Write an independent AJAX call to fetch content and than set content in data-url

You cannot use the Javascript variable directly into attribute.
A workaround can be to reorder the parameters of your url and setting the JavaScript variable in script tag.
<button id="myButton" data-url='#Url.Content("~/Catalogue_Items/ItemsActionViewPartial/")#Model.CatItemID?AsyncUpdateID=catalogue-view'></button>
I have reordered the url parameters here. The location parameter will be set by following script. Place this script just after the button element.
<script>
var button = document.getElementById('myButton');
var url=button.getAttribute('data-url');
url+="&LocationID=" + locid;
button.setAttribute('data-url',url);
</script>

You can put the value in the page using document.write, but you can't write it out inside the tag, you have to write out the entire tag. Example:
<script>
document.write('<div data-url="#Url.Content("~/Catalogue_Items/ItemsActionViewPartial/")#Model.CatItemID?LocationID=' + locid + '&AsyncUpdateID=catalogue-view">');
</script>

Related

How should I change an injected HTML element with variable using javascript?

Question: What is the best practice to inject HTML, that contains javascript?
Script to load content in page:
elmnt = document.getElementById("contentcontainer");
elmnt.innerHTML = this.responseText;
Page:
Welcome to our restaurant!
<div id="contentcontainer"></div>
Responsetext:
<div>
The menu for today:
<script> Script to get API resonse menu(today); <script>
</div>
So I'm injecting HTML that contains a script. But the script is not executed. How should I change variable HTML inside an injection?
You could use "Template Strings" and inject your already processed HTML.
I dont understand what the problem is. InnerHtml should work perfectly, as long as the variable is global and also you get the desire content.
Here is an example of what i understod off what you want.
let str = '<p><script>var test="this is a test"</script></p>'
document.getElementsByTagName("BODY")[0].innerHTML =str;
console.log(test) // and here is the injected script variable result
To get the content of the site from the url you will have to use a library like jq getscript
Did i understand you correctly?

Access value on window from Google Tag Manager custom html tag

I have some javascript I am using a GTM custom html tag to inject on my page. I need to access a value that is on the window, is there a way to do this from GTM or do I need to put the script in my actual html now to get this value for my script?
Here is an example of what I have now that is not working:
<script type="text/javascript">
console.log(window.awesomeValue);
</script>
When I inspect the source after GTM injects the script the window.awesomeValue appears literally and is not being evaluated.
Thanks!
You will need to use a JavaScript variable to hold the value. Try this:
Create a JavaScript Variable and set the value to window.awesomeValue
Modify your custom HTML tag to use the newly created variable:
Your final code will look like:
<script type="text/javascript">
console.log({{yourNewJSVariable}});
</script>

Passing a variable from <script> to HTML code?

I would like to pass a variable declared between <script> TAGs to the URL in a iframe TAG, like this:
<script>
var1 = 1;
</script>
<iframe src="http://link_to_site?param=var1>
But this does not work. Is it possible to do it and how should i do ?
Thanks
First you would need a way to identify the target element in your JavaScript code. For example, give the element an id attribute:
<iframe id="myIframe" />
(There are certainly other ways to identify an element. Fairly complex queries can be constructed to identify specific elements throughout the DOM. But an id is a particularly straightforward approach at least for this example.)
Then in your JavaScript code you'd get a reference to that element and set its src property:
var var1 = 1;
document.getElementById('myIframe').src = 'http://link_to_site?param=' + var1;
One thing to note is that this code would need to execute after that element exists on the page. If it runs above that element on the page then that element won't yet exist and getElementById() would return nothing.
"After" could mean that it runs immediately but exists "lower" on the page than the element. Or it could mean that the code is placed anywhere on the page but doesn't actually execute until a later time, such as in an event handler.
*FYI- Sorry, but the accepted answer doesn't actually work. Read below. *
I suggest that you use the jQuery JS library to assist in your task. It normalizes the JS environment so you don't have to worry about what browser your user is using.
It also makes it easier to do some simple tasks like getting specific elements etc.
Here is code that shows how to dynamically create an iFrame AFTER the page has finished loading. This is important because JS runs synchronously: in other words, if you write JS for a specific element, but that element doesn't yet exist on the page, the JS will fail.
By wrapping your code in:
$(document).ready(function(){})
you ensure that the page will finishing loading BEFORE your JS executes.
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<body>
</body>
<script type="text/javascript">
var1 = 1;
$(document).ready(function(){
var theiFrame = '<iframe src="http://link_to_site?param=' + var1 + '">';
$('body').append(theiFrame);
})
</script>
iFrames are a little weird in that they mess with the "onload" event of the document. That's another reason to dynamically add your iFrame to the DOM instead of adding it as an HTML tag. Read this article for more info:
http://www.aaronpeters.nl/blog/iframe-loading-techniques-performance

How can i define Javascript variable to Session in ASP.NET?

My problem is that I have several a tag and a javascript. When click the a tag, JavaScript works and get the tag value. It's okey but I want to assign this javascript variable to session or asp.net's variable. Because a href will goes another page and I need a href value. Also a href inside a SQL loop.
How will I do ? Is there another way without JavaScript ?
You should use QueryString. No need for any javascript.
Click
In you .net code:
var Id = int.Parse(Request.QueryString["id"]);

How to get the JSP page name in Java Script included?

I have two JSP files a.jsp and b.jsp which shares common ".js" file. Is there any way that I can find from which jsp file the function inside common script is invoked, Without passing any parameter while calling the script function.
I think there is no way to do as you looking for -
But as a alternate way you can give the you file(a.jsp) as your element id or name and get it after clicking the element like this -
$(document).ready(function() {
$("#a").click(function(event) {
alert(event.target.id);
});
});
You could put a hidden variable in each JSP that tells you the file name.
Something like:
<input type="hidden" id="jspName" value="a.jsp"/>
Then to get it from the javascript:
var jspName = $('#jspName').val();

Categories