jquery-ui dialog being displayed with no content (see update 3) - javascript

In my spring project, I have this dashboard page, where each click in a link open the destination page in a separate popup window (created with jquery-ui dialog):
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li> <c:url value="/Usuario/listagem" var="usuario"/> <a class="popup" data-action="${usuario}/1/10/1" data-target="popup" href="#">Usuários</a></li>
<li> <c:url value="/logout" var="logoutUrl"/> Sair do sistema</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div id="popup"></div>
the code to do that it's the following:
$( ".dialog" ).dialog({
autoOpen: false,
closeOnEscape: true,
closeText: "fechar",
show: {
effect: "fadeIn",
duration: 1000
},
hide: {
effect: "fadeOut",
duration: 1000
},
close: function( event, ui ) {
$(this).remove();
}
});
function add_dialog(container_div) {
var id_dialog_div = Math.floor(Math.random() * 1000000);
var dialog_div = $('<div id="dialog-'+id_dialog_div+'" class="dialog" title="Basic dialog"> <p> <span id="text'+id_dialog_div+'"></span> </p> </div>');
$(container_div).append(dialog_div);
return id_dialog_div;
}
function open_dialog(url, dialog_div) {
$.ajax({
type: "GET",
url: url
}).done(function(data){
var id_dialog_div = add_dialog(dialog_div);
var dialog_box = $('#dialog-'+id_dialog_div);
var $temp = $('<div/>', {html:data});
$( dialog_box ).dialog( { title: $temp.find('title').text() } );
$( dialog_box ).find('#text'+id_dialog_div).html( $temp.remove('head').html() );
$( dialog_box ).dialog( { height: 480 } );
$( dialog_box ).dialog( { width: 640 } );
$( dialog_box ).dialog( "open" );
});
}
$(document).on('click', '.popup', function (event) {
event.preventDefault();
var action = $(this).data('action');
var target = $(this).data('target');
var div = $("#"+target);
open_dialog(action, div);
});
the view which should be opened in the popup it's that:
<jsp:include page="../../common/listagem.jsp">
<jsp:param name="name" value="Usuario"/>
<jsp:param name="elements" value="login,first_name,last_name,email"/>
</jsp:include>
and the jsp common/listagem.jsp it's that:
<%# include file="../include/header.jsp" %>
<c:url value="/${param.name}/cadastra" var="cadastra"/>
<c:url value="/${param.name}/altera" var="altera"/>
<c:url value="/${param.name}/remove" var="remove"/>
<input type="hidden" name="pagina" value="${pagina}">
<input type="hidden" name="items" value="${items}">
<input type="hidden" name="ordem" value="${ordem}">
<sec:authorize access="hasPermission(#user, 'altera_${param.name}')">
<p>
<button type="button" class="btn btn-default btn-lg">Cadastrar novo ${param.name} </button>
</p>
</sec:authorize>
<table border="2">
<thead>
<tr>
<th>#</th>
<c:forEach var="item" items="${param.elements}" varStatus="index">
<th class="col" data-property="<c:out value="${item}"/>"> <c:out value="${item}"/> </th>
</c:forEach>
<th></th>
</tr>
</thead>
<tbody class="content">
</tbody>
<tfoot>
<tr class="comando">
<sec:authorize access="hasPermission(#user, 'altera_${param.name}')">
<td data-nome="altera" data-action="${altera}"></td>
</sec:authorize>
<sec:authorize access="hasPermission(#user, 'remove_${param.name}')">
<td data-nome="remove" data-action="${altera}"></td>
</sec:authorize>
</tr>
</tfoot>
</table>
<c:url value="/${param.name}/listagem.json" var="listagem"/>
<script>
$(document).ready(function(){
load_content("${listagem}", $('table'));
});
</script>
<%# include file="../include/footer.jsp" %>
My problem is that when I click in the close button, the windows isn't closed immediately, but it's shrunked, remaining only the titlebar. if I click again in the close button, then it close. Also, no title is displayed in the window, but a second (and smallest) titlebar is displayed on the screen with the correct title, and that one I only get to close after the second click in the first close button.
This is what happening:
Anyone knows what's happening here and how to solve this?
UPDATE
In the code above, the line:
$( dialog_box ).find('#text').html( $temp.remove('head').html() );
should remove from the jsp page the <head> tag and its content and append the <body> content inside the element <span> in this <div>:
<div id="dialog" class="dialog" title="Basic dialog">
<p> <span id="text"> </span> </p>
</div>
But when I run the application, and look the html code in the browser dev tool, all the content from the jsp page is added to the <div>, <head> included.
UPDATE 2
I try remove the function add_dialog, and change the <div> to this:
<div id="popup">
<div id="dialog" class="dialog" title="Basic dialog">
<p> <span id="text"> </span> </p>
</div>
</div>
and the function open_dialog to this:
function open_dialog(url, dialog_div) {
$.ajax({
type: "GET",
url: url
}).done(function(data){
//var id_dialog_div = add_dialog(dialog_div);
var dialog_box = $('#dialog');
var $temp = $('<div/>', {html:data});
$( dialog_box ).dialog( { title: $temp.find('title').text() } );
$( dialog_box ).find('#text').html( $temp.remove('head').html() );
$( dialog_box ).dialog( "open" );
});
}
But this work partially: when I open the dialog in the first time, it's displayeh correctly, but after I close and reopen it, the issue happens again.
UPDATE 3
I solve the problem with the shunkring / duplication with this code:
$( "#popup" ).dialog({
autoOpen: false,
closeOnEscape: true,
closeText: "fechar",
show: {
effect: "fadeIn",
duration: 1000
},
hide: {
effect: "fadeOut",
duration: 1000
}
});
function open(url, target) {
$.ajax({
type: "GET",
url: url
}).done(function( data ) {
var $temp = $('<div/>', {html:data});
var conteudo = $temp.remove('head').html();
target.empty();
target.find('#text').html(conteudo);
$("#popup").dialog('open');
});
}
$(document).on('click', 'a.link', function (event) {
event.preventDefault();
var action = $(this).attr('href');
var target = $('#dialog');
open(action, target);
});
$(document).on('click', 'button.btn-link', function (event) {
event.preventDefault();
var action = $(this).data('href');
var target = $('#dialog');
open(action, target);
});
But now, my dialog is opened without content. Anyone knows what is wrong now?

