Javascript and AJAX using session objects, only works when using alert() - javascript

I ran in the following problem while implementing show/hide of a div in my html.
This show/hide is governed by a variable say id, which I am storing and retrieving using session objects (using sessionAware in Struts 2).
My problem is following, even though I see that id variable is properly set in Java end, it is not working in JavaScript part.
On introducing the alerts around the reading of id variable is script, this works fine.
Can someone help me how to get rid of this problem?
Thanks in Advance!

It look like data load issue.
I assume like when you check for the value data is not loaded, and the check fails.
When you put an alert into it, the page pauses on alert, during that time the data loads and then you get it correctly then.
It is only an assumption based on what you provided.
Please provide some sample code or snipets.

There are a few functions that stop the code from running when they are called. This are called synchronous functions causing a pause in the code until you click OK. alert() is synchronous and so is prompt().
Till that time your data may be loaded, It my just opinion on the base of desc given.
regards,

Related

Continuing a javascript after using .click() on a button which adds new DOM elements

I am a lowly operations employee without authorization to change the programs and permissions on my machine, and I would like to automate some highly repetitive data entry. I know there are a lot of programs that can do that, however, for the sake of this discussion we'll assume that I'm not allowed to have any of them and I can only script through the debug F12 menu in Chrome. I also probably don't understand half of these words as well as I should.
I have to run test cases on a third-party vendor's highly dynamic website, and I've already successfully written javascript which adds texts to elements in the DOM and presses the "next" button.
The problem is, upon .click()ing the "next" button, it takes time for the page to update, and the update creates new elements which weren't in the DOM when the script was initialized. I need to find a way to delay the execution of the script until the DOM contains all the elements I need to update.
As a really, really crude proof of concept I wrote the pre-filler for each page as a function, and I serially called each function at the end of the previous function, using setTimeout(nextfunct, 10000) to let the page update before executing the next line. (I was going to refine that by trying to create some kind of object listener instead of an arbitrary 10 second delay, but I wasn't even able to get that far.) This approach creates two errors.
1) The script seems to be checking whether the elements are on the DOM before the end of the setTimeout(), so it still gives me an error. If nextfunct is defined as
document.getElementById("doesntexistyet").value = "Fill Me";
console.log("nextfunct ran");
I will get the error message stating there is no element with the id "doesntexistyet" immediately, not after a delay of 10 seconds. The element on the next page will not update.
2) The DOM updating interrupts my script. In the above code, the console output will not ever appear in my console. If I comment out the missing element, so the function only prints a comment, it will still not appear in my console. However, if I comment out the code and I switch the setTimeout to 1ms, "nextfunct ran" will appear in my console, until the page updates, at which time the console will be deleted.
Are there ways around this which I can implement using only vanilla JS and a browser? I'm sure there's a keyword I can search for where someone has discussed this before, but it seems like the vast majority of JS autofilling discussions are oriented towards people designing code to be integrated into a website,
Thanks

force html attribute to have the same value

I am trying to post some data to another php file using ajax. This data is on the link attribute. I am thinking bad guy on the page could inspect the element and change the value of that particular data attribute which i want to stop this from happening using javascript.
for example: <a href='#' data-user_id='25'> Add Friend </a>
How do i let javascript make sure the value of data-user_id still stand the same if a bad guy inspect the page and try to change the value of the attribute ??.
below is my code but its not working the way i want:
<script>
$(document).ready(function(e) {
$(".save").attr("data-user_id").change(function(){
var savefriendbtn = 57;
if($(".save").attr("data-user_id") !== savefriendbtn){
$(".save").attr("data-user_id","57");
}
})
});
</script>
A code example would be much appreciated.
Thank you
Short answer you can't verify the change, even if its doable what prevent the user from inspecting your JavaScript and play or monkey-patch some other code and override your client-side checks,
Client-side checks was never a way to verify valid data, its a way to help but you can't guarantee or depend on it, you should have a back-end validation for this parts of code,
Validate in back-end if this user is not permitted to add this user as a friend, otherwise no issue if he changed the id and add another one as long as he can do that, and you may or may not handle error for this part as actually for me i don't care if an error explode to user if its his fault by hacking.
If I am understanding correctly you need this function to run while the user (or bad guy) browses the page, constantly forcing the id of the element to be 57.
If I am not wrong you wouldn't need jquery.
There are two problems:
var savefriendbtn has a number type, 57, whereas you are setting it as "57", a string.
The problem should be because Document.ready only calls once, i.e. when the page loads for the first time. Hence, you would have set up an event listener or do as follows:
setInterval(function(){document.getElementById('save').data-user_id=57;},1000)
Does it help?
Then and again, the bad guy could simply change the var to another value, preventing the entire mechanism from working. I really hope this helps you.

