I have an ejs file with a list of items from a database. And I'm trying to develop a search which should update this list, only with the results of the search.
I'm sending a post request to the server, by an ajax function from jQuery.
$(".checkbox").on('click', function(){
let email = $(this).find('input').attr('id')
$.ajax({
url: '/dashboard',
method: 'post',
data:{email:email},
success: function(data) {
alert('success')
}
});
})
The post route performs a full search in the database and return a result. Everything is working as it should but the list in my page remains de same, although I'm sending a different json content by the render function.
$text: {
$search: search
},
})
.then(function (results) {
res.render('dashboard', {
name: {},
listagemFuncionarios: results,
check: {}
})
})
.catch(e => console.error(e));
What am I missing here?
The problem is ajax request always get backs the data in the form of json you can not render back a page by requesting through ajax instead you can just get a data back in success in json form and then use it to produce html dynamically through created DOM elements dynamically by Javascript
let suppose you get the data in success function like that
[
{
name:'xyz',
email:'mail#xyz.com'
},
{
name:'xyz',
email:'mail#xyz.com'
}
]
Now you can loop through this data and create html elements let me know if you need more help
Related
It seems to be difficult problem (or impossible??).
I want to get and read HTTP Response, caused by HTTP Request in browser, under watching Chrome Extension background script.
We can get HTTP Request Body in this way
chrome.webRequest.onBeforeRequest.addListener(function(data){
// data contains request_body
},{'urls':[]},['requestBody']);
I also checked these stackoverflows
Chrome extensions - Other ways to read response bodies than chrome.devtools.network?
Chrome extension to read HTTP response
Is there any clever way to get HTTP Response Body in Chrome Extension?
I can't find better way then this anwser.
Chrome extension to read HTTP response
The answer told how to get response headers and display in another page.But there is no body info in the response obj(see event-responseReceived). If you want to get response body without another page, try this.
var currentTab;
var version = "1.0";
chrome.tabs.query( //get current Tab
{
currentWindow: true,
active: true
},
function(tabArray) {
currentTab = tabArray[0];
chrome.debugger.attach({ //debug at current tab
tabId: currentTab.id
}, version, onAttach.bind(null, currentTab.id));
}
)
function onAttach(tabId) {
chrome.debugger.sendCommand({ //first enable the Network
tabId: tabId
}, "Network.enable");
chrome.debugger.onEvent.addListener(allEventHandler);
}
function allEventHandler(debuggeeId, message, params) {
if (currentTab.id != debuggeeId.tabId) {
return;
}
if (message == "Network.responseReceived") { //response return
chrome.debugger.sendCommand({
tabId: debuggeeId.tabId
}, "Network.getResponseBody", {
"requestId": params.requestId
}, function(response) {
// you get the response body here!
// you can close the debugger tips by:
chrome.debugger.detach(debuggeeId);
});
}
}
I think it's useful enough for me and you can use chrome.debugger.detach(debuggeeId)to close the ugly tip.
sorry, mabye not helpful... ^ ^
There is now a way in a Chrome Developer Tools extension, and sample code can be seen here: blog post.
In short, here is an adaptation of his sample code:
chrome.devtools.network.onRequestFinished.addListener(request => {
request.getContent((body) => {
if (request.request && request.request.url) {
if (request.request.url.includes('facebook.com')) {
//continue with custom code
var bodyObj = JSON.parse(body);//etc.
}
}
});
});
This is definitely something that is not provided out of the box by the Chrome Extension ecosystem. But, I could find a couple of ways to get around this but both come with their own set of drawbacks.
The first way is:
Use a content script to inject our own custom script.
Use the custom script to extend XHR's native methods to read the response.
Add the response to the web page's DOM inside a hidden (not display: none) element.
Use the content script to read the hidden response.
The second way is to create a DevTools extension which is the only extension that provides an API to read each request.
I have penned down both the methods in a detailed manner in a blog post here.
Let me know if you face any issues! :)
To get a XHR response body you can follow the instructions in this answer.
To get a FETCH response body you can check Solution 3 in this article and also this answer. Both get the response body without using chrome.debugger.
In a nutshell, you need to inject the following function into the page from the content script using the same method used for the XHR requests.
const constantMock = window.fetch;
window.fetch = function() {
return new Promise((resolve, reject) => {
constantMock.apply(this, arguments)
.then((response) => {
if (response) {
response.clone().json() //the response body is a readablestream, which can only be read once. That's why we make a clone here and work with the clone
.then( (json) => {
console.log(json);
//Do whatever you want with the json
resolve(response);
})
.catch((error) => {
console.log(error);
reject(response);
})
}
else {
console.log(arguments);
console.log('Undefined Response!');
reject(response);
}
})
.catch((error) => {
console.log(error);
reject(response);
})
})
}
If response.clone().json() does not work, you can try response.clone().text()
I show my completed code if it can be some help. I added the underscore to get the request url, thanks
//background.js
import _, { map } from 'underscore';
var currentTab;
var version = "1.0";
chrome.tabs.onActivated.addListener(activeTab => {
currentTab&&chrome.debugger.detach({tabId:currentTab.tabId});
currentTab = activeTab;
chrome.debugger.attach({ //debug at current tab
tabId: currentTab.tabId
}, version, onAttach.bind(null, currentTab.tabId));
});
function onAttach(tabId) {
chrome.debugger.sendCommand({ //first enable the Network
tabId: tabId
}, "Network.enable");
chrome.debugger.onEvent.addListener(allEventHandler);
}
function allEventHandler(debuggeeId, message, params) {
if (currentTab.tabId !== debuggeeId.tabId) {
return;
}
if (message === "Network.responseReceived") { //response return
chrome.debugger.sendCommand({
tabId: debuggeeId.tabId
}, "Network.getResponseBody", {
"requestId": params.requestId
//use underscore to add callback a more argument, passing params down to callback
}, _.partial(function(response,params) {
// you get the response body here!
console.log(response.body,params.response.url);
// you can close the debugger tips by:
// chrome.debugger.detach(debuggeeId);
},_,params));
}
}
I also find there is a bug in chrome.debugger.sendCommand. If I have two requests with same URI but different arguments. such as:
requests 1:https://www.example.com/orders-api/search?limit=15&offer=0
requests 2:https://www.example.com/orders-api/search?limit=85&offer=15
The second one will not get the corrected responseBody, it will show:
Chrome Extension: "Unchecked runtime.lastError: {"code":-32000,"message":"No resource with given identifier found"}
But I debugger directly in background devtools, it get the second one right body.
chrome.debugger.sendCommand({tabId:2},"Network.getResponseBody",{requestId:"6932.574"},function(response){console.log(response.body)})
So there is no problem with tabId and requestId.
Then I wrap the chrome.debugger.sendCommand with setTimeout, it will get the first and second responseBody correctly.
if (message === "Network.responseReceived") { //response return
console.log(params.response.url,debuggeeId.tabId,params.requestId)
setTimeout(()=>{
chrome.debugger.sendCommand({
tabId: debuggeeId.tabId
}, "Network.getResponseBody", {
"requestId": params.requestId
//use underscore to add callback a more argument, passing params down to callback
}, _.partial(function(response,params,debuggeeId) {
// you get the response body here!
console.log(response.body,params.response.url);
// you can close the debugger tips by:
// chrome.debugger.detach(debuggeeId);
},_,params,debuggeeId));
},800)
}
I think the setTimeout is not the perfect solution, can some one give help?
thanks.
[REGISTER SHIFT/ ASSIGNMENT FORM]
Here is my form, let me describe it; it register next week working hours, I design there are 2 cases: add new and edit in the same form.
When user select an employee, if not register shift yet, we let user register for this employee, if shift is registered already, user can edit in the same form. And I think it will be better not refresh the page, every time user change employee, the form just update and let user add/edit then submit it by post method.
I searched the web, and found a recommendation for ajax/jQuery.
Any more recommendations for me? I've just learn Nodejs/Express with PostgreSQL database.
I am trying to use ajax to load mypage from post event, I call error function in ajax to see what the error is and get:
Parsing JSON Request failed. Status 200.
I'm using NodeJS Express Server, EJS view engine, body-parser, postgresql db.
pool.connect((err, client, release) => {
if (err) {
return console.error('Error acquiring client', err.stack)
}
client.query(
'SELECT * FROM "Employee"', (err, result) => {
release()
if (err) {
res.end();
return console.error('Error executing query', err.stack);
}
console.log(typeof(result));
res.type('json');
res.render("index", {emplist : result});
res.end();
})
})
My ajax function:
$.ajax({
url: "/addshift",
type: "POST",
data: JSON.stringify(employee),
dataType: "application/json",
contentType: 'application/json',
complete: function () {
console.log("go into complete !");
},
success: function (response) {
console.log(response);
console.log("go into success !");
},
error:function(x,e) {
if (x.status==0) {
alert('You are offline!!\n Please Check Your Network.');
} else if(x.status==404) {
alert('Requested URL not found.');
} else if(x.status==500) {
alert('Internel Server Error.');
} else if(e=='parsererror') {
alert('Error.\nParsing JSON Request failed. ' + x.status);
} else if(e=='timeout'){
alert('Request Time out.');
} else {
alert('Unknow Error.\n'+x.responseText);
}
}
});
let's see:
"I am trying to use ajax to load mypage from post event"
Ok, so I suppose you want to get a fully formed HTML page from your $post.
Then, I see:
console.log(typeof(result));
res.type('json');
res.render("index", {emplist : result});
res.end();
res.render will return HTML, this is good for your goal. BUT, you're also specifying a JSON type with res.type. This is causing the error. HTML is not JSON clearly.
Furthermore, you don't need the call to res.end(). res.render() will finish the transaction correctly on its own, res.end is for errors or unexpected conditions.
Your ajax code is ok, but if you're trying to update an html component, like a select, you need to do that manually using the response from ajax, like so:
$("#selectElem").html(response);
Furthermore, you should check your result object from the SELECT * FROM EMPLOYEE query is correctly formatted as proper JSON
i m working in project where i use NODE, EXPRESS, and JADE TEMPLATE ENGINE , and AJAX to reduce page loading but when i get the result from a GET request in AJAX , i want to use the returned data (the results) directly inside the JADE file (i see that handlebarjs has a function called DataTamplate to send data to handlebar file but i don't know how we do that in JADE
so my codes is the following:
router.get('/index/newest', indexControllerXD.get_newest);
exports.get_newest = function(req, res, next) {
async.parallel({
offers_recption: function(callback) {
const end = moment();
const start = moment.subtract(1, 'days');
var range = { "$gt": start, "$lt": end };
receptionPlaceModel.find({ 'created_on': range }).exec(callback);
}
}),
function(err, results) {
if (err)
return next(err);
res.send(results.offers_reception);
}
};
so i send the result to AJAX GET request like this
$(document).ready(function() {
$('.grid-cell-newest').click(function(event) {
event.preventDefault();
RefreshGetAll();
});
function RefreshGetAll() {
$.ajax({
type: 'GET',
url: '/index',
success: function(results){
}
})
}
})
so i want to pass the results in success method to JADE file to use the data of results
i don't want to use the results object inside the success , it won't help me generate what i want.
Still not clear with your requirement, but it seems you want to use results value in JADE template.
Did you try placing #{params.results} in Jade template if you are calling ajax in script section of your template.
Hi I have a react component that renders a form like this:
<form onSubmit={this.onSubmit}>
<!-- a bunch of inputs here -->
</form>
where the function onSubmit() makes a post request to /results using axios:
handleSubmit(e) {
var self = this;
e.preventDefault();
const {value1, value 2, ....} = this.state;
axios.post('/results', {
key1 : value1,
key2 : value2,
etc.
}).then(function(response) {
if (errors) {
self.setState({errors: response.data.errorMessage});
}
}).catch(function(error){
console.log(error);
});
}
I have a route handler for the post request in my server.js which inserts the data from the form into a database. If there are errors then it'll send that data back to the client, otherwise it should redirect to the results page. The handler looks like this:
app.post('/results', function(req, res, next) {
const reportExists = Report.findOne({
attributes: ['caseId'],
where: {caseId : req.body.caseId},
}).then(report => {
if (report) {
console.log("report already exists");
res.status(200).send({errorMessage : "Report has been submitted for this case id"});
} else {
const report = Report.create(
{
// data from form
}
).then(() => {
console.log('Record inserted successfully');
var caseId = req.body.caseId;
res.redirect("/results/" + caseId);
next();
})
.catch(err => {
console.log('failed to insert record');
res.status(200).send({errorMessage: "Failed to insert record"});
});
}
});
});
I have another app.get('/results/:caseId') handler which should render the appropriate route for the results page. But when the record is inserted successfully it doesn't redirect to that page, it stays on the same page as the form. My question is, should I be redirecting to that page from the client or the server?
Submitting an Ajax call via client-side Javascript just gets the response back from the server, whatever it is. A redirect is not automatically processed by the browser, it's just the ajax response to your javascript. It is up to your client-side Javascript to decide what to do with the redirect response.
You have a couple choices. You could detect the redirect response in your client-side Javascript and then set window.location with the new location and manually tell the browser to go to the new page. Or, you could let the browser submit the form rather than your client-side Javascript and then the browser will follow the redirect response automatically.
Also, you should not be calling next() after you call res.redirect(). Once you've sent the response, you should not enable other route handlers to execute.
I am using Node.js and the request module to create a backend, and we've chose Elasticsearch as our data storage. All fine so far, except it seems Node doesn't support request bodies on GET requests? This is necessary for Elasticsearch's _search API, which expects only GET requests as part of their semantic design. Is there a solution to force Node to send the request body even in the cases of a GET request, or a mean to use _search on Elasticsearch with another HTTP verb?
function elasticGet(url, data) {
data = data || {};
return Q.nfcall(request.get, {
uri: url,
body: JSON.stringify(data) //<-- noop
}).then(function(response) {
return JSON.parse(response[1]);
}, function(err) {
console.log(err);
});
}
The _search API also accepts the POST verb.
For simplicity, why not use their api rather than manually making requests?
simple example:
var elasticsearch = require('elasticsearch'),
client = new elasticsearch.Client({
host: '127.0.0.1:9200',
log: 'trace'
});
client.search({
index: '[your index]',
q: 'simple query',
fields: ['field']
}, function (err, results) {
if (err) next(err);
var ids = []
if (results && results.hits && results.hits.hits) {
ids = results.hits.hits.map(function (h) {
return h._id;
})
}
searchHandler(ids, next)
})
You can combine it with fullscale labs elastic.js to build really complex queries, really fast.
https://github.com/fullscale/elastic.js
I had such an issue a few days ago.
tld;dr use POST
According to https://www.elastic.co/guide/en/elasticsearch/guide/current/_empty_search.html#get_vs_post you can also use POST with elastic.
I tried it with axios but it returns all data like with no body.
So I used POST instead. It works for me and I hope it will help to someone else.