I am building a web-based tool for the role-playing game GURPS. Data is maintained in several XML files that are loaded into arrays. Based on changes the user makes, data is re-populated into various spans, inputs and dropdowns from the arrays. No problem so far.
To give the user more feedback, I have a added an anchor that does a hover pop-up that shows the details of the current weapon. For the initial coding, these values were hard-coded while I worked out the rendering issues. Still no problems yet.
Now I am trying to actually populate the hover pop-up with real data. I can not get it to load the real data into the span! I have debugged the function and am certain that I have extracted the data I want. I have used similar lines of code to populate other parts of the web page.
Specifics: I want to replace the "aa" in the span below:
<span id="weaponName1" name="weaponName1" class="weaponName">aa</span><img src="Images/Firearms/Makarov_Suppressed.jpg">
The code I am using to try to re-populate the span is:
function loadWeaponStats(person, weaponID) {
// Load stats of the current weapon into the "Details" anchor fly-out
for (xx1=0; xx1<WeaponsArray.length; xx1++) {
if (weaponID == WeaponsArray[xx1][0]) {
weaponName = WeaponsArray[xx1][1];
alert("weaponName: "+weaponName+"\nperson: "+person);
$("#weaponName"+person).val(weaponName);
xx1 = WeaponsArray.length; // Kill the loop
}
}
}
The alert() is simply to confirm that I have the correct data. The following line should re-populate the span, but it does not.
All HTML, CSS & JavaScript can be found at GURPS Combat Calculator
Pulling out what little hair I have left.
Thanks
You can also do as below:
$("#weaponName"+person).text(weaponName);
you can't use Val() method here.
Related
In a javascript web app I am displaying a rather long table, filled with data coming from firebase, with code like the following.
̧ const dbReference = firebase.database().ref('MyCollection').child('CHD')
dbReference.on('value', function(list) {
list.forEach(function(item) {
itemR = document.createElement('tr'),
itemD = document.createElement('td'),
.... useful code laying out the item inside the table ....
}
}
It works as expected and I end up with my list of items in a table. But I need something more.
How can I make the window scroll automatically to a given position. For instance, to have the 157th item in the list to show at the top of the window. I have already searched the net and found some scroll functions that I tried, but with no success.
Note that the similar question (JavaScript to scroll long page to DIV) does not solves the problem. Maybe because it is a table.
I have tried to follow the solution provided there, using various options, but could not make it work.
I am relatively new to Servoy and Javascript so that might be why i can't get this to work but here goes:
I am trying to get a label to display all of the data from a specific column from my database table in a list.
I tried to add a dataProvider but that adds only one record per page.
I need the items to be listed below each other so it makes it easier for me to see.
I have also tried adding:
function firstName(){
foundset.loadAllRecords();
return;
}
and setting it as an onRender to see if that displays everything
Thanks in advance
If you look for the answer then here it is:
Use a label and set the text of the label to
%%list_display%%
Set your form layout to Tableview
The answer for above was using Servoy Developer and PostgresSQl
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..
I am designing a sort of game where there are team bases that surround a hexagonal board. The idea is that when a team base is clicked, it will be that team's turn. I have:
$('.team').click(function(){
var teamID=$(this).attr('id');
explore(teamID);
});
I then use the teamID to find the index of the team that was clicked, which is stored as an object from a json file with attributes such as teamname, score, etc.
function explore(index){ // the game portion
var turn=file[index]; // finds the team's info from json file
$('.hex').click(function(){ // when a hex is clicked.... play the game
alert(turn.teamname);
// game elements
}
This always works the first time around, however if I click on a different team box and then a hex, oftentimes it thinks that it is the turn of the box I clicked before. I added the alert(turn.teamname) to try to debug. If I'm clicking a different box, it will always alert the first box, and then send a second alert with the different box. I can't figure out why there would be two alerts? So it will always alert 'team1' and then 'team1','team2'. as I click more boxes it keeps alerting until it just alerts all of them. Additionally, if I have clicked more than two boxes before, even if I keep clicking the same hex it seems like it alternates between alerting me that it is 'team1' and 'team2'.
This is my first stackoverflow post so I hope it makes sense! Thanks!
The reason you get this behavior is that you add event handlers to dom elements but never remove them. You need to change the way you handle clicks on the hexes. You may add an event handler once with http://api.jquery.com/one/ to the parent element that holds all hexes and check which hex is clicked inside the event handler.
Or you can try a more trivial solution where you add an event listener once to the hexes and check if there is a selected team:
var turn;
var teamSelected = false;
function explore(index){ // the game portion
teamSelected = true;
turn=file[index]; // finds the team's info from json file
}
$('.hex').click(function(){ // when a hex is clicked.... play the game
if (teamSelected) {
alert(turn.teamname);
// game elements
teamSelected = false;
}
}
For something like this, I would recommend getting into meteor. The reactive programming model is much cleaner than an imperative one (especially in a game where it can quickly get complex).
I feel that this example illustrates what can be done very quickly using this framework (closest to your question's example).
To dive in, I'd recommend looking at the intro video, then proceed to the docs and a recent book about it.
(note: edited since I've just realized the question are somehow correlated, at least in my mind!)
I want to create a multi-filter page in which the result will be animated...
I'm trying with 2 different plugin (quicksand and Isotope) and with both solution I'm having problems...
---ISOTOPE--- (original)
With Isotope I need to filter data based on active class, or based on IDs of filters, which I've already stored in JS, does anyone know how can I do that?
I set up a page with 2 different filter like 'color' (red, blue, orange...) and 'type' (square, round...)
I already have a Javascript that assign class active to the 2 filtering lu based on selection, if all color are selected shift the 'active' class to 'all', and more than one sub-filter can be activated. And this also save the list of the id of the active li items in a string for color filter and another string for shape filter
I also already set up the page like the combination filter Isotope demo at this link: http://isotope.metafizzy.co/demos/combination-filters.html and it is working fine but doesn't allow to select more than one sub-filter at the same time.
I saw the demo at this link http://fiddle.jshell.net/desandro/JB45z/ with filtering combination, but it is based on radio button that I'd like to avoid.
I'm not sure if what I'm trying to do is easy or not... is like, how to tell to Isotope to filter based on the sub-filter that have active class or based on the sum of the li with the ID saved in my two string?
Thanks for any help, as you can easily understand I'm not skilled in js at all and english is not my first language!
--- QUICKSAND --- (edited)
I've just realized that I didn't explain why I stored the IDs of the selected items in the js string. And this is also about the different js question.
I was trying to set up the same system with Quicksand instead of Isotope.
But since quicksand need to have a starting li and a destination li to display the animation I set up the js to pass an array to a different temporary php page that use the array to display a destination li.
All until here is working fine but I'm not able to get back the li data in the original page to let Quicksand perform the animation. The last part of my js appear to have problems that I'm not able to fix (too many days trying with no success), the last part of the js is:
$.post( 'destination_li_filtered.php', {
colorString,
shapeString,
$('#ids').attr('val')
},
function(data) { // should contains the resulting data from the request (?)
$('.list').quicksand( $(data).find('li'),
{ adjustHeight: 'auto' },
function() {
callbackCode();
}
);
e.preventDefault();
});
the external page destination-li-filtered is displaying the results but the original page is not able to take back the data...
Obviously I need to set op the page with isotope or quicksand, not both.
but I'm also wondering witch is the best plugin to display 100's of results with about 20 filters (without considering the combinations). And of course, which is the easiest to use!
You should see the radio button and the change in view as separate things.
It's a common misconception that you should store all your state in the DOM (ie. which checkbox is checked). The DOM is a view, you don't keep state in a view.
You should have a state that lives in your JavaScript.
Like:
var state = "all_selected"; // green, red, blue
Then, when you check the radio button, it will set the appropriate state and update the list (show/hide elements based on state).
This allows you to make any control you want, be it a radio button, a checkbox or something completely custom.