jQuery create a callback thats not a callback?

Alright lets see if I can describe this.
I have a handful of functionality that was created sometime ago, and works swimmingly. However there is a new desired spec, so without having to rewrite the code base in a matter of speaking, and without having to double up on code to pull the same effect off I am trying to figure out how I can go about making something jump back higher in the code within the same function to repeat the run of the function rather then doing the same code again below.
What I have is a click based triggers ie:
$('.selector').click(function(){});
In this function is about 30 lines of functionality to create a new element and populate it accordingly. However unfortunately in that same bit of functionality there is conditions to wether it should or not.*The previous requirement was when the element it creates is open and populated just throw an alert() saying essentially wrap up what your doing, and then go on to the next. *Now the new requirement is just close that and open a new element. Which I've gotten to close out the existing, and do everything I want it to do, except the population of the new element which is above where the condition is currently. Knowing there is no "go to" type of logic in javascript (or last I knew). the only thing I can think of is taking the same code from above and putting it in the condition as well, doubling up on the code and having litterally 2 copies of the same bit. I want to avoid that, but cant think of a way to do it. So here I am looking for ideas
Knowing there is no "go to" type of logic in javascript (or last I
knew). the only thing I can think of is taking the same code from
above and putting it in the condition as well, doubling up on the code
and having litterally 2 copies of the same bit. I want to avoid that,
but cant think of a way to do it. So here I am looking for ideas
Why don't you just pull this piece of code out into a function? You can run the function if the conditional is true in the original instance, and run it all the time in your callback? This is fairly minimal refactoring, just move the code out of the logic into a separate function, keeping it as is and maybe making some of the referenced variables into parameters.
So something like this if you want to run all the actions regardless of the conditional statements:
...
if(condition){
actionA();
}
if(condition2){
actionB();
}
...
$('.selector').click(function(){
actionA();
actionB();
});
You're familiar with that pattern, right?
var aCallback = function(){........};
$('.selector').click(aCallback);

Can't disable (set to read-only, protect, gray-out etc.) a field

I've run this code:
Xrm.Page.data.entity.attributes.get("subject").setValue("Beep");;
alert(Xrm.Page.ui.controls.get("subject").setDisabled);
Xrm.Page.ui.controls.get("subject").setDisabled(true);
As expected, I get the text Beep into the field. As expected, the alert tells me the contents of the method (and as far I can tell, they're doing what they're supposed to).
However, the Control itself doesn't get disabled. What am I doing wrong?
I believe that I saw one example of different approach (something more between get and setDisabled but after a few hours of googling, I'm starting to conclude that I must've been halucinating or wish-thinking.
Your code is correct, so it should be working. The syntax used by #Daryl is correct to. Those two lines are equivalent. The shorter one is just syntactic sugar shortening the other. So, you should use his.
Xrm.Page.ui.controls.get("subject").setDisabled(true);
Xrm.Page.getControl("subject).setDisabled(true);
If you're alerting out and getting the contents of the method, it means that you're hitting the right component and the correct method. Yet, so say that despite the call, the control doesn't get disabled. I think you're wrong.
Here's what I think happens. The control gets disabled, then, before you have time to notice it, the form get updated, rendering away your disable operation.
Keep in mind that unlike the field data, the property of being disabled doesn't get stored to the database. If you design a field as protected, it'll stay that way. But if you set such a property from the JavaScript code on the client-side, the appearance is only going to last until a reload of the page is performed.
So, if you need to keep the fields disabled, either make them so from the GUI designer or fire an onLoad method doing it for you.
I use the getControl function and it works fine. should be in the form:
Xrm.Page.getControl(controlId).setDisabled(disabled);
And remember, disabled controls will not be updated unless you set the submit mode to "always".

Get JavaScript working in a reloaded AJAX box

When I use AJAX for part of my page, such as a commentbox, in the reloaded box no JavaScript works. e.g. like cutetime or whatever. So I guess I have to reload the cutetime command (in every reload of the commentbox)
It works, but I think I have the cutetime command twice. If I have a confirm box or anything other, I get the confirm box or the add command twice.
I'll try to describe it in one sentence:
I need a way to get JavaScript working in a reloaded AJAX-Box.
P.S.: I think there is a very easy way because everybody uses it :)
If you replace an element anything attached to it is lost.
When using jQuery, you can avoid this issue by using live events. However, this doesn't work for plugins where you don't attach events. In that case you need to call whatever function enables something on your element again when replacing it.

Categories