I have a website built with jquery mobile(Single page).
I have something like a wizard: e.g. search -> select -> select -> search -> menu -> search -> search. Basically here are only three pages, but i need to change some of them to itself, like search to search, so it will be in a history and to rise a pageshow event etc...
How can i do it?
$.mobile.changePage("#page1");
doesn't work in this case: here is an example to playaround.
Have you tried the allowSamePageTransition option as discussed in the documentation?
Related
This should have been pretty straight-forward, but none of the solutions in StackOverflow doesn't seem to work for me...
Using jQuery 2.1.0, I've set up an autocomplete using an Ajax source, autoFocus: true, and a select: function (event, ui) { ... } to provide me with key/value pair combinations.
As soon as I start typing in the input field, I get the correct options as a DDL, which I can then select using the mouse.
However, I would now like to programmatically trigger the autocomplete search, and then SELECT the first option (if available).
I trigger the search like this:
Preparer.autocomplete('search', LoginName);
The available choices show up correctly, but I can't seem to be able to select the first one programmatically!
I tried calling .select(), I've tried triggering keypress 13 and 9 within the control, and even tried performing the actions within a setTimeout function to make sure that the dialog was rendered correctly!
I even tried setting the option { selectFirst: true }, but still nothing...
Is there something else I could try??
As in the comment above:
You can trigger a click on the first menu item:
$("#autocomplete-id").data("ui-autocomplete").menu.element.children().first().click()
Keep in mind: Triggering a select will also close the menu, which seems counterintuitive. It'd be better to intercept the data in source and trigger your custom callback there, and not bother with select at all.
Search
$('#autocomplete-id').data("uiAutocomplete").search($("#autocomplete-id").val());
&
Select
var results = $("#autocomplete-id").data("ui-autocomplete").menu.element.children()
.first().click()
I came across this site:
https://tutorials.railsapps.org/rails-tutorial
And was wondering if someone could explain how the buttons would be set up to filter?
I guess I'm curious also - is an object being displayed and filtered? What is going on here?
What you're seeing is not Rails but Javascript.
When you click the 'Beginner' button, it has an attribute data-toggle="Beginner" and uses javascript to show only the elements below that have a class Beginner.
It would look something like this using jQuery in coffeescript:
$('.filters li[data-toggle]').on 'click', ->
toggle = $(this).data('toggle')
$("div.tutorial:not(.#{toggle})").hide()
$("div.tutorial.#{toggle}").show()
To serve up the html classes would be Rails' job.
I'm following through with Agile Web Development with Rails 4 and section 11.5 teaches how to make images clickable. I followed through with the lessons and below is my store.js.coffee
$(document).on "ready page:change", ->
$('.store .entry > img').click ->
$(this).parent().find(':submit').click()
The above will allow me to click on pictures on my store page to add specific items to the cart, but it will "click" it twice, therefore adding two items to the cart instead of only one. The regular "add to cart" button works perfectly, so I am not quite sure where the problem is.
I am thinking that the above code isn't enough to pinpoint the problem, but I don't know which other sections of the code to post, so please let me know if you need additional information. Thanks!
The error is on the first line of the script.
You need to separate the elements ready and page:change with a coma.
Try it like this:
$(document).on "ready, page:change", ->
It should work.
My guess is that your click is probably triggering another click action on .store, .entry, or img. The fix would be to prevent the click's default action.
Try using this:
$(document).on "ready page:change", ->
$('.store .entry > img').click (event) ->
event.preventDefault()
$(this).parent().find(':submit').click()
The full code segment with the comma from vinibol12 is:
$(document).on "ready, page:change", ->
$('.store .entry > img').click ->
$(this).parent().find(':submit').click()
I confirm that this fixed the double submit issue for me in agile-web-development-with-rails-4_p2_0 section 11.5
I have a hackish sort of setup in which I am displaying some information on a list of companies and then clicking one of those company names displays a list of all leads generated for that company. I accomplished this by passing the company_id through the params. This works beautifully and I can search and filter to my heart's content until I click 'Clear Filters' and it strips everything, including the company_id. The result is an Oops page, because the system doesn't have a company_id to use to generate the list of leads.
I attempted something like this in the controller for that page
after filter: company_id, :only => :index
def franchise_id
params.merge({:franchise_id => params[:franchise_id]})
end
but this only injects the ID back in after I filter something, and not after 'Clear Filters' was clicked.
Is there a way to override the 'Clear Filters' behavior for just this page and force it to save the company_id?
Active admin currently does this:
$ ->
$('.clear_filters_btn').click ->
window.location.search = ''
You could manually remove this click event to do whatever you want:
$ ->
$('.clear_filters_btn').off('click').click ->
# your stuff
Though you might want to create a ticket on Github so we can discuss the merits of changing the button's behavior.
UPDATE 1
I wrote up some code to selectively strip out Active Admin's params, leaving yours in place:
$ ->
$('.clear_filters_btn').click ->
location.search = location.search.split('&').filter(
(s)-> not s.match(/^(q\[|page|commit|order)/)
).join '&'
Put that in active_admin.js.coffee and you'll be good.
UPDATE 2
If you want to apply JS to a specific page in Active Admin, you can check on page load the CSS classes applied to the HTML <body> tag to tell if it's the one you want. Notably, AA adds the current controller verb (index, show, etc.) and the actual name of the resource in question. To apply this code only to the index page for companies:
$ ->
if $('body.index.admin_companies').length
$('.clear_filters_btn').click ->
location.search = location.search.split('&').filter(
(s)-> not s.match(/^(q\[|page|commit|order)/)
).join '&'
Previous solutions does not work for me so if anyone is still struggling with clear_filters_btn :
Here how I make it works :
Add this to active_admin.js
$(function() {
$(document).off('click', '.clear_filters_btn');
$('.clear_filters_btn').attr('href', '?commit=clear_filters');
})
I have a select option list and im using jQuery Mobile. My list is very long so Id like to give users the option of searching the list by typing in text.
Is there some native / jQuery Mobile way of adding a text search when you focus on the list? If not I guess instead on an input ill need to create a link to a new page with a filter list, and use javascript to populate the 'input' with the value selected.
http://jquerymobile.com/test/docs/lists/lists-search.html
The short answer is no, unless you want to go nuts editing the JQM code to add that feature to the select box. That being said, I also had this problem (with the select menus being way too long), and here's what I did:
For one scenario, I used an autocomplete search box (that had results drop down: http://jqueryui.com/demos/autocomplete/) in addition to the select menu, populated with the data in the select menu. That way the user could choose whether to use the select menu or search.
For a second scenario, I allowed the user to search for something, then brought up a menu (really a dialog plugin) with only the results that matched what they searched for.
Hope this helps.
Personally, I could not get the jqueryui autocomplete to work well with jQuery Mobile. But this autocomplete code from Andy Matthews worked well:
http://www.andymatthews.net/code/autocomplete/
Used in conjection with an input text field, it provides a way for users to type in a few characters and see a list of choices to select.