I use the modal of Twitter's Bootstrap.
You can close the modal, by clicking on a button or something different with the tag data-dismiss="modal".
I would like to process my form in the modal with AJAX (by clicking on a submit button) and then close the modal.
So how do close this modal in AJAX?
Or is that not possible?
(sorry for my bad English...)
If you read further down the documentation:
$('#myModal').modal('hide')
Just get the ID of the modal, and replace myModal with it. Then place it in the AJAX success handler and there you have it.
You can use this script to close the modal
<button type="button" id="close_btn" class="close" data-dismiss="modal" aria-hidden="true">
<i class = "icons-office-52"></i>
</button>
$("#close_btn").trigger("click");
or
$('#my_model').modal('hide');
After a lot of trial and error and comparing the HTML before and after I have arrived at the following which works:
$('body').removeAttr("style");
$("#myModal").removeAttr("style");
$(".modal-backdrop").remove();
Related
I've been using this notification magic
<div x-init="$notification({text: 'my message', variant: 'error'})"></div>
It is working when you load the page. My goal is to trigger it by calling via javascript function.
I'm looking for ideas on how to implement that. Thanks a lot.
Use default events or custom events. Code is untested but something like this will work.
<button x-on:click="$notification({text: 'clicked', variant: 'info'})">
Click me
</button>
<button x-on:click="$dispatch('add-error', {message: 'Something went wrong'})">
Click me
</button>
<div x-on:add-error.window="$notification({text: $event.detail.message, variant: 'error'})"></div>
I have been stumped on this for a couple hours and can not figure a way around it.
Larvel 8 with Livewire
I have a very basic form.
<form action="/dashboard/payment" method="POST">
#csrf
<button type="submit" class="btn btn-primary my-3 w-100" id="checkout-button">
<span wire:loading>Please Wait</span>
<span wire:loading.remove>Pay - $
<span>100</span>
<br>
<small>Description of payment</small>
</span>
</button>
</form>
But the form tag itself it is not rendering the html. It is only rendering the button inside.
When incrementing a value with another button, the form tag is then rendered into html and the button can be used as expected.
The incrementing button only ++ to a value and updates the database with the new value.
This is the only thing holding me back, I have searched everywhere but cant find any information about form tags not rendering.
Note: Neither the opening tag or the closing tag is rendered until the other button is pressed.
Any ideas or information would be fantastic and greatly appreciated.
I'm confused. I've thought it's possible to pass SpringBoot/Thymeleaf objects from the html page to the Modal form. I've come across many examples using ajax to pull data from the REST endpoint instead.
Is using ajax to pull in objects into Modals, the only method?
Thymeleaf is a server side templating language... the concept of a modal form usually means showing/hiding a window opens and closes on the client side (meaning JavaScript that runs when a user clicks a link or a button ). If you don't want to use an API to pull that data (which I think makes the most sense), then you have to create a hidden modal for every row on your page. For example:
<div th:each="item, i: ${items}">
<a href="#"
onClick="openModal(this.getAttribute('data-modal'))"
th:data-modal="|#modal${i.index}|">
Edit modal #<span th:text="${i.index}" />
</a>
<div th:id="|modal${i.index}|" style="display: none;">
<p>I am a modal form for element <span th:text="${i.index}" />!</p>
<input type="text" th:value="${item.value}" />
</div>
</div>
You can see how this works... creating a hidden div/modal form for every row (so you don't have to call an API to get the form values), but it comes with a lot of extra HTML.
I just updated Firefox to 48.0.1 from 48.0 and now I'm seeing an issue with the Bootstrap tooltip. Looking at the HTML in Firebug, it appears that Firefox is adding a new <div> at the bottom of the page that is not in the .jsp:
<div id="tooltip404721" class="tooltip fade top in" role="tooltip" style="top: 162.4px; left: 1220.5px; display: block;">
<div class="tooltip-arrow" style="left: 50%;"></div>
<div class="tooltip-inner">Delete</div>
</div>
This only happens if the tooltip is attached to a button - links are not affected. The links and buttons are column elements in a jQuery DataTables table. The tooltip portion of the code for link vs. button is identical.
Link:
<td><a class="btn btn-info btn-xs" href="<c:url value='/recipe/viewRecipe/${recipe.id}'/>"
data-toggle="tooltip" data-placement="top" title="<spring:message code="tooltip.view"></spring:message>">
<span class="glyphicon glyphicon-list-alt"></span></a>
Button:
<td><button class="btn btn-danger btn-xs" type="button" id="delete${recipe.id}" onclick="deleteRecipe(${recipe.id},
'<spring:escapeBody javaScriptEscape="true">${recipe.name}</spring:escapeBody>')"
data-toggle="tooltip" data-placement="top" title="<spring:message code="tooltip.delete"></spring:message>">
<span class="glyphicon glyphicon-remove"></span></button>
This DataTables-specific setting is in a .js file included on the page:
$('[data-toggle="tooltip"]').tooltip({
container : 'body'
});
Removing the above gets rid of the extra <div> but then the tooltip no longer appears with Bootstrap formatting. Adding data-container="body" to the button itself didn't work either.
Any ideas?
EDIT:
Although I just recently noticed the issue I downgraded to 47.0.1 and still see the problem. I will keep downgrading to find out which version this starting appearing in. I don't think it's my code because the production version has the same problem as my dev version. Also, this does not happen in Chrome but it does in Edge.
I found the problem. I have a function that's applied to all pages that sets the input focus for form pages to the first form control. This is because the menu contains a search input and button, which would otherwise get the focus instead of the first form input.
function setInputFocus() {$(':input:visible:enabled:eq(2)').focus();}
For some reason that I don't remember now I moved the code to toggle the tooltip (see question) above this focus code. That meant that the first button in the first row of the datatable ended up getting the focus, hence the tooltip being visible when the page was displayed. Moving the tooltip toggle after this focus code fixed the problem.
Obviously, I should be more careful about site-wide code that is specific to a particular issue but ends up being applied to all pages...
I am attempting to rewrite a multi-page website into a SPA using jQuery UI Tabs. In the shell page, one tab references an id within the page, while the rest of the tabs load other pages via AJAX. It looks something like this:
<div id="tabs">
<ul id="nav">
<li>HOME</li>
<li>LEARN</li>
<li>LISTEN</li>
<li>SUPPORT</li>
<!--etc.-->
</ul>
<div id="home">
<!--blah blah blah-->
</div>
</div>
Within learn.html, I have another set of UI tabs that are set up the same way:
<div id="tabs2">
<ul id="nav2">
<li>About Us</li>
<li>Sponsors & Donors</li>
<li>Staff & Board</li>
<!--etc.-->
</ul>
<div id="about">
<!--blah blah blah-->
</div>
</div>
The problem arises in clicking a tab within learn.html: the event of clicking one of the AJAX tabs within this AJAX tab bubbles up to the window, and sponsors.html or whatever loads in place of the shell page.
I have tried event.stopPropagation() but it did not work; using event.preventDefault on the tabs prevented the tab functionality in the first place. What else is there to do?
You could try adding the result of the ajax call to a specific div. In the success function of the ajax call.
Are you calling preventDefault on the click of the tab, or the anchor? You might need to setup a separate handler for the anchor click.
$("ul#nav2 li a").click(function(e) {
e.preventDefault();
});
My problem is gone now...
The page I had loading via AJAX had its own doctype and head tag and the whole shebang. After I removed that, I no longer had any problems.