Search jQuery

jQuery Forum

jQuery Mobile Compatibility with .Net - Move popup widget's DIV to the inside the form tag

in jQuery Mobile • 5 years ago

(apologies in advance if this is posted in the wrong place!)

We’re using jQuery Mobile and .Net web forms for constructing mobile web pages. We’re using the latest compatible versions, jQuery 2.1.4 and jQuery Mobile 1.4.5. I’ve discovered a case where .Net web controls lose their values if they are inside a popup widget. Take the following example:

Say a mobile page contains a jQuery popup DIV. Inside the popup, there are two .Net web controls, a TextBox and a LinkButton. Open the popup, type something into the textbox, then click the button. The popup closes as expected. But in the server-side handler during postback, the text in the TextBox is discarded and restored to its original text, if any.

This behavior prevents using popups for common tasks in a .Net environment, like asking the user for options and such. The same problem happens not just with TextBox controls, but DropDownList and other .Net controls as well. By inspecting the page while it’s running, I can see that JQM places the popup outside of the FORM element. My guess is that the page’s ViewState is being lost by the popup widget, because the widget and its .Net controls are outside the FORM element, but the ViewState hidden element is inside the FORM.

I tested a workaround by adding the code below to the page. By moving the popup widget inside the FORM element, the pages work as expected.

<script type="text/javascript">
$(document).on('pagecreate', function () {
$('form').append($('#optionsPopup-popup'));
});
</script>

All other usage of .Net controls with jQuery mobile in the site work great. It’s just that within popups, the value of controls is lost. Can you consider moving the popup DIV inside the FORM element?

Replies(11)

watusiware

Re: jQuery Mobile Compatibility with .Net - Move popup widget's DIV to the inside the form tag

5 years ago

Bugs and feature requests go here:

https://github.com/jquery/jquery-mobile/issues

You will have to explain it more throughly, as almost nobody here uses or knows anything about .Net. What's a Postback? What's a Viewstate? I haven't a clue, and neither does almost anybody else.

I have observed (from posts over a period of time) that it seems particularly difficult to get .NET's JS code to play nice with JQM, or vice-versa. We get lots of questions, but few answers on getting them to work together nicely.

Since you have a workaround, I would go with the workaround.

JQM works with the HTML/CSS/JS it's sent from the server. It doesn't know or care about backend frameworks. Try to explain your case in terms of what JQM has to work with (the DOM), rather than whatever goes-on on your backend.

sandygett..

Re: jQuery Mobile Compatibility with .Net - Move popup widget's DIV to the inside the form tag

5 years ago

Thanks for your feedback, and I'll repost this as suggested. While I'm at it, here’s some additional background for those not familiar with .Net: In ASP.Net web pages, each time the user interacts with a control, the web page basically executes a “submit” back to the server (a “postback”). Postbacks mostly happen when buttons are clicked, but other controls can optionally do so, such as when a drop-down list is selected, or a text field is changed.

When the page is submitted via a postback, the values of all fields are available to the server-side code via the usual POST. The server may do something with this information, and the page is sent back to the user and displayed again. The state of each control is passed back and forth in a hidden field called the “ViewState.” This way, when the page is redisplayed, the user sees each control restored rather than starting all over each time with default values. This description is way oversimplified. If you want to know more, just ask Google or start here: https://msdn.microsoft.com/en-us/library/ms972976.aspx

I only mention all this because it’s pertinent to the original issue. In ASP.Net, all controls (including the ViewState’s hidden field) are stored inside the FORM section. The value of any controls outside of the FORM are not saved in the ViewState. So, when the popup widget moves the controls in the popup’s DIV from inside to outside the FORM, it breaks the ASP.Net model.

jQuery Mobile works great with ASP.Net, with just a few restrictions. We have a production application that uses the two together, and we don’t have any complaints – JQM is a great way for ASP.Net to work with mobile devices.

jakecigar

Re: jQuery Mobile Compatibility with .Net - Move popup widget's DIV to the inside the form tag

5 years ago

Hello Sandy,

Have you considered adding a form attribute to the <input>s, <select>s, and <textarea>s on your page to keep them in the <form> even though they have been moved outside? Microsoft doesn’t support it yet. But all other browsers do.

