I just making small code for tracking app to my website.
I'm pretty new at json so I could not find out what is wrong at my code. It's been two days now:
Here is the code
<http://code.jquery.com/jquery-latest.min.js>
<script type="text/javascript">
$(document).ready(function() {
var inputField = $('#tracking');
var outputElement = $('#textResult');
inputField.keyup(function() {
if (inputField.val().length > 1) {
$.getJSON('http://sporing.bring.no/sporing.json?q=' + inputField.val(),
function(data){
outputElement.html('ID' + data.consignmentSet.consignmentId);
});
} else {
outputElement.html('No result!');
}
});
});
</script>
<div>
<input type="text" id="tracking" style="width: 17;" maxlength="30"/><br/><span id="textResult"></span>
</div>
</body></html>
My source is: http://developer.bring.com/api/trackingapi.html#json
Tracking json source: http://sporing.bring.no/sporing.json?q=TESTPACKAGE-AT-PICKUPPOINT
Links gives result, but i'n not able to display it.
It is simple code, so hopefully someone can explain me what I'm doing wrong...
Thanks
data.consignmentSet contains an array with one element so
data.consignmentSet[0].consignmentId
should work!
You can use JSONLint to validate and pretty print your JSON to better dig into it's structure.
Also, you could use a debugger to explore the content of the data at runtime. Most browsers have their F12 developer tools or you could install Firebug. Then switch to the Script tab, go to the line in code where you access the data and click on the line number. A breakpoint will be set where code execution will stop when running the script. When the breakpoint is reached, you can explore the data in the Watch window.
Related
I fetch data from a MySQL database, the data stored is this:
<p><script>alert('123');</script><br /></p>
When I fetch the data normally I get this as result:
<script>alert('123');</script>
This is fine and works as expected, however when I fetch the data into a textarea which is initialized with Summernote I get an alert like this:
Somehow Summernote converts the escaped html tags to functioning HTML.
How do I fix this?
I have already tried the answer of this question:
Escaped HTML in summernote
It did not work.
Why are you not sanitising data both at the time of storage, and when displayed in the Editor, or outside of the editor? Typically, in my CMS, I don't allow <script/> tags as way to help mitigate users adding potentially dangerous scripts.
That said, there is a PR that is being discussed about how we can best go about fixing this issue. https://github.com/summernote/summernote/pull/3782 information or help would be greatly appreciated to move it along, or even another PR fixing the issue.
I managed to fix it by instead of fetching the data in the textarea fetching it in via jQuery like this:
<textarea name="description" id="description"></textarea>
<script>
$('#description').summernote({
height: 250,
codeviewFilter: false,
codeviewIframeFilter: true,
// toolbar
toolbar: [
['font', ['bold', 'italic', 'underline', 'clear']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['view', ['fullscreen', 'codeview', 'help']]
],
}).on("summernote.enter", function(we, e) {
$(this).summernote('pasteHTML', '<br /> ');
e.preventDefault();
});
$("#description").summernote("code", "<?php echo $video->getDetails('', $fileName, 'desc'); ?>");
</script>
Now it doesn't convert > and $lt; to <> if it is the script tag.
See more information here:
https://github.com/summernote/summernote/pull/3782#issuecomment-774432392
Using javascript you can easily fix this. It worked for me in a React + Django project. I also used django_summer_note and it was also showing data like yours. Then I got that solution:
//simply just create a function like this which will return your data (which one you used with django_summernote).
const createBlog = () => {
return { __html: blog.description };
};
// now in your HTML(JSX) show your data like this.
<div className='' dangerouslySetInnerHTML={createBlog()} />
So im trying to get the information thats being grabbed via summernote textarea. When im not adding an image, everything works perfectly fine and I see the html content from the text editor.
But when I upload a picture, it suddenly gets stuck in a loop??? There more functionality that actually adds the info into the DB, and the image with that ridiculous img src, is saved, but for some reason its iterating the img src over and over? Since then Ive had everything commented out, only to print the textfield content, and for some reason, still get hit with an endless loop the moment I click the submit button? Any help is appreciated, thanks.
flask.py
#app.route("/update", methods=["POST"])
def update():
# Grab Text editor content from form:
contentInfo = request.form["content"]
print("TEST HERE", contentInfo)
html:
<form action="/update" method="POST">
<h1 style="text-align:center">content</h1><textarea name=content id="summernote">{{value}</textarea>
<input class="input-btn" type="submit" value="Update">
</form>
Script init inline within html:
<script>
$(document).ready(function() {
$('#summernote').summernote({
height: 300,
minHeight: null,
maxHeight: null,
focus: true,
onImageUpload: function(files, editor, welEditable) {
sendFile(files[0],editor,welEditable);
}
});
});
</script>
So the text editor and everything works perfect, but the moment I add an image and click submit, my terminal gets stuck in an endless loop, literally need to trash the terminal in order to get it to stop before it crashes.
Any advice is appreciated, thanks.
Results: Over and Over...
Well Stack over flow wouldnt let me post an example, but it was just a bunch of what looked like the img src code from summernote over and over
Update: - So I changed a few things and at least got it to stop looping. I guess it was never looping what it was doing is literally printing out the content of whats being grabbed and apparently its a bunch of crap. I then instead trying to print it with certain params such as "content["img"] only to find out it was slices, so this is apparently an array: But I throw it into type, and it comes back with a class of "bytes" and a length of 529288.... lol! SO the printing wasnt a loop, it was literally printing the 500k lines of this stupid conversion... (super dumb that summernote compiles their images this way in my opinion)
Anyways, Wanted to post the current changes, I feel I am starting to get some progress as it is no longer stuck trying to print out 500k lines. Obviously the data thats being grabbed is the overall app converted into byes? becuase I feel the image conversion is around 7k characters, not 500k...
I feel my issue may be how im trying to grab the data? Since my app is flask and python, it has been a trial an error process trying to get it to work together with the inline javascript. So how my logic works here, is the moment a image is dropped into summernote, it gets thrown into the python logic "updateTest" All im trying to do here, is just grab the image data, so that I can manipulate and do as I wish with the results. How to go about properly grabbing this info? Any advice or insight is appreciated, thanks.
Updated Code:
html:
<form action="/updateTest" method="POST">
<h1 style="text-align:center">content</h1><textarea name=content id="summernote">{{value}</textarea>
<input class="input-btn" type="submit" value="Update">
flask.py:
#app.route("/updateTest", methods=["POST"])
def updateTest():
content = request.get_data()
print("test here", type(content))
print("test here2", len(content))
inline javascript within HTML:
$(document).ready(function() {
$('#summernote').summernote({
height: 300,
focus: true,
callbacks: {
onImageUpload(files) {
sendFile(files[0], data => {
let imgNode = document.createElement("img");
imgNode.setAttribute('src', data.url)
$(this).summernote('insertNode', imgNode);
})
}
}
});
});
var sendFile = function(file, callback) {
var data;
data = new FormData();
data.append("file", file);
return $.ajax({
url: "/updateTest",
data: data,
cache: false,
contentType: false,
processData: false,
type: 'POST',
success: function(data) {
return callback(data);
}
});
};
Any help on how to properly pull this file/image data is really what im looking for right now. Any help is appreciated, thanks
So I finally figured it out. Here is the proper code. now I originally wanted this to work with S3 buckets so in the end, going to that route right off the bat, rather than dealing with the crappy conversion summernote tries to do, I recommend everyone else doing the same thing when coming to something like this:
html:
<form action="/updateTest" method="POST">
<h1 style="text-align:center">content</h1><textarea name=content id="summernote">{{value}</textarea>
<input class="input-btn" type="submit" value="Update">
inline javascript within html:
<style>
$(document).ready(function() {
$('#summernote').summernote({
height: 300,
focus: true,
callbacks: {
onImageUpload(files) {
sendFile(files[0], data => {
let imgNode = document.createElement("img");
imgNode.setAttribute('src', data.url)
$(this).summernote('insertNode', imgNode);
})
}
}
});
});
var sendFile = function(file, callback) {
var data;
data = new FormData();
data.append("file", file);
return $.ajax({
url: "/addImgSummer",
data: data,
cache: false,
contentType: false,
processData: false,
type: 'POST',
success: function(data) {
return callback(data);
}
});
};
</style>
flask.py:
#app.route("/addImgSummer", methods=["POST"])
def addImgSummer():
#Grabbing file:
img = request.files["file"] #<------ THIS LINE RIGHT HERE! Is #literally all I needed lol.
# Below is me replacing the img "src" with my S3 bucket link attached, with the said filename that was added.
imgURL = "https://"+ S3_BUCKET_NAME +".s3.amazonaws.com/images/"+ img.filename
return jsonify(url = imgURL)
NOTE I have logic elsewhere that adds the data to the S3 bucket, the code above simply renders the result from my bucket. I plan on uploading my code to stack overflow on how to do a full s3 bucket situation with summernote. As this right here was just to finish the conclusion of my initial "Being stuck"
Anyways, hope this helps anyone who gets stuck where I did, as there is literally no proper documentation on how to utilize summernote with flask...(Dont get me wrong theres a lot, but none that work..) And even more so, NONE that utilize a better method than converting your image into a 7k byte character sequence, as I see most people doing... Just saving that horrid crap in their DB... So nothing properly working, at least not that I've found the past 3 days of searching..This right here, is the only working solution Ive come across.
The main confusion lies with mixing the javascript in the front end, and talking with your flask/python backend. Once you now how to grab that data, its smooth sailing.
I have written a Jasmine test that clicks on the first error message in a list and closes it. It then checks that the number of errors has reduced to the expected amount:
it('should close the error if the errors close button is clicked', function() {
element.all(by.repeater('error in errorList')).then(function(errorList) {
errorList[0].element(by.id('error0')).then(function(error0) {
error0.click();
var arrayLength = errorList.length;
expect(arrayLength).toEqual(1);
});
});
});
When I run this I get the message Expected 2 to equal 1. 2 is the length of the error array at the start of the test. If I manually recreate this, the error message definitely closes when clicking anywhere within error0. Is it possible that clicking this takes some time and this isn't registered by the time the expect statement is run?
Here is the relevant part of the HTML:
<a class="po-cross-link" href="" ng-click="closeError(error)" id="{{'error'+$index}}">
<img class="po-cross" src="\assets\black-cross.png" alt="close">
</a>
Thanks
I guess you are changing the model in the click handler but you expect the DOM elements to be changed instantly. Angular needs a $digest cycle to update the DOM according to the model, so I suggest you run scope.$digest() after clicking. If you don't have a scope in your test, you can also use the $rootScope.
Thanks...I sussed it shortly after posting. Similar in principle the other answer given I think. It's because I needed to get the most recent version of the DOM. I added in a second asynchronous function as follows:
it('should close the error if the errors close button is clicked', function() {
element.all(by.repeater('error in errorList')).then(function(errorList) {
errorList[0].element(by.id('error0')).then(function(error0) {
error0.click();
element.all(by.repeater('error in errorList')).then(function(errorListNew) {
var arrayLength = errorListNew.length;
expect(arrayLength).toEqual(1);
});
});
});
});
In the body I have the following:
<body onload="loadCheck1();">
Which points to the following function:
function loadCheck1() {
var chkme1 = "<?php echo $_GET['update']; ?>";
if (chkme1 ==1){
window.location = "viewrecipe.php?recipe_name="+recipe_name.value+"&update=2&texty1="+texty1.value+"&texty2="+texty2.value+"&texty3="+texty3.value+"&texty4="+texty4.value+"&texty5="+texty5.value;
}
if (last==3){
window.location = "viewrecipe.php?recipe_name="+recipe_name.value+"&NewFG1="+texty4.value+"&NewAlc="+texty5.value;
}
}
The URL being viewrecipe.php?update=1 should load the first window.location and viewrecipe.php?update=3 should load the 2nd.
In Chrome this works absolutely fine. In IE I get an error saying "recipe_name" undefined.
The only thing I can think of is that in Chrome the code only activates after the actual loading of the page. As by that time all the field values will be filled in.
Is there an alternative method to running a function once the page has loaded?
There are several variables not defined in your function:
- recipe_name
- last
Are they defined somewhere else?
I guess that texty1 to texty5 are form inputs. If not these variables are not defined too.
You should give us more of your code so we can help you.
I was trying to develop a Chrome extension that can display me the last 3 news from a soccer news site (obviously the page is not open in any tab), by refreshing every 5 minutes. My ideea was to load the page inside an iframe and, once the page is loaded, access the page DOM and extract only the text nodes with the news. I've tried in many ways using ready and load functions, I tried to follow this solutions here but i always get warnings. My question is: is there a way I can do that without having troubles with cross-domain security? Are there any simple examples i can use?
Here's how you could do it using JQuery (please keep in mind I dont know JQuery, just saw this approach somewhere and thought it might work for you).
I put this in a popup and it worked....
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script>
function renderNews(newsList){
$('#news').html('');
$(newsList).each(function(i,item){
var link = document.createElement('a');
$(link).attr('href',item.link);
$(link).html(item.description);
$(link).click(function(){
chrome.tabs.create({url:$(this).attr('href')});
});
var linksDate = document.createElement('span');
//$(linksDate).text(item.date);
$(linksDate).text(item.day + '-' + item.month + ' ' + item.hour + ':' + item.minute+' - ');
var listItem = document.createElement('li');
$(listItem).append(linksDate).append(link);
$("#news").append(listItem);
});
}
function getNews() {
$.get("http://www.milannews.it/?action=search§ion=32", null, function(data, textStatus)
{
if(data) {
var news=$(data).find(".list").find('li').slice(0,3) ;
$("#status").text('');
var newsList=[];
$(news).each(function(i, item){
var newsItem={};
newsItem.description=$(item).find('a').html();
newsItem.link='http://www.milannews.it/'+$(item).find('a').attr('href');
newsItem.date=$(item).find('span').first().text();
newsItem.day=newsItem.date.split(' ')[0].split('.')[0];
newsItem.month=newsItem.date.split(' ')[0].split('.')[1];
newsItem.hour=newsItem.date.split(' ')[1].split(':')[0];
newsItem.minute=newsItem.date.split(' ')[1].split(':')[1];
newsList[i]=newsItem;
});
renderNews(newsList);
localStorage.setItem('oldNews',JSON.stringify(newsList));
}
});
}
function onPageLoad(){
if (localStorage["oldNews"]!=null) renderNews(JSON.parse(localStorage["oldNews"]));
getNews();
}
</script>
</head>
<body onload="onPageLoad();" style="width: 700px">
<ul id="news"></ul>
<div id="status">Checking for new news...</div>
</body>
</html>
And dont forget to put the urls your getting with the xhr stuff in the permissions part of your manifest....
http://code.google.com/chrome/extensions/xhr.html
Use xhr to load the page and use jQuery or a regex to parse the raw HTML for the data you are looking for.
Keep in mind that the destination site may not want to you access their site in such an automated fashion. Be respectful of their site and resources.