not sure about all your javascript and i will be not going there but depending on version of jQueryUI your code uses
close: function( event, ui ) {
$(this).remove();
}
throws an error, check the console output in your browser, in my code i have dialog applied to #page_preview
$("#page_preview").dialog('remove');
Error: no such method 'remove' for dialog widget instance
but as soon as i use
$("#page_preview").dialog('close');
it works
my entrire code looks like this
$("#page_preview").dialog({
title: "Page Preview",
dialogClass: "no-close",
autoOpen: false,
resizable: true,
modal: true,
width: 1100,
buttons: [
{
text: "OK",
click: function() {
$(this).dialog("close");
}
}]
});
i believe that doing what you are doing in that close: section you are actually removing the element that dialog is applied to, but the dialog structure remains, thats why it seems like it has shrunk
hope it helps
FINAL EDIT:
take a look in here, it is slightly different but works, sorry that will be the best i can do for u goo.gl/GLqIYO

Related

Bootstrap popover not showing for anchor element on the focus event

I'm trying to show bootstrap popover on click and hover events.
I have multiple controls loaded on a page and I'm trying to bind the bootstrap-5 popover without the jQuery dependency for those controls.
In this example, I have used buttons and anchor elements and tried to bind the popover using JavaScript and the popover is getting triggered for both button and anchor elements when used the event hover (trigger: 'hover'), but for the event click(trigger: 'focus') the popover is not showing for anchor elements.
I have used the below code for binding the events to the controls.
document.addEventListener("DOMContentLoaded", function(event) {
var popoverTriggerList = [].slice.call(document.querySelectorAll('[people-card="click-action"]'));
var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl, {
container: 'body',
html: true,
trigger: 'focus',
//tabIndex: -1,
content: function() {
//console.log(this.getAttribute("email"));
return document.getElementById('popover-content').outerHTML;
}
})
});
var popoverTriggerList = [].slice.call(document.querySelectorAll('[people-card="hover-action"]'));
var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl, {
container: 'body',
html: true,
trigger: 'hover',
//tabIndex: -1,
content: function() {
//console.log(this.getAttribute("email"));
return document.getElementById('popover-content').outerHTML;
}
})
});
});
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/css/bootstrap.min.css">
<button type="button" class="btn btn-primary" people-card="click-action" email="test1#test.com">
Show Card on Click
</button>
<button type="button" class="btn btn-primary" people-card="hover-action" email="test2#test.com">
Show Card on Hover
</button>
<br>
<br>
<ul>
<li>
<a class="people-card" people-card="click-action" email="test1#test.com">Show Card on Click</a>
</li>
<li>
<a class="people-card" people-card="hover-action" email="test2#test.com">Show Card on Hover</a>
</li>
</ul>
<br>
<br>
<button type="button" class="btn btn-primary" people-card="click-action" email="test1#test.com">
Show Card on Click
</button>
<button type="button" class="btn btn-primary" people-card="hover-action" email="test2#test.com">
Show Card on Hover
</button>
<div id="popover-content" style="display:none">
<p>test</p>
</div>
Can someone help me here to make the click event(trigger: 'focus') work for even anchor tags.
So it appears that adding href attribute solves this problem. Alternatively, you could trigger it yourself using show method of the tooltip, whenever your element is clicked.
Don't forget to preventDefault() if needed.
document.addEventListener("DOMContentLoaded", function(event) {
var popoverTriggerList = [].slice.call(document.querySelectorAll('[people-card="click-action"]'));
var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl, {
container: 'body',
html: true,
trigger: 'focus',
//tabIndex: -1,
content: function() {
//console.log(this.getAttribute("email"));
return document.getElementById('popover-content').outerHTML;
}
})
});
var popoverTriggerList = [].slice.call(document.querySelectorAll('[people-card="hover-action"]'));
var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl, {
container: 'body',
html: true,
trigger: 'hover',
//tabIndex: -1,
content: function() {
//console.log(this.getAttribute("email"));
return document.getElementById('popover-content').outerHTML;
}
})
});
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/js/bootstrap.bundle.min.js">
</script>
<ul>
<li>
Show Card on Click
</li>
<li>
<a class="people-card" people-card="hover-action" email="email#email.com">Show Card on Hover</a>
</li>
</ul>
<div id="popover-content" style="display:none">
<p>test</p>
</div>

