sending div to another page - javascript

i would like to send a div to another page actually im using javascript it work but i dont think its effecient cause it just show it it dont really send it, is there another way with ajax or jquery //my script send div:envoi to contenu.php under div:recu
function popWindow()
{
var pop = window.open('contenu.php'); self.focus();
if(pop.focus){ pop.focus(); }
}
function showIt() {
var cont = self.opener.document.getElementById('Envoi').innerHTML;
document.getElementById('recu').innerHTML = cont;
}

As far as I'm aware, that should work, assuming the showIt function is called within the popup window, within the onload event of the page body (or at some point after the 'recu' element have been drawn).

Related

my sapUI5 app only jumps once into my print method

this is my very first question on Stackoverflow. I am currently developing a print function in my sap ui5 app to print out certain UI controls. I've got the function from here: http://embed.plnkr.co/jjyEPa1updkjBiNZqumS/preview
However, during runtime, when I click on the print button, my app only jumps to the method once and executes it correctly (to print). But after that, I can press the printbutton as often as I want, nothing happens and I can't find out why.
what the method does: i replace the body with a temporary body, which only contains the elements to be printed and execute window.print(). afterwards i insert the original body content again. Of course I use the UI controls to grab the HTML tags.
onPrintChart: function(oEvent){
var oTarget = this.getView(),
sTargetId = oEvent.getSource().data("targetId");
if (sTargetId) {
oTarget = oTarget.byId(sTargetId);
}
if (oTarget) {
var $domTarget = oTarget.$()[0],
sTargetContent = $domTarget.innerHTML,
sOriginalContent = $(document.body)[0].innerHTML;
$(document.body)[0].innerHTML = sTargetContent;
window.print();
$(document.body)[0].innerHTML = sOriginalContent;
} else {
jQuery.sap.log.error("onPrint needs a valid target container [view|data:targetId=\"SID\"]");
}
}
I managed to do it in a different, more elegant way without using a temporary body. I used CSS to hide all irrelevant elements (display: none) and keep only the relevant element for printing.
Apparently ui5 hung up when replacing the original body temporarily with another body. I noticed that ALL buttons didn't work anymore, not only the print button.

Writing a custom javascript event

I'm writing some code that will get executed before the DOM loads, basically, using Modernizr to get scripts. Now my issue is that I want to show a loading animation if the DOM loads and the scripts are still loading.
Modernizr is executed in the head. If I put the code to use document.getElementById in the head also, error is thrown because the DOM hasn't loaded. Now I have no idea how to solve this.
Here is the code I have so far:
<head>
<script>
var FileManager = {
IsLoading = false;
LoadRequiredFiles: function (config) {
config = config || {};
this.OnLoading = config.onLoadingCallback;
this.OnComplete = config.onCompleteCallback;
this.IsLoading = true;
if (this.OnLoading) {
this.OnLoading();
}
var self = this;
Modernizr.load([{
load: '/jquery.min.js',
complete: function () {
if (self.OnComplete) {
self.OnComplete();
}
self.IsLoading = true;
}
},
]);
}
};
var globalLoadingId = 'globalLoader';
FileManager.LoadRequiredFiles({
onLoadingCallback: function () {
document.getElementById(globalLoadingId).style.display = 'block';
},
onCompleteCallback: function () {
document.getElementById(globalLoadingId).style.display = 'none';
}
});
</script>
I used to execute this code below the <body> tag, and it worked. Now I moved it into the <head>. So I used to pass 2 callbacks to it. Now I'd rather attach events to it and handle them in the body (assuming thats where the DOM is loaded).
What I'd like to do:
<head>
<script>
FileManager.LoadRequiredFiles();
</script>
</head>
<body>
<script>
//Bind the event, not sure if this is even possible in javascript.
FileManager.OnCompleted += fileManagerCompleted;
fileManagerCompleted()
{
document.getElementById(globalLoadingId).style.display = 'none';
}
if(FileManager.IsLoading)
{
document.getElementById(globalLoadingId).style.display = 'block';
}
</script>
</body>
The page is your canvas for display. You can't show anything before it loads. It sounds more like you want a very small page to load (quickly) where you could display your progress and then your code could dynamically load/display the rest of the page with ajax calls and javascript showing progress as it goes. That's the only way to get out in front of the rest of the page load that I know of.
The only entirely reliable way to run a script that manipulates the DOM is to use the body onload event. (window.onload is popular, but not quite 100% reliable.)
There are some browsers that implement a onDocumentReady event that can be kind-of-sort-of faked in IE, but I don't recommend its use.
Using getElementById will not, by itself, throw an error if used in the head. You might be causing an error because you aren't checking the returned value, which will be null if an element with the specified id wasn't found, e.g.
var el = document.getElementById('foo');
if (el) {
// do somethig with el
} else {
// el wasn't found
}
Your problem is how to display the image only if the scripts are still loading and the page is visible. The simple answer is don't use client-side script loading, do it at the server. :-)
If you want to persist with script loading, add a class to the loading image, say "hideOnLoad". Have a callback from the last script load that sets the rule to "display: none" (just create and add style sheet with that one rule using script).
Now you just include the loading image as the first element in the body with a class of "hideOnLoad", knowing that when scripts have finished loading they will hide the image regardless of whether it (or any other element with the same class) existed at the time or not.

