how can I pass the value of the first page to the third page in this example, without loading the whole page new. The link list in the second page will be generated from an ajax call with:
<a href="#location_view">
Im looking for something like this:
<a href="#location_view?id=4">
so if the pagesector #location_view is called it get the id of the location
http://jsfiddle.net/g5Umg/4/
Related
situation:
form1.html has a button
clicking that button calls $.mobile.changePage('../site3/form2.html');
no problem here. all is as expected and the page is loaded. let's call that form2.html
form2.html has 2 sections:
(1) #SiteForm and
(2) #SiteSearched
clicking a button on #SiteForm should call $.mobile.changePage('../site3/form2.html#SiteSearched');
now here's the weird part.
if I load the page form2.html directly and press the button, it works and I see #SiteSearched JQM page.
but, if I start from form1.html, click the button to get to form2.html#SiteForm, then click the button, everything in the attached function executes, except the line calling $.mobile.changePage('../site3/form2.html#SiteSearched');
I know that part is loaded by AJAX by wouldn't the changePage command work?
(note: Form1 may have data filled into the form that I don't want to lose. Form2.html was meant to do a search and throw back the result to Form1 somehow, which is why I am doing things this way.)
You should read official jQuery Mobile documentation before posting here, everything is explained there, but let me give you a short explanation.
jQuery Mobile has two template solutions, one is multi page and second one is multi html. You already know that because you are mixing them. But, what you don't know is (from the perspective of AJAX page handling):
Only first HTML page is fully loaded into the DOM, everything is loaded, including the HEAD content. So if initial HTML page has several data-role="page" <div> containers, every one will load into the DOM.
But, every subsequent page is loaded only partially. Basically if you second, third ... page has more then one data-role="page" div containers only first one will load into the <DOM>. jQuery Mobile will discard everything else.
So in your case, if form2.html has:
(1) #SiteForm and
(2) #SiteSearched
jQuery Mobile will load only #SiteForm, #SiteSearched will get discarded.
Basically this line will not work:
$.mobile.changePage('../site3/form2.html#SiteSearched');
You can't nit pick specific pages in subsequent pages, as I told you. You can only use this:
$.mobile.changePage('../site3/form2.html');
And jQuery Mobile will show you first data-role="page" occurrence inside form2.html page.
Read more about this here and here.
Please let me know how to load all the "pages" in a html document into the current page dom.
I tried using $.mobile.loadPage, but only the first "page" of the document is loaded.
I want to load all the "pages" in that html document.
While googling for this i found two plugins ToddThomson/jQuery-Mobile-Subpage-Widget and a multiview plugin. But i could not find the basic "how to use" section for these two plugins.
Is there any links which shows how to use these plugins.
It can be done easily.
Lets say you have 2 html files. First one has a one jQM page and second html has two pages. Also lets say first html page is called test1.html and second one is called test2.html, test1.html is first page to open.
Only thing you need to do (to load every page from test2.html) is to add an attribute data-prefetch to a a tag link leading to the second page.
Here's an example:
<a href="test2.html" class="ui-btn-right" data-prefetch>Next</a>
If you wish, go to my profile and send me an email, and I will send you a working example.
Here you can find more about data prefetch in jQM: http://jquerymobile.com/test/docs/pages/page-cache.html
If you are changing your page with a changePage function you can still prefetch it with a :
pageContainerElement.page({ domCache: true });
So I've just started learning jQuery Mobile, and I've learned how it loads all links via ajax without actually loading the next page. Several of my pages use forms and GET to pass data on to the next page-- How can I do this while using jQuery Mobile?
One thing that I think is cool about JQM is that you don't have to use parameters to pass data between pages. Since you're in the same DOM as the first page, you can access data using plain old variables, i.e.
field1 = $('[name=field1]').val();
field2 = $('[name=field2]').val();
And so long as you're using the ajax feature of JQM you could do the following in the next page:
$('.title').text(field1);
I made a jsfiddle example for you.
Other ways would be to use the localStorage or sessionStorage api or there are also some plugins mentioned in the docs.
page params
JQM router plugin
Commonly, there 2 method for transfer parameter between jQuery Mobile page.
Modify Ajax address at first page, and parse the ajax to get parameter in next page.
Using HTML5 sessionStorage, a kind of WebStorage, to transfer parameter.
This is the method use ajax address to transfer parameter.
How to pass and get Parameters between two Pages in Jquery Mobile?
Using sessionStorage/localStorage to transfer parameter, you can add this code at first page,
<a href="#page_Parameter1" onclick="sessionStorage.ParameterID=123">
Before go to next page, parameter id is storaged into sessionStorage.
</a>
In next page, you can use this method to take parameter content,
$('#page_Parameter1').live('pageshow', function(event, ui) {
alert('Parameter ID: ' + sessionStorage.ParameterID);
});
I'm using ASP.NET MVC 2 for the first time on a project at work and am feeling like a bit of a noob.
I have a page with a customer search control/partial view. The control is a textbox and a button. You enter a customer id into the textbox and hit search. The page then "refreshes" and shows the customer details on the same page. In other words, the customer details appear below the customer search control.
This is so that if the customer isn't the right one, the user can search again without hitting back in the browser. Or, perhaps they mistyped the customer id and need to try again.
I want the URL to look like this:
/Customer/Search/1
Obviously, this follows the default route in the project.
Now, if I type the URL above directly into my browser, it works fine. However, when I then use the search control on that page to search for say customer 2, the page refreshes with the correct customer details but the URL does not change! It stays as
/Customer/Search/1
When I want it to be
/Customer/Search/2
How can I get it to change to the correct URL?
I am only using the default route in Global.asax.
My Search method looks like this:
<AcceptVerbs(HttpVerbs.Get)> _
Function Search(ByVal id As String) As ActionResult
Dim customer As Customer = New CustomerRepository().GetById(id)
Return View("SearchResult", customer)
End Function
A good place to start might be NerdDinner if you havn't already.
In the mean time though The approach I'd use is to have a page that has my search box on it.
Then I'd have a <div> that I name "SearchResults". This will ultimately hold my results to the search.
I then have a PartialView which takes a model that has all the search results and renders them.
So when I click the button I do a call out to a jQuery action that takes the search parameter, performs the search and then returns my PartialView as rendered HTML.
Back in the client side I take that rendered HTML and replace the contents of my div with the HTML.
The keywords to google, or SO, are RenderPartial. This is back end code to render a partial view and give you html.
Also jQuery postbacks so that you can call an action in your controller.
use RedirectToRoute action result
link
I have MVC 1.0 app on VS2008.
I have webpage that has a search form fields and then when search button clicked uses
Ajax.BeginForm to load results in a div. Works great!
But the results have a pager that just uses an anchor with href passing in page index to controller action.
Of course the same action that is used when the search button is clicked.
So what happens is the results are displayed in new page by themselves. Because the links
are not called using Ajax.
So how can I structure my views and actions so that when a link is clicked in the pager
that the form is submitted to the action as well as the page index for the results??
Do you understand me??
Malcolm
I think I understand what you are saying.
Currently, you're using Ajax to dynamically update your results to a div. Kewl.
The trick here is to make sure each 'page' in the pager has a similar javascript function defined on the onclick event. This way, the pager doesn't do a 'postback' to the server, but the javascript method is ran ... which calls some ajax.
here's some sample html...
<a href="#" onclick="DoPagedSearch(1)>1</a> |
<a href="#" onclick="DoPagedSearch(2)>2</a> .. etc
does this make sence? make sure the pager is NOT inside a form AND notice the '#' characters? that makes sure that when u click on the text, it doesn't try and goto another HTML page, elsewhere.
Do you know how to wire up any javascript to an html element? How do u create the html code for the pager?
try that and keep us posted.
Use jquery to have the page anchors make an ajax call to the controller. Return the results as JSON or xhtml or whatever format makes you feel happy and use that to replace the content of the div, or build up and replace the contents if JSON.
If you haven't dug into jquery, I highly recommend it. The documentation is rather excellent. Let me provide you a few useful links for this:
JSON.net serializer
jQuery Documentation
fair example of using jquery for paging
The example uses an rss feed (xml) as the source, but It should get you going.