0

I've got a page which loads an external js and on the page I've got a function called calculate_totals(). What I want is to call the function calculate_totals() from a function in the external js.

This is a piece of JavaScript which loads in an external js

function selectItemMouse(thisVar) { var searchValue = thisVar.attr('data-name'); thisVar.parent().parent().parent().parent().children('.list').val(searchValue); //alert(thisVar.parent().parent().parent().parent().next().find('input').focus()); thisVar.children().children().each(function() { var dataId = $(this).attr('data-id'); var value = $(this).attr('data-name'); //This change the input of my form $(thisVar).parent().parent().parent().parent().children().children('.'+dataId).val(value); }); $('.customerResults').hide(); calculate_totals(); }
Improve this question
3
  • How is the value changed - by user typing, or by code? Commented Jan 15, 2013 at 11:23
  • Not clear why can't you show that alert after you update a value in that function you shown to us. Basically, there is no "change" event for value changed with JS. You need to trigger it somehow. Or you may use setInterval to check value each, for instance, 100ms and fire alert when it is changed. Commented Jan 15, 2013 at 11:32
  • What I want is to call the function calculate_totals() from a function in the external js. And what is a problem? I see you are calling it at the end of your function. And it should work just fine. Commented Jan 15, 2013 at 11:55

2 Answers 2

Reset to default
1

Based on commenting session: calculate_totals is defined inside of $(document).ready(function(){});

Because of that is not seen outside it. Basically, it is visible inside $(document).ready(function(){}); only. Just move it outside it. Now it will became global and visible anywhere.

Instead of 

$(document).ready(function(){ function calculate_totals() {} // this function is visible inside of a ready function only ///..... other code here });

use:

function calculate_totals() {} // now it is a part of global context $(document).ready(function(){ ///..... other code here });

After that you should have it available inside selectItemMouse and any other place.

Besides, I would think on updating your code.

thisVar.parent().parent().parent().parent().children('.list').val(searchValue);

usage of such chains is not flexible. Just you will wrap thisVar element with some other element - you will need to update your JS code.

Take a look at .parents or .closest. For instance, you may change a line above like this:

thisVar.closest(".class_common_parent").children('.list').val(searchValue);

Where .class_common_parent is a class of an element which you take using parent().parent().parent().parent().

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

1 Comment

Take a look at updated answer. There is some advice about improving your code. That is JFYI.
1

You can put a listener for a change on the input:

$(document).ready(function(){ $('#input').change(function(){ alert("alert here"); }); });
Improve this answer

10 Comments

Yes but I want to detect it immediately and not when i lose the focus of that input.
Then you can use a keydown: $('#input').keydown(function(){ alert(); });
Can i use keydown when the value is set by function and not by typing?
no, that's only if a user has inputted anything. If you are changing the value through a function, then you can just trigger the alert after you have changed the value... .val(value).done(function(){ });
keydown, change and other events are not fired if you update a value with JS. You may trigger them manually, but than I see no difference between triggering an event and showing an alert directly from your function.
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.