MVC 5 view cannot see html image when using append div - javascript

I am using ASP.net MVC5. (Level: Novice)
I am trying to create a div that contains an image using a JavaScript function. So I have the following code:
function showLoadingImage() {
$('#submit_EmployeeDetails').append('<div id="loading-image"><img src="~/images/ajax-loader.gif" alt="Loading..." /></div>');
}
The function runs but all I can see on the view is the Alternative "Loading..." text not the actual image.
I have tried to put the image in to my view manually using the following code and I can see the image perfectly fine.
<div>
<img src="~/images/ajax-loader.gif" />
</div>
Does anyone have any suggestions as to why the image doesn't show using the showLoadingImage function?
Many Thnks.

Path is wrongly constructed as view is unable to resolve ~,so change it to
var path='<div id="loading-image"><img src="/images/ajax-loader.gif" alt="Loading..." /></div>'
$('#submit_EmployeeDetails').append(path);
Side note:
If you want to dynamically add image then make it like this
var path="<div id='loading-image'><img src='/images/" + img.gif "' alt='Loading...' /></div>"

Related

how to display dynamic <img src> on webpage

i want to make a website that allow users to input questions, and then the website will display some pictures related to user input
i tried to wrap the output in img src tag, however the output is simply a line of code instead of picture
<img src="path/reply.jpg" width="68" height="90" alt="reply">
how can i tell the website to recognize it as a picture and display it ?
is it possible to extend this function to embed youtube video etc. ?
==================================================================
Added some scripts below, i guess this is the code that limiting output as text only.....
function createRow(text) {
var $row = $('<li class="list-group-item"></li>');
$row.text(text);
$chatlog.append($row);
}
Update: i amended $row.text(text); to $row.html(text); , it can properly display html code now.
you can use ParentNode.append() function to append new image element to your html. (documentation here: https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append)
Example:
var yourImage = document.createElement("img");
yourImage.src = "some/dynamic/source.jpg"
document.body.append(yourImage);
It is very simple, just try the following changes:
Add id attribute to your img tag:
<img src="path/reply.jpg" width="68" height="90" alt="reply" id="img1">
And in Jquery:
$(document).ready(function ()
{
$("#img1").attr({ "src": "img.jpg" });
});

How to execute javascript function when the user clicks on the image

I want to call or execute javascript function when user click on image. I have javascript file with many functions and one of them is ShowKeybord(). So i want to execute this function ShowKeybord() when user clicks on image.
I tried with HTML parameter onclick: <img src = "' + content + '" alt = "Heads" onclick = "ShowKeyboard()" height="170" width="170"/> but its not working.
Here is my code of key functions that are related to my problem.
I tried with header.addEventListener('click', ShowKeyboard) and work properly but the keyboard is displayed when you click anywhere in the header of the web page. I would however like to make the keyboard appear only when a user clicks on the image.
What am I doing wrong and what should change depending on my code?
Thank you very much for your help.
You can also try to encapsulate your img with a div with the attribute onclick="ShowKeyboard()"
Wich gives something like this
<div onclick = "ShowKeyboard()">
<img src = "' + content + '" alt ="Heads" height="170" width="170"/>
</div>
It's better to enclose your image inside a div tag. As suggested by #Lucas Duval.
This should definitely work if not please give your div an "ID" or "class" and try to handle this with JQuery.
Thanks!
in the head tag put
<script src="yourjavascriptfilepath"></script>
and should work.
or maybe try onclick="ShowKeyboard()" rather than onclick = "ShowKeyboard()"
I think that has to do something with it.

How to add banner at the bottom of image with a 'x' button to close it in React/HTML?

