I'm using PJAX with Laravel.
My pages have multiple select2 inputs. When pressed back button of the browser, the page gets extra <span> added beneath the original input. This span seems to be a replica of select2's select2-container. However, the select input (html tag) itself is not being replicated and works fine with select2 initialized on it properly.
If repeated multiple times (go to one page, press back, repeat) each cycle adds one new <span> input. The navigation seems to be working fine otherwise.
Any help would be helpful. Thanks.
Related
I have multiple accordion-set's nested in side of each other, they make a types of multi-category sorted list. Anywhere from 3 to 5 steps into the accordion nests I can start having actual items (buttons), they are in reality stylized 'A' elements.
I'm able to get the nested accordion-sets to refresh on successful AJAX return, but can not seem to figure out how to get the buttons to refresh and take on the jQ mobile styling.
$('#main-market-list').find('div[data-role="collapsible-set"]').collapsibleset({refresh:true}); is what Im using for the accordion-sets, whats the button version of the same logic?
You could try $(".ui-page-active").trigger("create") to force JQM to restyle the entire page.So your buttons too will get styled along with accordion sets.
edit: you could try $('.button-class').button('refresh'); where button-class is the class name for the links which you would like to style.
I'm having an issue whereby I navigate around my site but when I return to the first (initial) page of the website, the DOM doubles up. I.E there are two div data-role pages with the same ID.
It's because as you navigate around your site, for some reason, JQM always keeps the first initial page in the DOM, but then when you return to it, it doubles up (and consequently your handlers on elements don't work because they are inside the hidden data-role="page" element and the new ones have no handlers..
Have I done something wrong here or is this a common problem one needs to work around in JQM? Thanks
I also don't understand why JQM holds onto the initial page... I thoguht it was supposed to hold on to the last
Please look at this issue: https://github.com/jquery/jquery-mobile/issues/2258
The first page will never be removed
So use
a href='#id' // jump to #id, which is already in DOM
but NOT
a href='index.html#id' // jump to 'create' a new one
I have a script that uses jQuery UI's graggable and droppable functionality.
Items are dragged from left panel into main area and dropped.
There are two scenarios:
Items are dropped into other boxes, preset on page load or can be dropped into main area to create a new box. The items can be moved between the boxes. Everything works fine with this setup.
In second scenario there are no preset boxes in main area. They are supposed to be created whn an item is dragged and dropped from the left panel. However, for some reason it only allows me to create one box. Here's an example.
My level of UI proficiency is not high enough to spot what the problem is.
Your problem is that in this code:
$.when(createEmptyStack()).then(function(data) { ... }
data is always "" meaning that you're attempting to add a new element to the page with the same id over and over again (your AJAX request to createEmptyStack is not returning anything in the response). This is why it works fine the first time; the id doesn't exist and so the code works as expected.
When you drag another item into the main area, the element may be successfully appended, but it has a duplicate id. This code:
putCardIntoStack(ui.draggable,newstackId);
(in the same block as the code above)
Is always called with the draggable object and just STACK as the newstackId.
In short, this is a problem with your server-side code not returning a stack id. According to Firebug, your AJAX request isn't returning anything at all.
I have an ASP.Net-MVC application that is mostly complete. However, I have one page that contains radio buttons. When that page is displayed in Firefox or Chrome, the radio buttons are displayed in a horizontal row (which is what I want). But when the page loads in IE, the radio buttons show up in a column. I am using the Html.RadioButton helper.
I have tried editing several of the css properties in the master stylesheet, but I have not been able to come up with a solution.
Have any of you encountered this before? If so, what could the solution be?
It would be handy #Jacob, if you could list what you have tried.
Have you tried the css display:inline?
Or have you tried putting them as <li>'s in a <ul> and then setting the display:inline on the ul or the li's?
I ended up just putting the radio buttons in a table row. It's not the most elegant solution, but it works all the time.
Well here's the problem:
I have a PHP index page which uses show/hide layers javascript. I am using the on menu.click function to show and hide content relevant to each menu. On.click all divs are hidden except the content for that menu item , which fades in. The content relating to each menu item are displayed within separate DIVS. The property is applied to all the text within all the divs.
See: http://jobe-group.com/jobeco/uk/2010live/dynamic/content/index.php#
The trouble is that SIFR only appears to be applied to the displayed on.load when the page is first loaded. When this is hidden and the other s shown through the "show" function they load in classic CSS fonts without the SIFR applied.
Is this unavoidable with the SIFR setup. Or am I not calling the divs properly. I have set the SIFR to apply to the selector and indeed it works fine on the for the displayed on load. It doesn't work for the within other . In theory I would think its possible to load the SIFR on all divs on page.load even if those divs are presently visibility:hidden.
What's the verdict on this?
Hope someone can help.
Cheers,
John
After you show the previously hidden div, execute the sIFR.replace calls again to replace the content in those elements.