I am trying to figure out something using angularjs. Basically, today I decided to add a time/date stamp in my form. In other words, when someone is trying to post something, the time and date will appear.
Since I have a form with a live preview, I was trying to connect the time on the live preview. Afterwards, the time stamp would get published so that I could orderBy the comments from most recent to less recent.
I have two plunkers. For some reason, I couldn't get the code to properly work. Instead of showing up in the live preview as it should, it doesn't at all. It will on the form though. The first plunker has the bare minimum code, and is shown in the following link, while the second plunker is at the bottom of this message.
http://plnkr.co/edit/zgqXGGpoOw3UY90qT23H?p=catalogue
I will still display a portion of the code here, which is where my problem lies:
<blockquote ng-repeat="review in product.reviews | orderBy:'date'">
<b>Date: {{review.date}}</b>
</blockquote>
<form name="reviewForm" ng-controller="ReviewController as reviewCtrl" ng-submit="reviewForm.$valid && reviewCtrl.addReview(product)" novalidate>
<blockquote>
<b>Date: {{reviewCtrl.review.date}}</b>
<br/>
</blockquote>
<!-- DATE AND TIME -->
<!-- The other time formats are at the bottom of this page -->
<div ng-controller="timecontoller" ng-init="init();">
<div ng-model="reviewCtrl.review.date" ng-repeat="date in dates">
<b>Date: {{date.date1 | datetime}}</b>
</div>
</div>
</form>
While the second plunker has the whole viewable portion so that you can visually see the form (I removed certain elements though to make it easier to see). You'll have to click on the word "Review" first.
http://embed.plnkr.co/hHm1OPHk1uFD6YP2Roju/preview
If i followed your code correctly, it seems that you are trying to assign the review date with this line:
ng-model="reviewCtrl.review.date"
but its really not being given a data model or binding. If you truly wanted to transfer your timecontroller time update to the reviewController then I would recommend not using that as a controller, but instead refactor it as a service. Learn more here. Of course, you could also just open up your timeController scope and use a click event to transfer the data or something like that, but it doesn't seem like it should really be a controller to begin with.
Now i think I ended up changing your code more than it will really help you at all. But here is a quick implementation of how it can be done by making your timeController a service.
Plnkr
Just curious, why do you prefer this to $scope? It was giving me some trouble. Never really dealt with that before.
Related
None of the bind examples in the documentation work - https://fancyapps.com/docs/ui/fancybox/api
The standard constructor examples work great, but anything that requires binding does not work. There is no error, but the gallery lightbox doesn't work - clicking an image just opens the image as a link. Here is the exact example code with markup:
<div id="gallery">
<a href="https://lipsum.app/id/1/800x600">
<img src="https://lipsum.app/id/1/300x225" />
</a>
<a href="https://lipsum.app/id/2/800x600">
<img src="https://lipsum.app/id/2/300x225" />
</a>
</div>
<script>
Fancybox.bind("#gallery a", {
on : {
ready : (fancybox) => {
console.log(`fancybox #${fancybox.id} is ready!`);
}
}
});
</script>
That console log never fires.
I'm importing FancyBox like this:
import { Fancybox } from '#fancyapps/ui';
I've tried searching around, but very little info on FancyBox 4 other than official docs and it's frustrating as they don't work. I've tried some of the examples in showcase also, and the same deal. If it's binding, it won't work and no errors are shown. Anyone have any insight into this?
Thanks,
Tom
It works perfectly fine. Since you did not provide a live demo (or at least a full HTML code), then it just not possible to help you.
It is so frustrating to read comments like this, no demo, no useful info, nothing. Maybe you did not include JS file, I do not know ... I would love to help you and to improve documentation, but, sorry, your comment is not helpful at all.
Fancybox is designed to be as easy to use as possible, all you have to do is:
Include two files - CSS and JS file (to get Fancybox object).
Add data-fancybox attribute to your links (or to call Fancybox.bind("YOUR_SELECTOR");)
Thats it! It can not be any simpler.
Sorry, it should have been a much clearer question. I didn't include a demo because it's a big wordpress site in production. It was giving me no useful feedback or errors or anything like that. I build websites day in and day out, so assumed it wasn't just me making some incredibly stupid mistake like a typo or something. I genuinely spent a lot of time on this, it wasn't me being lazy and just posting on stack overflow straight away...
It was me being stupid though.
In the process of making a demo to show you, I found the problem and (as you already know!) it's my mistake. I was able to make fancybox work by instantiating it straight away in my js, but binding (and therefore galleries etc) was not working.
The reason was the javascript was included in the head of the html document before the markup instead of at the bottom of the html document before the closing body. There was nothing for the js to bind to when it was executed.
I wouldn't normally include javascript in the head either but it's a wordpress project and because of some plugin, it's required there. Fancybox 3 worked with js in the head, but I suspect it might be jquery being more forgiving than native js with it's binding to DOM elements?
So, yes, entirely my fault. I was following the steps of the installation and startup guide almost exactly, but that inclusion of the js file in a slightly unusual (or bad practice at least) place was what caused all the issues.
I am trying to show the last time someone uploaded/changed a file in TYPO3 backend.
I tried something like this
<span class="download__specs-item"><f:format.date>now</f:format.date></span>
but this is obviously not what i want, i want to see the date that the given file was last modified.
I am not sure how/where to look after something like this
ps: I don't know how to google properly, lol.
Thank you.
Regards,
a TYPO3 beginner.
If anyone is still looking for the answer, this is how I solved it.
<f:debug>{_all}</f:debug>
On your page, and click through your available properties.
Here is how it worked for me.
<span class="yourclassisprobablyhere">
<f:format.date format="d M Y">
{file.originalFile.properties.modification_date}
</f:format.date>
</span>
A resume-service I use requires that for each listed activity on the resume, there is an hours-per-week field and total hours field. However, the total hours field does not update itself automatically no matter how many weeks pass. My goal is to write a script that does this.
The idea behind the script is:
Log in to website -> go to a certain page -> submit a form** on that page updating the total hours
**unfortunately, for the form to open, you need to click an "edit" title element first which causes it to show up. I've taken a look at the html of the webpage but cannot find the form or input tags corresponding to the form I wish to submit, only that the form is generated with what I think is a javascript function call from the element's onclick field.
I believe the relevant html snippet is:
<a title="edit" class="edit" href="#entry-type" onclick="editComponent('10227041','education');">Edit</a>
but just in case there is a much larger code snippet later in this post (check the 2nd pastebin link at the bottom)
THE QUESTION: Is there a specific language/library/way (preferably in python, although I can work with Java) to simulate an onclick event and that would result in a form loading?
I've worked on this problem a bit, starting with python's mechanize library. I wrote two functions,
def login(br,url):...
def navigate(br,baseurl,url):...
which would satisfy the first two parts of my script's plan, but the third is where the trouble starts. When I print all the forms on the page using
for form in br.forms():
print form
I get http://pastebin.com/Gxy2tc1A
The website's html can be found on http://pastebin.com/PySri5cb
Later I tried to work with Selenium (the firefox IDE plugin) and then exporting code into python, where I would edit it to satisfy my specific needs, but that was a no-go either due to some awkward errors.
Have you looked into GreaseMonkey? You should be able to use that to extract the hours per week, do the math and populate the total hours field. You could probably do the entire thing. Anything that can be done on the page in JavaScript could be done within GreaseMonkey.
EDIT: The code for that site is awful. I especially like the inline call to loadResume() that is made BEFORE the element it writes to (#build-wrap).
Upon migrating my old web interface with extensive use of jQuery Tmpl, some of my templates have ceased to work. Further investigation shows that the templates not working are the ones starting and ending with TR tags (i.e. table rows getting appended to an existing table). The source text just gets removed by the jQuery Tmpl script! If I use the TR tags in a broader context like wrapped in a table etc everything works just fine, but as soon as they are used in an isolated template, they get wiped out.
working example:
<script id="workingTemplate" type="text/x-jQuery-tmpl" >
<table>
<tr><td>this works</td></tr>
</table>
</script>
not working example:
<script id="notWorkingTemplate" type="text/x-jQuery-tmpl" >
<tr><td>this does not work</td></tr>
</script>
The first example renders the full HTML code when checking with Firebug, the latter renders an empty SCRIPT tag.
The difference between the old and the new web interface that could in any way be related to the templating is a change from jQuery 1.5.2 to 1.8.2. I haven't tried running anything below 1.7.2 since this is where the .on() function got added, and the new framework has an extensive use of this method.
Are there any workarounds for this problems except the most obvious (= changing templating framework to something still maintained)?
EDIT:
When loading the template from a string, the content stays intact,
$.template( "tableRowTemplate",'<tr><td>this works</td></tr>');
$.tmpl("tableRowTemplate", data).appendTo('TABLE#mytable TBODY');
but is unfortunately no good for me since my templates are a tad more complicated than the examples (server side dynamics etc...). It does give some hints though. Obviously, it is the initialization of jQuery Tmpl that removes the content if it does not comply with something to me unknown. Maybe jQuery.fn.domManip?
The Facebook comments count can be done in three different ways: (without directly using JS)
<fb:comments-count href="http://example.com" />
<iframe src="http://www.facebook.com/plugins/comments.php?href=example.com" />
<div class="fb-comments-count" data-href="http://example.com">0</div>
The issue, however, is that doing something like this messes things up:
<p><div class="fb-comments-count" data-href="http://example.com">0</div> comments</p>
...because a <div> is firstly, not valid inside a <p> tag and secondly, looks wrong (though this could be fixed with CSS).
Basically, my question is: is there a way to do the above without using a <div> (a <span> for example), bearing in mind that I want to use the HTML5 method and (if possible!) want to avoid using javascript?
Clarification: I would like to avoid writing extra JS in the page simply because the MVC view currently looks nice and clean and I would prefer to keep it that way. Obviously, I'm still including the Facebook Connect library.
So, one solution would be to use a DIV instead of a P as the outer element.