Here is my mock-up. I'm using react on the website I'm working on, and I just want to add a banner(that is closeable) for every image that is rendered on the website. I'm new to css so I am not sure what class to use, or if I have to make my own, or how usually people implement this kind of mock-up on css.
Background info: I'm doing this because I want to make the website more accessible for the visually impaired. So the description will basically stored as alt text of the image.
The user will be uploading images so they need to be able to add alt-text for the image themselves, not the coder. So I wanted to implement some kind of mechanism for the UI to accept input for every image, and the input is the image description.The problem is I'm not sure how to code that. I need some help where/when to start with.
The ReactJS API can be found here - https://facebook.github.io/react/ (see the An Application Example) There is an example where you can add text to a page dynamically. I would recommened using that same concept. You would have to break the process down in steps.
Step 1: Declare a variable that will capture what is in the text field whenever the user inputs(types/pastes) anything.
Step 2: When the user presses "Add", call that variable with the stored name and apply it as the alt attribute of the image.
Step 3: Use jQuery to add a <div> that is positioned at the bottom of the image and has the same value of the alt attribute of the image.
If you need the actual code please do let me know.
Consider a lightweight, easy to use tool that is dedicated to making everything related to images easier to implement on a webpage (although it can work with other DOM elements as well, i. e., videos, iframes, PDFs).
FancyBox
Here is a simply example of the alt attribute of an image being used to elegantly give the image a title.
Alt Image FancyBox
Lastly, using the same tool, you can use jQuery to build up the alt name and render automatically, so you do not have to do it manually.
// fancyBox v2.0 Next of X Solution, Auto assign title to all images on page.
//www.craigwasselphotoart.com/portrait_and_event_photography/main_test.htm
//http://stackoverflow.com/questions/3216013/get-the-last-item-in-an-array
//All credit goes to JFK of fancybox.net
//Alexander Dixon 07-06-2015
$("a").each(function(index) {
var titleName = $(this).closest("a").find("img").attr("src").toString().split('/').splice(-1, 1);
var anchorIndex = "a:eq(" + index + ")";
$(anchorIndex).attr("title", titleName).attr("rel", "img_gallery");
});
$("a[rel=img_gallery]").fancybox({
helpers: {
title: {
type: 'over'
}
},
// helpers
beforeShow: function() {
this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
} // beforeShow
}); // fancybox
<link href="http://www.alexldixon.com/fancybox/jquery.fancybox.css" rel="stylesheet" />
<script src="http://www.alexldixon.com/fancybox/jquery.fancybox.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="http://fancyapps.com/fancybox/demo/1_b.jpg">
<img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt="" />
</a>
<a href="http://fancyapps.com/fancybox/demo/2_b.jpg">
<img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt="" />
</a>
jsFiddle of auto alt Names

ajax:getting images as response to a php file

so i have a basic php page with links and when the user click on the "gallery" link i want the main div in which i am displaying the content to load a grid of images.
this is the sample code of what i am doing:
myreq = new XMLHttpRequest();
myreq.open("GET","my gallery.php",true);
myreq.send(null);
myreq.onreadystatechange = function(){
if (myreq.readyState == 4)
{
$("#maindiv").html(myreq.responseText);
}
}
I am getting the gallery file in the div alright but I am getting it with tags instead of getting the image itself.
I am getting:
img src=url alt=text etc
In short I am getting the text in the file.
You can handle this in two ways:
Modify your PHP Code in such a way, it returns this:
<img src="image.jpg" alt="Image" />
And use this code:
$("#mainDiv").load("my gallery.php");
Else, you can do this way. Modify your PHP Code in such a way, it returns an image and change the JavaScript this way:
$("#mainDiv").html('<img src="my gallery.php" alt="Image" />');
ps: As said by everyone, if you are using jQuery, use jQuery's $.ajax or its functions, instead of using XHR!
I suppose you are using jQuery, you should try this instead of all your code :
$( "#mainDiv" ).load("my gallery.php");
This will result by putting all HTML in remote file into the #mainDiv element.

Displaying a tooltip with PHP object's properties using jQuery Tooltip Plugin (or any other method)

I can't get my head around this issue. I have some PHP objects and I'm using 'echo' to display it on HTML page like this;
echo '<td><table border="1" width="55" height="55"><tr><td><img src="' . $Schema->result->item->image_url . '"/></td></tr></table></td>';
What I want to do is if I hover over that image, it should display a new small window (tooltip) with "$Schema->result->level"
I'm using this to display tooltip; http://jquery.bassistance.de/tooltip/demo/ (tonus)
But I have no idea how to pass the PHP variables to JQuery function.
To sum up, I'm looking for a way to display an object's variable in a new window when I hover over an image.
Am I doing this all wrong? I finished codecademy.com 's lessons and I'm still getting stuck on simple problems like this, any advices on that?
Thanks all in advance.
Could I suggest using the JQueryUI tooltip library then? All you would need to do there is output your data into the title attribute and then instanciate the tooltip library on load.
Try this:
Add id #tonus to image tag( <img ) and add $Schema->result->level to title attribute
echo '<td><table border="1" width="55" height="55"><tr><td><img id="tonus" src="' . $Schema->result->item->image_url . ' title="'.$Schema->result->level .'"/></td></tr></table></td>';
Js:
<script>
$('#tonus').tooltip({
delay: 0,
showURL: false
});
</script>

Categories