How to send a value from MVC to Javascript

Question

I have a catalog with several pictures, and I want to press one of those pictures and, without leaving the page I'm at, change the Full Image in one of my DIvs.

After searching the internet, I've found this:

<a href="imagem(@picture.FullSizeImageUrl" ... >
<img src="@picture.ImageUrl" ... />
</a>

that should connect with this javascript function:

function imagem(txt) {
    document.getElementById("imagemgrande").innerHTML = "<img src='" + txt + "' alt=''/>"

sending the image I want to my div with ID imagemgrande.

When I run the code and hover the image, the link that shows in the bottom of the browser gives me the correct path to the image I want to show (meaning the the java function should receive the correct path) but when I click, it doesn't do anything. I thought that the image tag could be wrongly created, and put a alert(txt) before the document.getElementByID. It doesn't even register.

Am I forgetting something, am I not declaring the javascript variable txt?

Ikrom · Accepted Answer · 2013-04-24 16:23:06Z

2

Why are you calling js function in href? You should do it in onclick

 <a href="#" onclick="return imagem(@picture.FullSizeImageUrl)" ... >

and don't forget return false;

function imagem(txt) {
    document.getElementById("imagemgrande").innerHTML = "<img src='" + txt + "' alt=''/>" 
return false;
}

EDIT

You have to send a string as a parameter to showImage function. I've checked and it worked.

<a href="#" onclick="return showImage('/big_image.jpg')">
    <img src="/some_image.jpg"/>
</a>

<div id="imagemgrande"></div>

<script type="text/javascript">
function showImage(imgUrl) {
    try {
        document.getElementById("imagemgrande").innerHTML = "<img src='" + imgUrl + "' alt=''/>" 
    } catch(error) {
        alert(error);
    }
    return false;
}

window.onerror = function(errorMessage, url, line) {
    var errorText = 'message: ' + errorMessage + '\nurl: ' + url + '\nline: ' + line;
    alert(errorText);
}
</script>

edited Apr 24, 2013 at 16:23

answered Apr 24, 2013 at 15:15

Ikrom

5,1395 gold badges55 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ThadiusZho Over a year ago

Tried your solution, but still the same. It jumps to the top of the page (because of the anchor) but the image stays the same. Even tried to put an alert in the function to see if it did anything, but no change. Any other ideas?

tgkprog Over a year ago

you can use href just need to add javascript: <a href="javascript:imagem('img/i1.jpg', 'imagemgrande')" > image 1 </a>

tgkprog · Accepted Answer · 2013-04-24 18:31:58Z

0

use firefox and look at the error console -> menu Tools / Error console

did you check if image path is correct - relative to page?
test it - past the path in the browser along with page folder does it show?

double check - is imagemgrande an image or a div ? if its image: change src

function imagem(txt) {

    alert(document.getElementById("imagemgrande"))//what does this say

    document.getElementById("imagemgrande").src = txt + "?d=" + new Date();//force webserver request, optional

you can use href also like this

  <a href="javascript:imagem('img/i1.jpg', 'imagemgrande')" > image 1 </a>

See image change

edited Apr 24, 2013 at 18:31

answered Apr 24, 2013 at 14:07

tgkprog

4,7434 gold badges47 silver badges76 bronze badges

1 Comment

ThadiusZho Over a year ago

the image url is correct, pasting it in the url shows the correct image I want. alert(document.getElementByID("imagemgrande")) returns a blank box. Maybe that's the problem. The thing is, if I put the imageurl in the href (inside the Imagem function) nothing happens. The alert box only activates when I remove it from the href .

Collectives™ on Stack Overflow

How to send a value from MVC to Javascript

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related