Would appreciate some guidance on adding an image to a div tag using jQuery and Ajax. I've been struggling to find a solution despite trying various methods.
The image I need is located in steel_agg_bof_flash_en.html, which can be accessed as an XML file. This file contains the data interfaces information required for this task.
Currently, I am working on localhost, and the file steel_agg_bof_flash_en.html is in my root folder.
<data>
<labels>
<closebtn><![CDATA[]]></closebtn>
<path></path>
<addbtn><![CDATA[add hotspots]]></addbtn>
<deletebtn><![CDATA[delete hotspots]]></deletebtn>
<resetbtn><![CDATA[reset hotspots]]></resetbtn>
</labels>
<basics>
<lg></lg>
<clickmapid>contentbean:9492</clickmapid>
<adminMode>0</adminMode>
<imgpath>/linkableblob/internet_en/9492/image/steel_agg_bof_flash_en-image.jpg</imgpath>
<format>landscape</format>
<title><![CDATA[]]></title>
</basics>
<hotspots>
<hotspot>
<hsid>clickMap_item_9510</hsid>
<title><![CDATA[Optimal design ]]></title>
<position><![CDATA[350,469,247]]></position>
</hotspot>
....
</hotspots>
</data>This is the code I have at the moment, but unfortunately, it's not working as intended:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<div id="" class="content_item">
<h1>BOF vessel </h1>
<!-- class should be either "portrait" or no class for "landscape" -->
<div id="clickMap">
<div id="clickMapFlashContainer"></div>
<div id="clickMapFlash" style="width:auto"></div>
</div>
<div id="clickMap_item_default" class="clickMapItem text">
<div><p>Due to long-standing contact with customers RHI has detailed knowledge of the requirements that steelworkers place on refractories. This is why RHI has been involved in the development of package and system solutions for many years und nowadays offers customized high-end solutions for basically all individual customer requirements.</p></div>
</div>
</div>
<script type="text/javascript">
$( document ).ready(function() {
$.ajax({
type: "GET",
url: "steel_agg_bof_flash_en.html",
dataType: "xml",
success: function xmlParser(xml) {
$(xml).find('basics').each(function () {
var img = $(this).find('imgpath').text();
$('<img />')
.attr('src', "" + img + "") // ADD IMAGE PROPERTIES.
.width('200px').height('200px')
.appendTo($('#clickMapFlash')); // ADD THE IMAGE TO DIV.
});
}
});
});
</script>
</body>