I have a proof-of-concept that is thoroughly and utterly broken here:
http://jsfiddle.net/floyd_may/FAmxj/
I'm hoping the intent behind this is evident. Basically, I want to use #editPage to edit elements on #mainPage one at a time. However, as soon as you click the 'Back to Main Page' button, the main page is empty.
Can I get some guidance here as to how to make this work?
Try using the pageinit event instead of pagebeforeshow: http://jsfiddle.net/FAmxj/11/
With pagebeforeshow, multiple models are bound to #mainpage.
Related
I'm new in Rails, I have a Meal model which has many Products. Meals are assign to User (maybe this is important for a concept). In meals/new.html.erb I want to create new Meal as follow:
Click the button "Display Products"
On the same page (meals/new.html.erb) open modal (pop-up) with all products assigned to current user ( I have help method for current-user). It should be displayad like a list or grid with checboxes for example.
Then user can check few products and click "Confirm".
After that in meals/new.html should be appeared list of chosen products with additional input to fill their quantity.
So I have two problem here.
How should I display modal? Is needed any Ajax (I'm not so familiar with this technology)
How can I pass products between view and modal?
Could you help me a little to achieve these goals?
Regarding your first problem, displaying the modal is fairly straight forward. Essentially you will create a div with the proper bootstrap classes to be hidden when the page is loaded, and then create a button that makes it visible. I would recommend either reading over the W3Schools entry on modals, or from the appropriate part of the bootstrap javascript documentation.
Regarding your second question, this depends on exactly what you mean. The modal is part of the view, so if you're only trying to put information that is currently on the modal back onto the "page" behind it, you can do so fairly simply with javascript (copying content out of one element into another, or updating states of inputs). If, on the other hand, you're trying to use the modal to retrieve information from the server (for instance if you wanted to show a list of possible options, and then display detailed information about the selected items from the database) that would require Ajax.
If you have any snippets of code that aren't functioning as you expect, feel free to add your View to the question. In cases like this, usually the best way for us to provide help is for you to take an early crack at this, post the relevant code, and then seek answers for the things that behave unexpectedly.
I hope that helps.
I have quite a big application, sometimes with pretty complicate data being created by the user (on the way to the database the data is being altered a lot). The issue is, that any time I need to alter the code, I get stuck for quite a few hours before finding the problem.
Actions in my app:
User opens the jquery modal dialog
There is a form in the modal dialog
User alerts the data and saves it
About app:
The application contains of one site with a table and several buttons
Each of these buttons open a different modal dialog
Each form submission is handled via ajax -> cakephps this->js->submit
How I wrote the code:
For each modal dialog I created an element
After clicking the button I open the element as a jquery modal dialog
Lots of these modals gain information via for example: "On click/on double click etc" events.
My problem:
Every time I alter the cakephp code which is called by $this->Js->submit I feel like putting a gun to my face and pulling the trigger.
I dont know of any easy way of how to debug variables in these functions (cakephps debug doesnt show anything ofc -> the view of those ajax/php functions are not in the main site)
Dont know if firebug has any features for debugging php, but I dont know of any.
The only thing that works for me a bit is commenting out lines of code and putting an alert in the success like this to maybe sometimes get to the values, but it doesnt feel right.
Being used to write code in c++/java and printing or debugging with breakpoints makes me frustrated, when I use such a modern programming language and try to guess out where the bugs might be..
Most errors:
Mostly null pointers or checking !isset index being accessed, but since I know of no way of printing these errors from modals no checking on the indexes helps me.
Use FirePHP it is a great enhancment of firebug. Works well.
I want to implement a jQuery Mobile application without browser history navigation (feel free to ask why). I can generate pages on the fly, insert them into the DOM, and bring them up with changeHash set to false, then clean them up in the pagehide event handler, and all is well in the world. Until I use a widget like selectmenu that invokes a dialog. The dialog's close function explicitly invokes window.history.back(), and my world implodes.
Is there a simple workaround for this issue?
If not, should jQM be adapted to gracefully support nav-less apps, or is jQM fundamentally unsuited for this kind of application?
http://jquerymobile.com/test/docs/api/globalconfig.html
Try setting hashListeningEnabled to false
I learned not to use changeHash=false for this purpose. Make sure that the current page is always at the top of the history stack. In my case, it's the only item on the stack except when dialogs are invoked. So far, this seems to be working like a champ:
function showNewPage($page) {
$page.appendTo($.mobile.pageContainer);
$('.ui-page-active').bind('pagehide',function(){$(this).removeWithDependents()});
$.mobile.changePage($page);
$.mobile.firstPage = $page;
}
The new page is created without a hash, so the URL never changes. Since I'm actually replacing the first page, I had to update $.mobile.firstPage. The call to removeWithDependents() instead of remove() cleans up the dialogs that are created by selectmenu.
Fortunately, it's a lot more concise than I anticipated, just a bit of a pain for a newcomer like me to piece together. I've seen a few comments advising not to "hack" jQM in this way, but I think there's way too much value in jQM to constrain it to a traditional server-dispensed presentation model.
Knocked-out a simple jQuery Mobile site with [logon -> index -> content] pages.
If I use the back button to the logon page, I can't escape no matter what I do - forward, back, filling it in, nothing.
I'd like to remove the #logon page from the navigation, so you cannot get back to it without typing it in, or logging out - any advice?
Easiest way to keep a page from showing up in history (with jquery mobile) is show that page in a dialog. This model works particularly well in situations where the content that would be in a dialog is either tangential to the main content or some sort of interrupt (which the login process is). See an example here. DISLAIMER: this is not the right way to implement content like this in the long run, it is only meant to show the effect of using a dialog in a login process to bypass insertion into history.
Another (more manual) route would be to use the a normal jqm page and do your login by way of an ajax posting. If the response came back as successful, then use location.replace() to remove the the current (logon) page from history.
I ended up removing the ajax navigation full stop and sticking to manual, not as pretty but headaches avoided!
When you get a new badge on stackoverflow.com, a bar appears at the top of the screen informing you of your achievement. It sticks around until the user closes it.
I rather like that system of informing the user about new news related to the site or their account. It's fairly unintrusive, but still clearly communicates the information. Even if all users receive a notification this way, it sticks around for each user until they have acknowledged seeing it.
I'm running a system using Ruby on Rails on a PostGres database. What's the best way to implement a similar system on my setup?
Edit: Just to clarify, I'm interested both in the server side and client side of the setup.
The effect can be accomplished with jQuery and the slideDown method (http://api.jquery.com/slideDown/). Set an onClick event to make the element slideUp, hide, or hit an AJAX call to let you know that the user got the message and dismissed it.
You could set the contents of the element (I'd go with a div) via an AJAX call, or you could simply populate the div with the appropriate message when generating your page, start the div off as hidden, and then kick off the slideDown method when the page load is complete via a $(document).ready definition (http://think2loud.com/jquery-document-ready-howto/).
You could use something like the jquery popup bubble extension: http://www.farmcode.org/post/2009/04/06/jQuery-popup-bubble-extension.aspx