Reset functions after ajax

I have this javascript file: http://pastebin.com/m2keHsTM
A big part of it is a toggle switch that works by sliding your finger or mouse on it. As you see at the end of the document
var togglebox = "<div class='toggle_box'></div>";
$('input[type=checkbox]').css('display','none');
$('fieldset[data-input-type=checkbox]').append(togglebox);
var mouseDown = false;
var beginTouchDown = 0;
create_elements();
set_listeners();
replaces the checkboxes on the page by div's that are "slideable" This works great, only when I load another page trough ajax, other new checkboxes do not get replaced.
Is there a way to reset those functions and make them check again after an ajax call?
Thanks a lot for your help :)
You can:
Call set_listeners also after the load function call: http://api.jquery.com/load
Change set_listeners to bind to events with live instead of bind or mouse... event binders: http://api.jquery.com/live
I just added the original functions to hijacklinks() to initiate them each time the page changes :)

top.opener.location.reload(true) not refreshing parent page on IE

I have two pages, the parent and from this page I am using:
window.open('OrderDetailsFull.aspx?ObjectID=' + ObjectID[1] , "TableDetails","status=0 , toolbar=0 , location=no , menubar=0 , scrollbars=yes , height=600px , width=800px");
to open a new window and manipulate data over there.
When I finish what I am doing I need the parent page to refresh so I will get the new data data in it...
From what I know the method is:
top.opener.location.reload(true);
but for some reason, it is not working in IE8 or IE9...
As I am building an application and not a general web page. It will work on Windows OS with IE (as for now it is still the most common system...nothing to do about it) so I really need to solve this problem....
I couldn't find any new solution over the web for this problem, every one say it should work like that.....
Did anyone encounter this problem? and does any one knows how to solve it?
OK, FOLLOW UP question: when I do opener.location.reload(true); does it render the parent page all over again (as it sound) or not? If it does then I'm in a big problem, if not, then there must be a way to do that...
The problem is the I have an ajax call in the parent page and for some reason it stays in it's old values when I am using it, only when I reload the child window, the parent ajax shows the real results, some code follows...
This is in the document ready jQuery function of the opener page:
$('div[id^="divTable"]').hover(
function(e){
//קבלת זהות השולחן הנלחץ
ObjectID = $(this).attr('id').split('_');
$(this).css("cursor","pointer");
//AJAX הבאת נתוני רשומת ההזמנה מהשרת ב
var OrderDetails = $.ajax({
url:'AjaxActions/OrderDetails.aspx?ObjectID=' + ObjectID[1],
async:false
}).responseText;
//צף מעל שולחן כשעומדים עליו, ניתן לראות את פרטי הרשומה של אותו השולחן DIV
$(this).append($('<div style="position: absolute; top: 0; left: -150;">' + OrderDetails + '</div>'));
//וידוא שהשולחן עליו אנו עומדים יהיה העליון
$(this).css("z-index","10");
$(this).siblings().css("z-index","1");
},
//כשיוצאים מהשולחן DIVהעלמת ה
function () {
$(this).find('div:last').remove()
}
);
This is in one of the functions in the child window that should refresh the opener:
$('#ctrl_Print').click(
function()
{
alert($('#hidItem').val());
var Items = new Array();
Items = $('#hidItem').val().split(',');
for(var i=0;i<Items.length;i++)
{
alert(Items[i]);
}
opener.location.reload(true);
window.location = 'OrderDetailsFull.aspx?OrderID=' + OrderID + '&ObjectID=' + ObjectID + '&Print=' + Items;
window.close();
}
);
10x...
It looks like IE 8 and 9 have security restrictions on refreshing the opener.
I've run into this problem where reload() works in Chrome, but pukes in IE.
Try using window.location.replace(your url and params here).
You have to collect the url and params for replace(), but it gets around the IE error message.
Example:
In Joomla 2.5 parent window launches modal for users input, where we need to reload the parent window (view) in order to run code that uses modal input.
The modal fires a function in the parent window like;
function updateAddresses(runUpdate, itemID, closeModal){
if(closeModal == true ){
SqueezeBox.close();
}
if(runUpdate == true){
//location.reload();
var replaceURL = 'index.php?option=com_poecom&view=cart&ItemId='+itemID;
window.location.replace(replaceURL);
}
}
top is used to get the outermost document within the current physical window when you're dealing with framesets and/or iframes and is not related to window.open in any way, so you shouldn't use top unless there are frames or iframes within your pop-up page. The following will do:
opener.location.reload(true);
If you want to access the parent window (or frame), you should use parent, not top:
parent.location.reload(true);
When your page is a frame inside that window, add more parents to it:
parent.parent.location.reload(true);