Jquery how send hidden value to my script

I use ASP.NET MVC and Jquery. I have icon, when I click on it shows dialog box.
Reports.cshtml:
<a class="dialog-opener" href="#">
<input type="hidden" name="reportID" value="#view.ReportCode"/>
<i class="material-icons right">more_vert</i>
</a>
in this dialog box I have form it is partial view
SubscriptionForm.cshtml:
<div id="dialog-modal" title="Basic model dialog">
#using (Html.BeginForm("SubscriptionForm", "Subscription", FormMethod.Get)) {
#Html.AntiForgeryToken()
...
</div>
_LayoutForAll.chhtml:
$(function () {
$('#dialog-modal').dialog({
dialogClass: 'ui-dialog-osx',
autoOpen: false,
width: 800,
title:"Formularz subskrypcji",
show: {
duration: 1000
},
hide: {
duration: 1000
}
});
$('.dialog-opener').click(function () {
var reportId = $("[type=hidden]").val();
$("#dialog-modal").dialog("open");
alert(reportId);
});
});
I need send reportId from Reports.cshtml and date from form SubscriptionForm to my controller, I don't now how do this.
give ID to your hidden filed and get value using jquery
<a class="dialog-opener" href="#">
<input type="hidden" id="myhiddenfield" name="reportID" value="#view.ReportCode"/>
<i class="material-icons right">more_vert</i>
</a>
below code use for get value from hidden field.
$('.dialog-opener')
.click(function () {
var reportId = $("#myhiddenfield").val();
$("#dialog-modal").dialog("open");
alert(reportId);
});
try above code . its working fine.

How write a script that works on modal popup & on full page

