I have a website that is divided into the following structure:
<html>
<head></head>
<body>
<iframe>
//Vista
<div id="VistaPadre">
<div id="contenedor">
<!--boton generado desde vista parcial-->
<button type="button" id="OP1" class="btn btn-default" onclick="formula(this)">OPERACION 1</button>
</div>
</div>
<script type="text/javascript">
function formula(boton){
//cosas
}
</script>
</iframe>
<body>
</html>
This partial view generates a form in the container depending on the element that is pressed in the parent view, it makes a call to the controller from javascript and returns the form of the partial view, it shows it correctly and performs all the rest of the functions that I have defined in the, but the only element it doesn't find is that function, I have other elements with a very similar structure.
When I click on the button to perform its function I get:
Uncaught TypeError: formula is not a function
but i'm going to inspect the web and if that's in the script, i've tried to:
- Clear the cache.
- Run the web in another browser.
- Look for possible conflicting elements as indicated in this answer .
It stopped working I don't know when, but if it has worked before, I've checked with previous codes but I can't find what could be causing this problem.
What can be affecting?
It seems that some element causes a conflict with the function, being a very extensive view (divided into multiple partial views with their own functionalities), changing the name of the function to another one works correctly again, even so I have searched the project for a function that they are called the same but I have not found more than one css class.
I don't know if it is the cause of the conflict but changing
formula()
topintarFormula()
works correctly.