I am having trouble in showing popover.
Scenerio:
I want to show popover on hover, and popeover's content comes from ajax request.
Coffeescript:
$('.preview').bind 'mouseenter', ->
that = #
unless $(#).data('original-title')
$.ajax
type: "get"
url: $(that).data('url')
success: (data) ->
$(that).data('content', data)
$(that).popover({
html: true
delay: { show: 100, hide: 360000 }
trigger: 'hover'
content: data
template: '<div class="popover preview-popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
})
this code generate a small popover .... which have contents(ajax loaded html) but not visible
Related
I have a Django project which executes a task and then renders a page in which I want to display different things following the state of the task.
To show an example of what I want, I have these three div, with each one being displayed for a particular task state :
<div id="SUCCESS">
<!-- What I want to display when the execution of my task succeeded -->
</div>
<div id="FAILURE">
<!-- What I want to display when the execution of my task failed -->
</div>
<div id="EXECUTING">
<!-- What I want to display when my task is still executing -->
</div>
I finally found a way of doing that by adding a style="display:none" on the div for the success and failure state, and updates the display of the divs when the state of task changes.
For example, at first, only the div with id="EXECUTING" will be displayed, and then when the task state changes to 'failed', the div with id="EXECUTING" will have its display attribute changed to display:none and the div with id="FAILURE" will be changed to display:""
The code for doing this is the following :
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
let task_id = '{{ task_id }}'
updateState(task_id)
function updateState(task_id) {
$.ajax({
url: "{% url 'scripts:task_status' task_id %}",
type: 'GET'
})
.done(response => {
if(response.state == "FAILURE" || response.state == "SUCCESS"){
document.getElementById("EXECUTING").style.display = "none"
document.getElementById(response.state).style.display = ""
return
}
else{
// rerun every 100 milliseconds
setTimeout(function() {
updateState(response.task_id)
}, 100)
}
})
}
})
</script>
And the view from where the task_status is taken is this one :
def task_status(request, task_id):
task = AsyncResult(task_id)
response = {
'task_id': task_id,
'state': task.state,
'info': str(task.info),
}
return JsonResponse(response, status=200)
What I want to know is, is there another way to change what's displayed on the page without using this trick of modifying the display attribute of my divs ?
That's my first time using jQuery and js so there's probably something I'm not understanding well, which is why I'm asking this.
Thanks for your help
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 11 months ago.
I created a div as defined below
<div class="area1">
</div>
With this ajax call I changed the html for above div
$('#abutton').click(function(e) {
e.preventDefault();
$.ajax({
url: 'do',
type: 'POST',
dataType: 'json',
cache: false,
data: {id:this.id},
success: function(data) {
$('.area1').html(data);
},
failure: function() {
alert('Please try again..!');
}
});
});
now div content looks like this
<div class="area1">
<input type="text" placeholder='Name'>
<button id='submit'>Submit</button>
</div>
Now I want to perform some action on button click
$('.area1 button').click(function(e){
e.preventDefault();
alert(this.id) ;
});
but this second ajax is not selecting the button
Can anyone tell the correct method
$(document).on("click","div.area1 button",function(e) {
e.preventDefault();
alert(this.id) ;
});
you can try this
if your page was dynamically creating elements dosomething you would bind the event to a parent which already exists (this is the nub of the problem here, you need something that exists to bind to, don't bind to the dynamic content), this can be (and the easiest option) is document.
I have written the following piece of code to display some contents in angular material dialog box. it works fine when i add plain text to textContent . when i add HTML its displays HTML as text. how do i bind HTML to textContent
This Works
Sample Link
$scope.Modal = function () {
$mdDialog.show(
$mdDialog.alert()
.parent(angular.element(document.querySelector('body')))
.clickOutsideToClose(true)
.textContent('sample text')
.ok('Ok')
);
}
This Doesn't Works
Sample Link
$scope.Modal = function () {
$mdDialog.show(
$mdDialog.alert()
.parent(angular.element(document.querySelector('body')))
.clickOutsideToClose(true)
.textContent('<div class="test"><p>Sample text</p></div>')
.ok('Ok')
);
}
Thanks in advance
You need to append to the template,
$mdDialog.show({
parent: angular.element(document.body),
clickOutsideToClose: true,
template: '<md-dialog md-theme="mytheme">' +
' <md-dialog-content>' +
'<div class="test"><p>Sample text</p></div>' +
' <md-button ng-click="closeDialog();">Close</md-button>' +
' </md-dialog-content>' +
'</md-dialog>',
locals: {
},
controller: DialogController
});
DEMO
You can add html in template and just add variable in displayOption. This will work.
Template Code
<script type="text/ng-template" id="confirm-dialog-answer.html">
<md-dialog aria-label="confirm-dialog">
<form>
<md-dialog-content>
<div>
<h2 class="md-title">{{displayOption.title}}</h2>
<p>{{displayOption.content}} <img src="{{displayOption.fruitimg}}"/></p>
<p>{{displayOption.comment}}</p>
</div>
</md-dialog-content>
<div class="md-actions" layout="row">
<a class="md-primary-color dialog-action-btn" ng-click="cancel()">
{{displayOption.cancel}}
</a>
<a class="md-primary-color dialog-action-btn" ng-click="ok()">
{{displayOption.ok}}
</a>
</div>
</form>
</md-dialog>
</script>
Controller Code
$mdDialog.show({
controller: 'DialogController',
templateUrl: 'confirm-dialog-answer.html',
locals: {
displayOption: {
title: "OOPS !!",
content: "You have given correct answer. You earned "+$scope.lastattemptEarnCount,
comment : "Note:- "+$scope.comment,
fruitimg : "img/fruit/"+$scope.fruitname+".png",
ok: "Ok"
}
}
}).then(function () {
alert('Ok clicked');
});
Use template instead of textContent, textContent is used for show plan text in a model. It does not render HTML code
$mdDialog.show({
controller: function ($scope) {
$scope.msg = msg ? msg : 'Loading...';
},
template: 'div class="test"><p>{{msg}}</p></div>',
parent: angular.element(document.body),
clickOutsideToClose: false,
fullscreen: false
});
You can use htmlContent instead of textContent to render HTML. Heres an excerpt from the documentation available at https://material.angularjs.org/latest/#mddialog-alert
$mdDialogPreset#htmlContent(string) - Sets the alert message as HTML.
Requires ngSanitize module to be loaded. HTML is not run through
Angular's compiler.
It seems a bit counter intuitive to use a template when you only need to inject one or two things in. To avoid using a template, you need to include 'ngSanitize' for it to work.
angular.module('myApp',['ngMaterial', 'ngSanitize'])
.controller('btnTest',function($mdDialog,$scope){
var someHTML = "<font>This is a test</font>";
$scope.showConfirm = function(ev) {
// Appending dialog to document.body to cover sidenav in docs app
var confirm = $mdDialog.confirm()
.title('Please confirm the following')
.htmlContent(someHTML)
.ariaLabel('Lucky day')
.targetEvent(ev)
.ok('Please do it!')
.cancel('Sounds like a scam');
//Switch between .htmlContent and .textContent. You will see htmlContent doesn't display dialogbox, textContent does.
$mdDialog.show(confirm).then(function() {
$scope.status = 'Saving Data';
},
function() {
$scope.status = 'You decided to keep your debt.';
});
};
})
Notice the injected HTML:
var someHTML = "<font>This is a test</font>";
I found this example here.
The latest version of Angular Material Design API has predefined function for add HTML content to the alert dialog:
an $mdDialogPreset with the chainable configuration methods:
$mdDialogPreset#title(string) - Sets the alert title.
$mdDialogPreset#textContent(string) - Sets the alert message.
$mdDialogPreset#htmlContent(string) - Sets the alert message as HTML. Requires ngSanitize module to be loaded. HTML is not run through Angular's compiler.
$mdDialogPreset#ok(string) - Sets the alert "Okay" button text.
$mdDialogPreset#theme(string) - Sets the theme of the alert dialog.
$mdDialogPreset#targetEvent(DOMClickEvent=) - A click's event object. When passed in as an option, the location of the click will be used as the starting point for the opening animation of the the dialog.
The link to the documentation: Angular MD API
I try to replace the html template into an angular directive to use a custom JointJS graph as html and not a regular JointJS objects. The following code is an example i found on the web which works great under JS and jQ, but when I try to replace that to an angular directive it doesnt render the code or worse, it duplicates the html table (when i run addCell func) but not drawing the table elm on the Graph. It also looks like the css rules are not being rendered to provide the new styles.
Any ideas pls ?
//an example for creating JoinJS obj with HTML template
joint.shapes.html = {};
joint.shapes.html.Element = joint.shapes.basic.Rect.extend({
defaults: joint.util.deepSupplement({
type: 'html.Element',
attrs: {
rect: { stroke: 'none', 'fill-opacity': 0 }
}
}, joint.shapes.basic.Rect.prototype.defaults)
});
// Create a custom view for that element that displays an HTML div above it.
// -------------------------------------------------------------------------
joint.shapes.html.ElementView = joint.dia.ElementView.extend({
template: [
// trying to convert the TABLE elem below to an angular directive
//'<container-data></container-data>'
'<table class="html-element"><tr><td><form onsubmit="return false;" action="">',
'<button class="delete">x</button>',
'<label></label>',
'<i class="link_add" title="Add a link">L</i>',
'<div class="section_title">Properties <i class="fa fa-caret-down fRight"></i></div>'
'</form></td></tr></table>'
].join(''),
// some funcs come here
});
$scope.loadBalancer = new joint.shapes.html.Element({position: { x: 20, y: 20 }, size: { height: 30 }, label: 'LoadBalancer', select: 'one' });
$scope.graph.addCells([$scope.loadBalancer]);
I want to use AngularJS in my application, and at the initial stage I followed plain HTML for front view and for the back end potion I used a servlet and an ejb class where I organized SQL querys following CURD application method and that works really fine. Then I applied AngularJS that includes an Ajax call inside the $scope method. Once I create an Ajax method named "btnadd()", but now I cannot pass a value because the page directs to a servlet. Can any one help me to
<html ng-app="helloApp">
</head>
<body>
<div ng-controller="demoApp">
<form name="frm" method="post" action="Srvlet">
<input type="submit" name="btnadd" value="Add" ng-click="btnadd()"/>
My method in the JS file:
$scope.btnadd = function() {
$.ajax({
url: 'Srvlet',
type: "POST",
data: {
datepicker: $scope.newcontact.datepicker,
eId: $scope.newcontact.eId,
name: $scope.newcontact.name, `enter code here`
cmp: $scope.newcontact.cmp
},
success: function(data, textStatus, jqXHR) {
console.log(data);
$scope.$apply(function(){
$scope.newcontact.addRecordResult = data.addRecordResult;
});
},
error: function(jqXHR, textStatus, errorThrown) {
console.log('Error : ' + jqXHR.responseText);
}
}); if($scope.newcontact.eId == null) {
$scope.newcontact.eId = departmentID++;
$scope.Departments.push($scope.newcontact);
} else {
for(i in $scope.Departments) {
if($scope.Departments[i].eId == $scope.newcontact.eId) {
$scope.Departments[i] = $scope.newcontact;
}
}
}
$scope.newcontact = {};
};
Hello and welcome on stackoverflow
I assume that the method btnadd() is attached to a submit button in which case it will proceed to the action. There is few possible solutions i.e. change submit button to standard button that wont send form but will call the method or/and add onsubmit="return false;" to form which will prevent form from sending
Although why don't you use an angularjs $httpinstead of jQuery?
https://docs.angularjs.org/api/ng/service/$http