Background Information:
Our situation
At work we have created multiple apps and a few of them make use of an interactive grid inside of a modal dialog page. Last week we upgraded from Oracle APEX 19.1 to Oracle APEX 21.1 .
The problem described below didn't exist in version 19.1.
(If important: We have to support Google Chrome on Windows)
How to navigate to the IG
In all our cases the interactive grid can be reached by:
nagivating to page x
open modal dialog y
from modal dialog y open modal dialog z (via a branch after page processing)
=> the interactive grid can be found in modal dialog z
Aim and preparations
We only want to give the users access to a few interactive grid functionalities.
For this reason we gave each IG a static id.
What still works
The modal dialog opens and the interactive grid is displayed normally.
Our Problem
Up until the upgrade the following snippet removed some functionality of the respective IG:
$(window).on("load", function() {
var actions = apex.region("example_ig_id").widget().interactiveGrid("getActions");
actions.remove("selection-copy-down");
actions.remove("selection-fill");
actions.remove("selection-clear");
actions.remove("single-row-view");
actions.remove("selection-copy");
});
But since upgrading to version 21.1 apex.region("example_ig_id") returns null. The dom element also can't be found via $("#example_ig_id").
What we found out and tried
In the google chrome developer tools the div with id example_ig_id is visible under elements.
After loading the page, then clicking into the class attribute of the div (via developer tools) to edit it (no need to realy edit anything) and canceling it, apex.region("example_ig_id") isn't returning null anymore. That also works if I edit its direct or indirect parent elements (also tested with the iframe of the modal dialog containing the IG).
Since finding that out i tried to work around the problem with forcing a refresh or a reflow.
I tested multiple of the answers given here: Force DOM redraw/refresh on Chrome/Mac
The tests I tried (in the inline console) all didn't solve my problem:
$("iframe").each(function(){$(this).addClass("testClass"); $(this).removeClass("testClass");});
and:
$("iframe").each(function(){$(this).hide(); $(this).show(0);});
and:
$("iframe").each(function () {
$(this).css("opacity", .99);
setTimeout(function () {
$(this).css("opacity", 1);
}, 20);
});
I used the iframe of the modal dialog itself since it is selectable from the start.
I am not sure if I made a mistake but help would be much appreciated.
At this point I got help and the problem is solved.
Instead of defining this'
$(window).on("load", function() {
var actions = apex.region("example_ig_id").widget().interactiveGrid("getActions");
actions.remove("selection-copy-down");
actions.remove("selection-fill");
actions.remove("selection-clear");
actions.remove("single-row-view");
actions.remove("selection-copy");
});
inside the page under
Function and Global Variable Declaration
pasting just the function content
var actions = apex.region("P7_SAVED_JOBS_IG").widget().interactiveGrid("getActions");
actions.remove("selection-copy-down");
actions.remove("selection-fill");
actions.remove("selection-clear");
actions.remove("single-row-view");
actions.remove("selection-copy");
into the page under
Execute when Page Loads
did the trick.
I don't know if the execution time of the event handler was too early or if it had something to do with the iframe and its context.
Related
When I load new pages via AJAX I need to of course update the HTML title to match the new page. The code below is something I have used successfully in past projects but for some reason it's not working here.
ajaxLoad = function(html) {
init();
// init google map
initMap();
// change html title
var HTMLtitle = $(".content > section:first-of-type").attr("data-title");
$(document).prop('title', HTMLtitle);
document.title = HTMLtitle;
// Used for popState event (back/forward browser buttons)
changedPage = true;
}
This is just a part of the javascript and you can view the rest in context if needed on the live site.
Live site: http://dma.nz/practice/
Click the top right links in the main nav to go to other pages. In my testing the title seems to update sometimes on the first page change but then never works on subsequent page changes. Most times it doesn't work at all and the title never updates. All of those top level pages have the proper HTML title defined in the data attribute, but some part of the function is failing and not updating the title and I cannot find where it's borked.
Can anyone please offer help on what I'm doing wrong or propose a better way to update the title on each AJAX page load?
As you're aware of the javascript error in initMap function
Uncaught TypeError: Cannot read property 'firstChild' of null
That exception breaks all your javascript below that line. Just fix it and your code will work, just like your main page: http://dma.nz/practice/
I'm currently working with a file that contains several jQM page divs (single page approach).
I have a refresh button in the header of these pages that I'm trying to get to refresh individual page divs based on "getActivePage". The reason for this interactivity is there is a running list of items that users will be needing to refresh to see new content coming in to listview(s).
I've had various visual refreshes altering the following function, but none seem to totally refresh the DOM or the contents of a desired pagecontainer or jQM page div. With the following code, I'm able to see a visual transition and I arrive at the desired/same jQM page div that I'm trying to refresh. The problem is, the contents aren't really being reloaded it seems. (I have a way in the test environment of changing the listviews to test the refreshes and I'm not seeing those changes take effect) I'm wondering if I'm not passing in "id_urlNav" properly or if this is even possible with .pagecontainer("change"...).
When all was lost, I ended up inserting window.location.reload();, but this seems to be bad form for pagecontainer manipulation. If anyone has any idea why this isn't working, please let me know. Thanks in advance for reviewing!
// script to reload/refresh jQM pages
// scoped to internal page hashes vs. overall window
// "change" is used vs. "load" for internal reloads vs. AJAX content
function refreshPages() {
// the camel casing on the first part of the pageContainer object below
// is important
var id_url = $.mobile.pageContainer.pagecontainer("getActivePage")[0].id;
var id_urlNav = "#" + id_url;
console.log("id_urlNav" + " =" + " " + id_urlNav );
// window.location.reload();
// keeping the below in case 1.5 finally arives with proven solution
$.mobile.pageContainer.pagecontainer( "change", id_urlNav,
{
allowSamePageTransition : true,
showLoadMsg : true,
// reloadPage reloads entire jQM set of pages, forgetting the getActivePage
// reloadPage is deprecated
// reload "reloads" the getActivePage, but doesn't show new content
reload : true,
transition : 'fade',
changeHash : 'true'
}
);
}
// /refresh code
I read some on the jQuery forums about there being a bug related to reload: vs. the now deprecated reloadPage:, but I don't know if that is some of the cause of the malfunction or not.
I'm doing a Cordova App usin jQuery Mobile. My first page is a 'Loading' page, where I download all needed data for App. After that, App goes to menu. I want to delete that loading page from history.
My problem is that as far as I know, disable insertion of pages inside history can be done only when pages are loaded using $.mobile.changePage (changehash=false).
I'm using jqueryMovile-1.4.2 & cordova 3.4.0.
Does anybody know a approach to this problem?
You need to do two things, remove page div from DOM as well as from navigation history. This can be done by listening to pagecontainershow and read ui.prevPage object, as it holds data of previous page (not current active one).
When pagecontainershow fires, check the type of returned ui.prevPage, it shouldn't be undefined. If it is defined (means you have moved from first page in DOM to any other page) at this stage, .remove() from DOM and from $.mobile.navigate.history.stack.
$.mobile.navigate.history.stack.splice(0,1); this will remove first record in urlHistory stack.
$(document).on("pagecontainershow", function (e, ui) {
if (typeof ui.prevPage[0] !== "undefined" && ui.prevPage[0].id == "pageID") {
$.mobile.navigate.history.stack.splice(0,1);
$(ui.prevPage).remove();
}
});
Demo
What's your issue with changehash=false?
You should just use it when transitionning from the loading page to the menu.
This looks much like what I do in my own app, except in my case history is handled by Backbone.
$.mobile.changePage($("#menuPage"), {changeHash: false});
And starting with jquery 1.4, you should no more use $.mobile.changePage but instead :
$("body").pagecontainer("change",$("#menuPage"), {changeHash: false});
I asked How can I make the “Preview Post” button save and preview in the same window? on the Wordpress Stack Exchange, but this may be a better question for Stack Overflow as it is more directly related to coding.
Wordpress has a box that allows you to save, preview, and publish your blog posting:
The "Preview" button is actually a link styled as a button:
<a tabindex="4" id="post-preview" target="wp-preview"
href="/?p=67&preview=true" class="preview button">Preview</a>
My problem is that I can't seem to figure out how to get that link to open in the current window. Notice the target="wp-preview" part. I'm trying to get rid of that part, but I think there may be another function bound to that element because I really can't get it to open in current tab / window, even after unbinding it and removing the target attribute.
I'm running the following code as part of a plugin (you can see more info on how to run this as a plugin below), but it is also possible to copy and paste this into Chrome or Firefox's console to test this out yourself without even modifying Wordpress. Please note that when testing you'll need to use jQuery instead of $ in your own functions as Wordpress uses the noconflict method, however the code below is working fine as is.
//select the node and cache the selection into a variable
var $node = jQuery('a.preview');
//add a 1px dotted outline to show we have the right element
$node.css('outline','1px dotted red');
//show current target
console.log($node.prop('target'));
//show if anything is bound - nothing is for me ('undefined')
console.log($node.data('events'));
//remove anything bound to it
$node.unbind();
//set target to _self (current window), just in case
$node.prop('target','_self');
//the remove the target attribute all together
$node.removeAttr('target');
//clone the node
var $clone = $node.clone();
//change the text to new
$clone.text('new');
//remove target from clone
$clone.removeAttr('target');
//unbind the clone
$clone.unbind();
//insert the clone after the original node
$node.after($clone);
//show current target - now shows undefined for me
console.log($node.prop('target'));
//show if anything is bound - still 'undefined'
console.log($node.data('events'));
This is how you would work the code into a theme or plugin:
// set up an action to set a function to run in the wp admin_footer
add_action('admin_footer','my_admin_footer_script',9999);
Here is the function that adds the javascript:
//this function can then be used to add javascript code to the footer
function my_admin_footer_script(){ ?>
<script type="text/javascript">
jQuery(function($){
(above js code here)
});
</script>
<?php
}
This is the result I end up with. If I click the "test" link it will open in the same window. If I click the Preview link it still opens in a new tab.
ps: I'm using the method from Things you may not know about jQuery to check for bound events, and I didn't find anything bound, and I believe Wordpress primarily uses jQuery so I don't think this would be bound with another event handler.
You could try this:
jQuery('.preview.button').click(function(e){
window.location.href = this.href;
return false;
});
Works from the Chrome Inspector.
The syntax is right but the timing is important. If you just do the first part but not the second part it is possible that this will not work because it seems there is a delay with the event that binds to this element.
If you include the second part as well, that waits for 500ms after the page is loaded to run, it seems that it works as expected.
add_action('admin_footer','preview_same_window');
function preview_same_window(){ ?>
<script type="text/javascript">
jQuery(function($){
//first part
jQuery('.preview.button').unbind().removeAttr('target');
//second part
setTimeout(function(){
jQuery('.preview.button').unbind().removeAttr('target');
},500);
});
</script>
<?php
}
Titanium SDK version: 1.6.1
iPhone SDK version: 4.2
I am using JavaScript.
I am developing an app that is fetching information from an API. In this app, on this page, I got two ways of "refreshing" the content. When the window is focused and when I tap the refresh button.
The problem is every time I do a fresh of the page there is a "copy" of the content under the new content. It is like the app just keeps layering on new copies of the content on top of the others on each fresh.
What am I doing wrong in my code? Is there a way to "clear" the page before each refresh. I can imaging that this issue eats a lot of memory.
You can find my code for the page here: http://pastie.org/1778830
this is a common architectural problem, you should separate out the function of creating the table and loading the table's data.
you create the table once when the window is created, and you load the data in the table multiple times. Pseudo code below should give you the basic idea.
var win = Ti.Ui.currentWindow;
(function(){
var table;
// create the table
function initializeWindow() {
}
// load the data, and update table
function loadWindowData() {
}
initializeWindow();
loadWindowData();
// called whenever you want to update window data.
Ti.App.addEventListener('app:refreshTable',loadWindowData);
)();
TableView -
table.setData([]); // First Clear
table.setData(tableData); // Updated Content
ListView -
listView.sections[0].setItems([]);//First Clear
listView.sections[0].setItems(tableData); // Updated Content
For Updating Content inside Window you can use "open" listener.
win.addEventListener("open",loadData);