I have following buttons in My PopUp in jQueryMobile i.e.
HTML Submit Button,
ASP Link Button
Anchor and
ASP Button
<input type="submit" value="click" onserverclick="input_Click"/><br>
<asp:LinkButton runat="server" OnClick="input_Click" data-role="button">link< /asp:LinkButton><br>
<a href="#" data-role="button" onserverclick="input_Click" >anc< /a><br>
<asp:Button runat="server" ID="btn" runat="server" Text="btn" OnClick="input_Click" data-role="button"/ >
Only ASP Link Button Is Capable of Posting Back to the Code Behind i.e. to input_Click handler in aspx.cs , When Clicked From POPUP,
PopUp is below:
<div id="div123" data-role="popup"><br>
<myControl:testcontrol ID="ctltest" runat="server"></bt:testcontrol><br>< /div><br>
<a href="#div123" data-rel="popup" >open</a><br>
Why other buttons Cant do this ?
How Post Back takes place Inside POPUP in jQM ?
This is discussed on the following page: http://jquerymobile.com/demos/1.2.0/docs/pages/page-scripting.html
This means that any scripts and styles referenced in the head of a
page won't have any effect when a page is loaded via Ajax, but they
will execute if the page is requested normally via HTTP. When
scripting jQuery Mobile sites, both scenarios need to be considered.
The reason that the head of a page is ignored when requested via Ajax
is that the potential of re-executing the same JavaScript is very high
(it's common to reference the same scripts in every page of a site).
Due to the complexity of attempting to work around that issue, we
leave the task of executing page-specific scripts to the developer,
and assume head scripts are only expected to execute once per browsing
session.
So when you launch a dialog, it loads the page and has no access to the original JavaScript. I often embed <script></script> into the dialog someplace so that it loads when the dialog is opened.
Related
I started working with JqueryMobile a little time ago and I'm trying to adapt my website for mobile devices.
I'm using ASP.NET Mvc and the structure of my page is this:
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jquerymobile")
#Scripts.Render("~/bundles/jqueryflexslider")
</head>
<body>
<div data-role="page" data-theme="a">
#RenderBody()
</div>
</body>
</html>
The thing is that inside my layout page I have a partial view with a simple jquery function that animate my menu, slideup/down on click. When I reaload the page it works fine, but when i hit the back button it simple doesn't work anymore, but if i hit refresh again voialaaa, it's works.
I read the jquery mobile documentation about "Scripts & styles in the head" and it says that
..The default behavior of the navigation system is to use that link's href to formulate an Ajax request (instead of allowing the browser's default link behavior of requesting that href with full page load). When that Ajax request goes out, the framework will receive its entire text content, but it will only inject the contents of the response's body element (or more specifically the data-role="page" element, if it's provided)
My question is how do i reload the content and get my scripts working (presuming that the problem is the reload thing) if not, someone could point me a direction or what is the best structure for this case?
I finally got it working!
My problem was that everytime I navigate from page to page, my <div id="page" data-role="page"> was duplicated. Since I got two pages on DOM and two IDS of the same menu, the click simple didn't work anymore. Once I add the data-ajax='false' on the links who were responsible for redirect me for another page, my page reloaded as usual and finally i got no more duplicated divs, IDS and everything runs flawless now.
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 the my answer 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. I am happy to let it go ahead and use Ajax in most circumstances, so I only turn it off selectively where it can cause a problem.
To link a page which is within the same page or else outside the html page it may redirects
to the particular link based on <a> link
Here is the code for the html:
<div data-role="page" id="main">
page1
page2
</div>
<div data-role="page" id="page2">
this is page2
</div>
Here the page1 is external html file if we click that it is showing as Loading Error page
while page2 is in the same page so it redirects to it . Please give suggestions for this how to link a html which is external.
From JQM Docs:
Linking without Ajax
Links that point to other domains or that have rel="external", data-ajax="false" or target attributes will not be loaded with Ajax. Instead, these links will cause a full page refresh with no animated transition. Both attributes (rel="external" and data-ajax="false") have the same effect, but a different semantic meaning: rel="external" should be used when linking to another site or domain, while data-ajax="false" is useful for simply opting a page within your domain from being loaded via Ajax. Because of security restrictions, the framework always opts links to external domains out of the Ajax behavior.
We have an MVC site that has custom formatting throughout. We are using jQuery Mobile and want to use the features in it, but it themes everything. We do not want this.
I found this SO question and I added this Javascript code in the _Layout.cshtml page:
$(function () {
$('html').find('*').attr('data-role', 'none');
});
This works for all of the elements, but sometime after the page loads jQuery inserts a <div> with the attribute data-role="page" which still causes issues.
Can I somehow disable themes altogether?
Try simple add data-ajax=false to the links/buttons who are responsible for the navigation.
Ex:
<a href="#Url.Action("Index", "MyPage")" data-ajax="false">
This will prevent jquery from use ajax for the transitions, you page will reload and the duplicated data-role=page will not be on DOM anymore.
It works for me, maybe can help you too.
In jquery mobile documentation http://jquerymobile.com/demos/1.0/docs/pages/page-links.html
it is said that I need to have a div with certain ID to navigate it.
I have a jquery moblie page div:
<div id="payments" data-role="page" data-url="payments">
On the other page I have a like
Open dialog
But when I click it nothing happens.
You most likely have an error somewhere else in your code, do you get any errors in your console after clicking the button? It would be helpful for you to setup a JSFiddle to share more of your code.
Here is a demo of your code working as expected: http://jsfiddle.net/zteV3/
Does anyone use jQueryUI (such as the CSS framework part) without the jQuery component? If you were catering for users who don't have javascript or who have it disabled etc
A particular scenario would be the dialogs which are so brilliant and simple...without javascript its just a div though...would a potential solution be to have the dialog div with a class that positions it absolutely and above other elements and then to remove that class when jQueryUI sets up the dialog...so that if javascript cannot run the dialog still has the class?
or would you use the css framework to create the dialog manually perhaps...
I have used jQuery UI's classes to style things 'consistently' when JavaScript is turned off. You just use the classes that jQuery UI applies to elements, and include the jQuery UI stylesheet and resources.
For example, if you had
This is a button
And you ran the jQuery UI JavaScript:
$("#abutton").button();
It would alter the markup to:
<a href="#" id="abutton" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button">
<span class="ui-button-text">This is a button</span>
</a>
Giving you a nice jQuery UI button. But only once the JavaScript has run will this be applied. If a user doesn't have/allow JavaScript, then you'll get an ugly link being used. Instead, you should use the jQuery UI classes at the start:
This is a button
It will have the basic jQuery UI styling before the JavaScript runs (the structure is different though - the span isn't there, and if you had the span initially it adds another one anyway, which IMHO is a bug). The thing is that you want the JavaScript to run still, because it adds other things, such as mouseover effects (and the span mentioned earler), so that users that DO have JavaScript get the full experience, but you also want to use jQuery UI classes by default because you want some consistent theme (even if it's not 100% perfect).
For more info about their CSS framework, check out http://jqueryui.com/docs/Theming/API.
If you want to have it to NOT use JavaScript, you'd have to have:
Initial page, does a post back
Server decides a popup needs to be done, renders the view with a dialog containing all the relevant dialog classes set.
User clicks button on popup, performing another post back.
Server renders view without the popup.
It is ugly, but you can't do dynamic HTML without scripting, right...
I use the CSS all the time outside of jQueryUI; I find it provides a much more consistent look-and-feel.
As for the rest of the question...whatt?!
and then to remove that class when jQueryUI sets up the dialog
How do you plan on having jQueryUI run ("set up the dialog") without JavaScript being enabled? If you put the dialog up without JavaScript, it won't be able to move or close; you'll be stuck with a giant div in the middle of the screen.