2

I have a span on a html page.

<span id="Amount" value="<?php echo $userProvidedAmount ; ?>"></span>

In my knockout code I need to add this value to the observable and I am using jQuery, but for some reason I cannot get the value.

self.amount = ko.observable($('#Amount').val());

Is there any way to get the value? I have checked that the value has some value but I cannot get the data in the observable.

Jeroen
  • 60,696
  • 40
  • 206
  • 339
XAF
  • 1,462
  • 1
  • 11
  • 22
  • You have not posted enough code for us to help you. Please check "[mcve]" for guidance – Jeroen Jan 14 '16 at 08:58
  • It would also help us help you if you format posted code so that it's easy to read, and (also mentioned in linked article) strip out the pieces that are *not* necessary to repro. – Jeroen Jan 14 '16 at 08:59
  • @Jeroen What else do you need ? I can post my controller here, is it necessary? – XAF Jan 14 '16 at 09:05
  • @Jeroen i have changed the whole question, is it possible you can help me out ? – XAF Jan 14 '16 at 11:10

2 Answers2

2

jQuery's val() function only works on input elements.
You're trying to use it on a span element, so it fails.

The easiest way to retrieve the value attribute would be to use attr():

amount = $('#Amount').attr('value');

But: Span tags cannot have the "value" attribute in standard HTML. Better to use a data-attribute:

<span id="Amount" data-value="<?php echo $userProvidedAmount ; ?>"></span>

... then you can retrieve it with the jQuery data() function:

amount = $('#Amount').data('value');
KWeiss
  • 2,954
  • 3
  • 21
  • 37
2

If you want to use KnockoutJS...

Then: Yikes! Don't mix jQuery and Knockout like that. If you're using Knockout, try to keep your view "dumb", i.e. a reflection of the state of your view models. Use Knockout's data-binding features to fill the view instead. So e.g.:

<span id="Amount" data-bind="text: amount"></span>

self.amount = ko.observable(<?php echo $userProvidedAmount ; ?>);

Typically you don't want to mix PHP and JS that directly, and you'll have something like this instead:

<span id="Amount" data-bind="text: amount"></span>
<script>
window.myNamespace.initialData = {
    amount: <?php echo $userProvidedAmount ; ?>
};
</script>

self.amount = ko.observable(window.myNamespace.initialData.amount);

Or whatever way your framework or homebrew setup analogously allows.

If you don't necessarily want to use KnockoutJS...

Having said all that, if you're not going to use KnockoutJS, you should look at @KWeiss' answer.

Community
  • 1
  • 1
Jeroen
  • 60,696
  • 40
  • 206
  • 339
  • so is it like bad to mix both of them in the same code? I got it working when I wrote the function like this. self.amount = ko.observable($('#Amount').data('value')); self.formatter1 = function(amount) { return amount + ' kk'; } – XAF Jan 14 '16 at 11:48
  • Yes, I recommend strongly *not* mixing them (not *like that*). Choose if you want to let KO handle the DOM, or whether you want to do so yourself with jQuery. Mixing those approaches will lead to trouble. (There are exceptions of course, most notably using jQuery in custom binding handlers.) There's [this excellent post](http://stackoverflow.com/q/14994391/419956) about a similar issue with jQuery and Angular, much of that advice applies here as well. – Jeroen Jan 14 '16 at 11:51
  • Thanks , I got exactly what you mean,and I tried your code, the observable couldnt actually get the script value for some reason. – XAF Jan 14 '16 at 12:09