We Keep Coding

Jquery only works on reload after ui-sref

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.

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,

How to Use AJax to read page being displayed in the address bar

Ok so I am wrapping up my website now. I am using an AJAX/ JQUERY code to load the pages inside of a div in the initial index page of my website. but I want people to be able to share these things using jquery social share buttons plugin that I purchased but how would they be able to share individual pages like mydomain.com/artist/myartist if the address bar only reads mydomain.com?
Or lets say I pass on a link to a specific section of my site that I want ppl to visit once they click the link. For example
www.mydomain.com/store to load the store page instead of the initial landing page of my website where they would have to navigate to my store page instead of being able to click on the link in the navigation system
I dont know if I am asking the question correctly but check out my website to see what i am talking about http://www.Trillumonopoly.com
Below is the jquery/ajax code that I am using to navigate my website
$( document ).ready(function() {
$.ajax({
method: 'GET',
url: "pages/promo.html",
success: function(content)
{
$('#contentarea').html (content);
}
});
});
$('.menu_nav') .click (function () {
var href = $(this) .attr('href');
$('#contentarea').hide() .load(href).fadeIn('normal');
return false;
});

Your basic problem is that you don't have individual pages to link to. You need to first that before you can do anything else.
First make the site work without Ajax (create separate, complete pages, with unique URLs, for each page).
Then, when the link / form / whatever to load /example.page is activated, go through these steps:
Fetch the content needed to convert the current page into the page the server would give you if you asked for /example.page
Update the DOM with that content
Use pushState to update the URL in the address bar
Also make sure you have a popstate handler registered so that the Back and Forward buttons built into the browser continue to work.

Redirect to another page and change div content of these page

when user register successfully then action attribute of registration form redirect him to login.html. I want to change a div text for informing him that his registration is successful. I can't understand that how can change div text after redirect.

You cannot change text on another page unless you have script on that page for that purpose.
You are better off using server-side code to change the message. For instance, using php, you would have a login.php page that take a parameter called success, so you would call login.php?success=1 if your login succeeded, and the php script would add the message to the page.
This is just one example of how it might be done, but the key is that you cannot change content on a subsequently loaded page from script on your current page.
Now, if you want to use script, you could use jQuery to load the login.html content into your current page context, using .ajax() or any of the ajax jQuery functions .post(), .get(), etc. Then you can use your script to change the content, because it will be in your current page.

jQuery / JavaScript “please wait” window while page is loading?

I’ve two individual pages which actual needs the same kind of function so I’ll combine them into one question.
The function I would like is a modal window while the page are loading but the different for the two pages is when this modal window with a waiting text should appear.
When entering pageA it has to collect and calculate a lot of data so the loading time can take some time before it is ready. For this page I would like the waiting sign to come until the page is finish loading.
PageB is a form. The page loads fast but when a user hits the submit button the code does some different things with the data so it too can take some time and here I would like the modal javascript waiting sign to come when pressing submit. I do all the collecting, checking, validating and inserting on the same page, PageB, so I’m not changing back and forth between two pages.
I’ve scouted Google and different jQuery / JavaScript pages for a solution but what I’ve been struggling with is that it should work on both kind of pages, if that’s possible, or otherwise create two functions one for each page.
I’ve also searched stackoverflow but the question which is somewhat similar is not quite what I’m looking for either or I simple just doesn’t understand the solutions good enough.
Any help, suggestion or tips would be very much appreciated.
Sincere
- Mestika

Take a look at the jQuery UI Dialog - it has everything you need ...
http://jqueryui.com/demos/dialog/
For pageA call the function in a <script> tag at the top of the page and close it in the $(document).ready() function
For pageB call the function when the form is submitted and close it once that processing has been completed ...

For page A, create a normal HTML element (and CSS) to show the loading indicator, then hide it in Javascript when the page finishes loading.
To make the page work if Javascript is disabled, add the element using Javascript at the beginning of <body>.

How do I add a callback function to .submit() in Javascript?

I am submitting a page onclick of a form element and need a function to run after the submit refreshes the page. I'm trying to add an animated scroll back to the clicked element that caused the submission. I've got the scroll part covered but I can seem to figure out how to cause the function I wrote for the scroll to run after the page refreshes from the submit.
Any timely help would be much appreciated!

If you are doing a full submit, rather than an AJAX submit, then the page that displays afterwards is not the same page as the one that the form was submitted from. Consequently, the identity of the clicked element will not be available on the second page.
What you need to do is, during the submit handler, store the identity of the clicked element (Should probably be a unique ID of some kind) in a hidden field of the form.
When the page refreshes, it should now have the unique ID available (Probably placed in the same hidden field of the form by the server side code) and a javascript function can read this value to control the scrolling.
Does this make sense?
If you update your question to include some sample code, then I might be able to clarify further.

If you do a "real" form submit, where the actual page refreshes, there is no way you can do it from the client (except using frames). Once you leave the page, your javascript is out of scope. You need to insert the javascript to the refreshed page on the server.
If, on the other hand, you are submitting the form and refreshing a part of the page via ajax, then, depending on the framework you use, you'll be looking for a callback hook like onSuccess etc. in your ajax submit function

This would be easier to do in ajax however if you need to do it as a postback then you need to attach an event to the body load event and send some data back with the postback that would identify that the page has loaded as part of a post back and not a new page load.
e.g. create a hidden contol ont he web page and on the postback give it a value , on the postback check to see if that hidden control has a value and if so run your scorll code.