how to scroll top of the page automatically when page is submitted - javascript

Am working with angularjs in MVC architecture with thymeleaf. i want to push my page automatically to top when page is submitted or page is refreshed automatically.
I came to know that using below function it is achievable. But where exactly i have to write it ( have to write in script file or everypages of thymeleaf HTML page ?)and how to use in thymeleaf pages.
If i write in script file then how to and where to use that id in thymeleaf HTML pages?
$window.scrollTo(0, angular.element('put here your element').offsetTop);

Look into $anchorScroll I think it will provide what you're looking for.
It can scroll to a named input or the latest value of $location.hash()
As an example, here would be your method to submit the page:
submitForm() {
doStuff(); // Shortening what you would do for submitting;
this._$anchorScroll('#named-element-id');
}
Another example would be using the $location.hash() if you had set it elsewhere in your controller. Then you could call $anchorScroll() directly without an argument.

Related

How to include a html which contains angularjs binding as pop up modal

I am new to angularjs. I have a html page which I need to include in another html page as pop up (both the html page have contents loaded from controller). It is working fine when I use router to move between pages. But I want the second page to be show as a pop up modal with a button and text box whose value also I need in controller. Simply put I need a preview page before I make the form submit. I went through several sites and they have asked me make use of templates but I am not sure how to use it.
I used bootstrap modal. Make sure you make use of the correct bootstrap version for showing and hiding the modal from javascript file also.
use angular-modal-service. You need to include this service in your controller. This service has the option to edit header and submit option in your controller http://dwmkerr.github.io/angular-modal-service/

Hash routing at single page with changing content

I have two pages and I need to make one using html and javascript
F.E. First page is a form and second page is a table to work with. So, after user submit the form, page have to update without refreshing. Form have to disappear, and table have to appear instead of it. How can I do it without PHP or frameworks like AngularJS and with #blabla routing or something HTML and JS only?

How to create a local HTML page in phone gap

I am doing the application in phone gap,But I have a problem that for switching the view,I dont know how to create a another view. But when I google it I get some relevant informaion like, I have create a local html file and then using the htmlcode i can switch the view.
If any one is having any relevant information regarding this please give me some idea.
My method for doing this is using ajax to load in my other pages. Essentially I have multiple html files and my main UI. When a button is clicked I fire an ajax request to load that new page and then animate it in using CSS animations ( which get hardware accelerated ).
remember to load the new page's data into a container div, so the rest of your UI can stay put.
You can create a separate HTML file for a separate view and use JQuery for functionality. Suppose that when you click on button, just redirect to another HTML file or whatever your need is.

Jquery ajax modal form post back to parent form

I have a query and don't know where to start - I have a image select input field on a form thats populated by an jquery ajax autocomplete. What I would like to do is the following:-
If a user wants to choose an alternative image that's not currently in the dB pop up a modal/lightbox form which contains the upload/editing form.
Once posted I want to pass this data back to the original form field and refresh the data for the autocomplete.
I already have the upload and editing forms working as standalone pages I just want to incorporate the output back into the original form.
Is it possible?
Can anyone suggest modal/lighbox script that can do this?
What data are you trying to retrieve in the parent window? Assuming your using an iframe in your lightbox? If you aren't then you should just be able to set variables and call functions from your upload script output as if it were the same page.
If you are...
I don't believe there are any lightbox/modal solutions that support this, I normally incorporate a script like below in my upload script so you can monitor the success/failure of the uploaded file and the data.
(function () {
parent.myClass.imageLocation = $output_your_image_location here;
return;
)();
You can obviously edit this to handle different situations but I always use the parent keyword as I have a similar way of handling uploads in some software I've built recently.

pager without javascript in asp.net

how to use Pager(GridView or ListView) with html link.
is that right that this code is not SEO friendly?
thanks.
You have two questions.
First:
You can implement a pager by using post-backs. Basically you will invoke a server call at each click of a link. And the server would reply with a new page of the dataset. But the asp.net controls submit the form using javascript. It looks like:
link text
So to not use the javascript at all, you could use a HTTP GET only method. This is just one way to do it.
So what you want generated is something that, it will pass to your server a page value using a query string parameter named 'page'.
You can handle that in your aspx page any way you see fit. But it needs to generate some thing like that.
page 2
In the page load of somepage.aspx you handle it.
protected void page_load(EventArgs e){
// check if the page parameter is set in the query string
if(Request.QueryString["page"] != null){
// page is the value of the requested page
var page = Request.QueryString["page"];
}
// bind you data to the control.
}
Then when binding the data to your GridView or ListView you filter the data based on the page requested.
#pre has a good answer for your first question.
Regarding your second about SEO and JavaScript:
JavaScript has to be used correctly. In other words, the html has to have the links and all of the pieces necessary to be read by a spider. If nav elements are injected via JavaScript then you can be assured that a spider will not see them.
You can certainly use JavaScript to change the styling, reposition the pager area or add other attributes but the base anchor tags with the appropriate href attributes have to be present.

Categories