Reputation: 50
I need to pass the element from a function to another function, but only after the web service(AJAX) call is completed.
content script(popup.js):
function runThis(){
var elem = $(".mainelem");
var objDetails = {
element : elem
}
self.port.emit("runCall", objDetails);
self.port.on("callComplete", function(response){
$(response.element).text("New text entered.");
});
}
main js(main.js):
main_panel.port.on("runCall", function(obj){
main_panel.port.emit("callComplete", obj);
});
html file(popup.html):
<div class="mainelem"></div>
But it does not append the text. Also, if try to put console in the function for port.on("callComplete"), it consoles a value like:
{"0":{"query111107803796615637436":15},"context" :{ "query111107803796615637436":15},"length":1}
Can someone help me out on how can I pass the element ? Or if I am trying to get the element in a wrong way?
Upvotes: 1
Views: 49
Reputation: 1046
You cannot emit DOM objects. You can emit only serializeable values.
function runThis(){
var elem = document.querySelector(".mainelem");
var objDetails = {
element : elem.textContent; // Emit string, for example.
}
self.port.emit("runCall", objDetails);
self.port.on("callComplete", function(response){
elem.textContent = "New text entered.";
});
}
Upvotes: 1