Dynamic javascript within a custom control within an UpdatePanel - javascript

Very simply, I have a custom ASP.NET control that in addition to rendering a textbox also outputs a javascript function and a call to that function. The key to the problem here is that variables in the javascript may be different on each postback.
So I have the control inside of an UpdatePanel and below is an example of what the output javascript looks like. Some of the variables passed to someStaticFunction are dynamic based on properties of the custom control (e.g. Visible).
$(function() {
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(myFunction);
myFunction();
});
function myFunction(sender, args) {
someStaticFunction('false'); \\ "false" is written dynamically by the control's server side code
}
When the UpdatePanel posts back, depending on what the user chose, the page may now set the control's property to true. While the javascript does get written out correctly (same as above except 'false' is 'true', false is still passed to someStaticFunction.
So the control is rendering the correct javascript after the postback however the page is running the javascript from the original post.
I hope that's clear and someone can offer a suggestion. Thanks in advance.

Have you tried evaluating the properties of the control in the pageLoad() function that gets called on every postback and calling someStaticFunction with that value instead of what gets generated server side?
A simple code example:
function pageLoad(){
var value = $('#controlID').val();
someStaticFunction(value);
}

Related

How to use Custom Variable in GTM

I'm working to trigger Google Analytics using GTM only if page contains specific image name. For which I used User-Defined Variable as mll_banner and used custom javascript in it. And my custom javascript is as below.
function () {
var mllBanner = document.querySelectorAll('[class="p-panel p-p-b-lg position-left-top style-repeatx"]')[0].style.backgroundImage;
if (mllBanner === "url(\"/clientimg/schneider-electric/LOResource/a23d051e-55ca-4b40-88a7-90c8768e167d_coverImage.png\")") {
alert("Return is True");
return true;
}
else {
alert("Return is False");
return false;
}
}
If I run the above code as general JS with proper JS function name it works on browser console and return true as value. Where as I'm trying to use it in GTM and want to verify it for trigger I used like below,
Trigger
And this is neither triggering for true nor for false but if I make it like doesn't equal to then it triggers for both.
Can anyone please help how to use Javascript for User-Defined Variables in GTM and use that Variable for trigger? Thank you in advance!
If you use this variable on page view it will be neither true, nor false, but undefined. That's because you try to access a property of a DOM element before the DOM is rendered (which means your queryselector will return null, and null does not have a style property).
I have to admit that is an educated guess and assumes a standard GTM installation (i.e. the snippet in the head of the page), but then you can just go into preview mode and inspect the value of the variable at the window loaded event.
I would also recommend that you do not use the queryselector, but GTM's built-in DOM variable type, because that way you can debug the DOM element independently from the rest of your function.
Also, lose the alert calls inside GTM.

how to put an 'if' statement in front of a change function

This question is for using javascript in Caspio Cloud's platform, so a few things might look different than normal. But basically, I need to put an 'if' statement that references a variable 'above' a change function that runs some other code and I can't figure it out.
The problem is that in Caspio's form the Virtual9 field will 'change' on the form's load, and so it runs the change js. I need to not run the change js onload and also only if the variable 'item' is null.
<script>
var item = document.getElementsByName("InsertRecordItemID")[0].value;
<!-- right here I need an if (item !== null) to then run the change function but that if it's not null to not run the change function{ -->
$("[name='cbParamVirtual9']").change(function(){
var itid = document.getElementsByName("cbParamVirtual9")[0].value;
document.getElementsByName("InsertRecordItemID")[0].value = itid;
}
);
</script>
I've tested the variables using alert windows and they are gotten correctly. I just need to make sure the change function doesn't run if the variable 'item' is null.
EDIT: To clarify, when the form loads the ItemID field may or may not be null (based on parameters that pass over).
If it is not null then the Virtual9 field (where the user makes a selection) will be hidden- because the ItemID already had a value and needs to not change.
However, if ItemID is null then Virtual9 will be visible and the user can make a change, thereby updating the ItemID field. The user may update Virtual9 multiple times (looking for the right record) so it needs to keep updating ItemID (even after it is no longer null in this case).
That's why I think the best solution is to disable the code ONLY for onload, if possible. So that the code runs on change of Virtual9 but not onload.

How to trigger a JS script only after a specific function is called

