how to close a modal (bootstrap) and reload the page with angularjs? - javascript

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.

Related

Reload external javascript library in AlpineJS modal

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!

Angular JS Angular input dropdown control not getting rendered properly

I am using your Angular JS Input Dropdown control, and I've followed the code example you put on your demo page to implement the control on a page in my PHP Laravel based website. I have found a problem with the implementation, though, and I was unable to identify what triggered it or how to fix it, so I was hoping that one of you may be of some assistance.
The issue consists of the control not getting rendered into the page until I refresh the page, then it shows up and works perfectly fine, right until I leave the page and get back to it; forcing me to refresh the page every time I re-enter it to be able to use the control.
To elaborate further, the control does not get rendered, but the page acknowledges that there is supposed to be a control on the page, which is why it displays a white blank space at the position where the control is supposed to be. So, I am pretty sure that it's a rendering issue.
The website is using Voyager which has a navigation sidebar, and if the page is entered via the sidebar button, the issue occurs, while if it was entered directly through the url bar or refreshed, then it works fine.
Has this ever happened to anyone before, and if so, how should I go on about fixing it? If not, then what do you propose might be the issue?
Thanks for taking your time to read this issue, and have a wonderful day.
Link to Angular control repository: https://github.com/hannaholl/angular-input-dropdown
EDIT: This issue was self-fixed.
Solution: Manually bootstrap Angular JS.
This issue was self-fixed.
Solution: Manually bootstrap Angular JS.

Reload only main page content on link click

So i'm trying to do an effect similar to this http://www.hffm.co.uk/
When you click on another page the entire page Does NOT reload just the main content in the center But the link at in the navigation does
I.e http://www.hffm.co.uk/contact after contact page is clicked
What i want to know is how is this done? I don't like using jquery but can convert it if you can only explain it that way. I figure it's AJAX related but can't be sure. Does this kind of loading have a name?
I need to know what to search so i can find it google to figure it out myself but i have no idea where to go looking.
yes it's possible with ajax.
it's call asynchronous load. Im not realy skilled to explain so here is a link
http://www.w3schools.com/php/php_ajax_poll.asp
I hope it helped

Mentio JS menu being added to bottom of the page

I'm trying to implement a Twitter style #mention interface using Angular JS and a library called MentioJS ()
The issue i'm having, is that after content is dynamically added to the page, I'm getting a rogue menu on the bottom of the page. I was able to replicate on the documentation page here:
http://jeff-collins.github.io/ment.io/?#/
By just hitting "Submit" at the bottom without changing anything. In Chrome, I see the default menu that opens in the first input show up again at the bottom of the page.
Any ideas why this might be happening?
I've encountered the same issue, as many others I think.
I've emptyed the array with the options for mentio-items (after pressing submit), which worked for me.
I`m sure this is not the right solution, but it fullfiels my needs.
I had the same issue with with ment.io, but as #Mihai Lazar pointed out after clearing array on submit, issue was resolved.
Regards..

create a "show up" window when you click register?

im a backend programmer who wants to have a window that appears in front of the current window when clicking "register".
so that you dont have to redirect to another page.
i think u guys know what i mean.
how do i do that? is it with jquery or javascript? is ajax involved?
and what is that kind of popup box called?
You want to write a div into your HTML that contains your login fields (i.e. the popup window). Set it to position:absolute; and position with CSS so it floats above the page contents and doesn't interrupt the flow when it appears. Get it all nice and positioned where you want it, then set it to display: none; so it will wait for javascript to make it appear.
Then (using jQuery), write something like this:
$('#register').click(function() {
$('#popup').show();
});
where #register is whatever gets clicked (can be most anything with id="register").
What happens whenever that form is submitted is up to you, and not any different from the options you'd have with any other HTML form. jQuery can help with AJAX if you decide to go that route and not send the surfer to another page to process the form.
It can be done using quite a few totally different approaches. As Sam said it's the concept of modal boxes.
You could do it completely on the client side using CSS and JavaScript (alternative), or via AJAX and some third-party libs.
Try being a bit more specific - what's the the backend/frontend environment? Is performance an issue (eg. minimal client-server communication)?
I believe you're referring to a modal form. You can search for modal popup javascript. There is a good javascript component called Lightbox that will help as well.
EDIT:
I mentioned Lightbox, but Lightbox Gone Wild is the one I meant. As others have pointed out, using a modal tool like this all you do is write the html you want to be displayed in the modal popup. That link is a good tutorial on the concept and explains things well.

Categories

Resources