I have a PHP file that generates a JQuery-Mobile page using SQL-Queries:
<!DOCTYPE html>
<html>
<head>
[...]
</head>
<body>
<div data-role="page" id="page1">
[... a listview and a form ...]
</div>
<div data-role="page" id="page2">
[... some stuff ...]
</div>
</body>
</html>
The form has the same PHP file as action that generates the whole page. So, JQuery Mobile will submit the request to this file and refresh the page content (at least theoretically).
When submitting one of these forms, the content of the page get's updated. But after switching between the pages, the new content is lost.
I already tried to disable caching, but this did not work.
Also I read the documentation of jquerymobile, but I do not really understand how this ajax submission works. What should my PHP file return in case of an submission? The entire site?
Cheers
I would keep the form action outside the first file so that code is seperate. You could then submit the form using ajax and make the form action return some sort of JSON data to indicate whether the submit was successful (something like {code : 200, message : "Success"} should do)
Related
I'm not sure I understand what's possible with multi-page templates in JQM so I need a bit of help. I'm using version 1.4.5.
Let's say my app has only two pages (Page A and B) generated by a multi-page template. It takes the server several seconds to generate each page because they require many database calls and data processing. Currently, this multi-page template is generated by a single script on the server, index.pl.
Both pages are accessed by the user through a navbar. Page A is the first page in the template so it's visible to the user first.
To speed up the app, I want the HTML for Page B to get generated and fetched from the server only after the user taps the navbar menu item for Page B.
After Page B loads, the user should now be able to switch between pages instantly since the content for both pages are loaded into the DOM.
What is the proper way of accomplishing this desired result?
Do I tie the navbar tap on Page B to an ajax call and inject the server response into Page B? This seems kludgy.
I'm thinking I'm missing something fundamental about JQM but I'm not sure what. Can someone help?
SERVER-SIDE SCRIPT PSEUDOCODE:
<!-- PAGE A -->
output <div data-role="page" id="page_a">
output <div data-role="navbar">
output <ul><li>Page A</li>Page B<li></ul>
output </div>
output <div role="main" class="ui-content">
generate_html_page_a();
output </div>
output </div>
<!-- PAGE B -->
output <div data-role="page" id="page_b">
output <div data-role="navbar">
output <ul><li>Page A</li>Page B<li></ul>
output </div>
output <div role="main" class="ui-content">
generate_html_page_b();
output </div>
output </div>
For your architecture the best approach is single page template but you can use the pagecontainer API to load any page programmatically.
$(":mobile-pagecontainer").pagecontainer("load", "about.html", { role: "dialog" });
Check the jQM docs for more information.
I minimized the problem to this simple reproduction. Create new Asp.net MVC app, add Angular.js via nugget.
_Layout.cshtml:
<head>
<!-- Other stuff -->
#RenderSection("JavascriptInHead", required: false)
</head>
_Index.cshtml
#section JavascriptInHead {
<script src="~/Scripts/angular.min.js"></script>
}
<div ng-app>
{{2 + 2}}
</div>
So this works (obviously), however when I click, say About or Contact menu to reload another view and then go back to Home, I get
{{2 + 2}}
Then I click page reload two times and I get
4
Please help me understand this..
Angular bootstraps when the document loads. So if you are loading html that contains angular into your page without doing a full page refresh, you'll need to bootstrap angular manually. Try adding this script to your partial page:
angular.element(document).ready(function() {
angular.bootstrap(document);
});
btw, I for one appreciate you posting a concise example rather than 100 lines of code from your actual project. If your actual project has an app name, however, like this...
<div ng-app="myApp">
then the js you put into your partial page should look like this...
angular.element(document).ready(function() {
angular.bootstrap(document, ['myApp']);
});
Documentation for manually bootstrapping Angular can be found here: https://docs.angularjs.org/guide/bootstrap
I have a view that contains a partial view that is brought into a #section on the layout page.
How can I include the fields in that partial view in a section in the form collection on submission?
If I put it into the using(Html.BeginForm()){#section } the section does not get placed in the proper place on the form. If I don't include it in the using section the fields don't get submitted as part of the form collection.
Any way to make this work?
#using(Html.Beginform("MyMethod","home", FormMethod.Post)){
#Html.Partial(MyModel)
<input type="submit" value="continue"/>
}
#section LowerLeftBlock{
#HtmlPartial("partials/_additionalformfields")
}
And the layout page:
<div id="body">
#RenderSection("LeftBlock",false)
#RenderBody()
</div>
You could easily use jQuery to copy the additional fields into the form, either when the page is fully loaded or just before the form is submitted. Something like this might do:
<script type="text/javascript">
$(document).ready(function(){
$('#theform').submit(function(){
$("#lowerleftblock input").appendTo("#destinationform");
});
});
</script>
You would obviously need to adjust the css selectors in the sample code above for this to work.
You may want to
See the jQuery docs for more info on appendTo.
See the jQuery docs for more info on selectors.
I have a master layout looking somehow like this
<html>
<head>
...
</head>
<body>
<section data-role="page" data-theme="d">
<section data-role="content">
#RenderBody()
</section>
...
#Scripts.Render("~/bundles/jquery.mobile")
</section>
</body>
</html>
And I have a couple of controllers and templates pushing some code into content section of master layout.
When i click on a link:
Some order
the ajax loader is shown, the url changes, but all I see is the broken markup of the original page. If I inspect the code I will see that there are two page sections in the DOM (which means that the target page is successfully injected but isn't shown).
If I refresh page I will see the target page.
So what's wrong? Why can't I get the fancy JQM page transitions? thank you.
Add the data-ajax='false' on the links who were responsible for redirect you to another page.
JQuery Mobile uses AJAX navigation unless you tell it otherwise. The ASP.NET redirects have no problem to normal requests, but cause issues with AJAX. So my answer in this case is to turn off AJAX. For that, all you have to do is add the attribute data-ajax='false' to the tag.
In my case, an easy solution could be (as changing each Html.ActionLink/Url.Action is time consuming), adding this at the end of the _Layout.cshtml (just before closing of the 'body' tag).
$(document).on('pageinit', function() {
$('a').each(function() {
$(this).attr("data-ajax", "false");
});
});
That would be fine assuming you don't want jQuery mobile to use any Ajax with links too.
You can go ahead and use Ajax in most circumstances and only turn it off selectively where it can cause a problem.
Have the following markup in my html page to toggle a search bar based on if a search icon is clicked:
<a id="searchIcon" href="/"></a>
<div id="searchWrapOuter" style="display:none;">
<div id="searchWrapInner">
<div id="formContainer">
<form id="searchForm" action="#">
<div>
<input type="search" name="search-mini" id="search-mini" value="" data-mini="true" />
</div>
</form>
</div>
</div>
</div>
Width the following javascipt/jquery:
$(function() {
$(document).on("click", "#searchIcon", function () {
var searchWrapper = $("#searchWrapOuter");
$(searchWrapper).slideToggle();
return false;
});
});
This code works as expected on a page load direct off a Url. When coming into the page off a link which is Ajax loaded, loads the contents of the page into the DOM, and the DOM ready handler only executes for the first page.
I have read about using the
$(document).on('pageinit'), not $(document).ready()/$(function()
I still haven't been able to get this to work when coming in off an ajax link however. What would be the correct way to implement these events to get the code to work coming in from an Ajax link?
Thanks,
Most likely it is because you are using IDs instead of classes. jQuery Mobile doesn't work well with IDs because it caches pages into the DOM so if you open a page, close it, then go back to the page, you might have your page twice inside the DOM (one visible, one hidden/cached). So when you do $("#searchWrapOuter") you don't know which element you are actually dealing with (in your case, probably the hidden one).
The solution is to change your IDs to classes. This is not very intuitive but I found that is the best way to work with jQuery Mobile.
Also note this comment in the doc which might also be relevant to you:
The id attribute of all your elements must be not only unique on a given page, but also unique across the pages in a site. This is because jQuery Mobile's single-page navigation model allows many different "pages" to be present in the DOM at the same time. This also applies when using a multi-page template, since all "pages" on the template are loaded at once.
http://jquerymobile.com/demos/1.2.0/docs/pages/page-anatomy.html
You can manually adjust delay time to 500ms and 1s.
$(searchWrapper).delay(1000).slideToggle();
My issue is that the page id was below the pages tags. So once I moved the page div above it, the javascript was included in the ajax page load. Previous to this