I'm trying to make something work, that seems easy but can't figure it out yet.. Here's the thing:
I have a livewire component. This component can trigger a modal window to show user details. One of the field is a select that will have a list of product associated. Because I have a lot of products, I want to use a dynamic select by using the library choices.js That way, I can filter the product from an ajax call instead of loading the whole datas directly into my select element.
Problem: I can't make the choices.js library work. It seems that the plugin won't be initialized since it lives inside the modal box, that will be trigger after the first page load.
How can I achieve to make the choices.js library initialize? Is there a workaround known?
Thanks in advance for any feedback that could help!
Cheers!
Related
I'm using the Magento SCP extension to change various details on the product page when selecting an option in the configurable product.
I need to extend the functionality so that I can change the description, image etc when clicking on a thumbnail image instead of changing the list options.
As far as I can tell, the function that deals with the changing of product description etc is:
Product.Config.prototype.reloadPrice
I'm not sure how I can run this when I click on a thumbnail, what information do I need to pass to the function to run properly?
Take a look at this site I am working on, this is using bundle products. But I am just looking to get an idea of what you are trying to do..
Click on the individual products to see them load below your selection
Let me know if this is what you are looking to do and I can help guide you
Site Example
The site I am demonstrating is using a custom route I load via Ajax.
I figured it out in the end.
When changing the dropdown values from clicking on an image elsewhere in the page I need to run the following code:
spConfig.configureElement(element)
Where (element) is the Dropdown's ID which I stored in a VAR further up the page.
I'm using bootstrap and angularJS and I don't know how to hide a modal and reload the page. I know I can reload with $route.reload() and hide it with $('#modalpolicy').modal('hide') but if I use both, the webpage doesn't show correctly (it's still black). How can I do it?
EDIT. At least I've decided to do a new query sooo I have the information up-to-date. on the page.
Thank you for your reply.
For anyone else coming to this question I recommend using http://angular-ui.github.io/bootstrap/ for your bootstrap needs. Saves you from having to use jQuery in Angular which is rarely a good idea in the first place.
Finally, I reloaded it just calling the service again.
I tried to google but didnt find exactly I am looking for.
I need a sample example code or a resource link to create a modal dialog box and I want to have two boxes(div's) inside the dialog box.
I have to insert different content inside both the boxes(inside the dialog box) when the user clicks.
I know how to create a dialog box but, I would like to particularly know how to insert divs inside it.
I hope my question is clear. Please help.
If you just want to look at the code have a look at the work section of http://www.pixelvalet.com (ok! its my website but then it would help you right?).
The way i approached the issue is:
first i added the template (all the empty divs i needed which i would be populating later on) in the main html file itself
next i gave it a hidden css style to the parent which contained all the divs.
then i added a logic which would tell the browser the which link was clicked and then it would populate the divs in the template appropriately using ajax
it would then slowly fade in using jQuery
but then this isnt the only way you might do this. There are tons of plugins out there which help you create a modal box. but i opted for this route because i wanted it completely customised.
hope it helps.
I have used bootstrap modal for dialog box it works great you check it here:
http://getbootstrap.com/javascript/#modals
The basic idea is just put your dialog box code at bottom of you page,
<div id="my_dialog">
content
</div>
And you detach it in your jquery or other framework you are using or just pure js.
In jquery you can do this:
var my_dialog = $( "#my_dialog" ).detach();
now when ever you need to show it you just attach it to where you want to show it.
and before you attach it you can insert any content you want.
But I would suggest you to use bootstrap's modal much easier.
So i managed to find a way to do what i want, but I'm not sure it's exactly the smartest and most efficient way....
What I'm currently doing is using a popover to show whether or not the user has met the password conditions to set a password. Because there are 5 fields, i decided it would be easier to create it in a hidden html (using the hide class), and then use JQuerys .html() to provide the content to the popover.
This worked, until i attempted to refresh the content while it was still open. I looked at several solutions after i couldn't figure it out by myself, and one of them recommended to use the .popover('destroy'); and then show it again with the new content. However this requires that you reinitialize everything else as well.
There were other solutions, but they appear to require you to use the data- attributes method of initialization, which i couldn't figure out a nice way to do (Because i wanted to create the content in the html while it was hidden.)
Since i couldn't find any working solution, i went with reinitializing everything, so i created a basic JavaScript function, and call .popover('destroy');, reassign everything, and the call .popover('show');, Then call this function whenever i want to update the popover's content.
I was wondering if this is the most efficient way of updating the content of a bootstrap 3.0 popover, that has been created from JavaScript...?
I am new to Jquery!
I am trying to load a list dynamically, without the page being refreshed. I will be getting data(parsed) from an array which i have to load in the list dynamically.
Its basically a contact list with Chat icon, Username, Presence or status, and Custom message which are part of the list.
Kindly share any code snippet or example which would help me in accomplishing this task quickly
Tx !
Well, make the ajax call, update the html, then call refresh() on the list per the docs. That would be the first thing I would try.
Updating lists
If you add items to a listview, you'll
need to call the refresh() method on
it to update the styles and create any
nested lists that are added. For
example, $('ul').listview('refresh');
We're currently working on a few
improvements to the refresh method, so
keep your eye on Github for updates.
http://jquerymobile.com/demos/1.0a4.1/docs/lists/docs-lists.html