Develop Reference

pace.js: "start" event not triggered?

I can't seem to find a solution to this problem I posted in the comments of this question
… I'm using the pace.js plugin and I would love to load/show parts of my page immediately without having to wait for the preloader to load all content.
I thought of doing this by simply calling the start event and show the selector immediately.
However I can't seem to find the cause why my done event is fired, but start is not. I also tried with hide which is also fired, but stop or restart is not.
$(window).load(function(){
Pace.on('start', function() {
alert('start') // not fired
});
Pace.on('done', function() {
alert('done') // fired!
});
});
Any ideas?

Call Pace.start(), right after event bindings. You then will be able to get the start event.

You will need to call
Pace.restart();
if the current page has already loaded with pace progress.

You have to put
Pace.on('start', function() {
alert('start');
});
outside $(window).load....
After that it will get start status, You are calling These methods after documentation is loaded so start must be already triggred.

after registering script and css, on your htlm section add this script
<script type="text/javascript">
window.onbeforeunload = renderLoading;
function renderLoading() {
Pace.stop();
//Pace.start();
Pace.bar.render();
}

Running Master page scripts on imported page lines

I'm importing some php into a div block using a link like this
<a class="ajax-link" href="login.php">Login/Register</a>
and such script (that uses jquery load to fill the div block).
$(function() {
$("a.ajax-link").on("click", function(e) {
e.preventDefault();
$("#body-element").load(this.href);
});
});
Now let's say the loaded php file after running the php portion also contains a link with "ajax-link" class and I want that link too to change the contents of that div block
<?php
...
?>
<a class="ajax-link" href="view.php">View content</a>
But rather than running the above mentioned function on it, it seems to ignore it completely and opens a new page instead.
So basically... how can I run that script on imported parts of the page?

This is where event delegation comes in handy.
$(document.body).on("click", "a.ajax-link", function(e) {
// ...
});

This code needs to be re-run ... dynamically added objects are not included in previous on clicks.
$("a.ajax-link").on("click", function(e) {
e.preventDefault();
$("#body-element").load(this.href);
});
... you could also ... turn off the old watcher.
$("a.ajax-link").off("click");
UPDATE:
Try ...
$("a.ajax-link")
.off("click")
.on("click", function(e) {
e.preventDefault();
$("#body-element").load(this.href);
});

You have to apply the click listener on the newly added link as well, as the element has to be loaded into the DOM when applying the click listener in order for it to be applied. However, if you just re-run the same code you'll like run into the problem of having two event listeners on the first ajax-link.
Try this:
// We still use on doc ready to be sure the
// first link is present before applying listener
$(function()
{
// Reset all listeners on ajax-links and
// then apply listeners via function
resetAjaxLinks();
});
// This function will remove any ajaxlink
// listeners and then apply them correctly
function resetAjaxLinks()
{
// Remove event listeners and then on click....
$("a.ajax-link").off('click').on("click", function(e)
{
// Prevent default link action...
e.preventDefault();
// Load in your content...
$("#body-element").load(this.href);
// Once content is loaded in, reset event listeners!
resetAjaxLinks();
});
}
EDIT: This is not the best method for this. Instead, use event delegation as specified by this answer.

Dynamically add a function to for a class

I use an inline editor for bootstrap that needs to be initiate in the javascript.
I want to use a general class "editable" for elements but there is a problem when i use jQuery.load.
If i declare $('.editable').editable(); it works but when i load some content from external file with jQuery.load it doesn't work for elements inside loaded div.
I need to run $('.editable').editable(); again to make it works.
How can i assign the function to the class and work dynamically?
Thanks

You can run a function when AJAX events complete:
http://api.jquery.com/ajaxComplete/
If you run $('.editable').editable(); in that callback, should work.
For example:
$( document ).ajaxComplete(function() {
$('.editable').editable();
});

Ok. I found a way, not a clean one!
The Editable plugin adds a class "editable-click".
I made a listener on hover and if doesn't have that class to run the function on the element.
The final code:
$('body').on('mouseover', '.editable', function(event) {
if( !$(this).hasClass('editable-click') )
$(this).editable();
});

Cant select ids that I loaded with jQuery

I understand that you need to use ".on" to use code that you loaded with jquery after the page has loaded. (At least I think it works that way)
So I tried that but it somehow just doesn't do a thing at all. No errors in the console either.
$("#forgot_password").click(function(){
var forgot_password = '<div id="toLogin" style="cursor:pointer;">Prijava</div>'
$("#loginPopupForm").html(forgot_password);
});
$("#toLogin").on("click", function(){
alert("Hello");
});
So when I click on #forgot_password it does execute the first click function. But when I click on #toLogin it doesn't do anything and I think its because its loaded with jquery when I click on #forgot_password

Try this
$("#loginPopupForm").on("click", "#toLogin", function(){
alert("Hello");
});

You need to bind to an element that is present when the page loads, like body for example. Just change your code to what is shown below
$("body").on("click", "#forgot_password", function(){
var forgot_password = '<div id="toLogin" style="cursor:pointer;">Prijava</div>'
$("#loginPopupForm").html(forgot_password);
});
$("body").on("click", "#toLogin", function(){
alert("Hello");
});

You are setting the on to the wrong thing. You want it to be:
$(document).on('click', '#toLogin', function() {alert('hello') });
The id isn't there until you do the other click event, so jQuery is not finding any element to set the click event on. You need to have an element that has been rendered in the DOM to set the event on.

You are totally right about the problem : on() targets only elements that are already existing as it runs.
What you need in jQuery is called Delegated event and is well explained on the Jquery doc page.
The difference in the code is thin, but it's how you're supposed to do.

You have to specify the parent element
$("#toLogin").on("click","#loginPopupForm", function(){
alert("Hello");
});
in the 2nd argument of the on

jqModal only works after element's been inserted on the page

I'm using the jqModal plugin to attach a dialog box to a button click. I'm trying to attach the following box to the page:
suqBoxInner = document.createElement("div");
suqBoxInner.id = "suq_box_inner";
$(suqBoxInner).jqDrag('.jqDrag').jqResize('.jqResize').jqm({
trigger: '#suq_button',
overlay: 0,
onShow: function(h) {
return h.w.css('opacity', 0.92).slideDown();
},
onHide: function(h) {
return h.w.slideUp("slow", function() {
if (h.o) {
return h.o.remove();
}
});
}
});
However this only works if I run this binding code after the div's been inserted into the page. That is I have to use something like $("#div_on_page").after(suqBoxInner) before running the jqDrag code. What are my options for binding it before it's inserted into the page? I could use $.live() but that has to bind to a mouse event and the jqModal plug in uses bind on the trigger listed inside the function call.

It appears that this plugin requires the div (suqBoxInner) to be on the page. So short of modifying the plugin, I'm not sure you have many options as-is. Perhaps you may want to rethink how you are implementing the plugin? How is suqBoxInner being placed on the page? Is it after a specific event, or action?
One solution I can think of off the top of my head is to fire an event after suqBoxInner is placed on the page. The event would then initialize jqModal.
Just a thought. Good luck.