I'm using default drag and drop inside a backbone application i'm listening event in my view like this :
"drop img.big-objet": "dragDropEvent",
"dragenter img.objet": "dragEnterLeaveEvent",
"dragleave img.big-objet": "dragEnterLeaveEvent",
"mousedown img.big-objet": "dragStartEvent",
"mouseup img.big-objet": "dragStopEvent",
"dragend img.big-objet": "dragStopEvent",
With the associated method
dragEnterLeaveEvent: function (event){
object = $(event.target);
object.addClass('hidden');
$('#'+object.attr('data-toggle')).removeClass('hidden');
},
dragStartEvent: function (event) {
object = $(event.target);
object.addClass('objet-drag').removeClass('objet-hover');
},
dragStopEvent: function (event) {
object = $(event.target);
object.addClass('objet-hover').removeClass('objet-drag');
},
objectHover: function(event){
object = $(event.target);
object.addClass('hidden');
$('#'+object.attr('data-toggle')).removeClass('hidden');
},
dragDropEvent: function(event){
alert('banana');
}
And the associated html
<img class="objet" id="small-objet01-level01" data-toggle="big-objet01-level01" src="img/content/small-objet01-level01.png" alt="" />
<img class="objet" id="small-objet02-level01" data-toggle="big-objet02-level01" src="img/content/small-objet02-level01.png" alt="" />
<img class="objet" id="small-objet03-level01" data-toggle="big-objet03-level01" src="img/content/small-objet03-level01.png" alt="" />
<img class="big-objet objet-hover hidden" id="big-objet01-level01" draggable="true" data-toggle="small-objet01-level01" src="img/content/big-objet01-level01.png" alt="" />
<img class="big-objet objet-hover hidden" id="big-objet02-level01" draggable="true" data-toggle="small-objet02-level01" src="img/content/big-objet02-level01.png" alt="" />
<img class="big-objet objet-hover hidden" id="big-objet03-level01" draggable="true" data-toggle="small-objet03-level01" src="img/content/big-objet03-level01.png" alt="" />
All of my events work correctly but not the drop event. So my question is how make it work ?
Fix by using JQuery UI libraries instead of HTML5 drag and drop.
I put this in my render method:
$('#overlay-objet img').droppable({
tolerance: 'pointer',
drop: _.bind(function(event, ui) {
object = $(event.target);
if (object.attr("data-val") != undefined){
objectDrag = object.attr('data-val').toString();
objectDrop = $(ui.draggable).attr('data-val').toString();
object.addClass('hidden');
$('#'+object.attr('data-toggle')).removeClass('hidden');
this.dragDropEvent(objectDrag + objectDrop);
}
}, this),
over: _.bind(function(event,ui){
object = $(event.target);
object.addClass('hidden');
$('#'+object.attr('data-toggle')).removeClass('hidden');
}, this),
out: _.bind(function(event,ui){
object = $(event.target);
object.removeClass('hidden');
$('#'+object.attr('data-toggle')).addClass('hidden');
}, this) // Edit mercredi soir ajouter ,this dans chaque callback
});
$('img.big-objet').draggable({
helper: "clone"
});
Just quickly looking over it it looks like you are missing the comma after the 'objectHover'.
Related
I'm using the Html-pdf package to generate and download pdf in an express-MongoDB application. Here is the route, where I've used the Html-pdf package.
//#route - GET /generate PDF
router.get("/generateReport/:id", async (req, res) => {
const tableDataById = await newsModel.findById(req.params.id);
ejs.renderFile(path.join(__dirname, '../views/pages/', "pdf.ejs"), {output:tableDataById}, (err, data) => {
if (err) {
res.send(err);
} else {
var assesPath = path.join('file://',__dirname,'../public/');
assesPath = assesPath.replace(new RegExp(/\\/g), '/');
var options = {
"height": "11.25in",
"width": "8.5in",
"header": {
"height": "20mm",
},
"footer": {
"height": "20mm",
},
"base": "file:///" + assesPath
};
pdf.create(data, options).toBuffer(function (err, buffer) {
if (err) {
res.send(err);
} else {
res.type('pdf');
res.end(buffer,'binary')
}
});
}
});
});
I've used ejs template engine. Here is the code of the "pdf.ejs" file which I rendered in the before mentioned route.
<div class="container">
<div class="row">
<div class="col-md-4">
<img class="card-img-top" src="<%= output.newspapers[0].logo %>">
<h1><%= output.newspapers[0].newsPaperName %></h1>
</div>
<div class="text-center">
<img class="img-fluid" id="test" src="<%= output.image %>" alt="">
</div>
</div>
</div>
Here is the screenshot of my application, which failed to render the dynamic image path
Here, I've also included a screenshot of the sample JSON data, in which the path of the images is included
Image src needs absolute path for rendering dynamic image path from the ejs file that you want to generate as a pdf file.
inside your controller, instead of doing this:
ejs.renderFile(path.join(__dirname, '../views/pages/', "pdf.ejs"), {output:tableDataById}
Do this: send a variable that contains the absolute path
ejs.renderFile(path.join(__dirname, '../views/pages/', "pdf.ejs"), {output:tableDataById,dirname: __dirname}
and inside the ejs file instead of doing this :
<img class="img-fluid" id="test" src="<%= output.image %>" alt="">
Do this : add the variable dirname and go one step back to get the public path where you are saving your image
<img class="img-fluid" id="test" src="<%= dirname %>/../public/<%= output.image %>" alt="">
Hope this will help solving your problem. Happy coding !!
Aui Auto Fields delete button is not working well. However add button works as it is.
Here is configuration code I have used:
AUI().use('liferay-auto-fields',function(A) {
new Liferay.AutoFields({
contentBox: '#clientContact',
fieldIndexes: namespace + 'clientContactIndexs',
on: {
'init':function(event) {
console.log('init');
},
'clone': function(event) {
console.log('clone');
console.log(event);
},
'delete': function(event) {
console.log('delete');
console.log(event);
}
}
}).render();
});
HTML Code:
<div id="clientContact">
<div class="lfr-form-row lfr-form-row-inline">
<div class="row-fields">
<aui:row>
<aui:column cssClass="col-xs-12 col-md-4">
<aui:input name="clientContactName1" id="clientContactName1" label="" placeholder="client.contact.name">
<aui:validator name="required"></aui:validator>
</aui:input>
</aui:column>
<aui:column cssClass="col-xs-12 col-md-4">
<aui:input name="clientContactMobile1" id="clientContactMobile1" label="" placeholder="mobile">
</aui:input>
</aui:column>
<aui:column cssClass="col-xs-12 col-md-4">
<aui:input name="clientContactEmail1" id="clientContactEmail1" label="" placeholder="email">
</aui:input>
</aui:column>
</aui:row>
</div>
</div>
</div>
Is there anything I'm missing?
Thanks,
I found some solution to this problem.
I know this is not the best solutions and it should work properly without any kind of manual code. But even though everything's fine, and your code is not working THEN and ONLY THEN you should try the below-given code.
$(".delete-row").click(function(){
if($("#clientContact > .lfr-form-row").length > 1){
$(this).parent().parent().parent().remove();
}
});
It will remove the row on which delete button is clicked.
I am trying to develop custom modal plugin for durandal 2.1 to have my own logic and abstract it from the rest of my app here is what I have so far but something does not work and modal gets inserted in DOM twice
define(['jquery', 'knockout', 'plugins/dialog'], function ($, ko, dialog) {
var modal = {
install: function (config) {
dialog.addContext("Modal", {
addHost: function (theDialog) {
var body = $("body");
$('<div id="Dialog" class="AlignC"><div class="ModalHost"></div></div>').appendTo(body);
theDialog.host = $('#Dialog').get(0);
},
removeHost: function (theDialog) {
alert("demoving host");
$("#Dialog").remove();
},
compositionComplete: function (child, parent, context) {
var theDialog = dialog.getDialog(context.model);
}
});
}
};
return modal;
});
and here is how i call it from my viewmodel
dialog.show(this, null, 'Modal');
can anyone tell me what is wrang with this code why my model ELEMENT is inserted twice and ovelay each other. how can i fix that.
second element does not have content inside.
by the way here is view I am trying to show inside modal
<span class="Loader"></span>
<div class="Modal">
<h2 class="Caps">SomeName</h2>
<div class="Row">
<input type="text" />
</div>
<div class="Desc">
description
<br />
XXY YYX XXY
</div>
<div class="Buttons">
<span class="Green">Check</span>
<span>Add</span>
</div>
</div>
Ok I managed to fix this behavior. the problem with click binding was firing twice and this was the problem associated with inserting tow HTML elements in DOM after fixing click handler, everything works just fine.
I have images that are loaded from database. When I click on an image, I want to show that image in a Modal Pop-up. My problem is that, I am not able to call the partial view from jquery. In fact, that action is not getting called from JQuery. Please help... I am a fresher. Below is my code:
_Layout.cshtml
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>_Layout</title>
#Styles.Render("~/bundle/ProfileStyle")
#Scripts.Render("~/bundle/JQuery")
#Scripts.Render("~/bundle/JQueryUI")
#Scripts.Render("~/bundle/CustomJS")
</head>
<body>
<div>
#RenderBody()
</div>
<div id="dialog">
#Html.Partial("_ProfileDetail")
</div>
</body>
</html>
Index.cshtml
#model IEnumerable<Profile.Models.TestProfile>
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Index</h2>
<p>
#Html.ActionLink("Create New", "Create")
</p>
<div class="tableOuterBlock">
#foreach (var item in Model)
{
<div class="tableInnerBlock">
<span>
#*<a href="#Url.Action("Edit", "Profile", new {#item.upi_Id})">*#
<img id="imgOpenDialog" src="#Url.Content(#item.upi_ImgData)" alt="No Image" width="100" height="100" />
#*</a>*#
</span>
</div>
}
</div>
Partial view
#model Profile.Models.TestProfile
<div>
#if(Model != null)
{
<img id="imgOpenDialog" src="#Url.Content(#Model.upi_ImgData)" alt="No Image" width="80%" height="50%" />
}
</div>
JQuery
$(function () {
$("[id*=imgOpenDialog]").click(function () {
var imgDetail = $(this).prop("src");
$("#dialog").dialog({
autoOpen: true,
position: { my: "center" },
modal: true,
resizable: false,
open: function () {
//parameter to c# function
data: { strImg = imgDetail }
$(this).load('#Url.Action("ShowProfileDetail","Profile")');
}
});
});
});
Controller
public PartialViewResult ShowProfileDetail(string strImg)
{
strImg = strImg.Substring(strImg.IndexOf('/'));
List<TestProfile> tpList = db.TestProfiles.Where(x => x.upi_ImgData ==strImg).ToList();
TestProfile testProfile = db.TestProfiles.Find(tpList[0].upi_Id);
return PartialView("_ProfileDetail", testProfile);
}
it may be a bit late but if you check out this blog, and download his code, you will see his use of jquery to create a modal pop up from a partial view.
I have the following markup:
<div class="user-photo">
<img src="" />
</div>
I want to insert an image in that div when I click another image on a page. My code looks like this:
$('body').on('click', '.image', function() {
$('.user-photo').children('img').attr('src', $(this).attr('src'));
});
But it is not working
demo: http://jsfiddle.net/WnC9B/8/
$('body').on('click', '.image', function(e) {
$('.user-photo').children('img').attr('src', $(e.target).attr('src'));
});
I think you are using this in the wrong way (this refers to the bodyin this example, you should use e.target to refer to the clicked element)
$('body').on('click', '.image', function(e) {
$('.user-photo > img').attr('src', $(e.target).attr('src'));
});
You can use the .tmpl() of jquery. It will be used to append html content in div in your case.
$.tmpl("<div class="user-photo"> <img src='' /> </div>")..appendTo("#targetdiv");
Another way is:
$('#div').html('<div class="user-photo"> <img src='' /> </div>')