basically this it a follow up of this question,
How to keep the innerhtml content that is changed with the JS onclick function
So i got that local storage question right (that was the deal on the previous question), now i need to trigger this script which translates an innerhtml text to Hungarian and i all create different version of this script for different languages:
ready(function(){
if(localStorage.getItem('textSet')){
document.getElementById("testchange").innerHTML = "Hungarian Lang"; //this part will change depending on language translations
}
})
The script above is triggered by this one (the one below) in this case the Hungarian function since its translating a text to that language, cause its for translation purposes, so the script below is for hungarian or function hungarianlang1(){ } so i all have this same script for italian or function italianlang1(){ } and have its translation script (the 1st script) called.
function hungarianlang1() {
document.getElementById("testchange").innerHTML = "Hungarian Call";
//this will save the state of the change
localStorage.setItem('textSet', true);
}
So i want to have a conditional statement, that triggers the 1st script depending on which language function is called (the 2nd function), how would that conditional look like, any ideas.
Thanx
It looks like your first function is malformed? Are you trying to call a function called ready?
If you're using jQuery, the proper way to set a callback for when the DOM is ready is like so:
jQuery(document).ready(function() {
// your code here
});
Or you can use the shorthand:
$(function() {
// your code here
});

Saving data in javascript

so i have a .js file that 2 different jsp pages call.
.js file contains:
var savedObj;
function A(obj){ savedObj = obj);
function B(){ alert(savedObj);
X.jsp file calls function A such that a DOM element onchange = functionA(this);
Y.jsp file calls function B such that body onload = function B
For some reason, my debugging in function A shows that the assignment of savedObj = obj worked correctly, but in function B, savedObj printed out null.
Thanks guys
This is happening because your function B is being called when the body of the JSP has finished loading. This will happen before any change event on a specific DOM element.
If you need function B to have the updated savedObj, you will need to wait to call it until after the change event is fired on your DOM element.
Note: this assumes that your JSPs are being included in the same rendered page, if they are not, this is happening because JavaScript state is not persisted from page to page
Using a cookie to store the value is certainly the best way to make the value persist across various pages. If you don't want to go into cookies, you could use javascript to write the new page in place of the current page and keep the value, but it's messy and you're better off taking the time to learn cookies.

How to check if page is postback within reserved function pageLoad on ASP.NET AJAX

I'm looking for a way to check within pageLoad() if this method is raised during load event because of a postback/async postback or because of being loaded and access the first time.
This is similar to Page.IsPostback property within code behind page.
TIA,
Ricky
One way you could do that is to wire up an Application.Load handler in Application.Init, then have that handler unbind itself after running:
Sys.Application.add_init(AppInit);
function AppInit() {
Sys.Application.add_load(RunOnce);
}
function RunOnce() {
// This will only happen once per GET request to the page.
Sys.Application.remove_load(RunOnce);
}
That will execute after Application.Init. It should be the last thing before pageLoad is called.
#Darren: Thanks for the answer. I had tried to create pageLoad with event argument ApplicationLoadEventArgs as parameter (see below). However according to this:
The load event is raised for all postbacks to the server, which includes asynchronous postbacks.
As you have indicated, the isPartialLoad property does not cover all postback scenarios. It'll be nice if the event argument also contain isPostback property.
function pageLoad(sender, arg) {
if (!arg.get_isPartialLoad()) {
//code to be executed only on the first load
}
}
#mmattax: I'm looking for property that can be called from client-side (javascript).
What you can do is wire up to the load event of the Sys.Application class. you can then use the isPartialLoad property of the Sys.ApplicationLoadEventArgs class. I believe that would let you know if you are in a async postback or not.
To know if you are in a post back, you'll have to handle that in server side code and emit that to the client.
You could have a hidden input that you set to a known value on the server side if it's a postback/callback - and your javascript could check that value.
That said, I really hope that there's a client-only solution for this.
Edit: #mmattax - I believe he's looking for a client-side solution - the JavaScript equivalent of that.
You can still use Page.IsPostback during an async call.
Application.Init is probably a more appropriate event to use, if you only want the code to execute on the first load.
#Dave Ward: This normally would work. However, the code is to attach event on behavior object. Because the creation of behavior object happens during Application.Init, attaching to that event will lead to unpredictable behavior.
It will be nice if there is PostInit event.
#Dave Ward:
The use of RunOnce method works perfectly. This solve my problem without having the workaround to check first if handler already exist before attaching to an event.
I'll mark your answer as an accepted answer. Thanks again.
Here's our Ajax equivalent to isPostback which we've been using for a while.
public static bool isAjaxRequest(System.Web.HttpRequest request)
{//Checks to see if the request is an Ajax request
if (request.ServerVariables["HTTP_X_MICROSOFTAJAX"] != null ||
request.Form["__CALLBACKID"] != null)
return true;
else
return false;
}

Categories

Resources