Develop Reference

How to avoid a modal to hide buttons and their actions? - javascript

I'm a beginner in coding and I have to prepare a POC. I have some issues with a modal. From his creation I can't click anymore on certain buttons I already had. Someone knows how to keep those buttons available even when the modal come up? I can see them but can't click on them anymore (they seemed behind the modal). You can see it on the pic attached.
Buttons are included into a javascript source code that I got back from an open Autodesk API), modal was coding by myself into an html file.
I look around but I found nothing. I also tried to adjust z-index to the modal but nothing happened.
I would like when I create my modal to keep the onclick action and to allow the action itself.
function prepareAppBucketTree() {
$('#appBuckets').jstree({
'core': {
'themes': { "icons": true },
'data': {
"url": '/api/forge/oss/buckets',
"dataType": "json",
'multiple': false,
"data": function (node) {
return { "id": node.id };
}
}
},
'types': {
'default': {
'icon': 'glyphicon glyphicon-question-sign'
},
'#': {
'icon': 'glyphicon glyphicon-cloud'
},
'bucket': {
'icon': 'glyphicon glyphicon-folder-open'
},
'object': {
'icon': 'glyphicon glyphicon-file'
}
},
"plugins": ["types", "state", "sort", "contextmenu"],
contextmenu: { items: autodeskCustomMenu }
}).on('loaded.jstree', function () {
$('#appBuckets').jstree('open_all');
}).bind("activate_node.jstree", function (evt, data) {
if (data != null && data.node != null && data.node.type == 'object') {
$("#forgeViewer").empty();
var urn = data.node.id;
getForgeToken(function (access_token) {
jQuery.ajax({
url: 'https://developer.api.autodesk.com/modelderivative/v2/designdata/' + urn + '/manifest',
headers: { 'Authorization': 'Bearer ' + access_token },
success: function (res) {
if (res.status === 'success') launchViewer(urn);
else $("#forgeViewer").html('Conversion en cours: ' + res.progress + '. Merci de réessayer plus tard.');
},
error: function (err) {
var msgButton = 'Fichier pas encore convertis! ' +
'<button class="btn btn-xs btn-info" onclick="translateObject()"><span class="glyphicon glyphicon-eye-open"></span> ' +
'Start translation</button>'
$("#forgeViewer").html(msgButton);
}
});
})
}
});
}
function autodeskCustomMenu(autodeskNode) {
var items;
switch (autodeskNode.type) {
case "bucket":
items = {
uploadFile: {
label: "Télécharger",
action: function () {
uploadFile();
},
icon: 'glyphicon glyphicon-cloud-upload'
}
};
break;
case "object":
items = {
translateFile: {
label: "Convertir",
action: function () {
var treeNode = $('#appBuckets').jstree(true).get_selected(true)[0];
translateObject(treeNode);
},
icon: 'glyphicon glyphicon-eye-open'
}
};
break;
}
return items;
}
function uploadFile() {
$('#hiddenUploadField').click();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Navigation bar: https://getbootstrap.com/examples/navbar-fixed-top/ -------------------------------------------------------------------------->
<nav class="navbar navbar-default navbar-fixed-top">
<div id="navigation" class="container-fluid">
<div id="leftSide">
<button id="navbaricons" type="button" class="glyphicon glyphicon-menu-hamburger" data-toggle="modal" data-target="#myModal" onclick="masquer_div('Arborescence')"></button>
<a href="http://www.overdrive.fr/accueil/" target="_blank">
<img alt="Logo Overdrive" src="img/logo_overdrive_blanc.png"></a>
<a id="nom">- bimDrive -</a>
<button id="navbaricons" class="glyphicon glyphicon-user" style="float: right" onclick="document.getElementById('id01').style.display='block'"></button>
<button id="navbaricons" type="button" class="glyphicon glyphicon-map-marker" style="float: right" data-toggle="modal" data-target="#MapModal" onclick="masquer_div('MiniMap')"></button>
</div>
</div>
</nav>
<!-- END of navigation bar ----------------------------------------------------------------------------------------------------------->
<!-- Arborescence Modal -------------------------------------------------------------------------------------------------------------->
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false">
<div class="arbomodal-dialog">
<!-- Modal content---------------------------------------------------------------------------------------------------------------------->
<div class="arbomodal-content">
<div class="modal-header" data-toggle="tooltip">
<button class="glyphicon glyphicon-plus-sign" style="float: left" id="showFormCreateBucket" data-toggle="modal" data-target="#createBucketModal"></button>Maquettes
<span id="refreshBuckets" class="glyphicon glyphicon-refresh" style="cursor: pointer; float: right"></span>
</div>
<div id="appBuckets" class="modal-body"></div>
</div>
</div>
</div>

Related

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
I'm working on a Django REST Framework task. Every time I perform a Create, Retrieve, Update, and Delete function the list item of div is flashing every time.
How can I stop this flashing/flickering?
From API URL I have to display the paginated data. If I click the next page then also flickering is occurred. How can I get rid of this flickering/flashing issue?
main.html
{% extends 'todo/index.html' %}
{% block content %}
<div class="center-column" id="center-column">
<h5 class="card-title" id="welcome" data-id={{ request.user.id }}>
Hello {{ request.user.username }}, Create your todo list
</h5>
<div id="addTodoForm">
<form action="" method="">
<div class="input-group-append">
<input type="text" class="title-input" required name="title" placeholder="e.g. Chemistry">
<button type="submit" class="form-control btn btn-primary mr-sm-2" id="addTodobtn">
Add Todo
</button>
</div>
</form>
</div>
</div>
<div class="row" id="row">
<div class="col-sm-5">
<div class="card">
<div class="card-body">
<h5 class="card-title">
Incomplete Todo Items
</h5>
<hr />
<div class="list-group" id="incompleteTodo">
</div>
<hr>
<nav aria-label="..." id="incompletePagination">
<ul class="pagination justify-content-center">
<li class="page-item">
<button class="page-link" tabindex="-1" id="prevPageI">&laquo</button>
</li>
<li class="page-item"><button class="page-link" id="currPageI">1</button></li>
<li class="page-item"><button class="page-link" id="nextPageI">&raquo</button></li>
</ul>
</nav>
</div>
</div>
</div>
<div class="col-sm-5">
<div class="card">
<div class="card-body">
<h5 class="card-title">
Completed Todo Items
</h5>
<hr>
<div class="list-group" id="completedTodo">
</div>
<hr>
<nav aria-label="..." id="completedPagination">
<ul class="pagination justify-content-center">
<li class="page-item">
<button class="page-link" tabindex="-1" id="prevPageC">&laquo</button>
</li>
<li class="page-item"><button class="page-link" id="currPageC">1</button></li>
<li class="page-item"><button class="page-link" id="nextPageC">&raquo</button></li>
</ul>
</nav>
</div>
</div>
</div>
</div>
{% endblock %}
main.js
function getCookie(name) {
let cookieValue = null;
if (document.cookie && document.cookie !== '') {
const cookies = document.cookie.split(';');
for (let todo = 0; todo < cookies.length; todo++) {
const cookie = cookies[todo].trim();
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
var csrftoken = getCookie('csrftoken');
function taskStatus(item) {
return `
${item.map(task =>
`
<div class="card list-group-item list-group-item-danger mt-1" id="task_${task.id}">
<span class="font-italic">${task.heading}</span>
<div class="float-right">
<badge type="submit" class="badge badge-light" id="complete-task_${task.id}">
✔
</badge>
<badge type="submit" class="badge badge-warning ml-1" id="delete-task_${task.id}">
❌
</badge>
</div>
<div class="float-right">
<badge type="submit"
class="badge badge-dark mr-1 edit-task"
id="edit-task_${task.id}"
data-target="#updateTaskModal_${task.id}"
data-toggle="modal">
edit
</badge>
<div class="modal fade" id="updateTaskModal_${task.id}" tabindex="-1" role="dialog"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Update Todo</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="list-group-item list-group-item-warning">
<input type="text" required id='updateTaskInp_${task.id}' size='45'
name="heading_${task.id}" value="${task.heading}">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="updateTaskModalSubmit_${task.id}"
data-dismiss="modal">
Submit
</button>
</div>
</div>
</div>
</div>
</div>
</div>`
).join('')}
`
};
function taskCompleted(item) {
return `
${item.map(task =>
`
<div class="list-group-item bg-danger mb-1">
<span class="text-light font-italic">${task.heading}</span>
<div class="float-right">
<badge type="submit" class="badge badge-warning ml-1" id="delete-task_${task.id}">
❌
</badge>
</div>
</div>
`
).join('')}
`
};
$(document).ready(function() {
const incompleteHome = '/api/todo-incomplete/?incomplete=1';
const completedHome = '/api/todo-completed/?completed=1';
todoIncompleteItems(incompleteHome);
todoCompletedItems(completedHome);
// Create Todo Item
$('#addTodobtn').click(function(e) {
e.preventDefault();
var title = $(".title-input").val();
var user_id = $('#welcome').data('id');
console.log("Title: ", title)
$.ajax({
url: "api/create-todo/",
type: "POST",
headers:{
"X-CSRFToken":csrftoken
},
data: {
"title": title,
"user_id": user_id,
},
success: function(data) {
$("#incompleteTodo").html('');
todoIncompleteItems(incompleteHome);
},
error: function(err) {
alert("check the console for errors");
console.log("Create Todo Item Error: ", err)
}
})
$(".title-input").val('');
})
var nextIncomplete = null;
var prevIncomplete = null;
var currentPageIncomplete = null;
var currentIncomplete = null;
$('#nextPageI').click(function() {
currentIncomplete +=1
$('#currPageI').html(currentIncomplete)
todoIncompleteItems(nextIncomplete);
})
$('#prevPageI').click(function() {
currentIncomplete -= 1
$('#currPageI').html(currentIncomplete)
todoIncompleteItems(prevIncomplete);
})
// Page wise Incomplete Todo Items
function todoIncompleteItems(incompleteUrl) {
$('#incompleteTodo').html('');
$.ajax({
url: incompleteUrl,
type: 'GET',
success: function(data) {
currentPageIncomplete = `api/todo-incomplete/?incomplete=${data.current_page_no}`;
currentIncomplete = data.current_page_no;
nextIncomplete = data.next;
if (data.next != null) {
$('#nextPageI').css("visibility", "visible")
} else {
$('#nextPageI').css("visibility", "hidden")
}
prevIncomplete = data.previous;
if (data.previous != null) {
$('#prevPageI').css("visibility", "visible")
} else {
$('#prevPageI').css("visibility", "hidden")
}
if (data.next === null && data.previous === null) {
$('#incompletePagination').css("visibility", "hidden")
} else {
$('#incompletePagination').css("visibility", "vidible")
}
let todoItems = data.results;
for (let todo in todoItems) {
$('#incompleteTodo').append(
`<div class="list-group-item list-group-item-primary mb-1" id="todo-${todo}"
data-id="${todoItems[todo].id}">
<span class="font-weight-bold">${todoItems[todo].title}</span>
<div class="float-right">
<badge type="submit" class="badge badge-warning" id="deleteTodo_${todoItems[todo].id}">
❌
</badge>
</div>
<div class="float-right">
<badge type="submit" class="badge badge-light mr-1"
id="completed-todo_${todoItems[todo].id}">
✔
</badge>
</div>
<div class="float-right">
<badge type="submit" class="badge badge-dark mr-1 edit"
data-target="#updateTodoModal_${todoItems[todo].id}" data-toggle="modal">
edit
</badge>
<div class="modal" id="updateTodoModal_${todoItems[todo].id}" tabindex="-1"
role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Update Todo</h5>
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="list-group-item list-group-item-warning">
<input type="text" id='updateTodoInp_${todoItems[todo].id}'
size="45" value="${todoItems[todo].title}">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary"
id="updateModalSubmit_${todoItems[todo].id}" data-dismiss="modal">
Submit
</button>
</div>
</div>
</div>
</div>
</div>
<div class="float-right mr-1">
<badge type="submit" class="badge badge-primary add-task" data-toggle="modal"
data-target="#addTaskModal_${todoItems[todo].id}">
✚
</badge>
<div class="modal" id="addTaskModal_${todoItems[todo].id}" tabindex="-1" role="dialog"
aria-labelledby="taskModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="taskModalLabel">
Add New Task for ${todoItems[todo].title}
</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="list-group-item list-group-item-dark">
<input type="text" required id='addTaskInp_${todoItems[todo].id}' size="45"
name="heading" placeholder="Enter the task name here...">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary closeModal"
data-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary"
id="taskSubmit_${todoItems[todo].id}" data-dismiss="modal">
Submit
</button>
</div>
</div>
</div>
</div>
</div>
<div class="mt-3 incompleteTodo-task">
${todoItems[todo].tasks ? taskStatus(todoItems[todo].tasks) : ''}
</div>
</div>
`
)
};
for (var todo in todoItems) {
var deleteTodoBtn = document.querySelector(`#deleteTodo_${todoItems[todo].id}`)
var taskSubmitBtn = document.querySelector(`#taskSubmit_${todoItems[todo].id}`)
var editTodoBtn = document.querySelector(`#updateModalSubmit_${todoItems[todo].id}`)
var completedTodoBtn = document.querySelector(`#completed-todo_${todoItems[todo].id}`)
deleteTodoBtn.addEventListener('click', (function(element) {
return function() {
deleteTodo(element)
}
})(todoItems[todo]))
taskSubmitBtn.addEventListener('click', (function(element) {
return function() {
addTaskItem(element)
}
})(todoItems[todo]))
editTodoBtn.addEventListener('click', (function(element) {
return function() {
editTodoItem(element)
}
})(todoItems[todo]))
completedTodoBtn.addEventListener('click', (function(element) {
return function() {
completedTodo(element)
}
})(todoItems[todo]))
var taskItems = todoItems[todo].tasks
for (var task in taskItems) {
var deleteTaskBtn = document.querySelector(`#delete-task_${taskItems[task].id}`)
var completeTaskBtn = document.querySelector(`#complete-task_${taskItems[task].id}`)
var editTaskBtn = document.querySelector(`#updateTaskModalSubmit_${taskItems[task].id}`)
deleteTaskBtn.addEventListener('click', (function(element) {
return function() {
deleteTask(element)
}
})(taskItems[task]))
completeTaskBtn.addEventListener('click', (function(element) {
return function() {
completedTask(element)
}
})(taskItems[task]))
editTaskBtn.addEventListener('click', (function(element) {
return function() {
editTaskItem(element)
}
})(taskItems[task]))
if(taskItems[task].completed === true) {
$(`#task_${taskItems[task].id}`).removeClass("list-group-item-danger")
$(`#task_${taskItems[task].id}`).addClass("list-group-item-dark")
$(`#edit-task_${taskItems[task].id}`).remove()
$(`#complete-task_${taskItems[task].id}`).remove()
}
}
}
},
error: function(err) {
console.log(err)
}
});
}
var nextCompleted = null;
var prevCompleted = null;
var currentPageCompleted = null;
var currentCompleted = null;
$('#nextPageC').click(function() {
currentCompleted +=1
$('#currPageC').html(currentCompleted)
todoCompletedItems(nextCompleted);
})
$('#prevPageC').click(function() {
currentCompleted -=1
$('#currPageC').html(currentCompleted)
todoCompletedItems(prevCompleted);
})
// Page wise Completed Todo Items
function todoCompletedItems(CompletedUrl) {
$('#completedTodo').html('');
$.ajax({
url: CompletedUrl,
type: 'GET',
success: function(data) {
var todoItems = data.results;
currentPageCompleted = `api/todo-completed/?completed=${data.current_page_no}`
currentCompleted = data.current_page_no
nextCompleted = data.next;
if (data.next != null) {
$('#nextPageC').css("visibility", "visible")
} else {
$('#nextPageC').css("visibility", "hidden")
}
prevCompleted = data.previous;
if (data.previous != null) {
$('#prevPageC').css("visibility", "visible")
} else {
$('#prevPageC').css("visibility", "hidden")
}
if (data.next === null && data.previous === null) {
$('#completedPagination').css("visibility", "hidden")
} else {
$('#completedPagination').css("visibility", "visible")
}
for (var todo in todoItems) {
$('#completedTodo').append(
`
<div class="list-group-item bg-success mb-1"
id="todo_${todoItems[todo].id}" data-id="${todoItems[todo].id}">
<span class="text-light font-weight-bold">${todoItems[todo].title}</span>
<div class="float-right">
<badge type="submit" class="badge badge-warning mr-2"
id="deleteTodo_${todoItems[todo].id}">
❌
</badge>
</div>
<div class="completedTodoTask mt-3">
${todoItems[todo].tasks ? taskCompleted(todoItems[todo].tasks) : ''}
</div>
</div>
`
)
}
for (var todo in todoItems) {
var deleteTodoBtn = document.getElementById(`deleteTodo_${todoItems[todo].id}`)
deleteTodoBtn.addEventListener('click', (function(item) {
return function() {
deleteTodo(item)
}
})(todoItems[todo]))
var taskItems = todoItems[todo].tasks
for (var task in taskItems) {
var deleteTaskBtn = document.getElementById(`delete-task_${taskItems[task].id}`)
deleteTaskBtn.addEventListener('click', (function(element) {
return function() {
deleteTask(element)
}
})(taskItems[task]))
}
}
},
error: function(err) {
console.log(err);
}
})
}
function editTodoItem(item) {
var user_id = $('#welcome').data('id');
var title = $(`#updateTodoInp_${item.id}`).val();
$.ajax({
url: `api/update-todo/${item.id}/`,
type: 'POST',
headers:{
"X-CSRFToken":csrftoken
},
data: {
'title': title,
'user_id': user_id,
},
success: function(data) {
todoIncompleteItems(currentPageIncomplete);
},
error: function(data) {
alert("check the console for errors")
console.log('Problem in updating todo item: ', data)
}
})
}
function addTaskItem(item) {
var heading = $(`#addTaskInp_${item.id}`).val();
var user_id = $('#welcome').data('id')
$.ajax({
url: 'api/create-task/',
type: 'POST',
data: {
'heading': heading,
'user': user_id,
'todo': item.id,
'csrfmiddlewaretoken': csrftoken,
},
success: function(data) {
todoIncompleteItems(currentPageIncomplete);
},
error: function(data) {
alert("check the console for errors")
console.log('Problem in adding new task item: ', data)
}
})
}
function completedTodo(item) {
var user_id = $('#welcome').data('id')
$.ajax({
url: `api/completeTodoTask/${item.id}/`,
type: 'POST',
headers:{
"X-CSRFToken":csrftoken
},
data: {
'title': item.title,
'user_id': user_id,
'completed': true,
},
success: function(data) {
todoIncompleteItems(currentPageIncomplete);
todoCompletedItems(completedHome);
},
error: function(data) {
alert("check the console for errors")
console.log('Problem in Completing Todo item: ', data)
}
})
}
function deleteTodo(item) {
$.ajax({
url: `api/delete-todo/${item.id}/`,
type: 'DELETE',
headers: {
"X-CSRFToken": csrftoken,
},
success: function(data) {
todoIncompleteItems(currentPageIncomplete);
todoCompletedItems(currentPageCompleted);
},
error: function(data) {
alert("check the console for errors")
console.log("There was an error while deleting Todo Item: ", data)
}
})
}
function editTaskItem(item) {
var user_id = $('#welcome').data('id');
var heading = $(`#updateTaskInp_${item.id}`).val();
$.ajax({
url: `api/update-task/${item.id}/`,
type: 'POST',
headers:{
"X-CSRFToken":csrftoken
},
data: {
'heading': heading,
'user': user_id,
'todo': item.todo,
},
success: function(data) {
todoIncompleteItems(currentPageIncomplete);
},
error: function(err) {
alert("check the console for errors")
console.log("There was an error while deleting Task Item: ", data)
}
})
}
function completedTask(item) {
var user_id = $('#welcome').data('id')
$.ajax({
url: `api/complete-task/${item.id}/`,
type: 'POST',
data: {
'heading': item.heading,
'user': user_id,
'completed': true,
'title': 'title',
'user_id': user_id,
'csrfmiddlewaretoken': csrftoken,
},
success: function(data) {
todoIncompleteItems(currentPageIncomplete);
todoCompletedItems(completedHome);
},
error: function(data) {
console.log('Problem in Completing Task item: ', data)
}
})
}
function deleteTask(item) {
console.log("Delete Task Button Clicked: ", item.heading)
$.ajax({
url: `api/delete-task/${item.id}/`,
type: 'DELETE',
headers: {
"X-CSRFToken": csrftoken,
},
success: function(data) {
todoIncompleteItems(currentPageIncomplete);
todoCompletedItems(currentPageCompleted);
},
error: function(data) {
alert("check the console for errors")
console.log("There was an error while deleting Task Item: ", data)
}
})
}
})

At first, I have removed $("#incompleteTodo").html("") from the main.js file.
Then, Created let todo_incomplete = []; outside the function for storing the data
locally and add ed
let todoItems = data.results;
for (let todo in todoItems) {
try {
document.getElementById(`todo_${todo}`).remove();
} catch(err){}
}
After the loop ends, I have added
if(todo_incomplete.length > todoItems.length){
for (var i = todoItems.length; i < todo_incomplete.length; i++){
document.getElementById(`todo_${i}`).remove();
}
}
todo_incomplete = todoItems;
I used this method and it's working fine. I haven't found any solutions for this.
On implementing the same method for completed_Items I was able to achieve on bot the list's.
You can check this YouTube video, timestamp 49:00

References
jquery comments
The jquery comments documentation
this issue in github
Attachments
comments-data.js is test data : Download here
jquery-comments.js creates the whole comments system: Download here
jquery-comments.min.js if you require it: Download here
Description
I have a view with a list of "articles" with a "read more" button on each "article" in the list. When I click on the read more button a modal opens up with a partial view with the jquery comments in it. However, when I search for the pinged users (using the # sign), the list of users don't show by the textarea, but instead higher up in the modal (far from the textarea).
Below is an image, then below that is my code. You will see at the bottom of the image I have put the '#' sign and the list of users is displayed on the top, it should be by the textarea. It also seems that when I click on the articles lower in the list, the higher the list of users display when I push the '#' sign:
MVC View
Below is the part populating the "Articles" from where the Modal is being called from:
#{
int iGroupNameId = 0;
int iTotalArticles = 0;
foreach (var groupItems in Model.ArticleGroups)
{
iTotalArticles = Model.ArticlesList.Where(x => x.fkiGroupNameId == groupItems.pkiKnowledgeSharingCenterGroupsId).Count();
if (iTotalArticles > 0)
{
<div style="background: linear-gradient(#B5012E, darkred); margin: 10px; padding: 10px; font-weight: bold; color: white; text-transform: uppercase;">#groupItems.GroupName</div><div class="container" style="width:100%">
#if (groupItems.pkiKnowledgeSharingCenterGroupsId != iGroupNameId)
{
foreach (var item in Model.ArticlesList.Where(x => x.fkiGroupNameId == groupItems.pkiKnowledgeSharingCenterGroupsId))
{
<div class="row">
<div class="col-md-4">
#if (User.IsInRole("Administrator"))
{
<div class="pull-right">
<div class="btn-group">
<button class="btn dropdown-toggle btn-xs btn-info" data-toggle="dropdown">
<i class="fa fa-gear"></i> <i class="fa fa-caret-down"></i>
</button>
<ul class="dropdown-menu pull-right">
<li>
Edit
</li>
<li class="divider"></li>
<li>
Delete
</li>
</ul>
</div>
</div>
}
<img src="#item.ArticleImage" class="img-responsive" alt="img" style="width:350px;height:200px">
<ul class="list-inline padding-10">
<li>
<i class="fa fa-calendar"></i>
#item.DateTimeStamp.ToLongDateString()
</li>
<li>
<i class="fa fa-comments"></i>
#item.ArticleComments
</li>
<li>
<i class="fa fa-eye"></i>
#item.ArticleViews
</li>
</ul>
</div>
<div class="col-md-8 padding-left-0">
<h6 class="margin-top-0"> <span style="font-size:large">#item.Title</span><br><small class="font-xs"><i>Published by #item.User_FullName</i></small></h6>
<p>
#Html.Raw(item.Description)
</p>
#*<a class="btn btn-danger" href="#Url.Action("ShowArticleDetails", "ILearn", new { id = item.KnowledgeSharingArticlesId })">Read more</a>*#
<button type="button" onclick="showArticle('#item.KnowledgeSharingArticlesId')" class="btn btn-danger" data-target="#show-details-modal" data-toggle="modal">
Read more
</button>
</div>
</div>
<hr>
}
}
</div>
}
}
}
Modal
This is placed at the top of the page(Under the #model appname.ViewModels.VM):
<!--Loading Panel-->
<div id="loadingPanel" style="display: none;">
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-info" style="width: 100%">...LOADING...</div>
</div>
</div>
<!-- Show details modal-->
<div id="show-details-modal" class="modal fade" style="width:100%">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title"></h4>
<div id="loadingPanelShowDetails" class="col-md-12 text-center" style="display: none;">
<br />
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-info" style="width: 100%">...LOADING...</div>
</div>
</div>
<div id="target-show-details">
</div>
</div>
</div>
</div>
</div>
Jquery Code
function showArticle(id) {
$("#target-show-details").html('');
$('#loadingPanelShowDetails').show();
$.ajax({
type: 'get',
url: '#Url.Action("ShowArticleDetails", "ILearn")',
contentType: 'application/json; charset=utf-8',
dataType: 'html',
data: { "id": id },
success: function (result) {
$("#target-show-details").html(result);
$('#loadingPanelShowDetails').hide();
var saveComment = function (data) {
$(data.pings).each(function (index, id) {
var user = usersArray.filter(function (user) { return user.id == id })[0];
alert(user.fullname);
data.content = data.content.replace('##' + id, '##' + user.fullname);
});
return data;
}
$('#articlecomments-container').comments({
profilePictureURL: 'https://viima-app.s3.amazonaws.com/media/public/defaults/user-icon.png',
currentUserId: 1,
roundProfilePictures: true,
textareaRows: 1,
enableAttachments: true,
enableHashtags: true,
enablePinging: true,
getUsers: function (success, error) {
$.ajax({
type: 'get',
traditional: true,
url: '#Url.Action("GetPinnedUsers", "ILearn")',
success: function (usersArray) {
success(usersArray)
},
error: error
});
},
getComments: function (success, error) {
$.ajax({
type: 'get',
traditional: true,
data: { "id": id },
url: '#Url.Action("GetArticleComments", "ILearn")',
success: function (commentsArray) {
success(saveComment(commentsArray))
},
error: error
});
},
postComment: function (data, success, error) {
$.ajax({
type: 'post',
dataType: "json",
url: '#Url.Action("PostArticleComment", "ILearn")',
data: { "CVM": data, "articleId": id },
success: function (comment) {
success(comment);
},
error: error
});
},
putComment: function (data, success, error) {
$.ajax({
type: 'post',
dataType: "json",
url: '#Url.Action("PutArticleComment", "ILearn")',
data: { "CVM": data, "articleId": id },
success: function (comment) {
success(comment);
},
error: error
});
},
deleteComment: function (data, success, error) {
$.SmartMessageBox({
title: "Deleting Comment?",
content: "Are you sure that you want to delete this comment?",
buttons: '[No][Yes]'
}, function (ButtonPressed) {
if (ButtonPressed === "Yes") {
$.ajax({
type: 'post',
dataType: "json",
url: '#Url.Action("DeleteArticleComment", "ILearn")',
data: { "CVM": data, "articleId": id },
success: function (data) {
if (data.status === "usersuccess") {
$.smallBox({
title: "<strong>Comment Deleted</strong>",
content: "<i class='fa fa-clock-o'></i> <i>Comment was successfully deleted! <strong</strong></i>",
color: "#659265",
iconSmall: "fa fa-check fa-2x fadeInRight animated",
timeout: 4000
});
success();
} else {
success();
}
}
});
}
if (ButtonPressed === "No") {
$.smallBox({
title: "<strong>Comment not deleted</strong>",
content: "<i class='fa fa-clock-o'></i> <i>This comment has not been deleted.</i>",
color: "#C46A69",
iconSmall: "fa fa-times fa-2x fadeInRight animated",
timeout: 4000
});
}
});
e.preventDefault();
},
upvoteComment: function (data, success, error) {
if (data.user_has_upvoted) {
$.ajax({
type: 'post',
dataType: "json",
url: '#Url.Action("UpVoteArticleComment", "ILearn")',
data: { "CVM": data, "articleId": id },
success: function () {
success(data)
},
error: error
});
} else {
$.ajax({
type: 'post',
url: '#Url.Action("DeleteArticleCommentUpvote", "ILearn")',
data: { "commentId": data.id },
success: function () {
success(commentJSON)
},
error: error
});
}
},
uploadAttachments: function (commentArray, success, error) {
var responses = 0;
var successfulUploads = [];
var serverResponded = function () {
responses++;
// Check if all requests have finished
if (responses == commentArray.length) {
// Case: all failed
if (successfulUploads.length == 0) {
error();
// Case: some succeeded
} else {
success(successfulUploads)
}
}
}
$(commentArray).each(function (index, commentJSON) {
// Create form data
var formData = new FormData();
$(Object.keys(commentJSON)).each(function (index, key) {
var value = commentJSON[key];
if (value) formData.append(key, value);
});
formData.append('fkiKnowledgeSharingArticlesId', id);
$.ajax({
url: '#Url.Action("UploadToArticleComments", "ILearn")',
type: 'POST',
data: formData,
cache: false,
contentType: false,
processData: false,
success: function (commentJSON) {
successfulUploads.push(commentJSON);
serverResponded();
},
error: function (data) {
serverResponded();
},
});
});
}
});
},
error: function (xhr, textStatus, errorThrown) {
alert(xhr.responseText);
}
});
}
MVC Partial View
#model Innovation_Cafe.Models.KnowledgeSharingArticles
<div class="col-lg-12">
<div class="margin-top-10">
<div style="text-align:center;border:solid;border-style:solid">
<img src="#Model.ArticleImage" class="img-responsive" alt="img" style="width:100%;">
</div>
<ul class="list-inline padding-10">
<li>
<i class="fa fa-calendar"></i>
#Model.DateTimeStamp.ToLongDateString()
</li>
<li>
<i class="fa fa-comments"></i>
#Model.ArticleComments
</li>
<li>
<i class="fa fa-eye"></i>
#Model.ArticleViews
</li>
</ul>
</div>
</div>
<div class="col-lg-12">
<h6 class="margin-top-0"> #Model.Title<br><small class="font-xs"><i>Published by #Model.User_FullName</i></small></h6>
<br />
<p>
#Html.Raw(Model.Description)
</p>
<p>
#if (Model.FileType == ".mp4")
{
<div style="text-align:center;border-style:solid">
<video controls width="100%">
<source src="#Model.FilePath" type="video/mp4" />
</video>
</div>
}
else
{
if (Model.FilePath !=null)
{
<p>Click here to view file: Click here</p>
}
}
</div>
<div class="col-md-12">
<p> </p>
<hr style="border:solid" />
</div>
<div class="row col-md-12">
<div class="col-md-12" id="articlecomments-container">
</div>
</div>
At the bottom of the partial view is this div where it is populated:
<div class="row col-md-12">
<div class="col-md-12" id="articlecomments-container">
</div>
</div>
EDIT
After spending quite some time running through the jquery-comments.js file, I found that displaying of the pinged users its happening here:
// CUSTOM CODE
// ========================================================================================================================================================================================
// Adjust vertical position
var top = parseInt(this.$el.css('top')) + self.options.scrollContainer.scrollTop();
this.$el.css('top', top);
This seems to be taking the css('top') of View, which causes the problem on the pinging of the users on the partialview.

The issue takes place rather because of your wrong bootstrap layout: you have to include all col into row, whereas in your example you use raw and col-md-12 for the same container.
After I included columns into row elements correctly everything started working the right way. In other words, just write the last section this way:
<div class="row">
<div class="col-md-12" id="articlecomments-container">
</div>
</div>
Please, take a look at an example of nesting in Bootstrap 4.
UPDATE
I've managed to reproduce the mistake thanks to your tip to draw numerous articles on the page. The issue is indeed because of scrolling, though the reason seems to be deeper in jquery.textcomplete.js in a function _fitToBottom (it takes into account the main window scroll but not of the embeded modal container). However, a faster approach I use instead of rectifying that elaborate peice of logic is exactly at the spot which you pointed to (instead of the last 2 rows you showed):
var topPoint = self.options.scrollContainer[0].offsetTop;
var scrolledWindow = self.options.scrollContainer.parents().filter(function () {
return this.scrollTop > 0;
})[0];
var spaceAvailable = $(window).height() - (topPoint - scrolledWindow.scrollTop);
var elHeight = this.$el.height();
this.$el.css('top', spaceAvailable > elHeight ? topPoint: topPoint - elHeight);
The logic is based on looking for the closest parent with scroll and then it measures whether the rest of the space is enough to render the dropdown to figure out its final position. It might slightly miss the pointer, but still works fine in spite of scrolling. I've tried it out in Chrome and Firefox. Hopefully, it will lead you to your own approach.

In my UI Grid here are the Column Defs in my myController.js file:
{ field: 'trans_typ_dsc', headerTooltip: 'Transaction Type Description', displayName: 'Transaction Type Description', cellTemplate: '<div class="wordwrap">{{COL_FIELD}}</div>' },
{ field: 'trans_stat', displayName: 'Transaction Status' },
{ field: 'sub_trans_actn_typ', displayName: 'Sub Transaction Action Type', cellTemplate: '<div class="wordwrap">{{COL_FIELD}}</div>' , visible : false },
{ field: 'case_key', displayName: 'Case Key', visible: true, celltemplate: '<a class="text-center" ng-href="#" ng-click="grid.appScope.setAssociateCaseModal(row)">{{COL_FIELD}}</a>' },
{ field: 'approved_by', displayName: 'Approved By', visible: false }
Here on clicking the case_key link a UI Bootstrap modal should pop up .
How to do that ?
I know in a html file using a button click it is something like :
<h3>Search Transaction</h3>
<div style="float: right; margin-top: -35px"><button type="button" class="btn btn-default" data-toggle="modal" data-target="#recentSearchesModal">Recent Searches</button></div>
</div>
<div class="modal fade" id="recentSearchesModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Recent Searches</h4>
</div>
<div class="modal-body">
<div class="panel panel-default">
<div class="menu_simple" ng-repeat="obj in CaseRecentSearches" style="padding:8px;">
<ul>
<li>
{{obj | placeholderfunc}}
</li>
</ul>
</div>
<!-- /.panel-body -->
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
But here the click event is my controller.js file then how to get the modal opened ?

You need to modify the field's cellTemplate and then call grid.appScope.openModal(). openModal should live in your main controller under $scope.openModal. Do it like this:
Your template:
var myTemplate = "<a href='#' ng-click='grid.appScope.openModal($event, row)'>{{ row.entity.myFieldName }}</a>";
Use the template in gridOptions.
$scope.gridOptions = {
columnDefs: [{
field: 'myFieldName',
displayName: 'My Field Name',
cellTemplate: myTemplate;
}]
};
Function to call modal:
$scope.openModal = function (e, row) {
//in here, you can access the event object and row object
var myEvent = e;
var myRow = row;
//this is how you open a modal
var modalInstance = $uibModal.open({
templateUrl: '/path/to/modalTemplate.html',
controller: MyModalCtrl,
backdrop: 'static'
//disable the keyboard
//keyboard: false,
resolve {
//pass variables to the MyModalCtrl here
event: function() { return myEvent; },
row: function() { return myRow; }
}
});
//call the modal to open, then decide what to do with the promise
modalInstance.result.then(function() {
//blah blah the user clicked okay
},function(){
//blah blah the user clicked cancel
})
}

I'm using asp.net mvc i want to update data in database using a bootsrap modal
And partial Views.
The broblem is when i click on the link to show the Model it's not working (it shows an empty modal)
this is my Code:
//the Controller Action
public ActionResult Edit(int id = 0)
{
Tache tache = db.Taches.Find(id);
if (tache == null)
{
return HttpNotFound();
}
return PartialView("PartialEdit", tache);
}
// the index View that contain the link and the modal definition :
<td>
<a data-modal='' href='"/Tache/edit/"+#item.TacheId' data-id="#item.TacheId" id="#item.TacheId " title=" edit">Edit </a> |
#Html.ActionLink("Delete", "Delete", new { id = item.TacheId })
</td>
<div id='myModal' class='modal fade'>
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div id='myModalContent'></div>
</div>
</div>
</div>
// and this is the Partial View
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Nouvelle Tâche</h4>
</div>
#using (Html.BeginForm("Create", "Tache", FormMethod.Post, new { #id = "formId" }))
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(true)
#Html.HiddenFor(model => model.TacheId)
<div class="modal-body">
//Some forms in inputs
<div class="row">
// Finaly my javascript :
$(function () {
$.ajaxSetup({ cache: false });
$("a[data-modal]").on("click", function (e) {
$('#myModalContent').load(this.href, function () {
$('#myModal').modal({
keyboard: true
}, 'show');
bindForm(this);
});
return false;
});
});
function bindForm(dialog) {
$('form', dialog).submit(function () {
$('#progress').show();
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function (result) {
if (result.success) {
$('#myModal').modal('hide');
$('#progress').hide();
location.reload();
} else {
$('#progress').hide();
$('#myModalContent').html(result);
bindForm();
}
}
});
return false;
});
}
I think the problem may came from the link that somthing is missing their !!
but i'm not sure
if someone can help me that will be great
Think you

As I have said in my comment the code works perfectly now.
In my Index view I have replaced this:
<a data-modal='' href='"/Tache/edit/"+#item.TacheId' data-id="#item.TacheId" id="#item.TacheId " title=" edit">Edit </a>
To this:
<a data-modal='' href="#Url.Action("Edit", "Tache", new { id = item.TacheId })" data-id="#item.TacheId" id="#item.TacheId " title=" edit">Modifier </a>

I am working on an asp.net mvc5 web application, and i am facing a problem as jquery is not loading if i do ajax paging inside my webgrid.
I got the following.The main view which have the grid:-
#model SkillManagement.Models.PagedList<SkillManagement.Models.Phone>
#{
ViewBag.Title = "Phone List";
}
<h1>Phone List</h1>
<div class="well">
#using (Html.BeginForm("index", null, FormMethod.Get))
{
<div style="margin-top:17px;">
#{
var grid = new WebGrid(
canPage: true,
rowsPerPage: Model.PageSize,
canSort: true,
ajaxUpdateContainerId: "grid");
grid.Bind(Model.Content, rowCount: Model.TotalRecords, autoSortAndPage: false);
grid.Pager(WebGridPagerModes.All);
#grid.GetHtml(htmlAttributes: new { id = "grid" }, // id for ajaxUpdateContainerId parameter
fillEmptyRows: false,
tableStyle: "table table-bordered table-hover",
mode: WebGridPagerModes.All,
columns: grid.Columns(
grid.Column("PhoneId", "ID"),
//code goes here
grid.Column(header: "Action", canSort: false, style: "action",
format: #<text>
#Html.Raw("<a data-modal='' href='/phone/details/" + item.PhoneId + "' id='" + item.PhoneId + "' title='Detail'> <span class='glyphicon glyphicon-search'> </span> </a>")
#Html.Raw("<a data-modal='' href='/phone/edit/" + item.PhoneId + "' id='" + item.PhoneId + "' title='Edit'> <span class='glyphicon glyphicon-edit'> </span> </a>")
#Html.Raw("<a data-modal='' href='/phone/delete/" + item.PhoneId + "' id='" + item.PhoneId + "' title='Delete'> <span class='glyphicon glyphicon-trash'> </span> </a>")
</text>)
));
}
</div>
}
</div>
<!-- modal placeholder-->
<div id='myModal' class='modal fade in'>
<div class="modal-dialog">
<div class="modal-content">
<div id='myModalContent'></div>
</div>
</div>
</div>
#section scripts{
#Scripts.Render("~/scripts/appjs/phones.js")
}
and the _partial view which will be rendered as a modal popup:-
#model SkillManagementTDMGroup.Models.Phone
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 class="modal-title">Edit Phone</h3>
</div>
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
#Html.HiddenFor(m=>m.PhoneId)
<div class="modal-body">
//code goes here...
<input class="btn btn-primary" type="submit" value="Save" />
<button class="btn btn-warning" data-dismiss="modal">Close</button>
</div>
}
<script>
$("form").removeData("validator");
$("form").removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse("form");
</script>
and here is the phones.js:-
$(function () {
$.ajaxSetup({ cache: false });
$("a[data-modal]").on("click", function (e) {
$('#myModalContent').load(this.href, function () {
$('#myModal').modal({
keyboard: true
}, 'show');
bindForm(this);
});
return false;
});
});
function bindForm(dialog) {
$('form', dialog).submit(function () {
var isValid = true; // assume all OK
$('form').validate(); // perform validation on the form
$('input[type="text"]').each(function (index, item) { // could change selector to suit e.g $('input, textarea').each(..
if (!$(this).valid()) {
isValid = false; // signal errors
return false; // break out of loop
}
})
if (!isValid) {
return false; // exit
}
$('#progress').show();
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function (result) {
if (result.success) {
$('#myModal').modal('hide');
$('#progress').hide();
//location.reload();
alert(result.message);
} else {
$('#progress').hide();
$('#myModalContent').html(result);
bindForm();
}
}
});
return false;
});
}
now when i visit the main view the modal popup will work well, but if i do some paging inside the webgrid and i click to render the partial view as modal popup i will get the following exception :-
Unhandled exception at line 51, column 9 in http://localhost:58652/phone/edit/3
0x800a1391 - JavaScript runtime error: '$' is undefined
on the following Script section inside the partial view:-
<script>
$("form").removeData("validator");
$("form").removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse("form");
</script>

This issue is fixed and worked fine for me....
"Modal Popup will not show if i do ajax-based paging inside my WebGrid"
OR
"When navigate to 2nd page and click on edit, delete or view it is displaying normal page instead of displaying it in modal pop up".
Change code in phones.js:
From
$("a[data-modal]").on("click", function (e) {
To
$(document).on("click","a[data-modal]", function (e) {
Enjoy coding................