I am using a SAP UI5 application and trying to export table data into a word document but get an undefined error in document. I am using jquery.wordexport.js as in example here. My html code is as defined below
<head>
<script src="FileSaver.js"></script>
<script src="jquery.wordexport.js"></script>
<script>
sap.ui.localResources("odataservice");
var app = new sap.m.App({
initialPage:"idodataservice1"
});
var page = sap.ui.view({
id: "idodataservice1",
viewName: "odataservice.odataservice",
type: sap.ui.core.mvc.ViewType.XML
});
app.addPage(page);
app.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content">Hi</div>
</body>
The div content is having a table shown on screen and is not empty, on click of button I am calling below method
onPressExport: function() {
jQuery(document).ready(function($) {
$("content").wordExport();
});
},
I have added both files at the root level and export document does come in but with text 'undefined' written inside it. Tried checking the id at runtime in console and tried different sub div Ids as well but still get undefined error. Please suggest what could be wrong here or am I missing something.
You don't need the 'ready' event inside the OnPressExport:
onPressExport: function() {
$("content").wordExport();
},
Related
In the index.html page I have the following code
<body>
<h1>First page</h1>
<button id="submitBtn">Submit</button>
<script src="script.js"></script>
</body>
The JS is a simple script that redirects the page to another page - second.html
document.getElementById('submitBtn').addEventListener('click', function(e) {
e.preventDefault();
window.location.href = 'another_file.html';
})
Once the second page is loaded, the console gives - TypeError: Cannot read properties of null (reading 'addEventListener'). This is understandable as the next page doesn't have the submitBtn.
How can I avoid this error?
Thanks
You can check if it exists before attaching events to it.
var elem = document.getElementById('submitBtn');
elem && elem.addEventListener('click', function(e) {
e.preventDefault();
window.location.href = 'another_file.html';
})
As for your design decision the way I would structure it indeed use script.js for all the functions and the only difference is between the pages which own has a minimal <script> tag to initialize and insatiate its own stuff.
So for this instance, while both share the same script.js, only index.html page would include this snippet of code inside of it. and second.html should not bother at all with checking for that element.
Do you have this in the "another_file.html"?
<script src="script.js"></script>
Because if you do, this is causing the issue.
Im am currenlty working on a integration of a nps widget within a Chatbot. I cannot show you all the code, but i imported the html file inside the chat.ts file. I want to call the entire html file after a button press from the chatbot. I have tried a lot, but nothing seems to help.
this is the chat.ts code (small part of it)
private showAskNicely() {
// #ts-ignore
window.location.assign('npshtml.html');
}
private askNicelyButton() {
const el = document.getElementById('detractbut');
el.addEventListener('click', this.showAskNicely);
}
this is the npshtml file
<html>
<body id="try">
<p>
AskNicely Web Survey Popup Example for traditional websites.<br>
Running in 'force' mode.<br>
Responses will be recorded.
</p>
<script type="text/javascript" src="https://static.asknice.ly/dist/standalone/asknicely-in-app-conversation.js"></script>
<link href="https://static.asknice.ly/dist/standalone/asknicely-in-app-conversation.css" rel="stylesheet" type="text/css" charset="utf-8">
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
askNicelyConversation({
config: {
--- cannot show this part ---
},
customData: {
a_custom_property: 'business', // Optional - Send extra data about this customer for reporting and leaderboards
another_custom_property: 'New York' // Optional - Send extra data about this customer for reporting and leaderboards
}
});
});
</script>
</body>
</html>
I also have the button rendered inside another html file with css, but that all works fine.
I have it currently on windows.location.assign, so that it opens a new page. It would be ideal if the script could be triggered without opening a new page.
Using jquery.load does not work and does not give me a error of some sort.
I must remove content from a script with attribute id and type application/json in index.html. It is from another application (the app is based on another app) and I can't locate where the script exists.
I tried:
<script type="text/javascript">
document.getElementById('wk-ra-state').textContent = ' ';
</script>
but without any effect probably because the script is always at the end of the index.html body.
Any ideas?
Actually, as your code that empty the script tag at the end of your HTML page is above it, it runs the code before the script is fully loaded. That is the reason why you get the error:
Uncaught TypeError: Cannot set property 'innerHTML' of null
In order to run the code after everything is loaded on the webpage, use:
document.addEventListener("DOMContentLoaded", function(event) {});
It will run the code after all DOM is loaded.
See the example below, the first example doesn't use the document.addEventListener("DOMContentLoaded", function(event) {}); and the second one using it.
Wrong example:
<script>
document.getElementById('wk-ra-state').innerHTML = '';
</script>
<!-- end of the html page -->
<script id="wk-ra-state" type="application/json">{&q;APP_SERIALIZATION_KEY&q;:{&q;recentFavorites&q;:{&q;pending&q;:false,&q;recentItems&q;:[{&q;id&q;:&q;&q;,&q;viewed&q;:false,&q;type&q;:&q;document&q;,&q;title&q;:&q;&q;,&q;link&q;:&q;javascript:void(0)&q;}]},&q;suggestions&q;:{&q;pending&q;:false,&q;requests&q;:{},&q;cach ............ </script>
Good example:
<script>
document.addEventListener("DOMContentLoaded", function(event) {
document.getElementById('wk-ra-state').innerHTML = '';
});
</script>
<!-- end of the html page -->
<script id="wk-ra-state" type="application/json">{&q;APP_SERIALIZATION_KEY&q;:{&q;recentFavorites&q;:{&q;pending&q;:false,&q;recentItems&q;:[{&q;id&q;:&q;&q;,&q;viewed&q;:false,&q;type&q;:&q;document&q;,&q;title&q;:&q;&q;,&q;link&q;:&q;javascript:void(0)&q;}]},&q;suggestions&q;:{&q;pending&q;:false,&q;requests&q;:{},&q;cach ............ </script>
I'm trying to use some function defined in a file inside a HTML script tag.
Here is the javascript file myfunction.js:
fct = function() {
};
Inside index.html I have:
<script src="./myfunction.js"></script>
<script>
fct.some.property = function() {
}
</script>
It says fct.some is undefined on the console.
How to define some inside fct so that I can use it in oter scripts ? I don't want to use any librairies.
I tried the following but it does not work :
fct = function() {
return {
some: {}
}
};
I can't reproduce the error; when I test your code as-is I get
fct.some is undefined
The fix is:
fct.some = {};
fct.some.property = function() {
}
This works fine for me.
To make sure I have your question right, it looks like you are trying
to use a function that you wrote in a javascript file directly in
your html file, but you are having an issue with it coming back as
undefined.
In testing it I found that as long as the fct function in your .js is global then it will work, but there is another problem with your example in the HTML ( but it may just be a typo because it's an example)
You put the script src for the .js file in above the in-inline js correctly, but then in the inline js script tag you say:
fct.some.property = function(){}
The problem with this is .some is not defined yet, so you can't attach a property to it yet. Try:
fct.some = {} // empty object
fct.some.property = function(){}
EDIT: So, this works on repl.it, but it won't work in the stackoverflow snippet editor. In the snippet editor it gives me the same error as you are getting. Odd.
let fct = function() {
}
<!DOCTYPE html>
<html>
<head>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="index.js"></script>
<script>
console.log(fct)
fct.some = {}
fct.some.property = function() {
return 7
}
console.log(fct.some.property())
</script>
</body>
</html>
You are correctly importing the JS file. Just check it is in head tag of html. You are getting this issue because you want to assign "property" to "some" of fct. As you have not define here what is "some". I have tried to resolve your problem by deleting "some"
index.html
<html>
<head>
<script src="myfunction.js"></script>
</head>
<script>
fct.some = function() {
}
</script>
<body>
</body>
</html>
myFunction.js
fct = function() {
};
Here are some links which can be useful for you adding custom properties to a function
In my parent.htm there's a dropdown list, which is filled dynamically from the database using a JQuery function updateMyList() in parent.js.
If the user wants to add another option to the list, the form child.htm is loaded inside <div id="overlay"> of the parent.htm. To insert new data an AJAX request is called from child.js, which is included in child.htm.
If the request was successful, child.htm is unloaded via $("#overlay").html("") from child.js. When this happens, i'd like to call parent.js's updateMyList(), but i can't find a way to trigger it.
Using opener from inside child.js didn't work (TypeError: opener is null) and i can't find a way to tell if $("#overlay").html() has been changed back to "".
Any help would be greatly appreciated!
Sorry if this is a double post, i'm running out of ideas for search terms...
edit: here's a simplified code:
parent.htm:
<head>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="parent.js"></script>
<script>
$(document).ready(function () {
$('#new-option').click(function(){
$("#overlay").load("child.htm");
});
});
</script>
</head>
parent.js:
$(document).ready(function(){
function updateMyList(){
//send AJAX and write options
});
// and do much more...
});
child.htm:
<head>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/child.js"></script>
</head>
child.js:
$(document).ready(function(){
// do more stuff
$('#save-option').click(function(){
$.post("./inc/savenewoption.php", {
//save user entries
}, function(data){
alert(data);
})
.done(function() {
updateMyList(); // <- this won't work
$("#overlay").html("");
});
});
});
It doesn't work because updateMyList() is inside a different function (one of your $(document).ready() ones). In my experience the only reason you put code into a $(document).ready() function is because Javascript can fire before the document has completely loaded. Trying to fire Javascript on elements before they are in the document will cause errors.
The updateMyList() function doesn't fire until the ajax request is complete, so it should be safe to have it located outside $(document).ready().