0

SETTING

I have a webpage with index.html which includes lots of scripts.

If a user clicks:

<button ui-sref="SCMCompanyWizard()">
    <span>Add New Company</span>
</button>

Then I send the user to a new view.

Problem Scenario 1

At this view, I have a button that will not work because the associated jquery did not load. I get this error:

TypeError: Cannot read property 'show' of undefined

But, if the user refreshes the page it will work.

Problem Scenario 2

So, I added a script into the secondary included view at the top of the html. I added a <script>...</script> include. Now both of the index.html and the secondary html page have the script include.

This will make it work if the user goes to the page, but the button will fail if the user reloads the page.

Question

How do I make a webpage that works in both scenarios?

Note:

This question has been asked in many different contexts, such as :Why do I have to refresh my page for a javascript function to work?

But the answer data-ajax="false" doesn't work in the context of angular

UPDATE 1

Adding a ui-sref-opts="{reload: true, notify: true}" to my ui-sref button did not work.

i don't know why, this is because I thought it forces a reload right when the user clicks the link.

I paired this button option with only having the on the index page.

Rorschach
  • 3,684
  • 7
  • 33
  • 77

1 Answers1

1

a. (If is not currenlty like that) put the js/jq code inside the load function to ensure the whole page was been load before call any code $(function() { })

b. (plan b) Move the code to the bottom of the html, to ensure -again- the page is currenlty loaded before the code is called.

c. If your code is dynamically created, be sure to "activate" it after the dynamic DOM is rendered. (invoke the "on" events after the code is rendered)

HIH,

gtryonp
  • 397
  • 5
  • 13