Can I use... Support tables for HTML5, CSS3, etc

The status of Form attribute in Microsoft Edge is In Development - Microsoft Edge Development

I hope you will be an active participant here on the JQM forum. Especially for the .Net questions. Nobody here seems to know as much as you do.

JΛ̊KE - Forum Administrator

watusiware

Re: jQuery Mobile Compatibility with .Net - Move popup widget's DIV to the inside the form tag

5 years ago

Sandy,

Are you able to use JQM Ajax page requests/transitions?

The reason I ask is (from posts here) because .Net developers seem to often give up and use data-ajax='false' on page changes, which negates much of what is good about JQM.

If you have the time, a post about how to make JQM and .Net play nicely together - or even just a few links to articles about same - would be much appreciated!

sandygett..

Re: jQuery Mobile Compatibility with .Net - Move popup widget's DIV to the inside the form tag

5 years ago

@jakecigar: Brilliant idea, I had forgotten the form attribute. I tested it, and it does indeed work in Firefox and Chrome, but not IE11 or Edge (yet). So maybe it will be good option when & if MS gets their browsers a little more up-to-date.

@watusiware: I haven't been using AJAX methods with JQM much, as JQM+ASP.Net works well without it. I sometimes do on pages where it matters (and it's probably a good idea), but it's more development work.

I admit I use data-ajax='false' myself in most cases. It's not terribly efficient, but faster devices and mobile data networks balance that out. It's kinda like using a big hammer to force the square peg into a round hole, but it works invisibly to the user and saves me time.

petitbarz..

Re: jQuery Mobile Compatibility with .Net - Move popup widget's DIV to the inside the form tag

5 years ago

Well I have extensively used .NET and JQM. First with Web Forms, and now with ASP.NET Core.

Personally I went another direction than what you describe, for a number of reasons. Let me describe it here, and see if it is useful to you Sandy.

My first step was to drop the .NET postback alltogether and use Ajax method posts instead. When you use the Postback, you are effectively posting all data (viewstate) from the form to the server, and then recreating the web page again. That does not give you the best mobile experience, and you run in to issues as you described. I am not sure you can solve your need using JQM this way.

So I created a simple function PageMethod that I call when I want to handle the contents of the form, either at submit of the form, or after a change in an individual control. The function does the ajax call for all controls on the page. In the Web Form, I created WebMethods that handle the call:

For example, I have a case where the use makes a selection in a list, and then the second dropdownlist get filled based on the selection. The selection in this example is testId.

PageMethod("Client.aspx/GetNormGroupsByTestID", {"testId":testId}, getNormsResponse)

Then in the .NET code I have a WebMethod:

[WebMethod(EnableSession = true)]
public static List<NormGroups> GetNormGroupsByTestID(string TestId)
//called from script to get the Normgroups
{
.... prepare the list
return normGroups; //return the list
}

Then in Javascript I fill the second drop down list:

function getNormsResponse(response) {
//Get the Normgroup dropdown, this is the respons handler
var normgroups = (typeof response.d) == 'string' ? eval('(' + response.d + ')') : response.d;
var ddlNormgroups = $('#ddlNormgroups');
ddlNormgroups.attr('disabled', false).children('option').remove();
if (normgroups.length == 0) { ddlNormgroups.attr('disabled', true).append('<option value="0">Selecteer Vragenlijst...</option>'); }
for (var i = 0; i < normgroups.length; i++) {
var val = normgroups[i].NormGroupId;
var text = normgroups[i].NormGroup;
var def = normgroups[i].Default;
ddlNormgroups.append('<option value="' + val + '">' + text + '</option>');
if (def) { ddlNormgroups.val(val); } //set the default
}
}

Using .Net and JQM in this way allows you to use everything JQM has to offer, including the popups, styling, but also page transitions and even page caching.

I have now migrated the ASP.NET side to Asp.Net Core. Here you can do an even better and easier integration, because Asp.Net Core allows you to write native HTML, rather than controls that generate HTML. Again I use Ajax methods to communicate with the server, now through GET's or POST's to the controller:

