How to invoke this Angular method that's bound to ng-click - javascript

I'm inspecting the DOM on an Angular application and trying to figure out how I can reproduce one of the events that's bound to a button via the console. The button looks like this:
<button class="button tiny text player-add-button" ng-class="{ 'player-add-button': !player.inLineup, 'player-remove-button': player.inLineup }" ng-click="player.inLineup ? draft.rosterRemove(player) : draft.rosterAdd(player)">
What I'm trying to access here is draft.rosterAdd(). The problem is, this is a table, and there's multiple buttons and player is changing for every button. I'm not entirely sure how to define player here, even if I get into the scope of of the draft object, to pass it in as an argument to rosterAdd()
What's the best way to figure out how I can define player so that I can invoke draft.rosterAdd(player) for all of the players I want to add via the console?

Try this (in Chrome):
Right-click the desired button and select Inspect element;
Open the console tab (make sure the button markup remains selected);
Type draft = angular.element($0).scope().draft;
Type player = angular.element($0).scope().player.
Now you should be able to see how player is structured and call draft.roasterAdd() passing whatever you want.
Some useful references about the code above:
angular.element
Chrome's command line API

Related

JS addEventListener -> update data-action

I have a game where you press a button, depending on what you press it shows up a menu by using data-action. E.g I got a main menu, press "news" and the news menu will be called using data-action="news".
Now I will return data via the game, and will therefore send that data (not relevant) over via JS using addEventListener. However, I'd like to make an if-statement which will set the data-action to whatever was sent from the game. How to update data-action via JS?
If event.date.type is "news" -> show the new-news menu which will be shown by setting data-action to "new-news". This doesn't work, how to do it?
if (event.data.type == "news"){
data-action="new-news"
}
Use the dataset interface:
element.dataset.action = 'new-news'
From what I understand, you are having trouble assigning a data element to some element. It seems to be just a syntax error.
Instead of:
data-action = "new-news"
Use the dataset like following:
element.dataset.action = "new-news"
This should work :)

addField.setAction properties are not being retained...Possible causes?

I have some Javascript running in Acrobat XI that programmatically creates a series of buttons using the addField method. I need each button to run a specific lengthy Javascript routine upon MouseUp, but at the moment I can't seem to get any newly-created button to run even a trivially simple command.
Basically, when my code executes, everything works as intended with the exception of the .setAction property, which does not seem to be retained, leaving my newly created and formatted buttons without any functionality. I can go in after the fact and add the Javascript manually, of course, but in this case I need a programmatic solution.
Any ideas what I might be doing wrong here?
var cScript = "app.beep(0);";
var newBTN = this.addField(wName,"button",thisPage,RotatedRect);
//"wName","thisPage" and "RotatedRect" are well-defined elsewhere
newBTN.setAction=("MouseUp",cScript);
newBTN.delay = true;
newBTN.borderColor=color.red;
newBTN.borderStyle=border.s;
newBTN.delay=false;
This button is created as expected, and the formatting and name are as expected. The only problem is that the .setAction property does not seem to be saved at all. Nothing whatsoever happens when I click on the new button, and when I manually inspect the new button's properties, it has no action or javascript attached to it.
Turns out I was just being sloppy and not paying attention to syntax.
Removing the "=" from the newBTN.setAction=("MouseUp",cScript);line has fixed the problem.

How to show devexpress popup control inside a user control from client side

