What I'm trying to do is getting data from a database and when the page loads they will show on the screen. when a user is logged in it has an database url that is saved in a variable db and I use db.allDocs to get all data from that user.
Now. I've got it working on a button <button onclick="showInfoItems()">
But when I try it onload, it does work, but not with the correct database. This is because the user is unknown for some reason.
my code:
<body>
<ul id="info-lijst"></ul>
<script src="js/showinfo.js"></script>
<script>onload = showInfoItems();</script>
the user info is known in the showinfo.js, but for some reason the user is undefined, until I press the onclick button.
I thought that, when I first load in the js file (as I do) and then do the onload, it will work, but no. the username is undefined.
Does someone know what I'm doing wrong or how I can fix this?
EDIT:
showInfoItems.js:
function showInfoItems() {
console.log(dbrp);
dbrp.allDocs({
include_docs: true,
attachments: true,
descending: true
}).then(function (doc) {
console.log(doc);
buildInfoItem(doc.rows);
}).catch(function (err) {
console.log(err);
});
}
What the dbrp variable is:
localhost:5984/userdb-undefined
and when i do the onclick it's:
localhost:5984/userdb-1234567890 (username is known)
You defined onload wrong. It expects a callable function. What you do is calling your function immediately.
window.onload = function() {
showInfoItems()
});
EDIT
Since this seems to be more an PouchDB issue a expand my answer.
The problem is, that you need to wait for an asynchronous function call. This function is not done when your document is ready. So either you add a callback to this function to trigger another function when it is done or you add dispatch a CustomEvent
document.dispatchEvent(new CustomEvent('databaseReady'));
Then you can listen for this event and bind multiple function to it.
document.addEventListener('databaseReady', function() {
showInfoItems()
});
http://codepen.io/anon/pen/vgeyzV?editors=1010
Related
I built a shopping cart that processes orders through AJAX before calling the Realex payment API. The issue I am having is that occasionally browsers will outright block the lightbox popup because it assumes it's a spam popup because of how it's initiated.
new Promise((resolve,reject) => {
$.ajax({
method: 'POST',
url: 'processOrder.php',
data: $('form').serialize(),
}).done(function(response){
resolve(response);
}).fail(function(){
reject('Response failed');
})
}).then((data) => {
RealexHpp.setHppUrl('https://pay.sandbox.realexpayments.com/pay');
RealexHpp.lightbox.init('rhpp', data.return, JSON.parse(data.hpp));
$('#rhpp').click();
}).catch((error) => {
console.log(error);
});
I've contacted technical support, and I've been told that the issue is specifically the $('#rhpp').click(); because it's simulating the click rather than being an actual click desired by the user.
So, without actually editing the #rhpp element to ask users to click manually, is there anything I can do to get around this issue?
The first parameter of the init method for the Hosted Payment Page (HPP) lightbox is the ID of the button element that when clicked, will initiate the lightbox.
If you modify the rxp-js.js, you can include a new init method (or override the existing one) that doesn't register a click event handler on a button but instead initializes the lightbox immediately.
Example:
This is the original init method of rxp-js.js as per version 1.3.1.
init: function (idOfLightboxButton, merchantUrl, serverSdkJson) {
//Get the lightbox instance (it's a singleton) and set the sdk json
var lightboxInstance = RxpLightbox.getInstance(serverSdkJson);
// Sets the event listener on the PAY button. The click will invoke the lightbox method
if (document.getElementById(idOfLightboxButton).addEventListener) {
document.getElementById(idOfLightboxButton).addEventListener("click", lightboxInstance.lightbox, true);
} else {
document.getElementById(idOfLightboxButton).attachEvent('onclick', lightboxInstance.lightbox);
}
if (window.addEventListener) {
window.addEventListener("message", internal.receiveMessage(lightboxInstance, merchantUrl), false);
} else {
window.attachEvent('message', internal.receiveMessage(lightboxInstance, merchantUrl));
}
},
This is my modified version of the init method.
init: function (merchantUrl, serverSdkJson) {
//Get the lightbox instance (it's a singleton) and set the sdk json
var lightboxInstance = RxpLightbox.getInstance(serverSdkJson);
lightboxInstance.lightbox();
}
Note the changes I have made:
Removed the first parameter named idOfLightboxButton, and related code that adds the click event handler to the button.
Removed the second parameter named merchantUrl, and related code that adds a message event handler (I handle the response from the merchant in my own way).
Added a called to the lightbox() method on the lightboxInstance object. This is what opens the lightbox.
If you were to take this approach, you would then just update your promise callback to read like.
...
.then((data) => {
RealexHpp.setHppUrl('https://pay.sandbox.realexpayments.com/pay');
RealexHpp.lightbox.init(JSON.parse(data.hpp));
})
...
Of course, if you were keeping the merchantUrl parameter then the above would read a little differently.
I have an HTML page that gets opened when clicking a ribbon button of a custom entity page. The JS code running in this page is does some business logic, and eventually needs to update a lookup field back on the custom entity page.
Currently, for setting the lookup value, I'm doing something like the following*:
window.opener.Xrm.Page.getAttribute("ik_reportid").setValue([{
id: "d67aa9d8-c528-e711-80f2-005056b74923",
name: "test record",
entityType: "ik_report"
}]);
*Note: The above is written hard-coded for simplifying this question. I assure you the problem is not in these values, but somewhere else.
After doing so, the HTML page continues with its existing code, and eventually calls window.opener.Page.data.refresh(true), and then closes itself with window.close().
The problem is that when the opener page is refreshing, I get an error "function expected", and opening the debugger get me to the following line in JsProvider.ashx:
Mscrm.FormInputControl.LookupUIBehavior.$2I=function($p0,$p1){if(!parseInt($p0.type)&&!parseInt($p1.type)||parseInt($p0.category)===LookupItemCategories.UNKNOWN_EMAIL&&parseInt($p1.category)===LookupItemCategories.UNKNOWN_EMAIL)
I watched the values of p0 and p1, and I noticed they don't have a category property. However, when I tried using the same code for setting the value of the same lookup field when I'm on the page itself (i.e., omitting the window.opener', and even calling arefresh`), I get no error.
In addition, I commented-out the refresh call inside the HTML page code. That didn't help, too: when I clicked the save button on the entity page, I again got the "function expected" error, now in Global.ashx (b was expected to be a function, apparently) :
Sys._isInstanceOfType=function(c,b){if(typeof b==="undefined"||b===null)return false; if(b instanceof c) return true;
No idea what's the cause for it. Any help is welcomed.
Posting messages between windows should meet your requirements here. You can find more information here
Basically in your parent window do something like this:
window.onmessage = function (e) {
//e.data will contain some payload
Xrm.Page.getAttributes("xxx").setValue(e.data);
};
Or to be compatible with all browsers:
if (window.addEventListener) {
window.addEventListener('message', function (e) {
//e.data will contain some payload
Xrm.Page.getAttributes("xxx").setValue(e.data);
});
}
else { // IE8 or earlier
window.attachEvent('onmessage', function (e) {
//e.data will contain some payload
Xrm.Page.getAttributes("xxx").setValue(e.data);
});
}
Now in your child window only send the result using postMessage
window.opener.postMessage("I'm the result", '*');
I usually handle the scenarios that you described this way. The other solution would be to create a callback on parent window
window.callback = function() {
//do your stuff here
}
and from child window calling this callback:
childWindow.opener.callback();
But personally I prefer the postMessage approach, I had some problems with the callbacks sometimes.
I can successfully create an indexeddb database and load data into it. I can also read data from this database from the same page. I then try and read from the database from another page on my site.
db = new ydn.db.Storage('test');
db.keys('items').done(function(d) {
alert(d);
});
This does not work. I just get an empty result. However if I enter the above code into the javascript console of Chrome directly it does work. After looking around it seems that the database may not be ready. So I try this.
db = new ydn.db.Storage('test');
db.addEventListener('ready', function() {
db.keys('items').done(function(d) {
alert(d);
});
});
This however gives me the the following error in the console.
Uncaught TypeError: undefined is not a function
The error is show for the following line of code.
db.addEventListener('ready', function() {
I am not sure what I am missing here.
Opening database connection is an asynchronous operation. This ready event listener is invoked when database is connected and after necessary schema changes are made. This is the first asynchronous function call make by the database instance.
If database opening fail, the callback is invoke with error event object. Multiple listener can be added. Heavy database write operation should invoke after this ready event handler. Alternatively ready event can be listen through DOM event listener pattern.
You can add database ready event listener in similar way:
var db = new ydn.db.Storage('test');
db.onReady(function(e) {
if (e) {
if (e.target.error) {
console.log('Error due to: ' + e.target.error.name + ' ' + e.target.error.message);
}
throw e;
}
db.put('statement1', large_data);
});
I want to read my global variable from background.html , and I use this:
chrome.extension.sendRequest()
I run this code in my timer function... and everytime it return me undefined. If I put a alert message in above function then it show me my variable.. if I'm not using alert() then it is undefined. So how can I wait above function to return correct value,... as I understand I need to wait for response... but how can I do it right, I tried to use setInterval inside above function and not help me.
How can I read my global value from background.html... I need a piece of code.
chrome.extension.sendRequest({cmd: "myvalue"}, function(response) {
myglobalvalue = response;
if(response==1){
alert("response: "+response); // alert show me right value
}
});
if(myglobalvalue)doFunc(); //myglobalvalue is undefenited
You can read variables from background.html with chrome.extension.getBackgroundPage().varname
chrome.extension.sendRequest accepts a callback function that will fire with the response data.
chrome.extension.sendRequest({ data: 'send data' }, function(response) {
console.log(response);
// the var has been returned and you can use it here or call another function.
});
Here you go: Chrome Extension Socket
I build this to provide continuous 2 way communication between a popup and background page. The "How To Use" section tell you what to do. Just include socket.js in your popup and background page, the connection will be created automatically for you.
Just use:
Socket.postMessage(namespace, literal, method, [args]);
This will allow you to trigger functions that can callback with data.
I'm trying to learn Prototype, so I threw together a simple Log-in page, with username and password fields, and a Log-in button.
I have a controller class, where I want to put all of my onclick functions.
function Controller()
{
this.logIn = function(){
this.username = Field.getValue("username");
this.password = Field.getValue("password");
this.logInResults = function (response){
alert(response.responseText);
}
new Ajax.Request("../../php/tis/LogIn.php",
{
method:'get',
parameters: {username: this.username, password: this.password},
onComplete: this.logInResults
});
}
}
Yet, when I click the button that has the LogIn function attached, the HTTP request is sent, but returns an empty response string. When I manually follow the link to the php page, it's there, and functions as intended.
Firebug shows the following:
GET http://localhost/AJAXSeedOrder/php/tis/LogIn.php?username=User%20Name&password=
Firebug cannot find _firebugConsole element true Window tis?username=User+Name
Firebug cannot find _firebugConsole element true Window tis?username=User+Name
Firebug cannot find _firebugConsole element true Window tis?username=User+Name
I'm completely at a loss - any help would be appreciated.
Well, it turns out that my problem was in the Event.observe call that I used to bind controller.logIn to the form submit button. Invoking LogIn through the observe call would make the AJAX request, and then reload the page - which would happen faster then the webserver would return my request.
That was the reason for why the requests would return empty response strings.