JavaScript behaving weirdly, opening an drop/drag item only 'alert' is put

I have Drag/Drop functionality in my page embedded using YAHOO.js which is initalized at load of the page. When 'alert' is put in the init function, the Drag/Drop is working otherwise
it is not. Using Firebug I had debugged the code and seen when init function is called but not looping through the function when no alert is put.
This function should work when ALT key is pressed. I am using velocity template engine over JavaScript.
Sample code:
<script type="text/javascript" language="JavaScript">
var myLogger;
var dd1, ddTrashCan; // draggable div objs
#if ($displayOptions.isDoDragDropJavaScript())
YAHOO.util.Event.addListener(window, "load", DD_TestInit);
#end
function display(data) {
var output = "<div>" + data.text + "</div>";
element.innerHTML=output;
}
function DD_TestInit() {
#if ($showLoggerDiv)
initLogger();
#end
//display("date");
initDragObjects();
}
function logMsg(strMsg) {
if (myLogger)
myLogger.debug(strMsg);
}
function initDragObjects() {
//alert('---');
if (dd1) dd1.unreg();
if (ddTrashCan) ddTrashCan.unreg();
YAHOO.util.DDM.mode = YAHOO.util.DDM.POINT;
YAHOO.util.DDM.clickTimeThresh = 10;
## init constant drag objects, draggable div and droppable trash, resp.
dd1 = new lineSched_Draggable("dragDiv1");
ddTrashCan = new lineSched_Droppable("TrashCan");
}
What I had found is whenever I put an alert or call any window.open() this works fine.
Any clue whats happening here.
There is timer event which is delaying the process.My feeling is that this is a timing issue. The page is not fully in place when on load. The alert slows the process down, essentially the page is in place by the time the user clicks Ok on the alert. Clearly, we can’t deploy the app with an alert. But, we can look into different places to put the initialization. We can try to place it the same place I added the timing, when the page receives the last table. The page should be fully formed at this point and the function should work properly.

Categories