I use this in my Index.aspx:
<%= Html.StandardOverlayCreateButton() %>
<div class="apple_overlay" id="overlay">
<div class="contentWrap">
</div>
</div>
Which is translating into this:
<button type="button">Create</button>
<div class="apple_overlay" id="overlay">
<div class="contentWrap">
</div>
</div>
When you press the button the popup with the Create.aspx occurs. Look at this -> Loading external pages into overlay
For me it seems that the overlay performance is slow.
And there is some strange behaviour, because I can nearly everytime see the old values in the popup. If I click the edit button and then close the popup and click another edit button, I can see the old values for a short time.
Is there a better approach of doing a popup using ASP.NET MVC and jQuery?
Are there tutorials?
Everything is being done client-side so the performance is purely down to JavaScript and jQuery code and nothing to do with any server-side code such as ASP.NET MVC.
You're using quite a few sophisticated effects with that popup, I see <div /> resizing animations, transparency, drop-shadows, the works. JavaScript performance has come on leaps and bounds with recent browsers, but it's performance but still be slow for doing very extravagant visual effects. Have you tried tuning down the visual effects with whatever modal popup JavaScript library you're using.
"And there is some strange behaviour,
because I can nearly everytime see the
old values in the popup. If I click
the edit button and then close the
popup and click another edit button, I
can see the old values for a short
time."
I assume the pop-up is actually loading an iframe which points to the 'Employee/Create' page. My guess is that when the pop-up is closed and then re-opened again with a different page, the previous page will still be sitting in the pop-up's iframe, and the "load-new-page/url" event isn't fired until the pop-up re-appears, hence why you're seeing the old page very briefly.
I had a similar problem to this, you need to tune the modal pop-up behaviour slightly so that it first loads the new page then opens the pop-up, rather than the other way around which is what it's currently doing. My solution to this was a bit hacky in that the page inside the iframe has an $(document).ready({}); event that called some JavaScript function the the iframe's parent to load the pop-up. eg. put this in your page that sits inside the iframe:
<script type="text/javascript">
$(document).ready(function()
{
window.parent.openPopup();
});
</script>
Then you need to define the 'openPopup()' JavaScript method in the iframe's parent (ie. the main page the lists your records).
do you really need the animation?
maybe you don't need the effect: 'apple' attribute?
Effects are slow, especially on IE.
http://flowplayer.org/tools/overlay/index.html#api
Look here - different post but answer is related to your question about MVC & jQuery.
Related
I am stuck on this, I am trying to unhide / hide jquery mobile flip switches using knockout. When knockout action is applied the jquery mobile controls stopped working. Could you please help me on this
here is the code
target.formattedValue(target());
return target;
and jsFiddle where the third control would hide if female selected but when male selected again the control disabled and not working
http://jsfiddle.net/FU7Nq/45
San.
When inspecting the rendered DOM of the following element:
<div data-bind="if: isMale">...</div>
you can see that after the radio button is changed to female, then the entire rendered HTML of that DIV is removed. Then, when switching back to the male, the content of that DIV is rendered back, but is this means that events are still attached to those slider HTML elements? I'm not sure how the way jQuery mobile attached the events, but it seems to me that this is the problem, cause you are clicking on the slider, but no action is taken. You can workaround this by recreating the Slider again:
$("#select-ifmale").slider()
Eventually this can be a bug in jQuery mobile. Sorry for suggesting this as an answer, but I don't have enough points, just to comment on your question.
I'm getting this appearance in my form buttons - notice the double text. I'm using a style sheet generated from jQuery Mobile Download Builder (navigation, location push and transitions selected only). It seems to be jQuery Mobile that is causing this. I've tried data-enhanced="false" on the page div but doesn't seem to do anything. I don't want any styling from jQuery, just the navigation for graceful degradation. For styling, I'm using Bootstrap.
See button - http://ma.rtyn.biz/bizness/homepage2/form_button.png
<button type="submit" class="btn btn-default">Add</button>
Can anyone tell me how I can stop this from happening? I'd prefer to use a button tag rather than a link as I want it to submit the form without JavaScript.
I thought my external panels (jQM 1.4) were working great, until I added more content to them, and now, I can see the external panel underneath my app's home page.
If they are short, it's fine, but once they reach a certain height, you can scroll down on the home (first) page and see the panel's contents.
The new docs aren't much help :/
I've tried a lot of variations... but here's a basic example that will trigger it:
<div data-role="panel" id="imExternal" data-theme="a">
<div style="height: 1200px; background: #000;">
<p>this is the panel, code is tight and outside of any containing page divs.</p>
</div>
</div>
*update: I'm specifically seeing it in my app with a popup open, and then clicking on an input field to show the Android keyboard. It seems to resize the page, which shows content from another page (external panel) underneath it.
You should enhance External widgets manually, as they don't get enhanced when page is created.
$(function () {
$("[data-role=panel]").panel();
});
Also, elements / widgets inside External panel should be enhanced as well.
$(function () {
$("[data-role=panel]").panel().enhanceWithin();
});
Actually... DON'T use popups in external panels. Ultimately, that was the root cause of this.
I solved this by setting the css height of the page in question to the window height, which prevented the underlying panel from showing below it.
$('#page').css('height', $(window).height());
For a JQuery Mobile site, I need an new image to load on page navigation. The image only displays on the homescreen.
So for example, you load m.smellyeggs.com which has image_A.png as the top banner. You select menu item 1, then press back and now image_B.jpg is showing as the top banner.
I was able to get it working using cookies. I get an array of potential images, then use cookies to traverse the array. This works on page reload, but any cache loading of a page (e.g. href="/" or using "Back" in mobile or the browser) would not call the javascript. Thus the image would not actually alternate.
var images = new Array();
<% banner_mobile_uris( controller.conference ).each do |url| %>
images.push( "<%= url %>" );
<% end %>
inc_banner_cookie();
load_banner();
To fix this, I use the following code, which deletes the image, forcing an image refresh whenever the homepage is loaded.
$( 'a' ).live( 'click', function( ev ){
var banner = $('#m_banner').load(htm_file);
banner.empty().remove();
});
This code removes the "Back" button from any subsequent page navigation that occurs.
Well that's unacceptable! Any advice on a better approach? I'd rather not implement my own "Back" button unless that is absolutely necessary.
Thanks for reading (and hopefully helping ).
The answer lies in using pageinit to detect successful JQuery Mobile page loads...
$(document).on('pageinit', function(){
inc_banner_cookie();
load_banner();
});
This will not disable the back button. And cause image reloads on any type of page navigation. Well almost any type...
As it turns out, this appraoch is fragile when AJAX redirects occur, and subsequent pageinits may not work. See my question concerning this issue.
Are there any issues surrounding the use of contenteditable div elements in jQuery UI that lead to the caret not appearing. Here is a bit of code to show what I mean
<div id='diaHTMLEd' style='display:none'>
<div id='divRTE'></div>
<!--iframe src='xrte.html' height='300' width='500'></iframe-->
</div>
function openHTMLEditor( {
$('#diaHTMLEd').dialog({
height:200,
width:450,
modal:true,
open:addRTE
});
}
function addRTE() {
$('#divRTE').html("<div contenteditable='true'>Testing</div>");
return;
}
Explanation - I am opening up a modal jqUI dialog and in its :open event am adding a contenteditable div element to an inner div in the dialog. The text shows up but it does not become editable when clicked. If I replace that code and use the commented out iframe instead which contains an contenteditable drive everything works just fine.
It looks like there is something that stops content from becoming editable inside the dialog.
This question may be lacking in some detail but given the complexity of my application I am not really in a position to provide more representative code. Any help would be much appreciated.
A note for anyone running into this thread. After much work I eventually discovered the issue. Using contenteditable with jQuery UI dialogs is not by itself a problem. The problem in my case came down to some sort of conflict with the excellent jstree plugin which I am using.
As a general rule - in complex applications that use multiple plugins you are probably better off sandboxing contenteditable content inside an iframe