jQuery/MVC3 function html onclick only working once

Question

Ok, i have a function that is called when in image is clicked. For some reason it is only calling one time when i click it and I'm a little puzzled as to why.

Here's my javascript (combined with a small amount of razor), essentially all it does is call a post method in the controller that returns a partial view and updates that partial view.

function mFunction() {
    @{ x = x = 1; }
    $.post('/Home/_MyPartial', { 'param1': "@x" }, function(result) {
        $('.myUpdatedDiv').html(result);
        $('.anotherDiv').empty();
        $('.anotherDiv').append('@x');
    });
}

Then i have my tag like this

<a href="#" onclick="mFunction()">Hello</a>

It updates the view perfectly fine as i expect it to, with some goofy exceptions.

It does hit the controller every time it is clicked (multiple times). So i know it's working that way
The page itself does not get updated and nothing gets replaced a second time. The controller successfully returns the partial view, but the javascript only updates it once.

So i'd appreciate any help as to why it isn't updating more than once.

thanks

edit

Ok lets say i do this:

@{ int x = 0; }

<script type="text/javascript">
function tester() {
    @{ x++; }
    $('.H').empty();
    $('.H').append('@x');
}
</script>

<div class="H"></div>
<a href="#" onclick="tester()">Click</a>

Clicking on the tag will display '1' and clicking it on it will always display '1'. Does this have something to do with the razor code only rendering once or something? is there a way around it?

It is better if you show the markup for all the elements used in question. It will help in answering your question easily. — ShankarSangoli, Mar 28 '12 at 14:56
@ShankarSangoli updated my answer with a basic but complete example — bbedward, Mar 28 '12 at 15:05
@Qpirate i'm doing a post request which shouldn't be cached by the browser? — bbedward, Mar 28 '12 at 15:06

score 1 · Answer 1 · answered Mar 28 '12 at 15:11

try this

<script type="text/javascript">
var indx = 1;//Set this to be the value from the model you want to display 
function tester() {
    $('.H').empty();
    $('.H').append(indx);
indx++;
}
</script>

<div class="H"></div>
<a href="#" onclick="tester()">Click</a>

score 0 · Accepted Answer · answered Mar 28 '12 at 15:12

0

Razor code is only run on the server, when the page has been downloaded all you have is the javascript with the Razor values output in place so your second example will look like this:

<script type="text/javascript">
function tester() {
    $('.H').empty();
    $('.H').append('1');
}
</script>

<div class="H"></div>
<a href="#" onclick="tester()">Click</a>

This is why it will only ever append 1.

answered Mar 28 '12 at 15:12

Richard Dalton

35,513
6
73
91

Great, i'll accept the answer when i get the opportunity. On a side note, any idea how to convert a javascript Date to a .NET DateTime string ? – bbedward Mar 28 '12 at 15:16
Np. This should hopefully help you with dates - http://stackoverflow.com/questions/5521553/best-way-to-convert-javascript-date-to-net-date – Richard Dalton Mar 28 '12 at 15:17

score 0 · Answer 3 · answered Mar 28 '12 at 21:18

I suggest you use Firefox's Firebug or the Web Console (Ctrl+Shift+K) to look at the asynchronous calls. You'll know there if the browser is actually hitting the server on every click (and you can even see with what parameters whether POST or GET). It looks like it should be contacting the server everytime, but because state is not kept between calls, you are always getting the same result after the 1st call (because you are always sending the same X value after the first call).

jQuery/MVC3 function html onclick only working once

3 Answers3