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,
Related
I'm using AngularJS not to build SPA but just for certain features in the system. I'm having a trouble to find out why Angular is preventing page from being refreshed after it get's there or how to disable/workaround it.
So I have simple menu:
<ul>
<li>Homepage</li>
<li>Profile</li>
</ul>
And when I'm already on the http://example.com/admin page and I'm clicking in first link (/admin) then nothing happens.
I could detect if a certain a element has a href and then use window.location but unfortunately I'm using AJAX in some other parts of the system so that won't fit.
Please advise.
You're working with a Single Page Application. The router takes care of navigating between different application routes, but the browser never fetches an entirely new page.
When you click on a link for a page that you're already on, there is no where to navigate to.
EDIT: You could write a directive that will detect clicks on anchor tags, and if the route is the same, it could trigger a page refresh. That will give you the behaviour you're looking for. However, I struggle to where this would be desirable.
EDIT 2: This is what stops your navigation: https://github.com/angular/angular.js/blob/v1.5.x/src/ng/location.js#L889.
As far as I can see, there is nothing you can do to disable that behaviour, or if there is, it will be an uglier and more fragile solution that creating your own directive that will trigger a page refresh.
you need to be using ng-href and http://plnkr.co/edit/stdkjN?p=preview
I'm using a Javascript, Jquery , Backbone.js page. I have all the code in the same file, so I don't want to change between HTML files. I don't use Backbone.js routes. I want to change the URL dynamically and I used history.pushState() function, and it works correctly. But when I click to some parts of the website, the URL returns to the inital one. I don't know why...
I found the problem!!
My code has a hidden . Clicking an anchor with href="#" will move the scroll position to the top. But in my case it causes an unwanted behavior.
I am really new to all the AJAX stuff and now I wanted to convert a small homepage I created with CakePHP to an full AJAX page.
The functions I use are mainly:
View Dashboard with a List of "Book"s
View a "Book"
Create a "Book"
Edit a "Book"
Delete a "Book"
Each function uses its own view and should be shown in a modal. It is important that modals can overlap. In the beginning I added the JavaScript I needed to each view. So AJAX was loading the HTML view (+new AJAX) and displayed it in an modal. I was able to click on "View Book" and then "Edit Book", so two modals would overlap.
This was working fine, but Chrome threw a few warnings because it didn't like reloading AJAX.
So I decided to put all the AJAX logic into the Dashboard View and created an event handler for every possible button that could be clicked. Because my modals might overlap (and I don't know which ones would overlap) I created an empty div for every modal that could occur.
Currently it is working fine, but what if I add way more functionality?
Would I need in my Dashboard View an empty div for every modal that could show up and do I have to load ALL the AJAX functionality when the page is loaded?
Where should I put all the logic? Do I load all at once, even though I might just use a tiny part of the logic? How would I handle many overlapping modals with different content?
I hope you got some advice for me, because I think my solution will make it a big mess as soon as the project grows.
Thanks a lot!
Cheers
Over the last few days, I've been working on a script that interacts with a particular site. A page on the site has a table of values that is randomized every reload.
I've learned that I can load the page with JQuery's $.get( ) method and then use regex to read the values of the elements, but I can't figure out how to press a button on the page.
I'm not sure how I could select an element then call the normal .click( ) method on it, or if that would even work at all.
Basically, what I want to accomplish is:
Get a new (reloaded) version of the page.
Read values from an element on the page.
Click a button on the page.
Keep repeating previous 3 steps.
How can I make this happen (with or without JQuery)?
EDIT: So it seems this is difficult/impossible to do from another page, but it works if I'm on the page. Knowing that, is there a way that I can repeating reload the page without disrupting the javascript running on it?
If the buttonpush don't trigger an get/post event, u cant do this. If the button does, you have to simulate it by sending the next get or post with the button parameters. This will get you the expected datas, so no need to refresh.
I have one page app which need to appear after user login.
The main page is hidden behind the login bar, and shows after user login success , using ajax call.
The problem is , after I reveal the content , which changed according to the user data, all the javascript functions and plugins doesn't work because the page is not in the DOM when the page load.
how can I run the script on the hidden page?
Thanks
Please explain what you mean page is not in DOM. If you are adding some dynamic content to your page after Ajax call, then inside success function apply all plugins again and all event listeners rewrite to $(document).on('event', 'selector', function(){})