I have a table of data being produced with JavaScript. At the end of each row is an image, which is clickable. When clicked, a popup appears containing information based on the row.
I am using the second example on here: http://www.abidibo.net/projects/js/moopopup/demo
Basically, how I have it setup now is this:
The function;
function popup() {
var mp_instance = new moopopup({
overlay: true,
title: 'Copy server address',
html_node: 'mynode',
});
mp_instance.display();
}
make the popup, appear, using a div which is initially hidden
<div id="mynode" style="display:none">Content.</div>
The image then uses onclick to make the popup run.
onclick='popup();'
Now this works with static data, however each row has different content I want to put in to the popup. So i'm confused about how I would make each popup individual to the row, without creating loads of functions with an ID on the end, which basically all do the same thing.
http://www2.lethal-zone.eu/servers/tf2-servers
The image at the end of each row; when clicked shows some extra content...
You generally would want to pass some information to the one function as parameters and then use those parameters to choose the content. For example, pass some ID to the function:
onclick="popup(1);"
function popup(id) {
// do something with id to choose the content
// snip...
}
Related
I currently have made a way so the user can add another text field to the form by pressing on a 'add_another' div, this uses basic JS so when the user presses on the div 'add_another' the div 'author_2' is toggled.
I would like to make it so that when the user presses on the 'add_another' div for a second time it shows 'author_3' div, and when they press 'add_another' again, it then shows 'author_4'. I have put all the CSS and HTML divs in place to support this, I am just trying to adapt my code so it shows one div after another, rather then toggling a single div.
Here is my JS:
<script>
$(document).ready(function() {
$('.add_another').on('click', function(){
$('.author_2').toggle();
});
});
</script>
I have tried altering this code, however with no luck.
I haven't added my HTML as it is just 4 divs, 'author_1' 'author_2' ... 3...4
Thankyou for your help
There are two solutions to Your problem.
First one - use static code
It means the max author count is 4 and if user gets to 4, this is it.
If so - You need to store the number of authors already shown.
var authors_shown = 1;
$(document).ready(function() {
$('.add_another').on('click', function(){
authors_shown++;
if (!$('.author_'+authors_shown).is(":visible")) {
$('.author_'+authors_shown).toggle();
}
});
});
But there is also a second - more dynamic option.
What if user wants to input 10 or 20 authors? You don't want to pre render all that html code and hide it. You should clone the div and change its id or if the (HTML) code (for another author) is not too long, you can render it within JS code.
var div = document.getElementById('div_id'),
clone = div.cloneNode(true); // true means clone all childNodes and all event handlers
clone.id = "some_id";
document.body.appendChild(clone);
If it's a form, then change names of input fields to array as author_firstname[]
Also You can store number of added authors in another hidden field (so you know how long to loop the form fields on the server side.
The second option is a bit more complex and longer, but way more dynamic.
You should make another div when clicked on add_another:
something like this:
<script>
$(document).ready(function() {
$('.add_another').on('click', function(){
$('<div><input type="text" name="name[]" /></div>').appendTo('.your_container');
});
});
</script>
as you see, input's name has [] which means you should treat with the inputs as an array.
let me know if you got any further questions
good luck.
Good evening to everybody here!
At this moment I'm working with one page in Oracle Apex (version 4.2.6.00.03). It consists of two Classic Reports — the first is a "master" one, and the second contains "details" of the former. Also there are several buttons for performing actions of inserting/updating/deleting the data. My purpose is not only to make the actions work and "details" report to refresh on choosing the row from the "master" one (I've completed these tasks), but also to manage to save the highlighting of reports' rows even after performing the actions (not only just refreshing the page).
Now I'll explain what I've already done. One can choose the row (and simultaneously highlight it) by means of the script I put in every Report's footer and it looks like this:
<script>
$(".t20data","#master_report").live("click",function(){
chooseMST($(this).find("span.MASTER").attr("id"));
});
</script>
There master_report is an ID of "master" report's region and MASTER stands for span class, in which I wrap all the cells in report to keep the value of row's ID. The function chooseMST is this:
function chooseMST(docID){
$.post('wwv_flow.show',
{'p_request' : 'APPLICATION_PROCESS=SET_MASTER',
'p_flow_id' : $v('pFLowId'),
'p_flow_step_id' : $v('pFlowStepId'),
'p_instance' : $v('pInstance'),
'x01' : docID},
function(data){
//refreshes "details" report
$('#detail_report').trigger('apexrefresh');
//deletes color from all the rows of "master" report
$(".t20data","#master_report").parent("tr").children().css("background-color","#F2F2F5");
//highlights the chosen row in "master" report
$("#" + String(docID)).parent("td").parent("tr").children().css("background-color","#A3BED8");
}
);
}
The action (say, AJAX callback) SET_MASTER is this:
begin
--clears the choice from "detail" report
APEX_UTIL.SET_SESSION_STATE(P_NAME => 'P400_DETAIL_RN'
,P_VALUE => NULL);
--makes the choice from "master" one
APEX_UTIL.SET_SESSION_STATE(P_NAME => 'P400_MASTER_RN'
,P_VALUE => APEX_APPLICATION.G_X01);
end;
To say about refreshing the page, I solved the problem of clearing the hidden items P400_DETAIL_RN and P400_MASTER_RN by having a process which goes before header with this PL/SQL code:
begin
:P400_DETAIL_RN := APEX_UTIL.GET_NUMERIC_SESSION_STATE(P_ITEM => 'P400_DETAIL_RN');
:P400_MASTER_RN := APEX_UTIL.GET_NUMERIC_SESSION_STATE(P_ITEM => 'P400_MASTER_RN');
end;
and the Javascript function recolorRows which is executed every time the page is loading:
function recolorRows(){
$(".t20data","#master_report").parent("tr").children().css("background-color","#F2F2F5");
if($("P400_MASTER_RN").val() != "") $("#" + String($("P400_MASTER_RN").val())).parent("td").parent("tr").children().css("background-color","#A3BED8");
$(".t20data","#detail_report").parent("tr").children().css("background-color","#F2F2F5");
if($("P400_DETAIL_RN").val() != "") $("#" + String($("P400_DETAIL_RN").val())).parent("td").parent("tr").children().css("background-color","#A3BED8");
}
The code concerning rows from "details" report is alike, so let me omit this part. Problems begin for me from performing the actions of manipulating the data. Here is the function which opens the dialog window for inserting or updating the row chosen in "master" report:
function MST_open(action){
//the part of code which finds out with what parameteres we should call the dialog window
$("#dialogFrame").attr("src",stringToCall);
$("#dialogWindow").dialog({
title:windowName,
modal:true,
width:500,
height:500,
resizable:true,
close:reloadMST //the action on closing the window
});
}
The code of reloadMST looks as follows:
function reloadMST(){
$("master_report").trigger('apexrefresh');
$("detail_report").trigger('apexrefresh');
}
And the Javascript function, which executes in the dialog window on the certain button click (for example, "Update"), is this:
function mstUpdate(){
$.post('wwv_flow.show',
{'p_request' : 'APPLICATION_PROCESS=MASTER_UPDATE',
'p_flow_id' : $v('pFLowId'),
'p_flow_step_id' : $v('pFlowStepId'),
'p_instance' : $v('pInstance'),
'x01' : apex.item("P402_SNAME").getValue()},
function(data){
//returns the ID of updated row in "msg" part of "res" variable
var res = eval("(" + data + ")");
if(res.status != "OK"){
//the code which catches the error, if it appears
} else {
parent.MST_close(res.msg);
}
}
);
}
where MST_close is this:
function MST_close(docID){
$("#dialogWindow").dialog("close");
//see this function above
chooseMST(docID);
}
So, this is a chain of Javascript and PL/SQL actions, which concerns the updating of the row from "master" report. The actions of inserting/updating/deleting the data work great, but I can't say the same about the saving of rows' color. The latter works good while I'm only choosing rows or refresh the page, but after performing, for example, the updating, the current row loses its highlighting. By debugging (say, adding the function console.log in Javascript code) I found out that the chain of actions, which must lead to saving the highlighting, executes nominally, but it looks like refreshing the report either goes after coloring or just prevents the latter.
Thus, my question is this: is there any way to save the highlight of the current row even after opening and closing the child dialog window?
I think that the problem is that after you update the value of a record in the modal window you refresh the data in the 2 reports in the main page and so you lose the highlight.
To fix this try to create a Dynamic Action on the event After Refresh on Region: Your Classic Reports that will execute the javascript function recolorRows(). You can also do it with javascript. The main ideea is that after you refresh the 2 reports (using reloadMST() or other method) you must trigger recolorRows().
Thank you, Cristian_I, very much. I've recently solved my problem. My mistake was that I hadn't done the hidden items binding in HTML-code - in other words, by means of Javascript only. Watching the behaviour of the hidden items, I'd discovered that when I tried to find their value with the help of jQuery function $("#hidden_item").val(), I got the previous values, but not the current ones (i.e. session state values). So that's why I had the highlighting unstable.
In addition to Dynamic Actions triggering right after refreshing the reports, I should have just add these strings to my function chooseMST before the "coloring" code itself:
$("#P400_MASTER_RN").val(docID); //binding to exact string
and
$("#P400_DETAIL_RN").val(""); //clearing the choice in the "details" report.
Due to this the problem with recoloring the rows have just gone away! Thus, now my page works excellent: the highlighting is stable, and even new rows are highlighted right after inserting them.
I am attempting to get the data displayed from a database (it displays it on a dynamic page within a table) and have it as the value for a textfield on a different html page (map.html).
The value will be some sort of postcode/address and I want that to go into my google map page within the destination textfield. So when users check the location of the event they press the 'View on Map' button which will open up the page of the map and the data from the event should already be populated within the textfield.
However nothing appears and instead it remains blank, even when I just put in some dummy text it still doesn't populate. I know that the location value is being fetched as the alert correctly displays the location, but the problem is having it populate in the textfield.
I am using JQuery Mobile/Cordova/JavaScript/JQuery/HTML. The app is a one-page structure, with the exception of map.html which has it's own page.
Any ideas?
Fetching the location value:
$(document).on("click", ".btnMap", function(e){
var location = $(this).data("rowlocation");
viewMap(location);
});
Snippet of Button:
<a data-rowlocation='" + response.rows.item(i).Location + "' href='map.html' onclick='viewMap(location)' data-role='button' rel='external' data-mini='true' class='btnMap'>View on Map</a></td></tr>"
viewMap Function:
function viewMap(location) {
alert(location);
$("#target-dest").val(location);
}
HTML:
<input type="text" name="target-dest" id="target-dest" />
the simplest way of passing the location to a new page - using your existing code would be to append the location as a query string to the href in the link.
<a ...href='map.html?loc='" + response.rows.item(i).Location + "'...
and then on the destination page - use JS to grab the querystring from the URL, split it from the rest of the UURL and pass it to the textbox.
//js on destination page
var locn=location.href;
var locationPortions = locn.split("?loc=");
$('#target-dest").val(locationPortions[1]);
Because the trigger for this is clicking an <a>, the link is causing a loading of the map.html page which negates the updating of the contents of the textbox:
<a ...href='map.html'...
This is taking precedence over the onclick event. You need to either change the link into a button and trigger the function as an onclick event or prevent the link from performing its normal function as other posters have noted with e.preventDefault().
Here is my scenario ...
I am using pagination with DataTables. My first column is css styled based upon data that is passed in. So, I display the correct colored icon for the property of the item in the table. Everything on page 1 displays correctly. Just doing the basics, everything on further pages does not get displayed because it is removed from the DOM at that time.
So, I did $('#my_id').on('page.dt', function() {perPageFunctionCall();}).dataTable(so on an so forth)}; to call a function which selects the correct colored flag.
When I click on page 2, nothing gets updated. I click on page 1 again and it redisplays the 1st page correctly. I click on page 2 a second time now and it displays everything correctly this time.
So what is causing the display not to update with my new css the 1st trip but to display properly on subsequent trips? Is there someway to refresh the element or the data table after I am done with my css manipulation?
Well it is one of two things:
Either it is
1: I added
.on( 'order.dt', function () { perPageFunctionCall(); } )
.on( 'search.dt', function () { perPageFunctionCall(); } )
in addition to my page function call.
But more likely everyone's favorite reason:
2: Caching
In either case, it does work flawlessly now as expected.
for refresh resp. table :
var path = "/server_processing.php";
var dt = $('#tableid').DataTable();
dt.clear();
dt.draw();
dt.ajax.url(path).load()
I am currently customizing a SugarCRM instance. In one module I have created a few custom fields and a drop down menu. Based on the selection of the drop down menu I want to show or hide some of my fields. This works fine. My question is about the initial load of the page: In that case, all possible fields are displayed - not only the ones that should be displayed based on the default selection in the drop down menu.
My first instinct was to register the onload event and just hide whatever I don't need to see when the page is loaded. But I couldn't find anywhere to place it as I don't want to change /modules/... directly. I'd like to restrict my changes to /custom/modules...
Any ideas?
Here few ways to control dropdown visibility:
There is admin when you edit field there is formula and visibility functionality you can also try this.
Create custom edit view and add javascript code in display function of view.
custom/modules//views/view..php
.php');
class View extends View {
function View() {
parent::View();
}
function display() {
echo '';
parent::display();
}
}
?>
Custom Javascript can be added to editviewdefs.php
'templateMeta' =>
array (
includes' => array (
1 =>array ('file' => 'custom/modules/<ModuleName>/js/custom.js',),
),
),