I have the following view which is forced to be displayed as a modal popup using jQuery :-
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-default" /> | #Html.ActionLink("Back to List", "Index")
</div>
</div>
</div>
}
<span id="progress" class="text-center" style="display: none;">
<img src="~/img/ajax-loaders/ajax-loader-5.gif" alt="wait" />
Wait..
</span>
and i wrote the following script, which will fires if the user click on Create/Edit/Delete links . where the script will show a progree message + disable the submit button:-
$(function () {
$.ajaxSetup({ cache: false });
$("a[data-modal]").on("click", function (e) {
$('#myModalContent').load(this.href, function () {
$('#myModal').modal({
height: 1000,
width: 1200,
resizable: true,
keyboard: true
}, 'show');
$('#myModalContent').removeData("validator");
$('#myModalContent').removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse('#myModalContent');
bindForm(this);
});
return false;
});
});
function bindForm(dialog) {
$('form', dialog).submit(function () {
$('.btn btn-default').prop("disabled", "disabled");
$('#progress').show();
if ($(this).valid()) {
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize(),
but let say the that the user instead of clicking on the link, he chose to "Open link in new browser" , so the view will render insdie the browser (not as modal popup) and the script will not fire, so when the user click on submit button,, the submit button will not be disabled + the progress will not be shown?
So can anyone adivce where i need to place a script that always works ?

Problems with open dialog when double click

When I add a card in in-box list I am able, when double click on it, to open dialog. It works fine. The problem comes when I drag the card and drop it in Onhold list. I tried to double click to open the dialog but did not succeed.
ANY IDEA FOR A SOLUTION?
Demo
HTML:
<!--Wrapper div-->
<div id="wrapper">
<div id="onHoldList" class="cellContainer">
<p>On Hold</p>
</div>
<!--Inbox list and button to add a card-->
<div id="inboxList" class="cellContainer">
<p style="display: inline">Inbox</p>
<!--Button to add a Card-->
<input type="button" id="AddCardBtn" value="+ Add a Card..."/> <hr class="fancy-line"/> <br/>
<!--Card div-->
<div id="userAddedCard"> <br/>
<div>
</div>
</div>
</div>
</div>
<!--Modal Dialog-->
<div id="modalDialog">
<form>
<label>Title</label>
<input type="text" id="customTextBox" value="some value"/>
<p>Date: <input type="text" id="datepicker" value="some date"/></p>
<input type="button" id="Getbtn" value="Get value"/> <hr/><br/>
</form>
</div>
JQuery:
$(function () {
// Click function to add a card
var $div = $('<div />').addClass('sortable-div');
$('<label>Title</label><br/>').appendTo($div);
$('<input/>', { "type": "text","class":"ctb"}).appendTo($div);
$('<input/>', { "type": "text","class":"date"}).appendTo($div);
var cnt =0,$currentTarget;
$('#AddCardBtn').click(function () {
var $newDiv = $div.clone(true);
cnt++;
$newDiv.prop("id","div"+cnt);
$('#userAddedCard').append($newDiv);
// alert($('#userAddedCard').find("div.sortable-div").length);
});
// Double click to open Modal Dialog Window
$('#userAddedCard').dblclick(function (e) {
$currentTarget = $(e.target);
$('#modalDialog').dialog({
modal: true,
height: 600,
width: 500,
position: 'center'
});
return false;
});
$("#datepicker").datepicker({showWeek:true, firstDay:1});
$("#Getbtn").on("click",function() {
var val = $("#customTextBox").val();
$currentTarget.find(".ctb").val(val);
$currentTarget.find(".date").val($("#datepicker").val() );
$('#modalDialog').dialog("close");
});
// Sortable cards
$('.cellContainer').sortable({
items: '.sortable-div',
containment: 'document',
cursor: 'crosshair',
opacity: '0.70',
connectWith: '.cellContainer',
}).disableSelection();
});
Div moved to onhold list is not a child of #userAddedCard anymore.
Change
$('#userAddedCard').dblclick(function (e) {
with
$('#wrapper').on('dblclick', '.sortable-div', function (e) {

Click handlers not firing on appended items

So I have some results that have items that get toggled, hidden/shown, etc. That bit works just fine except for the items that are appended to the bottom of the results. The click handler does not fire on them but work just fine on the others. I assume it has to do with reading the nodes at the time of page load. How do I get the appended items to also work?
<div class="event">
<a href="/profile/00000000">
<img class="user-image" src="https://graph.facebook.com/00000000/picture?width=100&height=100">
</a>
<div class="event-info">
<div class="content">
<div class="event-time-location">
<span class="user-name">Levi Thornton</span>
<span class="user-action-time">Posted 21 minutes ago</span>
</div>
<div class="event-caption">1
</div> </div>
<div class="event-like-comment">
<input id="js-eventId" type="hidden" value="201" name="eventId">
likedlike comment
more
</div>
</div>
<div class="comments" id="comments-201" style="display: block;">
<div class="newComments">
<input id="js-eventId" type="hidden" value="201" name="eventId">
<textarea class="addComment" value="Write a comment..." placeholder="Write a comment..." title="Write a comment..."></textarea>
</div>
</div>
<!-- comments -->
<div class="clear"></div>
</div>
The jQ:
...
// add like
$(".event-like").click(function(event){
event.preventDefault();
var likeBtn = $(this);
$.post('/shindig/ajax-like-event', { eventId: $(this).siblings('#js-eventId').val(), userLogged: $('#js-userLogged').val(), ajax: true}, function(data){
if(data['success']){
likeBtn.hide();
likeBtn.siblings(".event-liked").show();
} else {
if(data['noaccess']){
window.location.href = data['url'];
}
}
},"json");
});
// soft delete like
$(".event-liked").click(function(event){
event.preventDefault();
var likeBtn = $(this);
$.post('/shindig/ajax-unlike-event', { eventId: $(this).siblings('#js-eventId').val(), userLogged: $('#js-userLogged').val(), ajax: true}, function(data){
if(data['success']){
likeBtn.hide();
likeBtn.siblings(".event-like").show();
} else {
if(data['noaccess']){
window.location.href = data['url'];
}
}
},"json");
});
// hit bottom scrolling, load more results
$(window).scroll(function() {
if($(window).scrollTop() == $(document).height() - $(window).height()) {
console.log('bottom');
$.post('/index/ajax-feed-items-by-time', { pager: $("#js-pager").val(), ajax: true}, function(data){
$( ".feedContent" ).append( data );
$pager = $("#js-pager").val()+10;
$("#js-pager").val($pager);
});
}
});
Replace
$(".event-like").click(function(event) {
with
$(document).on("click", ".event-like", function(event) {
and similarly throughout your code. It's called event delegation, and the best place to start reading about it is the jQuery documentation.

Categories