'[object HTMLImageElement]' displaying instead of image - javascript

This is the code I tried to modify and put in a wrapper div. This works perfectly.
display_element.append($('<div>', {
html: trial.a_path_west,
id: 'jspsych-single-stim-stimulus-west'
}));
But this isn't working. In particular the div html part displays [object HTMLImageElement] instead of the actual image.
to_add+="<div id='jspsych-single-stim-stimulus-west'>" + trial.a_path_west + "</div>";
Thanks!

There is no html attribute for the div tag.
The html when used in the {} version will invoke the html jquery method on it.
To do it that way you will have to add the html between the opening and closing tags of the div
to_add+="<div id='jspsych-single-stim-stimulus-west'>" +trial.a_path_west+ "</div>";

Ok, I Think I understand what you're trying to do and what your problem is. When you're using "<div id='jspsych-single-stim-stimulus-west'>" + trial.a_path_west + "</div>" you're casting your image object as a string.
Instead use a jquery method such as html that will accept the image object as a parameter and generate the necessary html
if (!trial.west_is_html) {
to_add+="<img src="+trial.a_path_west+ " id='jspsych-single-stim-stimulus-west'>";
}
else {
var wrapper = $("<div id='jspsych-single-stim-stimulus-west'></div>");
wrapper.html(trial.a_path_west);
to_add+= wrapper.html();
}
See this demo from this answer for a working example and more information

Related

How to replace content with change addEventListener instead of adding

Hi I have some code where i'm inserting a span on a page each time a change is made to a dropdown item. What i want to achieve is the content inside the span to be changed/replaced each time a change in the dropdown is made. But what I'm currently getting is a new span being created each time instead. An example of how my code looks is below, any help on this would be appreciated.
doSomething.addEventListener('change', function() {
document.querySelector('.className').insertAdjacentHTML("afterend", "<span>" + somethingDynamic + "</span>");
});
I needed the span content to be inserted into a certain place on the page so I created a new Div to be inserted onto the page where i needed it and then to replace the content inside it using innerHTML as suggested to get what I needed.
doSomething.addEventListener('change', function() {
document.querySelector('.className').insertAdjacentHTML("afterend", "<div class='new'></div>");
document.querySelector('.new').innerHTML = "<span>"+ dynamicContent + "</span>";
});

How do I use jQuery's insertBefore() function with a javascript string of HTML?

I am performing some DOM manipulation once my page loads and I was hoping to add some html right before an a specific div on the page. Not sure what I'm doing wrong here, I'm sure there's a simple way to accomplish this...
var finalStringHtml = '<div id="chartLinks">' + tableString + '</div>';
$(finalStringHtml.html().insertBefore("#chart_div")); //fails
$(toString(finalStringHtml).html().insertBefore("#chart_div")); //fails
You don't need the .html() call. (full docs: http://api.jquery.com/insertbefore/)
Try:
$(finalStringHtml).insertBefore("#chart_div");
If you want to, you can do the full code on one line and not create the variable:
$('<div id="chartLinks">' + tableString + '</div>').insertBefore("#chart_div");

How to create a Jquery object with containing elements

Forgive me if I haven't been searching in the right places, however, I've been searching all over the internet to find out how to create a jquery object, but I couldn't find a solution that fits my needs.
There is a large amount of html that must be within this object, as I plan to append the object to another element.
Example I have found:
Adding inner Html of element to a string, and adding this to jquery object:
var htmlText = "<div id='foo1'><a class='foo2'><h1 class='foo3'></h1></a></div>"
var $jqueryObject = $("<div>", {
class: "bar",
html: htmlText
});
This seems to have a strange effect when appended however: When appended, the only html left on the webpage was the contents of the jquery object. So in this example, only <div id='foo1'><a class='foo2'><h1 class='foo3'></h1></a></div> would remain (however html, head body tags still existed)
Help is greatly appreciated...
Thanks in advance!
Edit:
I then append this object to an element like so:
$("#foobar").click(function() {
$("#objectContainer").append($jqueryObject);
});
Something like this?
var htmlText = "<div id='foo1'><a class='foo2'><h1 class='foo3'>Test</h1></a></div>";
var $jqueryObject = $("div").append(htmlText).find('.foo3').css("color","red");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
you can edit the html objects in cache before appending like so:
$(jqueryObject).find('#foo1').css('background-color', 'grey')
https://jsbin.com/vuzosapedu/edit?html,js,output
Maybe your page is being submitted to the server each time you click on your button.
Try
$("#foobar").click(function(e) {
e.preventDefault();
$("#objectContainer").append($jqueryObject);
});

Appending to a div in JQuery

At first imgButton is a string of text containing HTML for an img tag. However, this variable is later turned into the results of .detach() of the img tag. The problem in the below code is that it does not display the image that it did previously, but instead [object Object] is displayed. It does display the correct image when using imgButton inside of its own append statement or appendTo. Is there a way to print out imgButton in the same append statement as the other strings and have it display properly?
I hope I explained the problem properly.
$("#search_prams").append("<div class='advsearchparam'><select class='searchparam'>" +
"<option value='test'>test</option>" +
"<option value='test1'>test1</option>" +
"</select><input class='search' type='text'><button class='remove' id='remove1'>X</button></div>"+ imgButton);
If it says that imgButton is an object then it is not a string try this,
$("#search_prams").append("your div string here ")
.append(imgButton);// append img button here

JQuery: wrapping variable's contents

I have a variable that contains a bunch of HTML that I retrieve from a HTML5 SQL database.
I can .append() this to an element in the DOM and it appears fine. But I want to .wrap() the HTML contents first, thus I have written:
content = $(content).wrap(function() {
return '<div class="event_holder" />';
});
$('#mydiv').append(content);
However, I get the error
Syntax error, unrecognized expression: ~HTML contents of variable~
I have also tried:
content = $(content).wrap('<div class="event_holder" />');
Would anyone know whats going on here and how I can correctly wrap this?
EDIT: the contents of 'content' is:
<input id="e1coords" class="coords" name="e1coords" type="hidden" value="-27.482359,153.024725">
The problem could be content = $(content).wrap('<div class="event_holder" />'); still returns the inner content not the wrapped element, you need to append the parent of the content.
Try
content = $(content).wrap('<div class="event_holder" />').parent();
Demo: Fiddle
i don't know why are you using callback of wrap() when you can do it directly
content = $(content).wrap('<div class="event_holder" />');
and it will be better if you can show us what actually the content contents..
updated
try this
content = $('#e1coords').wrap('<div class="event_holder" />');
OR
var content = $('#e1coords');
content = content.wrap('<div class="event_holder" />');
I found out the because the content variable was actually retrieved from a (html5) database it was not part of the DOM, thus JQuery was having issues with it.
I did the wrap manually and it worked
content = '<div class="event_holder">' + content + '</div>';

Categories