I am using devExpress 11.2 and ASP.NET 4.0. Please bear with me for lengthy problem description.
I have created a user control which contains a ASPxPopupControl (ID = "myPopup")
<dx:ASPxPopupControl ID="myPopup" runat="server" ... </dx:ASPxPopupControl>
and other controls. I also implemented a public method ShowPopup() in which it executes the myPopup.ShowOnPageLoad = true in order to show this popup. This user control is then registered and referenced in my ASPX page. I put this user control into a cell of a table within ASPxRoundPanel with ID="myUC"
In this page, I have a ASPxGridView in which I created a custom command button as follows:
<dx:GridViewCommandColumn VisibleIndex="0" Width="30px" Caption="" ButtonType="Image">
<CustomButtons>
<dx:GridViewCommandColumnCustomButton ID="cmd">
<Image Url="~/Images/OK.png" />
</dx:GridViewCommandColumnCustomButton>
</CustomButtons>
</dx:GridViewCommandColumn>
ClientSideEvents is defined as
<ClientSideEvents BeginCallback="OnDevExpressBeginCallback" EndCallback="OnDevExpressEndCallback">
I would like to popup my user control when this image button is clicked. Please note that this ASPxGridView also provide Insert/Editing/Delete function.
There are two ways to deal with this requirement.
1 In order to ensure ASPxGridView handling its built-in commands (Insert and etc) correctly, I need to set EnableCallBacks="True" then I set OnCustomButtonCallback="OnmyASPxGridView_CustomButtonCallback" to handle the clicking event of the image button from code behind. I called myUC.ShowPopup() from code behind and I debugged up to here. However, the popup is not shown. If I set EnableCallBacks="False" then the popup is shown exactly what I expected.
The problem of this approach is not acceptable because the built-in commands do not work properly. So the question is how can I show the popup control within my user control from code behind while EnableCallBacks="True" ?
2 Second approach is to show popup from client side.
I set EnableCallBacks="True" first to ensure my built-in commands work properly. then I defined ClientSideEvents as
<ClientSideEvents BeginCallback="OnDevExpressBeginCallback" EndCallback="OnDevExpressEndCallback" CustomButtonClick="jsfnShowPopUpControl"/>
and removed OnCustomButtonCallback event.
I implemented javascript function jsfnShowPopUpControl like this:
function jsfnShowPopUpControl(s, e) {
// next, find access control inside user control
**var myPopupName = document.getElementById('<%=myUC.FindControl("myPopup").ClientID %>');**
if (myPopupName != null) {
myPopupName.Show();
myPopupName.PerformCallback(e);
}
else {
alert("Data error encountered"); // cannot find popup
return; //
}}
The key part of this approach is to find the devexpress popup control which resides within a user control. Unfortunately that getElementById function could not find the underneath control in my user control and thus popup is not shown either.
Please help and let me know what I did wrong in my two different approaches.
Thanks a lot.
Reference these- Showing a DevExpress AspxPopUpControl when user clicks a button
How to show ASPxPopupControl's window on the client side
To solve this issue, I suggest you use the ASPxClientPopupControl.ShowWindow method.
For this same scanerio as you want to implement what i have done.
Assigned ClientInstanceName property to some unique name on the page
including the user control now you free to access that object anywhere
in the html through javascript.
Let you set the popup's ClientInstanceName to "MainASPxClientPopupControl". Thus, it should be possible to use it on you main page as follows:
MainASPxClientPopupControl.Show();
Reference on this topic: ASPxPopupControl - Cannot get an instance of the popup from a page

Javascript is done, but browser do not reflect these changes (ASYNC?)

I am using CEF and CefSharp.
I have one c# class that its purpose is to know if JS function call is done and then call call JS again on curent element xPath in
class test {
//array of Xpaths of elements
elementsXpaths
public IsDone(){
LoadNext()
}
LoadNext(){
call = string.Format("click('{0}')", elemenentsXpath[next])
browser.ExecuteScriptAsync(call)
}
}
Then JS something like this
function click(xpath){
elementFoundedByXPath.click()
elementFoundedByXPath.style.backgroundColor = "#FF0000"
test.isDone();
}
My problem is, that background color is not changed right after click().
So for example I have one element, clicking on this element reveal some other elements (fe I click on show login button and login and password input are shown after this click) and then click do not fails, but I cant see that login and password input. Very odd. I would guess that this will fail, because element is not founded (I am checking this in JS).
I am also checking this in debug, when I have breakpoint on LoadNext I can see that LoadNext is called and backgroundColor of previous element is not changed.
I assumed that if I do click on that element I can be sure that actual click was performed.
Is this problem with async calling of JS? Will EvaluateScriptAsync() help me ? In that case somebody show me some easy example and difference between these two functions ? Or is problem most likely somewhere else ?

Dynamic Confirmation Message on a confirm.html

I am trying to create a Javascript function to display a dynamic confirmation message, that will appear on a confirm.html page. It needs to be in an external Javascript file so that it can be used on a variety of pages. I've tried a variety of things but I just cant quite get it to work correctly. I'm trying to do it with only Javascript.
This is what I have currently, after doing some research
This is button I'm using to call the function
<input type="button" value="Remove" onclick="dynamicMessage('This product has been deleted')">
and the current function I'm using is
function dynamicMessage(argument)
{
var test = window.open("./confirm.html","_self");
test.document.write("test");
test.document.close();
}
Obviously, the dynamic content isn't added in yet, but if my thinking is correct, it should just be adding the argument somewhere in the long string of html I need to add to create the page. The "test is just do see what happens when calling the function.
What I want it to do is, write the "test" to the new window of confirm.html, but instead it overwrites the current window. But if I only call window.open, it opens to the correct window. It is the document.write part that is throwing me off.
I'm not sure if I'm far off base on my thinking, or if its just a simple mistake I'm missing after hours of looking at this code. Any Ideas?
I think I need to clarify what I am trying to do. I am trying to click a button, in this case a remove button, then open up the page confirm.html, edit the content in confirm.html with the argument, and have the current page now be confirm.html. What currently happens is one of two things either the current document is edited if the "_self" tag is placed, or the html page is open and thus an about_blank url.
Hope i understood your question | DEMO
Since you are using document.write method it will overwrite contents of your html page
function dynamicMessage(argument)
{
var test = window.open("./confirm.html","_blank");
test.document.write(argument);
setTimeout(function(){test.close()},2000); // after 2 sec it will close
}

Categories

Resources