in JS:

PageMethod("ClientGetNormGroupsByTestID", { "testId": testId }, getNormsResponse, "GET")

and in c# on the controller:

[HttpGet]
public async Task<List<TblTestsNormGroups>> GetNormGroupsByTestID(string testId)
{
var user = await _userManager.GetUserAsync(HttpContext.User);
return await TblTestsNormGroups.Find(testId, user);
}

Hope this helps

Pieter

sandygett..

Re: Re: jQuery Mobile Compatibility with .Net - Move popup widget's DIV to the inside the form tag

5 years ago

I agree, using AJAX methods makes for a better mobile experience. The downside is that it's a lot more work.

In an example similar to yours, we have a pop-up with several options for the user, including checkboxes and drop-down lists, where a user make his/her selections and clicks a "continue" button. The pop-up disappears and the main page is redisplayed using the new options.

If we rewrote the page to use AJAX, we would have to write a lot of new code. By using something closer to traditional .Net methods, we can reuse code for complex things like ListViews and such. In terms of development, this is a lot faster and more reliable than writing a bunch of new code.

So, my request for a simple change in the behavior of the JQ pop-up widget would greatly simplify development in a .Net environment. Developers would still have a choice, depending if they were more concerned about faster development or a faster mobile experience.

Thanks for your feedback!

petitbarz..

Re: jQuery Mobile Compatibility with .Net - Move popup widget's DIV to the inside the form tag

5 years ago

Well it greatly helped me to move to Asp.Net Core, which is the future for Microsoft.

But about your original request, don't you place the popup widget div yourself? Why not put it inside the form? I can't test it, because I am not using forms at all.

sandygett..

Re: Re: jQuery Mobile Compatibility with .Net - Move popup widget's DIV to the inside the form tag

5 years ago

I need to look more at Core. I assumed it was just refactoring .Net to use fewer components when you don't need the whole kit & caboodle.

And yes, I do move the widget to the <form> (see example in OP), and that's my workaround. But it's an extra step and not an option when you open the widget in the API.

petitbarz..

Re: jQuery Mobile Compatibility with .Net - Move popup widget's DIV to the inside the form tag

5 years ago

Yes, everything MS will develop now will be based on Core. Assume some major relearning and book reading. I have always skipped MVC. Core takes the principles of MVC, but with a much better implementation. I wanted Cross Site Request Forgery protection and authentication build in. There is a clear separation between the page view generation (Views, with code that resembles PHP functionality), and Controllers that handle the web routes. It works very nicely. You can generate code for Windows and various Linux flavors. Version 2.0 is just out, it requires VS 2017 15.3.

sandygett..

Re: Re: jQuery Mobile Compatibility with .Net - Move popup widget's DIV to the inside the form tag

5 years ago

Thanks much!

Top Reply

Response title

Attachments

jQuery Forum

jQuery Mobile Compatibility with .Net - Move popup widget's DIV to the inside the form tag

Replies(11)

Re: jQuery Mobile Compatibility with .Net - Move popup widget's DIV to the inside the form tag

Re: jQuery Mobile Compatibility with .Net - Move popup widget's DIV to the inside the form tag

Re: jQuery Mobile Compatibility with .Net - Move popup widget's DIV to the inside the form tag

Re: jQuery Mobile Compatibility with .Net - Move popup widget's DIV to the inside the form tag

Re: jQuery Mobile Compatibility with .Net - Move popup widget's DIV to the inside the form tag

Re: jQuery Mobile Compatibility with .Net - Move popup widget's DIV to the inside the form tag

Re: Re: jQuery Mobile Compatibility with .Net - Move popup widget's DIV to the inside the form tag

Re: jQuery Mobile Compatibility with .Net - Move popup widget's DIV to the inside the form tag

Re: Re: jQuery Mobile Compatibility with .Net - Move popup widget's DIV to the inside the form tag

Re: jQuery Mobile Compatibility with .Net - Move popup widget's DIV to the inside the form tag

Re: Re: jQuery Mobile Compatibility with .Net - Move popup widget's DIV to the inside the form tag

Statistics

Tags

Actions

Related Posts