I can't get the reviews to displays on a bootstrap card within my web app. I am getting several errors on the front end. Below is the examples, I feel the issue is with my get function that calls on the reviews to be displayed to the front end.
Back end
#app.route("/api/v1.0/movies/<string:id>/movie_reviews", methods=["GET"])
def get_movie_reviews(id):
data_to_return = []
movie = moviescollection.find_one( { "_id" : ObjectId(id) }, { "movie_reviews": 1, "_id": 0 } )
for movie_reviews in movie["movie_reviews"]:
movie_reviews["_id"] = str(movie_reviews["_id"])
data_to_return.append(movie_reviews)
return make_response( jsonify( data_to_return ), 200 )
Movies.component.html
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="card bg-light mb-3" *ngFor="let review of webService.reviews_list | async">
<div class="card-header">
Review by {{ review.name }}
</div>
<div class="card-body">
{{ review.description }}
<hr>
</div>
<div class="card-footer">
</div>
</div>
</div>
</div>
</div>
Movies.component.ts
import { Component } from '#angular/core';
import { ActivatedRoute } from '#angular/router';
import { WebService } from './web.service';
#Component({
selector: 'movies',
templateUrl: './movies.component.html',
styleUrls: ['./movies.component.css']
})
export class MoviesComponent {
constructor(public webService: WebService,
private route: ActivatedRoute) { }
ngOnInit() {
this.webService.getMovies();
this.webService.getReviews(
this.route.snapshot.params.id);
this.webService.moviesSubject
.subscribe(movies => {
this.movie_list = movies
console.log(this.movie_list)
})
};
movie_list;
}
webserive.ts
export class WebService {
private movie_list;
moviesSubject = new Subject();
constructor(private http: HttpClient) { }
getMovies() {
return this.http.get(
'http://localhost:5000/api/v1.0/movies')
.subscribe(response => {
this.movie_list = response;
this.moviesSubject.next(this.movie_list);
})
}
getMovie(id) {
return this.http.get(
'http://localhost:5000/api/v1.0/movies/' + id)
.toPromise();
}
private reviews_private_list;
private reviewsSubject = new Subject<any>();
reviews_list = this.reviewsSubject.asObservable();
getReviews(id) {
return this.http.get(
'http://localhost:5000/api/v1.0/movies/' + id +
'/movie_reviews')
.subscribe(
response => {
this.reviews_private_list = response;
this.reviewsSubject.next(
this.reviews_private_list);
}
)
}
}
I think you have to return the response as HttpResponse
I have a backyard koi/goldfish pond I like to monitor. I have a raspberry pi doing the monitoring and sending to my website. I am trying to get the csv data to load into my index.html file. I do not need to keep the data. I have index 3 created the parses the data and puts in a table. I am having a hard time understand how to add a variable to a csv field and put that variable in the html file.
<!DOCTYPE html>
<body bgcolor="000000">
<center>
<p style="color:White; font-size:50px; font-family:Couier;">Pond Temperature & Camera<br></p>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 30%;
padding: 1px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
</style>
<div class="row">
<div class="column" style="background-color:#000000; color:white;">
<h2>Bio Falls Temperature</h2>
<p> ° F</p>
</div>
<div class="column" style="background-color:#000000; color:white;">
<h2>Stream Temperature</h2>
<p> ° F</p>
</div>
<div class="column" style="background-color:#000000; color:white;">
<h2>Waterfall Temperature</h2>
<p> ° F</p>
</div>
<div class="column" style="background-color:#000000; color:white;">
<h2>Deep End Temperature</h2>
<p> ° F</p>
</div>
<div class="column" style="background-color:#000000; color:white;">
<h2>Skimmer Temperature</h2>
<p> ° F</p>
</div>
<div class="column" style="background-color:#000000; color:white;">
<h2>Outside Air Temperature</h2>
<p> ° F</p>
</div>
</div>
<img id="jpeg_0" width="800" height="600">
<script type="text/javascript">
var camera_0 = {
addEvent: function(elem, event, func ){
if (typeof (window.event) != 'undefined')
{elem.attachEvent('on' + event, func);}
else
{elem.addEventListener(event, func, false);}
},
initCamera: function(jpeg, serverUrl, token, id, interval){
this.addEvent(jpeg, 'load', function(){setTimeout(function() {camera_0.showJpegFrame(jpeg, serverUrl, token, id);}, interval);});
this.showJpegFrame(jpeg, serverUrl, token, id);
},
showJpegFrame: function(jpeg, serverUrl, token, id){
jpeg.src = serverUrl+"/Jpeg/"+id+"?authToken="+token+"&"+new Date().getTime();
}
}
camera_0.initCamera(jpeg_0, "http://100.6.115.166:8100", "4fbbf273-1691-428d-bd09-6b625aeafe0f", 0, 40);
</script>
</center>
```
```
<!DOCTYPE html>
<html>
<head>
<title>Pond Temperature & Camera</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="table-responsive">
<META HTTP-EQUIV="refresh" CONTENT="15">
<h1 align="center">Pond Temperature & Camera</h1>
<br />
<br />
<div id="pond_table">
</div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$.ajax({
url:"pond_temp.csv",
dataType:"text",
success:function(data)
{
var pond_data = data.split(/\r?\n|\r/);
var table_data = '<table class="table table-bordered table-striped">';
for(var count = 0; count<pond_data.length; count++)
{
var cell_data = pond_data[count].split(",");
table_data += '<tr>';
for(var cell_count=0; cell_count<cell_data.length; cell_count++)
{
if(count === 0)
{
table_data += '<th>'+cell_data[cell_count]+'</th>';
}
else
{
table_data += '<td>'+cell_data[cell_count]+'</td>';
}
}
table_data += '</tr>';
}
table_data += '</table>';
$('#pond_table').html(table_data);
}
});
});
</script>
```
First probe temp is 66.4
Second probe temp is 66.2
Third probe temp is 65.4
Fourth probe temp is 66.5
Fifth probe temp is 65.5
```
After looking at your code some more, and looking at your post again, the code below is an attempt at helping you get to what you are trying to do, here.
Some of the main changes to note are in the HTML part where you have the "° F" parts. In order to let your program know where to put the temperature data in the HTML, I added some id tags with names that match the various temperatures.
Taking the first temperature for example, the changed HTML looks like this:
<div class="column" style="background-color:#000000; color:white;">
<h2>Bio Falls Temperature</h2>
<p id="bio_falls_temp"></p>
</div>
Another major area of change is in the $(document).ready(function(){ ... }); part of your code. I've added comments throughout that section to help explain what is happening there. Basically, the code is looping through your incoming data file based on the assumption that the data looks like your data example (with an extra temperature at the end) like this:
68.9 68.8 68.9 69.3 70.1 80.1
If your data file is actually delimited with commas instead of spaces, just make sure to change this line in the example code below:
let pond_data_parts = pond_data[i].split(' ');
to this:
let pond_data_parts = pond_data[i].split(',');
The new/adjusted code loops through each line of the data file and then loops through each of the temperature data items in a row of data. If you have multiple lines of data in your data file, this code approach loops through each line and I think the last row of data in your data file is what would show up last (and then stay) in your HTML temperature "table".
Finally, another part of the new code to note is the part where the temperature data values are actually placed in the HTML temperature "table". This is especially done with the following lines of code inside of the related loops:
// Find element in HTML where temperature data will be placed
let item = document.querySelector('#' + pond_data_var_names[j]);
// Put temperature data in HTML along with "° F" part
item.innerHTML = pond_data_parts[j] + ' ° F';
The actual id values that are selected with the document.querySelector() are listed earlier in the code:
let pond_data_var_names = [
'bio_falls_temp',
'stream_temp',
'waterfall_temp',
'deep_end_temp',
'skimmer_temp',
'outside_air_temp'
];
These are each looped through and the resulting temperature data is set in the HTML temperature "table" with this line:
item.innerHTML = pond_data_parts[j] + ' ° F';
If the temperatures are not showing up in the right spots in your HTML temperature "table", you might need to rearrange the order of the items in pond_data_var_names area. I just took a simple approach for this code example and assumed that your data values from the data file go left to right, starting at Bio Falls Temperature, then Stream Temperature, then Waterfall Temperature, then Deep End Temperature, then Skimmer Temperature, and then Outside Air Temperature.
In addition to the additions/changes I went over, I also rearranged some of your HTML so that there is a consolidated <head></head> section and combined some of the code from both of your example HTML files in your original post for this code. Also formatted the code in general, but you can change that if need be.
Here is what the result of my code attempt looks like based on your code:
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<style>
* {
box-sizing: border-box;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 30%;
padding: 1px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body bgcolor="000000">
<center>
<p style="color:White; font-size:50px; font-family:Couier;">Pond Temperature & Camera<br></p>
<div class="row">
<div class="column" style="background-color:#000000; color:white;">
<h2>Bio Falls Temperature</h2>
<p id="bio_falls_temp"></p>
</div>
<div class="column" style="background-color:#000000; color:white;">
<h2>Stream Temperature</h2>
<p id="stream_temp"></p>
</div>
<div class="column" style="background-color:#000000; color:white;">
<h2>Waterfall Temperature</h2>
<p id="waterfall_temp"></p>
</div>
<div class="column" style="background-color:#000000; color:white;">
<h2>Deep End Temperature</h2>
<p id="deep_end_temp"></p>
</div>
<div class="column" style="background-color:#000000; color:white;">
<h2>Skimmer Temperature</h2>
<p id="skimmer_temp"></p>
</div>
<div class="column" style="background-color:#000000; color:white;">
<h2>Outside Air Temperature</h2>
<p id="outside_air_temp"></p>
</div>
</div>
<img id="jpeg_0" width="800" height="600">
<script type="text/javascript">
var camera_0 = {
addEvent: function(elem, event, func ) {
if (typeof (window.event) != 'undefined') {
elem.attachEvent('on' + event, func);
} else {
elem.addEventListener(event, func, false);
}
},
initCamera: function(jpeg, serverUrl, token, id, interval) {
this.addEvent(jpeg, 'load', function() {
setTimeout(function() {
camera_0.showJpegFrame(jpeg, serverUrl, token, id);
}, interval);
});
this.showJpegFrame(jpeg, serverUrl, token, id);
},
showJpegFrame: function(jpeg, serverUrl, token, id) {
jpeg.src = serverUrl+"/Jpeg/"+id+"?authToken="+token+"&"+new Date().getTime();
}
}
camera_0.initCamera(jpeg_0, "http://100.6.115.166:8100", "4fbbf273-1691-428d-bd09-6b625aeafe0f", 0, 40);
// These items are used later to specify where data should be put in HTML
let pond_data_var_names = [
'bio_falls_temp',
'stream_temp',
'waterfall_temp',
'deep_end_temp',
'skimmer_temp',
'outside_air_temp'
];
$(document).ready(function(){
$.ajax({
url: "pond_temp.csv",
dataType: "text",
success: function(data) {
// Split data file line by line
let pond_data = data.split(/\r?\n|\r/);
// Remove empty row if found
if (pond_data[pond_data.length-1] == "") {
pond_data.pop();
}
// Loop through lines from data file
for (let i = 0; i < pond_data.length; ++i) {
// Split up line of data using space as delimiter
let pond_data_parts = pond_data[i].split(' ');
// Loop through each item from line of data
for (let j = 0; j < pond_data_parts.length; ++j) {
// Find element in HTML where temperature data will be placed
let item = document.querySelector('#' + pond_data_var_names[j]);
// Put temperature data in HTML along with "° F" part
item.innerHTML = pond_data_parts[j] + ' ° F';
}
}
}
});
});
</script>
</center>
</body>
</html>
I used a test pond_temp.csv file with the following data that you gave as an example (adding 80.1 at the end to fill the remaining HTML temperature "table" cell):
68.9 68.8 68.9 69.3 70.1 80.1
Here is what the output looks like on my side:
I hope this helps with your project!
Update:
In order to refresh the incoming pond data temperatures, you could potentially use the setInterval() method which should run every "n" milliseconds.
If you would like to refresh the data every 5 seconds, for example, here is what the end part of the earlier code example could look like:
function getPondDataAndDisplay() {
$.ajax({
url: "pond_temp.csv",
dataType: "text",
success: function(data) {
// Split data file line by line
let pond_data = data.split(/\r?\n|\r/);
// Remove empty row if found
if (pond_data[pond_data.length-1] == "") {
pond_data.pop();
}
// Loop through lines from data file
for (let i = 0; i < pond_data.length; ++i) {
// Split up line of data using space as delimiter
let pond_data_parts = pond_data[i].split(' ');
// Loop through each item from line of data
for (let j = 0; j < pond_data_parts.length; ++j) {
// Find element in HTML where temperature data will be placed
let item = document.querySelector('#' + pond_data_var_names[j]);
// Put temperature data in HTML along with "° F" part
item.innerHTML = pond_data_parts[j] + ' ° F';
}
}
}
});
}
// ref: https://developer.mozilla.org/en-US/docs/Web/API
// /WindowOrWorkerGlobalScope/setInterval
let pondDataInterval = window.setInterval(getPondDataAndDisplay, 5000);
I took the ajax part of the earlier code and placed it in its own function called getPondDataAndDisplay(). Then, you can use window.setInterval(getPondDataAndDisplay, 5000); to call the new function and run it every 5 seconds.
Also, I removed the $(document).ready(function(){ ... }); part that had surrounded the ajax part of the code, as well, for this example.
Note: Something to keep in mind with your incoming data file, though, is that it might get to be a large file after a while (with all the pond temperature data collected over time). It might be a good idea to make a copy of the data file on your own (saving it to another location), and then to clear out the incoming data file at some point in order to keep the file data somewhat small.
Application is receiving data in real time (checked using alert) while to display it on the card, it gives error Internal Server Error
Same Code is running well as an independent html page but not in flask python web app.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css"
integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ"
crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<title>Cosmos DB Change Feed</title>
<style>
.fade-enter-active {
transition: all 1.5s ease;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>
</head>
<body>
Welcome new
<div class="container" id="app">
<div class="row">
<div v-for="flight in flights" class="col-md-6 col-lg-4 col-xl-3" style="margin: 16px 0px;">
<div class="card">
<div class="card-body">
<h4 class="card-title">{{ flight.from }} <i class="fas fa-plane"></i> {{ flight.to }}</h4>
<transition name="fade" mode="out-in">
<h4 class="card-subtitle mb-2" :key="flight.price">${{ flight.price }}</h4>
</transition>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.16/dist/vue.js"></script>
<script src="https://unpkg.com/#aspnet/signalr#1.0.2/dist/browser/signalr.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
const apiBaseUrl = 'http://localhost:7071'
const axiosConfig = {}
const data = {
flights: []
}
const app = new Vue({
el: '#app',
data: data
})
getFlights().then(function (flights) {
flights.forEach(flightUpdated)
}).then(getConnectionInfo).then(function (info) {
let accessToken = info.accessToken
const options = {
accessTokenFactory: function () {
if (accessToken) {
const _accessToken = accessToken
accessToken = null
return _accessToken
} else {
return getConnectionInfo().then(function (info) {
return info.accessToken
})
}
}
}
const connection = new signalR.HubConnectionBuilder()
.withUrl(info.url, options)
.build()
connection.on('flightUpdated', flightUpdated)
connection.onclose(function () {
console.log('disconnected')
setTimeout(function () { startConnection(connection) }, 2000)
})
startConnection(connection)
}).catch(console.error)
function startConnection(connection) {
console.log('connecting...')
connection.start()
.then(function () { console.log('connected!') })
.catch(function (err) {
console.error(err)
setTimeout(function () { startConnection(connection) }, 2000)
})
}
function getFlights() {
return axios.post(`${apiBaseUrl}/api/GetFlights`, null, axiosConfig)
.then(function (resp) { return resp.data })
.catch(function () { return {} })
}
function getConnectionInfo() {
return axios.post(`${apiBaseUrl}/api/SignalRInfo`, null, axiosConfig)
.then(function (resp) { return resp.data })
.catch(function () { return {} })
}
function flightUpdated(updatedFlight) {
const flight = data.flights.find(f => (f.to === updatedFlight.to && f.from === updatedFlight.from))
//const flight = data.flights.find(f =>f.id === updatedFlight.id)
if (flight) {
// alert(updatedFlight.price);
//Vue.set(flight, 'from', updatedFlight.from)
// Vue.set(flight, 'to', updatedFlight.to)
Vue.set(flight, 'price', updatedFlight.price)
} else {
// alert(updatedFlight.price);
data.flights.push(updatedFlight)
}
}
</script>
</body>
</html>
Expected Result is flight details (from, to , price) in the card format. I believe it is due to {{flight.to}} syntax, I don't know how to replace it.
If the application is giving an internal server error, you're probably running it in production mode.
On your development machine,
If you're using app.run to the app, change
app.run()
to
app.run(debug=True)
However, if you're using
flask run
Then, depending on your system, you'll need to add an environment variable, information about it is very nicely explained with other configurations.
Flask Environment Configuration
When you enable the debug mode, the inbuilt debugger will tell you exactly where it ran into a problem.
I'm trying to scrap a website and I've got COOKIE_ENABLED set to true, however sometimes I get the following response from the request:
Where the corresponding response html is:
<html>
<head><base href="http://www.yad2.co.il/Nadlan/sales_info.php?NadlanID=4b3746939d3ab7d5be7c38efab70f0b59e0">
<title></title>
<meta http-equiv="Expires" content="28FEB2002" />
<meta http-equiv="CACHE-CONTROL" content="NO-CACHE" />
<script type="text/javascript">
function addFields(formObj) { } function redirect(commitType) { var cookieenabled = false; if (navigator.cookieEnabled) { if (navigator.cookieEnabled==true) { var exdate=new Date(); exdate.setDate(exdate.getDate()+1); document.cookie="PRID=" +escape(genPid())+";path=/; expires="+exdate.toGMTString()+"; domain=.yad2.co.il"; cookieenabled=(document.cookie.indexOf("PRID")!=-1)? true : false; } } if (cookieenabled) { if (commitType=="reload") window.location.reload(true); else { var oFrm = document.createElement("form"); var oEnvlp = document.getElementById("frmPlsHldr"); oFrm.method = "post"; addFields(oFrm); oEnvlp.appendChild (oFrm); oFrm.submit(); } } else { var oJSCookieMSGObj = document.getElementById('JSCookieMSG'); oJSCookieMSGObj.style.display = 'block'; } }
</script>
</head>
<body style="background-color:white">
<div style='display:none' id='sbbhscc'></div><script type="text/javascript">sbbvscc='%3c%73%65%6c%65%63%74%20%69%64%3d"%73%62%62%5f%45%75%68%51%50%49%58%72"%20%73%74%79%6c%65%3d"%64%69%73%70%6c%61%79%3a%6e%6f%6e%65"%3e%3c%6f%70%74%69%6f%6e%20%20%76%61%6c%75%65%3d%27%79%44%51%76%4f%27%3e%73%48%42%3c%2f%6f%70%74%69%6f%6e%3e%3c%6f%70%74%69%6f%6e%20%20%53%45%4c%45%43%54%45%44%20%20%76%61%6c%75%65%3d%27%4c%6f%79%74%27%3e%79%68%71%6e%4f%4b%3c%2f%6f%70%74%69%6f%6e%3e%3c%6f%70%74%69%6f%6e%20%20%76%61%6c%75%65%3d%27%49%43%46%62%71%45%27%3e%63%66%45%67%3c%2f%6f%70%74%69%6f%6e%3e%3c%6f%70%74%69%6f%6e%20%20%76%61%6c%75%65%3d%27%57%62%56%69%27%3e%75%58%77%44%4b%3c%2f%6f%70%74%69%6f%6e%3e%3c%6f%70%74%69%6f%6e%20%20%76%61%6c%75%65%3d%27%75%4b%76%57%4c%27%3e%47%6b%48%3c%2f%6f%70%74%69%6f%6e%3e%3c%6f%70%74%69%6f%6e%20%20%76%61%6c%75%65%3d%27%52%4c%54%4a%27%3e%77%44%55%3c%2f%6f%70%74%69%6f%6e%3e%3c%6f%70%74%69%6f%6e%20%20%76%61%6c%75%65%3d%27%5a%44%71%27%3e%4e%78%49%3c%2f%6f%70%74%69%6f%6e%3e%3c%2f%73%65%6c%65%63%74%3e%3c%66%6f%72%6d%20%69%64%3d"%73%62%62%5f%6e%4c%73%52%7a"%20%6d%65%74%68%6f%64%3d"%70%6f%73%74"%20%73%74%79%6c%65%3d"%64%69%73%70%6c%61%79%3a%6e%6f%6e%65"%3e%3c%69%6e%70%75%74%20%6e%61%6d%65%3d%27%73%62%62%5f%64%42%4b%78%54%59%4f%66%27%20%74%79%70%65%3d%27%63%68%65%63%6b%62%6f%78%27%20%20%76%61%6c%75%65%3d%27%4a%42%77%27%2f%3e%3c%69%6e%70%75%74%20%6e%61%6d%65%3d%27%73%62%62%5f%64%42%4b%78%54%59%4f%66%27%20%74%79%70%65%3d%27%63%68%65%63%6b%62%6f%78%27%20%20%76%61%6c%75%65%3d%27%57%5a%4a%27%2f%3e%3c%69%6e%70%75%74%20%6e%61%6d%65%3d%27%73%62%62%5f%64%42%4b%78%54%59%4f%66%27%20%74%79%70%65%3d%27%63%68%65%63%6b%62%6f%78%27%20%20%76%61%6c%75%65%3d%27%70%42%72%73%6e%27%2f%3e%3c%69%6e%70%75%74%20%6e%61%6d%65%3d%27%73%62%62%5f%64%42%4b%78%54%59%4f%66%27%20%74%79%70%65%3d%27%63%68%65%63%6b%62%6f%78%27%20%20%76%61%6c%75%65%3d%27%47%46%70%41%4d%27%2f%3e%3c%69%6e%70%75%74%20%6e%61%6d%65%3d%27%73%62%62%5f%64%42%4b%78%54%59%4f%66%27%20%74%79%70%65%3d%27%63%68%65%63%6b%62%6f%78%27%20%20%76%61%6c%75%65%3d%27%6b%77%74%79%61%7a%42%27%2f%3e%3c%69%6e%70%75%74%20%6e%61%6d%65%3d%27%73%62%62%5f%64%42%4b%78%54%59%4f%66%27%20%74%79%70%65%3d%27%63%68%65%63%6b%62%6f%78%27%20%20%76%61%6c%75%65%3d%27%45%67%42%46%27%2f%3e%3c%69%6e%70%75%74%20%6e%61%6d%65%3d%27%73%62%62%5f%64%42%4b%78%54%59%4f%66%27%20%74%79%70%65%3d%27%63%68%65%63%6b%62%6f%78%27%20%20%76%61%6c%75%65%3d%27%4c%64%72%62%68%4d%27%2f%3e%3c%69%6e%70%75%74%20%6e%61%6d%65%3d%27%73%62%62%5f%64%42%4b%78%54%59%4f%66%27%20%74%79%70%65%3d%27%63%68%65%63%6b%62%6f%78%27%20%20%43%48%45%43%4b%45%44%20%20%76%61%6c%75%65%3d%27%56%72%57%78%49%27%2f%3e%3c%69%6e%70%75%74%20%6e%61%6d%65%3d%27%73%62%62%5f%64%42%4b%78%54%59%4f%66%27%20%74%79%70%65%3d%27%63%68%65%63%6b%62%6f%78%27%20%20%76%61%6c%75%65%3d%27%6c%65%41%76%78%53%27%2f%3e%3c%2f%66%6f%72%6d%3e'; sbbgscc='%66%75%6e%63%74%69%6f%6e%20%73%62%62%5f%46%67%75%28%29%20%7b%20%20%73%62%62%4f%62%6a%20%3d%20%64%6f%63%75%6d%65%6e%74%2e%67%65%74%45%6c%65%6d%65%6e%74%42%79%49%64%28%27%73%62%62%5f%45%75%68%51%50%49%58%72%27%29%3b%20%73%62%62%4f%62%6a%2e%6f%70%74%69%6f%6e%73%5b%32%5d%2e%73%65%6c%65%63%74%65%64%20%3d%20%74%72%75%65%3b%20%72%65%74%75%72%6e%20%73%62%62%4f%62%6a%2e%6f%70%74%69%6f%6e%73%5b%73%62%62%4f%62%6a%2e%73%65%6c%65%63%74%65%64%49%6e%64%65%78%5d%2e%74%65%78%74%2e%73%75%62%73%74%72%28%32%2c%31%29%3b%20%7d%66%75%6e%63%74%69%6f%6e%20%73%62%62%5f%73%76%77%65%28%29%20%7b%20%66%75%6e%63%74%69%6f%6e%20%73%62%62%5f%74%69%78%47%6d%41%28%6f%62%6a%41%72%72%29%20%7b%20%76%61%72%20%74%73%3d%27%27%3b%20%66%6f%72%20%28%69%3d%30%3b%20%69%3c%6f%62%6a%41%72%72%2e%6c%65%6e%67%74%68%3b%20%69%2b%2b%29%20%7b%69%66%20%28%6f%62%6a%41%72%72%5b%69%5d%2e%63%68%65%63%6b%65%64%20%3d%3d%20%74%72%75%65%29%20%74%73%20%2b%3d%6f%62%6a%41%72%72%5b%69%5d%2e%76%61%6c%75%65%3b%7d%20%72%65%74%75%72%6e%20%74%73%3b%7d%20%73%62%62%4f%62%6a%20%3d%20%64%6f%63%75%6d%65%6e%74%2e%67%65%74%45%6c%65%6d%65%6e%74%73%42%79%4e%61%6d%65%28%27%73%62%62%5f%64%42%4b%78%54%59%4f%66%27%29%3b%20%73%62%62%46%72%6d%3d%64%6f%63%75%6d%65%6e%74%2e%67%65%74%45%6c%65%6d%65%6e%74%42%79%49%64%28%27%73%62%62%5f%6e%4c%73%52%7a%27%29%3b%20%73%62%62%4f%62%6a%5b%31%5d%2e%63%68%65%63%6b%65%64%20%3d%20%74%72%75%65%3b%20%78%3d%73%62%62%5f%74%69%78%47%6d%41%28%73%62%62%46%72%6d%2e%73%62%62%5f%64%42%4b%78%54%59%4f%66%29%3b%20%72%65%74%75%72%6e%20%78%2e%73%75%62%73%74%72%28%35%2c%31%29%3b%20%7d; function genPid() {return %73%62%62%5f%46%67%75%28%29+%73%62%62%5f%73%76%77%65%28%29; }';</script><div id='sbbfrcc' style='position: absolute; top: -10px; left: 30px; font-size:1px'></div>
<div id='JSCookieMSG' style="display:none"><big><b>Server Notice:</b></big><br/>
Please activate browser cookies to view this site.
<br/><br/>
Incident Id: 585436913aa5b
</div>
<div id='JSOffMSG'><noscript><big><b>Server Notice:</b></big><br/>
Please activate javascript to view this site.
<br/><br/>
Incident Id: 585436913aa5b
</noscript></div>
<div id='frmPlsHldr'></div>
<script type="text/javascript">
oJSOffMSG = document.getElementById('JSOffMSG'); oJSOffMSG.style.display = 'none'; try{ y=unescape(sbbvscc.replace(/^<\!\-\-\s*|\s*\-\->$/g,'')); document.getElementById('sbbhscc').innerHTML=y; x=unescape(sbbgscc.replace(/^<\!\-\-\s*|\s*\-\->$/g,'')); } catch(e){ x='function genPid() {return "jser"; }'; } document.write ('<'+'script type="text/javascri'+'pt">'+x+' redirect("reload");</'+'script>');
</script>
</body>
</html>
This seems to happen on and off and I have no idea what's going on.
Has anyone come across something similar?
I'm storing the values of checked boxes in an array and sending it via AJAX. In console.log(searchIDs) I get the correct o/p of selected checked boxes, but print searchIDs in views.py only prints the last index value, ie if I select One and Two, it will only print Two. Where I'm going wrong?
Here is my code:
<script>
$(function() {
$( "#dialog-form" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Add": function() {
var searchIDs = [];
$("#dialog-form input:checkbox:checked").map(function(){
searchIDs.push($(this).val());
});
$.ajax({
type: "POST",
url: "/dashboard/",
data : { 'searchIDs' : searchIDs },
success: function(result){
console.log(searchIDs);
$("#widgets").html(result);
}
});
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
});
$( "#add_widget" ).click(function() {
$( "#dialog-form" ).dialog( "open" );
});
});
</script>
<body>
<div id="dialog-form" title="Create new user">
<input type="checkbox" value="One">One</input><br>
<input type="checkbox" value="Two">Two</input><br>
<input type="checkbox" value="Three">Three</input><br>
<input type="checkbox" value="Four">Four</input><br>
</div>
<div id="widgets" class="ui-widget"></div>
<button id="add_widget">Add Widget</button>
</body>
View.py
if request.is_ajax():
searchIDs = request.POST['searchIDs[]']
print searchIDs
django provides a helper function getlist to help you get a list of ids for a param
request.POST.getlist('searchIDs[]')