I have a partial page that shows a list of files on the server. I want to allow the user to choose a file and display it in a lightbox dialog using AngularUI. I can't figure out how to get the filename that should be displayed into the dialog template correctly. Here's my file list html:
<tr ng-repeat="file in files | orderBy:orderProp">
<td>{{file.name}}</td>
</tr>
And here's the applicable part of that view's controller:
function FileListCtrl($scope, $http, $dialog)
{
.
.
.
$scope.openInLightbox = function(item){
var d = $dialog.dialog({
modalFade: false,
resolve: {item: function(){ return angular.copy(item); } }});
d.open('dialogs/lightboxTemplate.html', 'LightboxController');
}
}
and here's the lightboxController:
app.controller('LightboxController', ['$scope', 'dialog', 'item', function($scope, dialog, item){
$scope.item = item;
console.log("item:" + item);
$scope.submit = function(){
dialog.close('ok');
};
}]);
and here's my dialog template:
<img src={{item}} />
I have two things I don't understand:
1) I get a lightbox on the first image I choose correctly, but the console gives a 404 error getting "(URL path to image)/{{item}}". So I get an error, but the image still appears.
2) When I click outside the lightbox, it disappears and I can't reload a new image. I think this is due to having no close button?
Am I properly binding the "item" scope property into the dialog template? If not, what is the correct way?
Try using ng-src for example:
<img ng-src="{{item}}>
It will likely overcome the weirdness as /> is still valid html (just not html 5)
Related
I have created a registration plugin in WordPress and I want to display my register-employee.php(under view folder) file. When a user click on a button(used that url to display the file, something like that). Below is my folder structure hope would help.
>controller
>model
>public
>view
register-employee.php
register-member.php
Altough your description is very little,
I give you a really simple guide on how to do this:
First thing, opening a form on click is a javascript thing so the first thing you need to do is add your JavaScript file,
let's assume you have a file assets/js/register.js which looks like this:
var btn = document.querySelector('button.my-register-button');
btn.addEventListener('click', function(e) {
e.preventDefault();
document.querySelector('#my_registration_popup').style.display = 'block';
});
Then we need to add this file to wp_enqueue_scripts action in order to be added to Wordpress pages
add_action('wp_enqueue_scripts', function() {
wp_register_script('my-registration-plugin', YOUR_PLUGIN_URL . '/assets/js/register.js', [], null, true);
});
assuming that your register-employee.php file looks something like this:
<div id="my_registration_popup" style="display: none">
<!-- my form -->
</div>
First thing you need to do is to add above view to wp_footer action:
add_action('wp_footer', function() {
include PATH_TO_YOUR_PLUGIN . '/view/register-employee.php';
});
i am not able to access Model for textbox, please find code below.
HTML Tag, which i am using
<span ng-click="LoadFieldData()">{{name.An}}</span><input type="text"
style="width:515px;" ng-value="{{name.An}}" ng-model="name.An"
id="topmost[0]" /></div>
Also,Please find the directive which i use.
angularform.directive("formChange",function($compile){
return{
restrict:"EA",
terminal:true,
priority:1000,
scope:{},
transclude:true,
templateUrl:"../../app/Pages/dpang.html",
css:"../../Common/Styles/style.css"
}
})
Also the controller function is
$scope.LoadFieldData = function () {
debugger;
alert('function called.')
$scope.name.An = 'An is my name';
}
I am calling the directive like this in a div on master page.master.
<form-change/>
but when i am trying to access the variable {{name.An}}, only {{name.an}} is displayed on the html screen, instead of the value of variable "An is my name".
Can anybody please help.
Not sure if it will work with iFrame like you are trying in the plnkr.
You should use the directive tag like this:
<teen-internal></teen-internal>
Also in your directive you dont need the empty scope:
myApp.directive('teenInternal', function() {
return {
restrict: 'AE',
templateUrl: 'teen-external.html'
};
});
This is should work. Plunker
Cheers,
I have the following template:
<template name="modalTest">
{{session "modalTestNumber"}} <button id="modalTestIncrement">Increment</button>
</template>
That session helper simply is a go-between with the Session object. I have that modalTestNumber initialized to 0.
I want this template to be rendered, with all of it's reactivity, into a bootbox modal dialog. I have the following event handler declared for this template:
Template.modalTest.events({
'click #modalTestIncrement': function(e, t) {
console.log('click');
Session.set('modalTestNumber', Session.get('modalTestNumber') + 1);
}
});
Here are all of the things I have tried, and what they result in:
bootbox.dialog({
message: Template.modalTest()
});
This renders the template, which appears more or less like 0 Increment (in a button). However, when I change the Session variable from the console, it doesn't change, and the event handler isn't called when I click the button (the console.log doesn't even happen).
message: Meteor.render(Template.modalTest())
message: Meteor.render(function() { return Template.modalTest(); })
These both do exactly the same thing as the Template call by itself.
message: new Handlebars.SafeString(Template.modalTest())
This just renders the modal body as empty. The modal still pops up though.
message: Meteor.render(new Handlebars.SafeString(Template.modalTest()))
Exactly the same as the Template and pure Meteor.render calls; the template is there, but it has no reactivity or event response.
Is it maybe that I'm using this less packaging of bootstrap rather than a standard package?
How can I get this to render in appropriately reactive Meteor style?
Hacking into Bootbox?
I just tried hacked into the bootbox.js file itself to see if I could take over. I changed things so that at the bootbox.dialog({}) layer I would simply pass the name of the Template I wanted rendered:
// in bootbox.js::exports.dialog
console.log(options.message); // I'm passing the template name now, so this yields 'modalTest'
body.find(".bootbox-body").html(Meteor.render(Template[options.message]));
body.find(".bootbox-body").html(Meteor.render(function() { return Template[options.message](); }));
These two different versions (don't worry they're two different attempts, not at the same time) these both render the template non-reactively, just like they did before.
Will hacking into bootbox make any difference?
Thanks in advance!
I am giving an answer working with the current 0.9.3.1 version of Meteor.
If you want to render a template and keep reactivity, you have to :
Render template in a parent node
Have the parent already in the DOM
So this very short function is the answer to do that :
renderTmp = function (template, data) {
var node = document.createElement("div");
document.body.appendChild(node);
UI.renderWithData(template, data, node);
return node;
};
In your case, you would do :
bootbox.dialog({
message: renderTmp(Template.modalTest)
});
Answer for Meteor 1.0+:
Use Blaze.render or Blaze.renderWithData to render the template into the bootbox dialog after the bootbox dialog has been created.
function openMyDialog(fs){ // this can be tied to an event handler in another template
<! do some stuff here, like setting the data context !>
bootbox.dialog({
title: 'This will populate with content from the "myDialog" template',
message: "<div id='dialogNode'></div>",
buttons: {
do: {
label: "ok",
className: "btn btn-primary",
callback: function() {
<! take some actions !>
}
}
}
});
Blaze.render(Template.myDialog,$("#dialogNode")[0]);
};
This assumes you have a template defined:
<template name="myDialog">
Content for my dialog box
</template>
Template.myDialog is created for every template you're using.
$("#dialogNode")[0] selects the DOM node you setup in
message: "<div id='dialogNode'></div>"
Alternatively you can leave message blank and use $(".bootbox-body") to select the parent node.
As you can imagine, this also allows you to change the message section of a bootbox dialog dynamically.
Using the latest version of Meteor, here is a simple way to render a doc into a bootbox
let box = bootbox.dialog({title:'',message:''});
box.find('.bootbox-body').remove();
Blaze.renderWithData(template,MyCollection.findOne({_id}),box.find(".modal-body")[0]);
If you want the dialog to be reactive use
let box = bootbox.dialog({title:'',message:''});
box.find('.bootbox-body').remove();
Blaze.renderWithData(template,function() {return MyCollection.findOne({_id})},box.find(".modal-body")[0]);
In order to render Meteor templates programmatically while retaining their reactivity you'll want to use Meteor.render(). They address this issue in their docs under templates.
So for your handlers, etc. to work you'd use:
bootbox.dialog({
message: Meteor.render(function() { return Template.modalTest(); })
});
This was a major gotcha for me too!
I see that you were really close with the Meteor.render()'s. Let me know if it still doesn't work.
This works for Meteor 1.1.0.2
Assuming we have a template called changePassword that has two fields named oldPassword and newPassword, here's some code to pop up a dialog box using the template and then get the results.
bootbox.dialog({
title: 'Change Password',
message: '<span/>', // Message can't be empty, but we're going to replace the contents
buttons: {
success: {
label: 'Change',
className: 'btn-primary',
callback: function(event) {
var oldPassword = this.find('input[name=oldPassword]').val();
var newPassword = this.find('input[name=newPassword]').val();
console.log("Change password from " + oldPassword + " to " + newPassword);
return false; // Close the dialog
}
},
'Cancel': {
className: 'btn-default'
}
}
});
// .bootbox-body is the parent of the span, so we can replace the contents
// with our template
// Using UI.renderWithData means we can pass data in to the template too.
UI.insert(UI.renderWithData(Template.changePassword, {
name: "Harry"
}), $('.bootbox-body')[0]);
right now I have a huge Solution in which we use javascript alerts via RegisterStartupScript for all messages and errors.. We were willing to modify all this to making something similar to the modalPopupExtender, or the extender itself in a way that doesn't require too much effort... I mean, to show a modalpopup on a single page I need to create it on the aspx file, setting the attributes etc... So i'm just asking for Ideas, want to know how you guys deal with this..
I'd probably use jQuery dialog and put the markup and initialization code in a MasterPage, set with autoOpen false and hidden by default. I'd inject code that interacts with the dialog into each page as needed.
<div id="modalDialog" title="Error">
<p id='modalDialogMsg'>An error has occurred.</p>
</div>
<script type="text/javascript">
$(function() {
$('#modalDialog').dialog({
autoOpen: false;
modal: true,
buttons: {
"OK" : function() {
$(this).dialog('close');
}
}
});
});
// You could "objectify" this, but I'll show as a global function
function showError( title, msg )
{
if (!title) {
title = 'Error';
}
if (!msg) {
msg = 'An error occurred.';
}
$('#modalDialogMessage').html(msg);
$('#modalDialog').attr('title',title)
.dialog('open');
}
</script>
Then, in your page you'd inject code that calls showError. Note this would need to be after the script above in order to make sure that the function has been defined. What would spit out would render like:
<script type="text/javascript">
$(function() {
showError('Database connection error', 'There was an error connecting to the database.' )'
});
</script>
Could you not place the modal popup/ modal popup extender into a user a control and embed the user control into each page?
I have written some code using jQuery to use Ajax to get data from another WebForm, and it works fine. I'm copying the code to another project, but it won't work properly. When a class member is clicked, it will give me the ProductID that I have concatenated onto the input ID, but it never alerts the data from the $.get. The test page (/Products/Ajax/Default.aspx) that I have set up simply returns the text "TESTING...". I installed Web Development Helper in IE, and it shows that the request is getting to the test page and that the status is 200 with my correct return text. However, jQuery refreshes my calling page before it will ever show me the data that I'm asking for. Below are the code snippets from my page. Please let me know if there are other code blocks that you need to see. Thank you!
<script type="text/javascript">
$(document).ready(function() {
$(".addtocart_a").click(function() {
var sProdIDFileID = $(this).attr("id");
var aProdIDFileID = sProdIDFileID.split("_");
var sProdID = aProdIDFileID[5];
// *** This alert shows fine -- ProdID: 7
alert("ProdID: " + sProdID);
$.get("/Products/Ajax/Default.aspx", { test: "yes" }, function(data) {
// *** This alert never gets displayed
alert("Data Loaded: " + data);
}, "text");
});
});
</script>
<input src="/images/add_to_cart.png" name="ctl00$ctl00$ContentPlaceHolder1$ContentPlaceHolder1$aAddToCart_7" type="image" id="ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolder1_aAddToCart_7" class="addtocart_a" />
The easiest way is to tell jQuery not to return anything.
$(".addtocart_a").click(function(e){
// REST OF FUNCTION
return false;
});
Good luck! If you need anything else let me know.