I would like to growl the title of the stockPanel being removed on clicking the allowTurnOff button
I am using the below Listener but it is not working. How does amStockChart register the panel which needs to be removed on clicking a certain panels allowturnOff button
addListener('panelRemoved' , 'function(event) {
growl(event.chart.panels.title);
}'),
Actually you may ignore the syntax around the quotes as I am using the charting library through R but the concept remains the same.
Let me elaborate the situation. I have multiple panels with allowTurnOff buttons. I want to trigger an action based on which panel the user decides to remove. Hence I am using the panelRemoved event where the program should message me which one of the panels (either in terms of Index or Panel Title) was removed by the user.
The below works:
addListener('panelRemoved' , 'function(event) {
alert(event.chart.panels.length);
}')
PS: Replacing growl() function by alert for convenience.
The above code correctly calls out the number of panels in my chart but what I want is the title of the panel that was removed. I can definitely provide the code in R which is similar but not exactly like JS.
I am assuming there will be a loop which will run through all the panels in event.chart.panels.length and check which one of the panels was removed and then throw out something like event.chart.panels[x].title I guess.
addListener(panelRemoved,function(event){
for ( var i = 0; i < event.chart.panels.length; i++ ) {
if event.chart.panels[i].removePanel.enabled==true {
alert(event.chart.panels[i].title);
} else {
return();
}
})
Please let me know if you would still need the R Code
# Sagar: Since my code is in R and not in JS, I am unable to share in Fiddle. But I can make a good attempt to explain the series of steps involved. As follows:I have an amStockChart with multi-panel.I have set the stockpanel property allowTurnOff = TRUE. Now you will find that a small remove panel button appears on the top right of each panel. Now if a user tries to remove a given panel using that small little button on top of each panel, the event=removePanel gets triggered. I will use the addListener to catch this event and execute some logic. In that logic, all I am trying to do is alert as follows "Panelx is successfully removed". So to do that, I need to know which panel did the actually close. I want help building that logic which will identify which panel the user closed within the addListener(event=removePanel) and then throw out the alert. Ideally I would like the logic to throw out the title of the panel which was removed by the user
Related
I'm working on this app that allows you to add people from an API to a list in the app. Every time a person is added, a new Bootstrap card is created. I'm trying to figure out how to make the button to click "Watch Stream" disabled under certain circumstances. If the user is "LIVE" then the class .popover_status_on is added to the parent element. If the user is "OFFLINE" then the class .popover_status_off is added instead.
I thought this was going to be a quick fix issue but I'm seeming to have much more trouble with it than I expected. Right now this is what I'm looking at with my code that isn't working which I definitely thought it would have:
if($('.card > .card-body > h2').hasClass('popover_status_off')) {
$('.card > .card-body > button').prop('disabled', true);
} else {
return;
}
I realize that when it gets disabled, it disables all the buttons, even "LIVE" ones. So I'm trying to figure out if there's a way without specifying by class/id that I can have it change the state of the button. I thought maybe using "this" would work but I'm unsure what code would work for that.
Thanks for any feedback.
The problem is that inside your if statement, the jQuery selector isn't constrained to THAT card, it's finding all buttons inside all cards.
What your code literally says:
If there is card containing an h2 with class popover_status_off
Then find all cards that have buttons and disable them
Else do nothing
Try this:
$('.card h2.popover_status_off').parents('.card').find('button').prop('disabled', true);
You don't need the if statement. One of the great powers of jQuery is that you can identify an element and change it all in a single statement.
Good evening to everybody.
At this moment I'm working on a new page for Oracle Apex and again I have trouble with Interactive Report. My page (let it be named 500) consists of Interactive Report with id rep_main and Classic one with id rep_child, which are connected by master-detail logic (I choose the row from the main report and then I get the rows in the child one depending on my choice). Also every row of the main report has several buttons (precisely tags "a" with links like "javascript:..."), which call dialog windows for updating data of the chosen row.
My aim is to make page more comfortable for users: firstly, the chosen row from the main report should change its color; secondly, the reports should refresh correctly. The second condition means, that, after I choose the rown in the main report, the pagination must not change and the view of the page must not scroll up by itself.
I managed to make the master-detail logic and recoloring the rows (thanks to Stack Overflow for helping me with this task) in my IR, but I have some difficulties with the condition of correct refresh. Apart from JavaScript/jQuery functions, I have to call standard Apex function apex.submit, because if I don't do this, pagination of my IR won't save, but at the same time the page scrolls up by itself, which is very unlikely for users. Moreover, the pagination resets after any dialog window appears.
I've tried to find solution in Google, but all is in vain. I hope that somebody knows if there is any workaround in my case (against the scrolling up at least).
I use Oracle Apex 4.2.6.00.03 and application is executed mainly through Mozilla Firefox. The code I wrote for my page 500 is written below in the current post.
On the page load executes the process with PL/SQL lines like this:
:P500_MAIN_ID := APEX_UTIL.GET_NUMERIC_SESSION_STATE(P_ITEM => 'P500_MAIN_ID'); --receiving the chosen row's ID saved in session
The main report region header contains the following script:
<script>
$("#rep_main").find("table.apexir_WORKSHEET_DATA td).live("click",function(){
var chosenOne = $(this).find("span").attr("id"); //finding ID of the chosen row
chooseMAIN(chosenOne);
apex.submit({set:{'P500_MAIN_ID':chosenOne,'P500_CHILD_ID':null}});
});
</script>
In this code P500_CHILD_RN is the item for saving ID of child report's row and the function chooseMAIN is:
function chooseMAIN(docID){
$.post('wwv_flow.show',
{'p_request' : 'APPLICATION_PROCESS=SET_MAIN',
'p_flow_id' : $v('pFlowId'),
'p_flow_step_id' : $v('pFlowStepId'),
'p_instance' : $v('pInstance'),
'x01' : docID},
function(data){
//for the opportunity to get the ID in pure JavaScript
$("#P500_MAIN_ID").val(docID);
$("#P500_CHILD_ID").val("");
$("#rep_main").trigger('apexrefresh');
$("rep_child").trigger('apexrefresh');
}
);
}
The process SET_MAIN looks this way:
begin
APEX_UTIL.SET_SESSION_STATE(P_NAME => 'P500_CHILD_ID',P_VALUE => NULL);
APEX_UTIL.SET_SESSION_STATE(P_NAME => 'P500_MAIN_ID',P_VALUE => APEX_APPLICATION.G_X01);
end;
p.s. Earlier I asked some help with IR here, but I still haven't found proper solution (except making a submit, which has its side effects I said about).
what you really want to use in this case is the FOEX plug-in because its AJAX based so you don't need to submit.
FOEX website
And do yourself a favor and move away from 4.2 you'll thank me later..
Dear StackOverflow Users
I am currently working on a data analysis web app.
Now in this app you can drag and drop graphs and you can remove it by unselecting it. Also you can add the graph with a plus button. Only problem is there is no way to unselect it when you add it by that plus button(Which I put the code of ""$("#tb_add").button"" )
What I am trying to do is find a way to write a function button that would undo what the add graph button did, or close it or delete it, since there is no unselect button.
My question is: "Is there such a javascript function that would undo or remove what the $("#tb_add").button did.
so let's say I want to add a button called $("#tb_remove").button
is there any simple javascript that would simply undo what was added ?
If there is what is it called ? can you direct me to it ?
Thank you
In your click handler you could add a way to remove the section. jQuery has a .remove() function. You could use classes to control it as well.
if($(this).hasClass("added")){
$(this).removeClass("added");
$("panel selector").remove();
$(this).addClass("removed");
} else {
analysis.addPanel();
$(this).removeClass("removed");
$(this).addClass("added");
}
something along those lines should help you.
i have my main page and also two partial views. One partial view is a menu and the other is a telerik grid.
What i want to achieve is selecting a row in the grid and when i click a button in the menu i want the page to navigate to that action passing the selected row (id).
i want to refresh the entire page and not only the div with the grid.
I tried using document.location = "/Pedido/DetalhePedido/" + id; but i don't receive the id n the controller.
I also tried using $.get('#Url.Action("detalhePedido", "Pedido")', data, function (result) { }); usually i use this to refresh a div and i can't seem to make this work with the entire page (and it probably shouldn't ).
Wich methods do you usually use in your web apps to reproduce this sort of behaviour?
Because clicking on the row happens on the browser, you can't depend on anything from the controller or model unless it's already somewhere in your original model. I implement this by adding a hidden Id column to the grid and model it uses for rendering, then add client events and handlers to the grid and view. Check out the samples provided for the Grid under Client-Side Events for some of the different client events you can take advantage of.
On your grid, first add the Id column (hidden if you like):
.Columns(columns =>
{
columns.Bound(o => o.Id).Hidden(true);
}
Then add ClientEvents and wire up onRowSelect like so:
.ClientEvents(events =>
{
events.OnRowSelect("onRowSelected");
}
Then add a function to handle this event like so:
function onRowSelected(e) {
var id = e.row.cells[0].innerHTML;
window.location = "Something/Details/" + id;
}
UPDATE
Sounds like you are doing everything right on the client. The problem is likely elsewhere, in your Action or Bindings. But to be certain, take a look at what /Pedido/DetalhePedido/" + id actually is with an alert before venturing down that path. You should be able to take that and enter it directly into the url of your browser and hit your action as long as your action is correctly defined, accepting an int called id.
If its still a problem, you need to look at you action. Is it marked for Post? If it is Window.Location wont work because it's not a post. Is the argument it accepts named Id and of type int? If not, should it be? Have you changed your Routes, and if so does your Url match any routes defined?
I read from the documentation that we can handle the back button click using the following code:
document.addEventListener("backbutton", backKeyDown, true);
function backKeyDown() {
// Call my back key code here.
alert('go back!');
}
My concern is that I have a single HTML5 web page in which I have multiple div tags which I animate using jQuery as per the navigation option selected by the user from the menu options.
How can I, in this single page webapp, handle the back button click using PhoneGap and show the user the previously animated div. Clicking on the back button again would again take him to the previous div of the current previous div :-)
Thanks.
I solved the problem by creating a global array variable as
var myStack = new Array();
Then whenever I clicked on the div tag, I inserted the function prototype along with the arguments inside the myStack variable. For eg:
myStack.push(\"myfunction(args1, args2);\");
Then, using the code which I posted in my question, inside the BackButton handler, I wrote the following code:
var divToShow = myStack.pop();
eval(divToShow);
Hope this helps others.
I did an implementation in a similarly structured phonegap app. My situation was a bit more complex because I was loading in html as well as external data via ajax (rather than just unhiding divs). I created a global array called history which I used to keep track of current position as well as previous positions (position here being the most recent ajax function called, so the array was actually storing function names as text). The right sequence and combination of .pop and .push array methods got me a fully functioning js back button that scaled nicely and handled any kind of back and forth navigation I could think of.
I will just post my overall idea of handling this situation. Hope you can improvise and change it to suit your needs.
Have a global variable to remember the current div id that is
visible. For example, when a menu item x is clicked, set this global
variable to the div id that is currently visible (before showing the next div corresponding to menu item x).
When the back button is pressed, use the global variable's value to identify the previous div. Hide the current div and show the previous one.