I converted my brewery's website to use meteor. In the conversion process I have run into a bug in the integration of some library code. The original site uses lightbox2 http://lokeshdhakar.com/projects/lightbox2/ to pop up a modal of a graphic we designed.
In the meteor version the modal looks like its about to load but then instead just navigates directly to the image asset the modal is supposed to display. Click 'View the Brew Diagram' at http://twbrewing.meteor.com/beers to see the problem in action.
To me it looks like the library code is working but for some reason does not prevent the default browser action. I tried using a preventDefault() on the click event for that, but then nothing happens at all. Ideas?
Wrap the HTML in {{#constant}}...{{/constant}} and run any lightbox code in a template render function, e.g.
Template.pictures.rendered = function() {
lightBoxInit();
}
I don't actually know what the lightbox function is called... it's either something that they will tell you in the docs to run on pageload, or that is wrapped in a $(document).ready() call in the source. Even better is if there's an API call to run on the elements directly (something like $('img').lightbox() or $('img').each(function(el) { lightbox(el) }).
Sorry I'm not so familiar with lightbox but this is the strategy you need and what you need to look for :)
Note that the rendered function is called on rerendering too. This is fine for most libraries but if you notice any strange behaviour you'll need to add some logic to ensure that the relevant links are not processed twice (either by using a .data boolean or by destroying and recreating the wrapper).
Related
When user presses either create entity button or edit entity button, there's the same modal window in an iframe that is build by js dynamically. So what I'm trying to do is to wait until it's fully rendered and then execute my custom js code. So is there a proper way to do that? Some sort of event like RenderFinished shooting or something? Don't want to use timeout since I understand that it's not a good way to do that.
What I tried so far is that I've added jquery to the page programmatically, since it's not used currently at that particular page for some reason (probably because iframe is built dynamically without jquery and I needed to add it myself).
After that I tried to access iframe via jquery selector and then on iframe.ready access element inside in the same manner (selector and even ready for that element). But iframe is accessed and element inside it is not. Console log inside ready function just outputs no elements found. When I placed breakpoint inside I saw that there's no modal window built yet and my code is executed synchronously before it. So there's nothing to find yet at that moment.
Oh and I tried to put it all inside $(document).ready, of course. But it didn't change the situation neither...
Any ideas about how to do that properly?
The final goal why am I doing all this complicated dancing: I'm trying to add validation that UrlKey for entity is unique. So I want to bind my js function to UrlKey input's onchange event and call backend api to do the validation and return new UrlKey if it wasn't unique and edit the UrlKey input accordingly. The problem that I stumbled upon is to execute my code after modal iframe window is rendered.
Any tips are highly appreciated.
You are in luck :)
2sxc added a Formula feature which will help you with this. There are videos and tutorials and more. See http://r.2sxc.org/formulas
Background: I'm modifying a SharePoint list web part using JSLink. I'm also adding jQuery and jQuery-UI to make the list items display as the jQuery Accordion. It works well, except that I also need to implement the ajax automatic refresh on the web part to refresh the content every 60 seconds.
Problem: When the web part refreshes, the jquery code reverts - the items no longer show in accordion mode. I can open the browser console and type the jquery code manually, e.g., $(".selector").accordion(); and it works fine. This makes me think that I need to find a way to call the jquery code after each web part automatic refresh completes.
Question: So, is there a javascript event or way to find out when an automatic refresh triggers on my webpart so that I can call again my jquery accordion after? Is there something else I could be missing?
Thanks for your time!
The answer was to use this code:
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(MyFunction);
function MyFunction() {
//do something here;
}
Credit to #Thriggle
References:
https://msdn.microsoft.com/en-us/library/bb311028.aspx
https://www.daniweb.com/programming/web-development/threads/247263/ajax-postback-after-endrequest
I believe you can insert your own code or function calls into the callback chain by overriding the _onFormSubmit method of the current instance of the Sys.WebForms.PageRequestManager object.
Sys.WebForms.PageRequestManager.getInstance()._onFormSubmit = function(i){
Sys.WebForms.PageRequestManager.prototype._onFormSubmit.call(this,i);
alert("Refreshing the data..."); // -- your code or function call here
};
When I ran the above code in the F12 console on a page with a list view that had a 25-second refresh, I started seeing the "Refreshing the data..." pop-up every 25-seconds, but I haven't tested it with anything more complicated than that.
I prefer Chrome, but I would like it to operate also in other browsers. So, how to make a simple button that will onClick call a function to save html page as html file? Pretty much the same like user presses Right click > Save As.
I have two buttons already, window.print() for printing and location.reload() for refreshing the page, and I must add that this html page is running locally, so there's no web server.
Is it possible with onClick JavaScript as two examples above?
I don't think this is possible, as this would likely be a security violation.
You mention specifically that you are running this locally. Does that mean you are trying to create some sort of application? If so, you might throw it in to something like Brackets Shell. If you put it in there, you can implement your own native function to trigger the "Save As" dialog. It'd be a bit more complicated, but probably one of the only ways to accomplish it if you really needed an on-page Save As button.
This is not currently possible using pure JS, but you can iterate through the document and export the contents to a file manually.
See this similar post: Export DOM
I have a link/anchor HTML like:
<a href='/some-form' ng-click='someFunction(item)'>Text</a>
What I have in mind is that user clicks this link, then I want to load an HTML from server, and after the loading of that HTML, I want someFunction to be executed, which fills the loaded form with some data.
However, by debugging my code, it seems that Angular JS first fires someFunction function, and then browser loads the HTML. Not only I want this to be reverse, but also I need them to be executed sequentially (synchronously).
Is my design a good design? Is there any other way to achieve this behavior? If not, what should I do to make it work?
so I think someFunction(item) should be in the other controller dealing with the route /some-form.
You may also consider using $location to manually navigate to /some-form.
I have a page with several reports that are produced via ajax calls. I am prototype.js framework on this page for some of the display functions.
The links for each report have anchors/tags like #Report1, #Report2 etc, which are hrefs with onClick functions that do lots of work to create the report via javascript.
I would like to make it so if a user bookmarks a page with a link or navigates directly with a anchor/link in the url for my page to load the report.
So if the user goes to : http://mysite/myPage.jsp#Report2 it should load the page and go to the 2nd report.
Is there anyway in my pageload I can look at the anchor/link and perform the onlcick for that anchor? I was thinking I could create a big case/if statement to figure out what to do, but maybe there was an easier way.
It all depends on how you're Ajax calls are structured really. I do something similar for opening the correct tab within a tab navigation. The code would start off like this, if you let me see how your Ajax events are hooked up then i should be able to show you the rest.
document.observe("dom:loaded", function() {
if(window.location.hash){
var report = window.location.hash.replace("#","");
}
});
EDIT
Looking at your code you would be much better off (imv) switching to an unobtrusive method where you attach events to your elements e.g.
$('ele').observe('click',doStuff.bindAsEventListener($('ele')));
This would enable you to more easily connect the same functionality to a click or a pageload but is also better practice anyway and would prevent code duplication etc. Obviously this is missing large chunks but hopefully you get what i mean