I'm converting my site from using jQueryUI to jQuery Mobile, and I'm having some trouble.
I have a page that lets users add new timesheet entries. They click the "Add" button and it retrieves a Partial View from the server right onto the page.
The problem is that jQuery Mobile is not applying to any of the elements in the Partial View.
How can I force jQuery Mobile to process my elements after they've been inserted into the page?
The short answer is that you can just trigger the create method on the parent element of where you inserting your partial view.
For example $('#container').trigger( "create" );
Alternatively most widgets can be manually initialized by calling them on the element, for example for a listview: $('#myListview').listview(). This can be useful if you have only a few elements that need to be enhaced and you don't want to traverse all the child elements of the container. You should also know that for many widgets there is also a refresh method which you can call if you add elements to it after it has already been initialized for example $('#myListview').listview('refresh).
Also have a look at the following Q & A from the JQM docs which deals with this issue and for an explanation as to why it is necessary to call these methods.
Question: Content injected into a page is not enhanced.
Answer:
jQuery Mobile has no way to know when you have injected content into a
page. To let jQuery Mobile know you have injected content that must be
enhanced, you need to either make sure the plugins are called to
enhance the new elements or trigger("create") on the parent container
so you don't have to call each plugin manually.
Related
i want to add an autocomplete function to work in one of my column suppose name.It is easy to do using items.but how can i do it in the report.
Since a report doesn't contain Apex items, you can't do this with the built in features. Ignoring any possible plugins that may already be available, you can do this with jQuery UI, specifically the Autocomplete widget. Apex already includes some of the jQuery UI suite, but you may need to download the Autocomplete widget from the jQuery website.
This will need some custom work on your end. This really isn't that hard if you know how to use jQuery.
Download the jQuery UI Autocomplete widget and include it on your page. You can put just the .js file for that in your Application Shared Items. I have the whole jQuery UI library in a separate place on the webserver because I use different parts for different projects.
Source in that widget in the page properties.
You'll need to create text items with apex_item.text in your report.
You'll need an On Page Load dynamic action to attach the Autocomplete widget to your text items.
For the autocomplete source, if it's short, you can just use a Javascript variable that you put on the Apex page. If it's longer or you need to find the list at run time, you can use a function that calls apex.server.process.
If your report has Partial Page Refresh turned on, make sure the DA in step 4 has Dynamic scope, not Static.
Inherited a Sitefinity website. There's a news list page, which I discovered is reused by the news detail pages to display content. If I update the list page, the changes are reflected on the detail pages.
Sometimes.
I have a content block that contains a "header" text - updating this in the list page is replicated across the details pages. Adding a javascript widget to the page to inject some custom javascript replicates across the details pages as well.
Adding a new content block or css widget does not replicate across the details pages.
Is there some rhyme or reason to this behavior that I'm missing?
My specifics:
I've successfully created widgets in the MVC several times now. I essentially need to add a new widget to just the news pages. Which seemed simple enough until I discovered that news pages are not individually created pages like... well, pages... but instead are just a content piece that is dynamically inserted in the news widget on the "parent" listing page. At least as far as I can tell that's how it appears to be working.
Adding my widget to the page didn't work, as I explained above. I then tried recreating it in the page itself using javascript, content block, and css widgets, at which time I discovered that the javascript is the only one making it to the details pages. I imagine this has to do with the way javascript widgets actually make it to the page - their placement is selected in advanced options, rather than simply appearing inline.
Sitefinity widgets go beyond presentation, and actually control routing.
As such content widgets (baseline or custom) have two 'modes' that they operate in: list and detail. Slugs for details are automatically generated in the following format.
/News
/News/{News-item-slug}
Of course, a list and a detail should look very different. To accommodate that, the widgets have two separate configurable templates.
So, add your custom html and javascript to the appropriate template to have it only apply in a given mode.
Is there a way by which I can duplicate or clone dijit widgets?
Basically, idea is to improve page rendering performance by minimizing widget creation time.
We have a single page web application and we do not reload the entire page whenever the user performs any action.
The flow of events is as follows,
The main page is loaded by the browser. It contains a dijit ContentPane which acts as a master container and displays the entire page using various other dijit widgets like textboxes, tabs, datefield, Enhanced grid etc.
The user performs an action (e.g. click on a dijit button)
The application sends an ajax call to server which processes the button click event and generates UI of the next page.
Browser receives successful response from ajax call and calls refresh method of dijit ContentPane. Which triggers destruction of existing widgets and new set of widgets are created and placed at appropriate position. (instead of refreshing the entire page)
The user again performs some action and again the refresh method is called which triggers destruction of existing widgets and new set of widgets are created and placed at appropriate position.
Because of such architecture the browser has to destroy existing widgets and recreate them again and again. Which results in slow performance.
The idea is to have a set of widgets always readily available on the browser clone them and place at appropriate position and update them instead of recreating each time.
Yes this is possible with something called _AttachMixin.
Basically there is no getting around the fact that your widgets would need to attach event listeners to the HTML Document. What can be cut out though is the time in the Dijit Widget's lifecycle to generate the DOM. As we well know, simple Dijit widgets like a dijit/form/Button has a div inside a div inside a div etc.
This is explained in detail here http://dojotoolkit.org/reference-guide/1.9/dijit/_AttachMixin.html
Here is an example using Node.JS as a backend. http://jamesthom.as/blog/2013/01/15/server-side-dijit
This is a tough problem and this concept isn't explained very thoroughly. If you have a backend that is not Node.JS you have to manually make the widget string and pass it as a response to your AJAX and an follow the example from the 1st link (Ref Doc)
We have had lots of widgets of our app render nicely within the client side. A far less complicated approach would be to simply show / hide (instead of render and destroy) widgets as and when they are needed. I assume that you app's access policy would focus on data and not which person has access to which widget.
in a ASP.NET MVC application that I am currently working there are multiple places in a single page that the user can click. So there is a main menu that's in _layout and for each inidividual page there can be links associated with that page.
I am trying to use a loader which will be shown on every click, mainly where the response takes time but for now it's for every click.
For example in the home page, from the main menu the user can click Students and the loader should come up and hide when the page loads completely. On the students page there can be an ajax call that gets data and binds it to the grid.
So from the time the user clicks on a menu link and the page loads the loader is active/shown. It's hidden once the page loads completely.
The grid can have editing functionality and when the user clicks on any of the CRUD links the loader should show and hide.
I am looking at suggestions on implementing this requirement.
If I can hookup any of the MVC events, that would be cool as I want less of Javascript/jQuery stuff but if Javascript/jQuery is the way then that's fine too.
Currently I don't have anything so anypointers are appreciated.
Assuming AJAX is being used
I don't see a way to keep this server-side without a middle page with a redirect being used (which would just be unnecessary bloat). And, since you're not opposed, you can implement this fairly easily using jQuery and something like blockUI.
I'll let you play with refining the binding to only links you care about, but for now we'll assume all links. Also, MVC should be using jQuery for things like Ajax.Actionlink so we can hijack events like $.ajaxStart and $.ajaxStop:
function showLoadingScreen(enabled){
return enabled ? $.blockUI() : $.unblockUI();
}
$(document).ajaxStart(function(){
showLoadingScreen(true);
}).ajaxStop(function(){
showLoadingScreen(false);
});
Later on you can maybe apply classes to the links you care about and just bind to them (instead of $.ajaxStart) but I'll leave that up to you.
I have a two column css layout. Left container holds the dynatree. It's pulling from a local json file. The right side will be the content, populated by clicking on a node on the dynatree.
What I saw on the dynatree examples was the usage of an iframe with urls in the tree.
Is using the iframe the "best" way to do things? Is this the only way to populate the content?
I'm probably being silly, but iFrames don't usually seem like a good way to go on things. Is there a better way? Should I be using ajax (can I?)?
http://wwwendt.de/tech/dynatree/doc/samples.html
"Example: URL navigation and iframes"
Thanks.
i use Div containers, with a 2 columns layout.
The tree uses ajax to load initially and the later expanded content.
When a node is activated, i reload page content and the right part is updated with data associated to the node. tree is still loaded from ajax.
You can do it this way, or load right content with ajax.
I was able to get this to work by placing my ajax in the onactivate event of dynatree:
$("#response").load("myname.php?name=Johnny&dummy=" + new Date().getTime());
the date gettime was to defeat the ie caching problem.