I'm creating a simple WordPress functionality, where users can add texts and edit some content:
When i decrease the width to 5/12 it looks like this:
Which is bad and not correctly positioned. Also, the pencil is not clickable and cannot use his functionality. Not sure if it's JavaScript/jQuery problem, or some CSS styles are broken. I'm creating the elements in the following way:
$(".row-container .dx-columns-wrapper").droppable({
accept: '.top-wrapper .dx-draggable-row, .top-wrapper .dx-draggable, .dx-columns, .dx-droppable',
tolerance: "touch",
activeClass: "dx-ui-state-highlight",
drop: function(event, ui) {
var element_class = $(ui.helper[0]).attr('class').split(' ')[0];
if (element_class == 'dx-draggable-row') {
var rows_id = 0;
$('.dx-droppable').each(function() {
var checked = $(this).data('row');
if (parseInt(checked) > parseInt(rows_id)) rows_id = checked;
});
rows_id++;
$(this).append('<div class="dx-droppable" data-row="' + rows_id + '">' +
'<div class="dx-droppable-header">' +
'<i class="fa fa-arrows-alt js-move-row" title="Move Row"></i>' +
'<span class="pull-left dx-row-title">Row ' + rows_id + '</span>' +
'<i class="fa fa-close pull-right dx-remove-row js-remove-row" title="Remove Element"></i>' +
/** Edit row class */
'<button class="js-edit-row-classes-btn-ok dx-edit-row-classes-btn-ok pull-right">OK</button>' +
'<i class="js-edit-row-classes-btn dx-edit-row-classes-btn fa fa-pencil pull-right" title="Edit Classes"></i>' +
'<span class="dx-row-classes pull-right">Row Classes</span>' +
'<input type="text" class="dx-row-class-input">' +
'</div><br></div>');
$(document).init_comp();
} else {
var data_type = $(ui.helper[0]).data('type');
var content = $(ui.helper[0]).html();
if (data_type != undefined) {
var col_id = 0;
$('.dx-columns').each(function() {
var check = $(this).attr('data-indx');
if (parseInt(check) > parseInt(col_id)) col_id = check;
});
col_id++;
$(this).append(
'<div class="dx-columns dx-col-12" data-view="' + data_type + '" data-indx="' + col_id + '">' +
'<i class="fa fa-arrows-alt dx-move-column js-move-column" title="Move Element"></i>' +
'<span class="dx-section-name">' + content + '</span>' +
'<i class="fa fa-arrow-left js-decrease-column-width" title="Decrease Element Width"></i>' +
'<span class="dx-column-part">12</span>' +
'<span>/</span>' +
'<span class="dx-column-full">12</span>' +
'<i class="fa fa-arrow-right js-increase-column-width" title="Increase Element Width"></i>' +
'<i class="fa fa-close pull-right dx-remove-column js-remove-column" title="Remove Element"></i>' +
'<i class="fa fa-cog pull-right dx-setting-column js-setting-column" title="Element Setting"></i>' +
'<i class="fa fa-copy pull-right js-copy-column" title="Copy Element"></i>' +
'<i class="fa fa-align-justify pull-right"><span class="small-column-properties"><i class="js-edit-col-classes-btn fa fa-pencil" title="Edit Classes"></i><i class="fa fa-copy js-copy-column" title="Copy Element"></i><i class="fa fa-cog dx-setting-column js-setting-column" title="Element Setting"></i><i class="fa fa-close dx-remove-column js-remove-column" title="Remove Element"></i></span><div id="triangle-down"></div></i>' +
'<button class="js-edit-col-classes-btn-ok dx-edit-col-classes-btn-ok pull-right">OK</button><i class="js-edit-col-classes-btn fa fa-pencil pull-right" title="Edit Classes"></i><span class="dx-col-classes pull-right">Column Classes</span>' +
'</div>'
);
$(document).find(".dx-columns").draggable({
helper: 'clone',
cursor: 'move',
handle: '.js-move-column'
});
} else {
$(ui.draggable).appendTo(this);
}
}
}
});
Any ideas how it's possible to prevent this issue ?
Related
Is it possible to set the innerHTML of an element with HTML that includes jinja2?
...
codeBlock = codeBlock +
'<div class="col-lg-4 col-md-6">' +
'<div class="card text-dark bg-light mb-3">' +
'<div class="card-header">' +
'<h6 style="text-align:center;">' + title + '</h6>' +
'</div>' +
'<div class="card-body">' +
'<img src="' + image + '" style="object-fit:contain; width: 100%"; onerror="this.src = \'../static/food.png\'" >' +
'' +
'{% for i in range(1,6) %}' +
'{% if i <=' + stars + '%} <span class="fa fa-star checked star" style="color:orange ;"></span>' +
'{% else %}' +
'<span class="fa fa-star checked star"></span>' +
'{% endif %}' +
'{% endfor %}'+
'</div>' +
'</div>' +
'</div>'
}
document.getElementById("grid").innerHTML = codeBlock
I have seen one post asking the same thing but with no answers.
I asked myself why I have to uses jinja2 and instead just used javascript
codeBlock = codeBlock +
'<div class="col-lg-4 col-md-6">' +
'<div class="card text-dark bg-light mb-3">' +
'<div class="card-header">' +
'<h6 style="text-align:center;">' + title + '</h6>' +
'</div>' +
'<div class="card-body">' +
'<img src="' + image + '" style="object-fit:contain; width: 100%"; onerror="this.src = \'../static/food.png\'" >' +
''
for (let i = 1; i < 6; i++) {
if (i <= stars) {
codeBlock = codeBlock +
'<span class="fa fa-star checked star" style="color:orange ;"></span>'
} else {
codeBlock = codeBlock +
'<span class="fa fa-star checked star"></span>'
}
}
'</div>' +
'</div>' +
'</div>'
}
Currently I am making my own modal for my system. When you click on the name of a package the modal popups up and displays. I added some JQuery that is supposed to remove the modal when clicked on the background. It does that but also when I click on the modal itself it hides.
I tried adding z-index 3 to the parent and z-index 4 to the modal but that does not work. How can I make it so that if clicked on the background, the modal disappears but when clicked on the modal itself it does nothing and people can just interact normally with the modal?
I have a small illustration
The popups are appended to a parent using Ajax (See below)
<div class="container-fluid pt-5 ">
<div class="row">
<div class="col-md-6">
<h3>{{ __('Packages') }}</h3>
</div>
</div>
<div class="row my-5">
<div class="col-md-4">
<div id="package-loading" class="text-center">
<i class="fas fa-spinner fa-pulse fa-2x color-primary"></i>
</div>
<p id="package-error" class="text-danger" style="display: none"></p>
<div id="packages-wrapper"></div>
</div>
</div>
</div>
<div class="popup-list">
</div>
<script>
$.ajax({
headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'), 'X-Requested-With': 'XMLHttpRequest'},
url: 'https://www.rainierlaansite.test/api/packages/get',
type: 'GET',
data: {},
success: function(data) {
$('#package-loading').fadeOut();
let wrapper = $("#packages-wrapper");
let popup_list = $('.popup-list');
let popup = 'popup-id';
if(data == null) {
console.log('lol')
}
$.each(data, function(index, value) {
let el = data[index];
wrapper.append(
'<div class="row my-4" data-id='+ el.id +'>' +
'<div class="col-2 d-flex justify-content-center"><i class="far fa-archive fa-2x"></i></div>' +
'<div class="col-6">' +
'<h6 class="m-0">'+ el.name +'</h6>' +
'<p class="m-0 sub-text">'+ el.description +'</p>' +
'</div>' +
'<div class="col-4 d-flex justify-content-end align-items-center">' +
'' + (el.price == 0 ? 'Download': '$ ' + el.price) +'' +
'</div>' +
'</div>' + '<hr>'
);
popup_list.append(
'<div class="package-popup shadow popup-'+ el.id +'">' +
'<div class="package-popup-dialog">' +
'<div class="package-popup-content">' +
'<div class="row">' +
'<div class="col-2">' +
'<div class="row">' +
'<div class="col-12 d-flex justify-content-center">' +
'<i class="far fa-archive fa-3x"></i>' +
'</div>' +
'</div>' +
'</div>' +
'<div class="col-7">' +
'<div class="row">' +
'<div class="col-12">' +
'<h4 class="m-0">' + el.name + '</h4>' +
'<p class="sub-text">' + el.creator + '</p>' +
'</div>' +
'</div>' +
'</div>' +
'<div class="col-3 text-center">' +
'<h4><a href="#" id="download_package" class="badge badge-pill '+ (el.price == 0 ? 'badge-primary': 'badge-light') +'">' +
(el.price == 0 ? 'Download': '$ ' + el.price) +
'</a></h4>' +
'</div>' +
'<div class="offset-2 col-7">\n' +
'<div class="rating">\n' +
'<span><i class="fas fa-star yellow"></i></span>' +
'<span><i class="fas fa-star yellow"></i></span>' +
'<span><i class="fas fa-star yellow"></i></span>' +
'<span><i class="fas fa-star yellow"></i></span>' +
'<span><i class="fas fa-star grey"></i></span>' +
'<small>ยท Uit 300 beoordelingen</small>' +
'</div>' +
'<small>Nog geen beoordelingen</small>' +
'</div>' +
'<div class="col-3 text-center">'+
'<i class="far fa-download"></i> ' + el.downloads +
'</div>' +
'</div>' +
'<div class="row my-5">' +
'<div class="col-12">' +
'<nav>' +
'<div class="nav nav-tabs" id="nav-tab" role="tablist">' +
'<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Details</a>' +
'<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Reviews</a>' +
'<a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Version history</a>' +
'</div>' +
'</nav>' +
'<div class="tab-content" id="nav-tabContent">' +
'<div class="tab-pane fade show active py-4" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">' +
'<p>' + el.description + '</p>' +
'</div>' +
'<div class="tab-pane fade py-4" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">' +
'Dit is twee tekst' +
'</div>' +
'<div class="tab-pane fade py-4" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">' +
'Dit is tekst 3' +
'</div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>'
);
});
$('.popup').on('click', function () {
if($(this).data(popup)) {
let item = $('.popup-' + $(this).data(popup));
item.addClass('show');
$(item).on('click', function() {
item.removeClass('show');
console.log('ik klik op de achtergrond');
})
}
});
},
error: function(e) {
$('#package-error').fadeIn().text("Unfortunately there was an error retrieving the packages");
}
});
</script>
HTML
SASS
.package-popup
position: fixed
top: 0
left: 0
height: 100%
width: 100%
display: none
overflow: hidden
background-color: $primary_background_transparent
z-index: 3
.package-popup-dialog
max-width: 960px
position: relative
margin: auto
top: 100px
background-color: $color-white
border-radius: 16px
padding: 3rem
z-index: 4
pointer-events: none
.package-popup-content
position: relative
pointer-events: auto
display: flex
flex-direction: column
Just check the click event target:
$(item).on('click', function(event) {
if (event.target.classList.contains("shadow")) {
// Close dialog
}
}
Remove the pointer-events: none from the css to make it work
I have Bootstrap 4 popovers added dynamically to a table.
I initialize my popover like this:
// Initialize popover
$('body').popover({
html: true,
template:
'<div class="popover popover-row-field" role="tooltip">' +
'<div class="arrow"></div>' +
'<button type="button" class="btn-popover-header btn-edit-popover-close float-right text-primary" aria-label="Close">' +
'<i class="fal fa-check"></i>' +
'</button>' +
'<button type="button" data-action="undo" class="btn-popover-header action-button text-primary float-right">' +
'<i class="fal fa-undo"></i>' +
'</button>' +
'<h3 class="popover-header"></h3>' +
'<div class="popover-body"></div>' +
'</div>',
placement: 'bottom',
trigger:'click',
position: 'relative',
selector: '.btn-edit-cell',
});
I have an event listener for a close button on the popover:
// Close popover by clicking the X
$(document).on('click', '.btn-edit-popover-close', function() {
$('.btn-edit-cell').popover('hide').popover();
});
I then clone a template row and add it to the table:
<td class="field-editor-input align-top">
<button type="button" class="btn-popover-header text-light btn-edit-cell save-btn-group" data-link="{{ $col->header }}-new"
data-html="true" title="{{ pretty_heading($col->header) }}" data-row-id="#row-template-new"
data-content="<textarea id='text-{{ $col->header }}-new' name='{{ $col->header }}' class='form-control popover-edit-field'></textarea>">
<i class="fal fa-pen text-light"> </i>
</button>
<div id="div-{{ $col->header }}-new" data-orig=""></div>
</td>
The popover opens OK but the close button does not fire.
Additionally, the popover does not stay fixed to its target if I scroll the page.
Thanks
I have this button for opening a modal box and I whould like to execute a function of the pressed button at the same time opening the modal. The modal is opening but the function no.
Here is my code
$.each(data, function (i, item) {
$('#fileListTable tbody').append("<tr><td>" + item.File + "</td><td>" + item.DateUpload + "</td><td>" + `
<i class="fa fa-file-pdf-o" aria-hidden="true"></i> PDF
<i class="fa fa-file-pdf-o" aria-hidden="true"></i> Quest
` + "</td > <td>" + `
<button id="btnStatus`+ i +`" class="btn btn-primary btn-xs btn-status" data-toggle="modal" href="#static"><i class="fa fa-list-alt" aria-hidden="true"></i> Status</button>
` + "</td><td id='statusContainer"+ i +"'>" + item.Status + "</td><td>" + item.Comments + "</td></tr > ");
});
my function
$('button[id^="btnStatus"]').click(function () {
console.log('A button was clicked');
});
You have dynamic element. So you need to attach click using on event
$('body').on('click', 'button[id^="btnStatus"]', function() {
console.log('A button was clicked');
});
In my project my UI developer has hard coded piece of html code in js. I want to keep this code in the jsp, Because i need to use spring message tags to get the file rendered in any language selected by the user.
render: function () {
$("#pageloading").show();
this.$el.html(
**'<div class="row" id="test_page">' +
'<div class="col-xs-12">' +
'<div class="panel">' +
'<div class="panel-heading">' +
'<div class="row">' +
'<div class="col-xs-4">' +
'SECTION <span id="section"> A </span>' +
'</div>' +
'<div class="col-xs-4">' +
'QUESTIONS : <span id="quesNo"> </span>' +
'</div>' +
'<div class="col-xs-4">' +
'Time Remaining : <span id="timer"></span>' +
'</div>' +
'</div>' +
'</div>' +
'<div class="panel-body" style="max-height: 425px; overflow-y: scroll; padding: 25px;">' +
'<div class="row">' +
'<div class="col-xs-12">' +
'<div class="panel-group" id="test_questions"></div>' +
'</div>' +
'</div>' +
'<!-- /.row (nested) -->' +
'</div>' +
'<!-- /.panel-body -->' +
'<div class="panel-footer">' +
'<div class="row">' +
'<div class="col-xs-3 pull-right">' +
'<button id="back_section" type="reset" class="btn btn-default">PREVIOUS</button>' +
'<button id="next_section" type="submit" class="btn btn-default pull-right" style="margin-right: 30%;">NEXT</button>' +
'<button id="submit_test" type="submit" class="btn btn-default pull-right" style="margin-right: 30%;">Submit</button>' +
'</div>' +
'</div>' +
'</div>' +
'</div>' +
'<!-- /.panel -->' +
'</div>' +
'<!-- /.col-xs-12 -->' +
'</div>' +
'<div class="modal fade" id="instructions_page" tabindex="-1" role="dialog" aria-labelledby="instructions_page" aria-hidden="true" data-backdrop="static" style="margin-top:2%">' +
'<div class="modal-dialog" style="width: 80%;">' +
'<div class="modal-content">' +
'<div class="modal-header">' +
'<h4>Instructions <div class="btn goToLastPage"><i class="fa fa-reply-all"></i> Back</div></h4>'+
'</div>' +
'<div class="modal-body">' +
'<div class="panel-body" style="text-align: justify; padding:0 100px">' +
'<div class="row">' +
'<div class="col-xs-12">' +
'<i class="fa fa-hand-o-right col-xs-1"></i><h5 class="col-xs-11"> Once the self-assessment is completed and respondents have been assigned in all the various categories, an email will be triggered to the reporting manager informing him/her of the same.</h5>'+
'<i class="fa fa-hand-o-right col-xs-1"></i><h5 class="col-xs-11"> In case the reporting manager would like to add or delete any respondents, he/she can send a mail directly to you (participant).</h5>'+
'<i class="fa fa-hand-o-right col-xs-1"></i><h5 class="col-xs-11"> Auto mailers shall be sent to all the respondents selected by the participants with the link to input their responses.</h5>'+
'<i class="fa fa-hand-o-right col-xs-1"></i><h5 class="col-xs-11"> We request all participants to please pro-actively follow up with the respondents whom they have selected for completion of responses.</h5>'+
'<i class="fa fa-hand-o-right col-xs-1"></i><h5 class="col-xs-11"> The report, based on the responses received will consist of overall summary report based on the average scores in all the different categories.</h5>'+
'<i class="fa fa-hand-o-right col-xs-1"></i><h5 class="col-xs-11"> The feedback is anonymous (except from the Direct Manager) and the recipient will receive a \'collated\' report showing all the feedback segregated as Direct Manager, Direct Reportee(s), Peers and Stakeholders. The qualitative comments will be provided as is to the recipient. In case the total number of responses across any category is <= 2, the responses will be clubbed together to retain anonymity. Please feel free to reach '+' amruta.p#exidelife.in '+' in case of any clarifications.</h5>'+
'</div>' +
'</div>' +
'</div>' +
'</div>' +
'<div class="modal-footer">' +
'<div class="startTopicTest btn btn-default"> Test Start </div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>'**
);
Backbone.ajax({
dataType: "json",
url: "topictestquestion",
data: "",
type: "POST",
beforeSend: function(xhr) {
xhr.setRequestHeader(header, token);
},
I want to put this HTML code in a jsp file and this js file should call my jsp file that i am suppose to create.
mockTestBegin: function() {
$("#pageloading").show();
this.$el.html(
'<div class="row" id="test_page">' +
'<div class="col-xs-12">' +
'<div class="panel">' +
'<div class="panel-heading">' +
'<div class="row">' +
'<div class="col-xs-4">' +
'SECTION <span id="section"> A </span>' +
'</div>' +
'<div class="col-xs-4">' +
'QUESTIONS : <span id="quesNo"></span>' +
'</div>' +
'<div class="col-xs-4">' +
'Time Remaining : <span id="timer"></span>' +
'</div>' +
'</div>' +
'</div>' +
'<div class="panel-body" style="max-height: 425px; overflow-y: scroll; padding: 25px;">' +
'<div class="row">' +
'<div class="col-xs-12">' +
'<div class="panel-group" id="test_questions"></div>' +
'</div>' +
'</div>' +
'<!-- /.row (nested) -->' +
'</div>' +
'<!-- /.panel-body -->' +
'<div class="panel-footer">' +
'<div class="row">' +
'<button id="mok_submit" type="submit" class="btn btn-danger pull-right" style="margin-right: 3%;">EXIT</button>' +
'<button id="preview_test" type="submit" class="btn btn-default pull-right" style="margin-right: 30%;">PREVIEW</button>' +
'<div class="col-xs-3 pull-right">' +
'<button id="back_section" type="reset" class="btn btn-default">PREVIOUS</button>' +
'<button id="next_section" type="submit" class="btn btn-default pull-right" style="margin-right: 30%;">NEXT</button>' +
'</div>' +
'</div>' +
'</div>' +
'</div>' +
'<!-- /.panel -->' +
'</div>' +
'<!-- /.col-xs-12 -->' +
'</div>' +
'<div class="modal fade" id="preview-mock" tabindex="-1" role="dialog" aria-labelledby="preview-mock" aria-hidden="true" data-backdrop="static" style="margin-top:2%">' +
'<div class="modal-dialog" style="width: 80%;">' +
'<div class="modal-content">' +
'<div class="modal-header">' +
'<h1 class="page-header"> Questions Numbers </h1>'+
'</div>' +
'<div class="modal-body">' +
'<div class="panel-body" style="text-align: justify; padding:0 100px">' +
'<div class="row">' +
'<div class="col-xs-12" id="preview-quession">' +
'</div>' +
'</div>' +
'</div>' +
'</div>' +
'<div class="modal-footer">' +
'<button id="mok_submit" type="submit" class="btn btn-default">Submit</button>' +
'</div>' +
'</div>' +
'</div>' +
'</div>' +
'<div class="modal fade" id="instructions_page" tabindex="-1" role="dialog" aria-labelledby="instructions_page" aria-hidden="true" data-backdrop="static" style="margin-top:2%">' +
'<div class="modal-dialog" style="width: 80%;">' +
'<div class="modal-content">' +
'<div class="modal-header">' +
'<h4>Instructions <div class="btn goToLastPage"><i class="fa fa-reply-all"></i> Back</div></h4>'+
'</div>' +
'<div class="modal-body">' +
'<div class="panel-body" style="text-align: justify; padding:0 100px">' +
'<div class="row">' +
'<div class="col-xs-12">' +
'<i class="fa fa-hand-o-right col-xs-1"></i><h5 class="col-xs-11"> Once the self-assessment is completed and respondents have been assigned in all the various categories, an email will be triggered to the reporting manager informing him/her of the same.</h5>'+
'<i class="fa fa-hand-o-right col-xs-1"></i><h5 class="col-xs-11"> In case the reporting manager would like to add or delete any respondents, he/she can send a mail directly to you (participant).</h5>'+
'<i class="fa fa-hand-o-right col-xs-1"></i><h5 class="col-xs-11"> Auto mailers shall be sent to all the respondents selected by the participants with the link to input their responses.</h5>'+
'<i class="fa fa-hand-o-right col-xs-1"></i><h5 class="col-xs-11"> We request all participants to please pro-actively follow up with the respondents whom they have selected for completion of responses.</h5>'+
'<i class="fa fa-hand-o-right col-xs-1"></i><h5 class="col-xs-11"> The report, based on the responses received will consist of overall summary report based on the average scores in all the different categories.</h5>'+
'<i class="fa fa-hand-o-right col-xs-1"></i><h5 class="col-xs-11"> The feedback is anonymous (except from the Direct Manager) and the recipient will receive a \'collated\' report showing all the feedback segregated as Direct Manager, Direct Reportee(s), Peers and Stakeholders. The qualitative comments will be provided as is to the recipient. In case the total number of responses across any category is <= 2, the responses will be clubbed together to retain anonymity. Please feel free to reach '+' amruta.p#exidelife.in '+' in case of any clarifications.</h5>'+
'</div>' +
'</div>' +
'</div>' +
'</div>' +
'<div class="modal-footer">' +
'<div class="startMockTest btn btn-default"> Test Start </div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>'
);
Backbone.ajax({
dataType: "json",
url: "mok-testquestion",
data: "",
type: "POST",
beforeSend: function(xhr) {
xhr.setRequestHeader(header, token);
},
Same goes here as well, Everywhere my UI developer has hard coded the html code. I need to put all this in a jsp template so i can make use of spring features and that jsp file need to be called at the same place where this HTML code is been residing.
I am a beginner in UI please do help me. I am struggle with this issue from past one week browsing all the possible source and also learning basics of javascript, but now i dont have much time need to deliver it soon. please help
thanks in advance.
There are many ways you can invoke JSP page from JavaScript.
1) Opening the JSP page in a separate popup window:
window.open("MyPage.jsp?param1=value1¶m2=value2","pageName","height=400,width=400");
2) Form submission:
document.forms[0].action = "MyPage.jsp";
document.forms[0].method = "post"; // "get"
document.forms[0].submit();
3) Using jquery (AJAX):
$.post("MyPage.jsp", { param1: "Abc", param2: "xyz" },
function(data){
alert("Data Loaded: " + data);
});