Rectangle 27 18

You most likely have another tooltip library still in use (like JQueryUI/Tooltip) OR you're trying to attach a tooltip directly to the document element. Please look into your code for something like:

$(document).tooltip

or something like that, and remove it in order to make things work again. Be sure to review every other .tooltip() call you might already have, since they'll most likely not work anymore: you'll need to manually port them to Bootstrap in order to make them work again.

If you want to keep both Bootstrap/Tooltip and JQueryUI/Tooltip (assuming that's your scenario), you can use $.widget.bridge to manually change the JQueryUI tooltip plugin name:

// Change JQueryUI/tooltip plugin name to 'uitooltip' to fix name collision with Bootstrap/tooltip
$.widget.bridge('uitooltip', $.ui.tooltip);

You need to to this AFTER importing the JQueryUI js file and BEFORE importing the Bootstrap js file: while you're at it I also suggest you to do the same with button/uibutton to solve the exact same problem. The result code will look like that:

<script type="text/javascript" src="path/to/jqueryui.js" />
<script type="text/javascript">
// Change JQueryUI plugin names to fix name collision with Bootstrap:
$.widget.bridge('uitooltip', $.ui.tooltip);
$.widget.bridge('uibutton', $.ui.button);
</script>
<script type="text/javascript" src="path/to/bootstrap.js" />

Alternatively, if you don't find the offending js code and/or you don't want to use $.widget.brige, you can always manually patch bootstrap.js to avoid this kind of error. This can be done by replacing the following line (#1384 in bs 3.3.1):

var inDom = $.contains(this.$element[0].ownerDocument.documentElement, this.$element[0])

with this line:

var inDom = $.contains((this.$element[0].ownerDocument || this.$element[0]).documentElement, this.$element[0])

Keep in mind, tho, that you'll still have a broken .tooltip() call in your code somewhere.

jquery - Uncaught TypeError: Cannot read property 'documentElement' of...

jquery twitter-bootstrap collapse
Rectangle 27 5

I've been working recently with dropzonejs and SlickGrid and I ran into the file ordering challenge as well as the events firing before all the files were uploaded. When you use the defaults it will separate all the uploads, so to allow for multiple files you need to set the uploadMultiple parameter. You can control how many parallel uploads you support by setting the paralellUploads parameter. I seem to recall it defaults to two. The trick is to wait for ALL the uploads to complete before processing the responses. I realize you are looking to retain the order of the files to be uploaded but I really think you want to handle the responses in order. Forcing them to upload in order eliminates any parallel uploading advantages.

I added two handlers one to save the responses as they complete (each block of parallel uploads produces one of these

myDropzone.on("successmultiple", function(file,response) { 
  save_responses(response); 
});

and one to process them all when done.

myDropzone.on("completemultiple", function() {
  if (this.getQueuedFiles().length == 0 && 
      this.getUploadingFiles().length == 0) {
    process_responses(this.getAcceptedFiles());
  }
});

if you suspect the order of the files isn't right you can always check the event.dataTransfer.files array

I am trying this code and it is not working for me. I need the names of the files that are in the drop zone queue. This data will be passed to the PHP during the submit.

jquery - how to read list of files queued for dropzone and upload them...

jquery file-upload drag-and-drop dropzone.js
Rectangle 27 1

In order to accept the keyboard input from CTRL + SPACE you'll need to register an event handler (http://www.quirksmode.org/js/events_tradmod.html) and then listen out for input from the user. This will read from an array of keystroke events and check whether they're true, then fire event when keys have been pressed, when they get released the events are false.

var map = {17: false, 32: false};
$(document).keydown(function(e) {
    if (e.keyCode in map) {
        map[e.keyCode] = true;
        if (map[17] && map[32]) {
            // FIRE EVENT
        }
    }
}).keyup(function(e) {
    if (e.keyCode in map) {
        map[e.keyCode] = false;
    }
});

if you go to this link: cambiaresearch.com/articles/15/javascript-char-codes-key-codes, you'll find that the keycodes are all listed here. 17 and 32 is CTRL + SPACE.

check out this guide on auto_complete with JQuery. This code will be executed where the event is fired.

javascript - how to call jquery autocomplete function on ctrl+ spaceba...

javascript jquery autocomplete
Rectangle 27 599

I read this question and implemented the approach that has been stated regarding setting the response status code to 278 in order to avoid the browser transparently handling the redirects. Even though this worked, I was a little dissatisfied as it is a bit of a hack.

After more digging around, I ditched this approach and used JSON. In this case, all responses to ajax requests have the status code 200 and the body of the response contains a JSON object that is constructed on the server. The javascript on the client can then use the JSON object to decide what it needs to do.

I had a similar problem to yours. I perform an ajax request that has 2 possible responses: one that redirects the browser to a new page and one that replaces an existing HTML form on the current page with a new one. The jquery code to do this looks something like:

$.ajax({
    type: "POST",
    url: reqUrl,
    data: reqBody,
    dataType: "json",
    success: function(data, textStatus) {
        if (data.redirect) {
            // data.redirect contains the string URL to redirect to
            window.location.href = data.redirect;
        }
        else {
            // data.form contains the HTML for the replacement form
            $("#myform").replaceWith(data.form);
        }
    }
});

The JSON object "data" is constructed on the server to have 2 members: data.redirect and data.form. I found this approach to be much better.

As stated in the solution in stackoverflow.com/questions/503093/ it is better to use window.location.replace(data.redirect); than window.location.href = data.redirect;

Any reason why it it wouldn't be better to use HTTP codes on the action. For example a 307 code which is HTTP Temporary Redirect?

@Sergei Golos the reason is that if you do a HTTP redirect, the redirect actually never arrives to the ajax success callback. The browser processes the redirect delivering a 200 code with the content of the redirect's destination.

This works only if you have control on server

javascript - How to manage a redirect request after a jQuery Ajax call...

javascript jquery ajax redirect
Rectangle 27 599

I read this question and implemented the approach that has been stated regarding setting the response status code to 278 in order to avoid the browser transparently handling the redirects. Even though this worked, I was a little dissatisfied as it is a bit of a hack.

After more digging around, I ditched this approach and used JSON. In this case, all responses to ajax requests have the status code 200 and the body of the response contains a JSON object that is constructed on the server. The javascript on the client can then use the JSON object to decide what it needs to do.

I had a similar problem to yours. I perform an ajax request that has 2 possible responses: one that redirects the browser to a new page and one that replaces an existing HTML form on the current page with a new one. The jquery code to do this looks something like:

$.ajax({
    type: "POST",
    url: reqUrl,
    data: reqBody,
    dataType: "json",
    success: function(data, textStatus) {
        if (data.redirect) {
            // data.redirect contains the string URL to redirect to
            window.location.href = data.redirect;
        }
        else {
            // data.form contains the HTML for the replacement form
            $("#myform").replaceWith(data.form);
        }
    }
});

The JSON object "data" is constructed on the server to have 2 members: data.redirect and data.form. I found this approach to be much better.

As stated in the solution in stackoverflow.com/questions/503093/ it is better to use window.location.replace(data.redirect); than window.location.href = data.redirect;

Any reason why it it wouldn't be better to use HTTP codes on the action. For example a 307 code which is HTTP Temporary Redirect?

@Sergei Golos the reason is that if you do a HTTP redirect, the redirect actually never arrives to the ajax success callback. The browser processes the redirect delivering a 200 code with the content of the redirect's destination.

This works only if you have control on server

javascript - How to manage a redirect request after a jQuery Ajax call...

javascript jquery ajax redirect
Rectangle 27 594

I read this question and implemented the approach that has been stated regarding setting the response status code to 278 in order to avoid the browser transparently handling the redirects. Even though this worked, I was a little dissatisfied as it is a bit of a hack.

After more digging around, I ditched this approach and used JSON. In this case, all responses to ajax requests have the status code 200 and the body of the response contains a JSON object that is constructed on the server. The javascript on the client can then use the JSON object to decide what it needs to do.

I had a similar problem to yours. I perform an ajax request that has 2 possible responses: one that redirects the browser to a new page and one that replaces an existing HTML form on the current page with a new one. The jquery code to do this looks something like:

$.ajax({
    type: "POST",
    url: reqUrl,
    data: reqBody,
    dataType: "json",
    success: function(data, textStatus) {
        if (data.redirect) {
            // data.redirect contains the string URL to redirect to
            window.location.href = data.redirect;
        }
        else {
            // data.form contains the HTML for the replacement form
            $("#myform").replaceWith(data.form);
        }
    }
});

The JSON object "data" is constructed on the server to have 2 members: data.redirect and data.form. I found this approach to be much better.

As stated in the solution in stackoverflow.com/questions/503093/ it is better to use window.location.replace(data.redirect); than window.location.href = data.redirect;

Any reason why it it wouldn't be better to use HTTP codes on the action. For example a 307 code which is HTTP Temporary Redirect?

@Sergei Golos the reason is that if you do a HTTP redirect, the redirect actually never arrives to the ajax success callback. The browser processes the redirect delivering a 200 code with the content of the redirect's destination.

This works only if you have control on server

javascript - How to manage a redirect request after a jQuery Ajax call...

javascript jquery ajax redirect
Rectangle 27 591

I read this question and implemented the approach that has been stated regarding setting the response status code to 278 in order to avoid the browser transparently handling the redirects. Even though this worked, I was a little dissatisfied as it is a bit of a hack.

After more digging around, I ditched this approach and used JSON. In this case, all responses to ajax requests have the status code 200 and the body of the response contains a JSON object that is constructed on the server. The javascript on the client can then use the JSON object to decide what it needs to do.

I had a similar problem to yours. I perform an ajax request that has 2 possible responses: one that redirects the browser to a new page and one that replaces an existing HTML form on the current page with a new one. The jquery code to do this looks something like:

$.ajax({
    type: "POST",
    url: reqUrl,
    data: reqBody,
    dataType: "json",
    success: function(data, textStatus) {
        if (data.redirect) {
            // data.redirect contains the string URL to redirect to
            window.location.href = data.redirect;
        }
        else {
            // data.form contains the HTML for the replacement form
            $("#myform").replaceWith(data.form);
        }
    }
});

The JSON object "data" is constructed on the server to have 2 members: data.redirect and data.form. I found this approach to be much better.

As stated in the solution in stackoverflow.com/questions/503093/ it is better to use window.location.replace(data.redirect); than window.location.href = data.redirect;

Any reason why it it wouldn't be better to use HTTP codes on the action. For example a 307 code which is HTTP Temporary Redirect?

@Sergei Golos the reason is that if you do a HTTP redirect, the redirect actually never arrives to the ajax success callback. The browser processes the redirect delivering a 200 code with the content of the redirect's destination.

This works only if you have control on server

javascript - How to manage a redirect request after a jQuery Ajax call...

javascript jquery ajax redirect
Rectangle 27 591

I read this question and implemented the approach that has been stated regarding setting the response status code to 278 in order to avoid the browser transparently handling the redirects. Even though this worked, I was a little dissatisfied as it is a bit of a hack.

After more digging around, I ditched this approach and used JSON. In this case, all responses to ajax requests have the status code 200 and the body of the response contains a JSON object that is constructed on the server. The javascript on the client can then use the JSON object to decide what it needs to do.

I had a similar problem to yours. I perform an ajax request that has 2 possible responses: one that redirects the browser to a new page and one that replaces an existing HTML form on the current page with a new one. The jquery code to do this looks something like:

$.ajax({
    type: "POST",
    url: reqUrl,
    data: reqBody,
    dataType: "json",
    success: function(data, textStatus) {
        if (data.redirect) {
            // data.redirect contains the string URL to redirect to
            window.location.href = data.redirect;
        }
        else {
            // data.form contains the HTML for the replacement form
            $("#myform").replaceWith(data.form);
        }
    }
});

The JSON object "data" is constructed on the server to have 2 members: data.redirect and data.form. I found this approach to be much better.

As stated in the solution in stackoverflow.com/questions/503093/ it is better to use window.location.replace(data.redirect); than window.location.href = data.redirect;

Any reason why it it wouldn't be better to use HTTP codes on the action. For example a 307 code which is HTTP Temporary Redirect?

@Sergei Golos the reason is that if you do a HTTP redirect, the redirect actually never arrives to the ajax success callback. The browser processes the redirect delivering a 200 code with the content of the redirect's destination.

This works only if you have control on server

javascript - How to manage a redirect request after a jQuery Ajax call...

javascript jquery ajax redirect
Rectangle 27 591

I read this question and implemented the approach that has been stated regarding setting the response status code to 278 in order to avoid the browser transparently handling the redirects. Even though this worked, I was a little dissatisfied as it is a bit of a hack.

After more digging around, I ditched this approach and used JSON. In this case, all responses to ajax requests have the status code 200 and the body of the response contains a JSON object that is constructed on the server. The javascript on the client can then use the JSON object to decide what it needs to do.

I had a similar problem to yours. I perform an ajax request that has 2 possible responses: one that redirects the browser to a new page and one that replaces an existing HTML form on the current page with a new one. The jquery code to do this looks something like:

$.ajax({
    type: "POST",
    url: reqUrl,
    data: reqBody,
    dataType: "json",
    success: function(data, textStatus) {
        if (data.redirect) {
            // data.redirect contains the string URL to redirect to
            window.location.href = data.redirect;
        }
        else {
            // data.form contains the HTML for the replacement form
            $("#myform").replaceWith(data.form);
        }
    }
});

The JSON object "data" is constructed on the server to have 2 members: data.redirect and data.form. I found this approach to be much better.

As stated in the solution in stackoverflow.com/questions/503093/ it is better to use window.location.replace(data.redirect); than window.location.href = data.redirect;

Any reason why it it wouldn't be better to use HTTP codes on the action. For example a 307 code which is HTTP Temporary Redirect?

@Sergei Golos the reason is that if you do a HTTP redirect, the redirect actually never arrives to the ajax success callback. The browser processes the redirect delivering a 200 code with the content of the redirect's destination.

This works only if you have control on server

javascript - How to manage a redirect request after a jQuery Ajax call...

javascript jquery ajax redirect
Rectangle 27 591

I read this question and implemented the approach that has been stated regarding setting the response status code to 278 in order to avoid the browser transparently handling the redirects. Even though this worked, I was a little dissatisfied as it is a bit of a hack.

After more digging around, I ditched this approach and used JSON. In this case, all responses to ajax requests have the status code 200 and the body of the response contains a JSON object that is constructed on the server. The javascript on the client can then use the JSON object to decide what it needs to do.

I had a similar problem to yours. I perform an ajax request that has 2 possible responses: one that redirects the browser to a new page and one that replaces an existing HTML form on the current page with a new one. The jquery code to do this looks something like:

$.ajax({
    type: "POST",
    url: reqUrl,
    data: reqBody,
    dataType: "json",
    success: function(data, textStatus) {
        if (data.redirect) {
            // data.redirect contains the string URL to redirect to
            window.location.href = data.redirect;
        }
        else {
            // data.form contains the HTML for the replacement form
            $("#myform").replaceWith(data.form);
        }
    }
});

The JSON object "data" is constructed on the server to have 2 members: data.redirect and data.form. I found this approach to be much better.

As stated in the solution in stackoverflow.com/questions/503093/ it is better to use window.location.replace(data.redirect); than window.location.href = data.redirect;

Any reason why it it wouldn't be better to use HTTP codes on the action. For example a 307 code which is HTTP Temporary Redirect?

@Sergei Golos the reason is that if you do a HTTP redirect, the redirect actually never arrives to the ajax success callback. The browser processes the redirect delivering a 200 code with the content of the redirect's destination.

This works only if you have control on server

javascript - How to manage a redirect request after a jQuery Ajax call...

javascript jquery ajax redirect
Rectangle 27 1

Code gets executed from the top to the bottom.

First it will wait for the document to be ready, once it's ready it will go fast through all the other $(document).ready() lines of code, because obviously the document is ready once the first one executed.

It is basically the same as having multiple conditions; it is adding nothing to your document and only slowing the process down.

var i = 5;

if (i == 5) {
    if (i == 5) {
        if (i == 5) {
            if (i == 5) {
            console.log("I'm pretty sure that i is equal to 5!");
            }
        }
    }
}

To make it really clear that it does I created a JSFiddle demo:

<div id="document-ready"></div>
$(document).ready(function() {
    $("#document-ready").append("Document ready 1<br>");
});

$(document).ready(function() {
    $("#document-ready").append("Document ready 2<br>");
});

$(document).ready(function() {
    $("#document-ready").append("Document ready 3<br>");
});

You see that it first outputs 'Document ready 1', which means that that one got executed first, and that confirms my answer: Code gets executed from the top to the bottom.

jquery - Execution order of $(document).ready(); - Stack Overflow

jquery
Rectangle 27 1

Code gets executed from the top to the bottom.

First it will wait for the document to be ready, once it's ready it will go fast through all the other $(document).ready() lines of code, because obviously the document is ready once the first one executed.

It is basically the same as having multiple conditions; it is adding nothing to your document and only slowing the process down.

var i = 5;

if (i == 5) {
    if (i == 5) {
        if (i == 5) {
            if (i == 5) {
            console.log("I'm pretty sure that i is equal to 5!");
            }
        }
    }
}

To make it really clear that it does I created a JSFiddle demo:

<div id="document-ready"></div>
$(document).ready(function() {
    $("#document-ready").append("Document ready 1<br>");
});

$(document).ready(function() {
    $("#document-ready").append("Document ready 2<br>");
});

$(document).ready(function() {
    $("#document-ready").append("Document ready 3<br>");
});

You see that it first outputs 'Document ready 1', which means that that one got executed first, and that confirms my answer: Code gets executed from the top to the bottom.

jquery - Execution order of $(document).ready(); - Stack Overflow

jquery
Rectangle 27 4

First, you shouldn't have the same id appear twice in a document. That will cause all kinds of propblems.

Instead, set a data-attribute on the items in the second list to reflect corresponding items in the first list:

<ul class="block" type="none">
    <li id = "one">1</li>
    <li id = "two">2</li>
    <li id = "three">3</li>
    <li id = "four">4</li>
    <li id = "five">5</li>
</ul>
<ul class="secondblock" type="none">
    <li data-block-id = "one">1</li>
    <li data-block-id = "two">2</li>
    <li data-block-id = "three">3</li>
    <li data-block-id = "four">4</li>
    <li data-block-id = "five">5</li>
</ul>

Then reflecting the sort of the first list in the second list is simple:

$('.block').sortable({update: sortOtherList});

function sortOtherList(){
    $('.block li').each(function(){ 
        $('.secondblock [data-block-id=' + $(this).attr('id') + ']')
            .remove()
            .appendTo($('.secondblock'));

    });
}

actually after update i will send order of sortable to server and store this order in database. Next time page is loaded i will get order from server and set to sortable.

javascript - set order to jquery sortable - Stack Overflow

javascript jquery
Rectangle 27 3

First, you shouldn't have the same id appear twice in a document. That will cause all kinds of propblems.

Instead, set a data-attribute on the items in the second list to reflect corresponding items in the first list:

<ul class="block" type="none">
    <li id = "one">1</li>
    <li id = "two">2</li>
    <li id = "three">3</li>
    <li id = "four">4</li>
    <li id = "five">5</li>
</ul>
<ul class="secondblock" type="none">
    <li data-block-id = "one">1</li>
    <li data-block-id = "two">2</li>
    <li data-block-id = "three">3</li>
    <li data-block-id = "four">4</li>
    <li data-block-id = "five">5</li>
</ul>

Then reflecting the sort of the first list in the second list is simple:

$('.block').sortable({update: sortOtherList});

function sortOtherList(){
    $('.block li').each(function(){ 
        $('.secondblock [data-block-id=' + $(this).attr('id') + ']')
            .remove()
            .appendTo($('.secondblock'));

    });
}

actually after update i will send order of sortable to server and store this order in database. Next time page is loaded i will get order from server and set to sortable.

javascript - set order to jquery sortable - Stack Overflow

javascript jquery
Rectangle 27 3

The selected answer authored by Anurag is only partially correct. Due to some internals of jQuery's event handling, the proposed bindFirst function will not work if you have a mix of handlers with and without filters (ie: $(document).on("click", handler) vs $(document).on("click", "button", handler)).

The issue is that jQuery will place (and expect) that the first elements in the handler array will be these filtered handlers, so placing our event without a filter at the beginning breaks this logic and things start to fall apart. The updated bindFirst function should be as follows:

$.fn.bindFirst = function (name, fn) {
    // bind as you normally would
    // don't want to miss out on any jQuery magic
    this.on(name, fn);

    // Thanks to a comment by @Martin, adding support for
    // namespaced events too.
    this.each(function () {
        var handlers = $._data(this, 'events')[name.split('.')[0]];
        // take out the handler we just inserted from the end
        var handler = handlers.pop();
        // get the index of the first handler without a selector
        var firstNonDelegate = handlers.first(function(h) { return !h.selector; });
        var index = firstNonDelegate ? handlers.indexOf(firstNonDelegate)
                                     : handlers.length; // Either all handlers are selectors or we have no handlers
        // move it at the beginning
        handlers.splice(index, 0, handler);
    });
};

I was wondering about this! Thanks. Only problem is, this version does not accept an argument for delegated events itself. I would like to be able to call $.fn.bindFirst(name, selector, handler). I'll try to figure out how, but since you seem to understand this better than me, I'm sure the community would benefit from another revision.

It should be very similar, though you'd have to do some argument shuffling before the call to this.on(name, fn);. Basically add in the parameter for selector in the signature, then immediately check if selector is a function or a string. If selector is a function, then set fn = selector and selector = null. Finally, within the this.each, you'd have to change the logic to insert at the first non-delegate if selector is null or at 0 if selector is not null.

jQuery event handlers always execute in order they were bound - any wa...

jquery
Rectangle 27 2

As you can read in the wiki-link you provided,

  • One column in the table should be indexing column. This column will be used for determining position of the row in the table. By default this is first column in the table. You can see structure of the table on the live example page.

The "unrecognized expression: #" was related to the first demand; that you are not able to move the rows around is related to the second. You simply lack an indexing column. As you have figured out with the missing <tr> #id, you can easily create that column programmatically :

$("#mySuperTable thead tr").prepend('<th>#</td>');    
var count = $("#mySuperTable tbody tr").length-1;
$("#mySuperTable tbody tr").each(function(i, tr) {
    $(tr).attr('id', 'id'+i);
    $(tr).prepend('<td>'+parseInt(i+1)+'</td>');    
    if (i==count) {
       $("#mySuperTable").dataTable({
           //...initialization options
       }).rowReordering();
    }     
});

Now RowReordering works with your table -> http://jsfiddle.net/gy8s3hoa/

Notice the demo above are running dataTables 1.10.x. The issue has nothing to do with dataTables versions or some changes in dataTables internals, it is simply about how the RowReordering plugin is created. It is not very elegant, if you ask me. The plugin should create the id's and the index column it is needing (and make it hidden) by itself.

javascript - jquery DataTables row reordering: order reverts back afte...

javascript jquery jquery-datatables
Rectangle 27 3

It's perfectly legal to register multiple jQuery(document).ready functions. They will be invoked in the order in which they were registered.

syntax - jQuery: How to call function from inside var on document read...

jquery syntax document-ready
Rectangle 27 3

It's perfectly legal to register multiple jQuery(document).ready functions. They will be invoked in the order in which they were registered.

syntax - jQuery: How to call function from inside var on document read...

jquery syntax document-ready