Inline form will not submit

[jerrac]

If I use the inline form, it will not submit when I click the submit button. The cancel button works find.

If I use the popup form, it all works fine.

I can't even get it to log anything to the console.

$('#preferredfirstname-value').editable({
      type: 'text',
      pk: uid,
      url: posturl,
      name: 'preferredfirstname',
      emptytext: 'no value',
      validate: function(value){
        console.log("tried to submit.");
        valid = nameRegex.test(value);
        if(valid)
        {
          return 'Invalid characters in name.';
        }
      },
      params: function(params){
        var push = {};
        push['uid'] = params.pk;
        push[params.name] = params.value;
        return push;
      },
      placement: 'right'
    });

  $(".editable-submit").click(function(){
    console.log('clicked the button.');
  });

Any troubleshooting tips?

[vitalets]

hi, if value was not changed, editable does not submit to prevent extra request. It can be managed by savenochange param.
Anyway, please create jsfiddle and we will find the problem.

[jerrac]

This happens when I change the value.

What do you mean by "create jsfiddle"?

[vitalets]

jsfiddle allows to demonstrate the issue and quickly find the problem.

1. start from this link http://jsfiddle.net/xBB5x/195
2. modify code to show the issue (test it via 'run' button)
3. when ready, press 'update' button and paste link here.

I will have a look.

[jerrac]

So, I can't seem to replicate the bug on jsfiddle. And I can't send you to the actual site, since it's internal to our firewall.

So here's some more information, maybe a scattershot will hit something... :\

I'm using jQuery 1.9.0, and the Bootstrap tab, collapse, and alert, libraries.

The version in the main bootstrap.js file is "bootstrap-transition.js v2.1.1".

I have some other custom javascript code, but commenting it out doesn't change anything.

The same problem occurs on checkbox, text, and wysihtml5 x-editable types.

If I copy the entire source code of the page with the problematic forms on it into a new jquery 1.9.0 jsfiddle's html pane, it acts exactly same as just loading it normally. I'd share this, but it would be pointless since it's calling a hostname local to my machine for the src of the various libraries.

Watching the apache logs, I don't see the post url being called at all when I click the submit button. Nor does the javascript console report anything.

Entering invalid data doesn't bring up the validation message.

Here's a stripped down version that has issues. http://jsfiddle.net/d9Mmx/ It still has the local links, but at least you can see the code.

Here's what I managed to make of what you posted: http://jsfiddle.net/xBB5x/478/ Note that it actually works the way it's supposed to.

[vitalets]

1. could you set jquery 1.8.3 just for test. I didn't yet checked enough x-editable with 1.9.0. (known one issue with wysihtml, it uses $.browser)
2. I think for such unclear problem the only way is to debug javascript. Please include not minified version and set breakpoimnt on https://github.com/vitalets/x-editable/blob/master/src/editable-form/editable-form.js#L183 (find same line in bootstrap-editable.js)
   The whole submit process is implemented in that submit function and I hope you will see where it breakes..

[tig]

I have the same problem. I found that by changing line 103 of boostrap-editable.js from

  //attach submit handler
  this.$form.submit($.proxy(this.submit, this));

to this:

  //attach submit handler
  this.$form.find('.editable-submit').click($.proxy(this.submit, this));

things work.

I found that if my editable was a popover things worked fine. But when I made it inline submit stopped working.

I stepped through the code in the debugger and everything looked right. For some reason when the submit button was pushed, the submit did not happen (even though this.$form.submit($.proxy(this.submit.this)) had been called to attach the submit handler.

On a lark, noticing how the cancel button was wired up, I made the change above. It now works.

I'm guessing there some weridness related to inline not being a real form and thus screwing up the form submit action.

[jerrac]

Thanks tig! That worked for me as well.

[tig]

Shouldn't this issue be left open until fixed?

FWIW, I did not test that this didn't break something else (for example I didn't test if popover still works with this change or not).

[jerrac]

Dunno. I was treating this as a support request. So once things worked, I was happy.

Though, now I'm having similar issues with checking checkboxes. So, I guess I'll reopen it...

[jerrac]

I finally tracked down both the original problem, and the checklist problem to an issue with bootstrap-tab.js

In bootstrap-tab.js it looks like the following code blocks my clicks:

/* TAB DATA-API
  * ============ */

  $(function () {
    $('body').on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
      $(this).tab('show')
    })
  })

If I do something like the following, I can click the file upload button. But I can't click the submit button or checkbox on the editable element. That's why I'm posting here instead of on Bootstraps issue queue.

<!DOCTYPE html>
<html lane="en">
  <head>
    <meta charset="utf-8">
    <title>Testing</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="http://localhost/resources/bootstrap/css/bootstrap.css" rel="stylesheet">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="http://localhost/resources/bootstrap/js/bootstrap.js"></script>
    <script src="http://localhost/resources/bootstrap/js/bootstrap-tab.js"></script>
    <script src="http://localhost/resources/bootstrap-editable/bootstrap-editable/js/bootstrap-editable.js"></script>
    <script>
      $(document).ready(function(){
        $.fn.editable.defaults.mode = 'inline';
      $('#excludedirectoryemail').editable({
      type: 'checklist',
      pk: 1,
      url: '/post',
      //mode: 'popup',
      name: 'excludedirectoryemail',
      source: [
        {
          value: 1,
          text: 'Not Shown'
        }
      ],
      emptytext: 'Shown',
      params: function(params){
        var push = {};
        push['uid'] = params.pk;
        if(params.value==1)
          send = 'true';
        push[params.name] = send;
        return push;
      }
    });
    $("#edit_photo").on('click',function(e){
    e.stopPropagation();
  });
      })
    </script>
  </head>
  <body>
    <div class="tabbable">

      <div class="tab-content well">
        <div data-toggle="tab" class="tab-pane active">
          <form action="http://localhost/index.php/search/do_edit_photo/444838/devedir" method="post" accept-charset="utf-8" class="form-horizontal" id="editphoto" enctype="multipart/form-data">
            <div class="control-group">
              <label for="photo" class="control-label">Replace Photo</label>
              <div class="controls">
                <input type="file" name="edit_photo" id="edit_photo" class="input-file">
              </div>
            </div>
            <a href="#" id="excludedirectoryemail" data-type="checklist" class="editable editable-click" ></a>
            <div class="form-actions">
              <button name="" type="submit" class="btn btn-primary">Save</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </body>
</html>

The magic is the stopPropagation() function on the edit_photo element. How do I do similar to the editable forms?

[vitalets]

@tig thanks for your research.. the submit issue is strange as inline is a normal form inserted after the element.. and works for me. Is that issue appeared in different browsers?

@jerrac didn't exactly get idea of your last comment, sorry.. could you explain?

[jerrac]

Bootstrap Tab http://twitter.github.com/bootstrap/javascript.html#tabs has an .on() event that blocks clicks on form elements inside a div set up to be used by tabs. See the html I posted previously.

Elements outside that div, like the x-editable popups, are not blocked. Elements inside it, like inline x-editable forms, are blocked.

I was able to make my non-x-editable form work by adding the e.stopPropagation(); command as shown in my previous comment.

I assume that adding e.stopPropagation(); to the x-editable forms would fix them. I've gone through bootstrap-editable.js for hours trying to figure out where to add that command, but I can't figure it out.

Note that I can remove @tig's fix when I move the forms outside of the tabbable div.

This behavior is consistent in both Chromium and Firefox.

[vitalets]

hmm.. I see that it calls show method but does not block the event itself..

 $(function () {
    $('body').on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
      $(this).tab('show')
    })
  })

anyway to stop click propagation in editable form you can add handler in shown event:

$('#username').on('shown', function() {
    var $container = $(this).data('editableContainer').tip();
    $container.on('click', '.editable-buttons', function(e) {
        e.stopPropagation(); //catch click event on buttons
    });
}

maybe I'm too tired today.. but I don't understand how this can help %%)

[jerrac]

Nice. It works on both buttons and checkboxs when I tell it to look at '.editable-input'. $container.on('click', '.editable-input'...

Now to see about making it work without having to add an event for every input...

[smehtaCAS]

I am having a similar issue. I tried @tig's fix and it is working for me. My problem are not the tabs but I have bootstrap carousel and have x-editable for the description. I am also using the bootstap-lightbox (https://github.com/djinteractive/Lightbox-for-Bootstrap).
Thus my layout is tabs > carousel > bootstrap-lightbox
All was working fine with bootstrap 2.1.1 When I upgraded to 2.3.2, my x-editable stopped working. Neither inline or popup were working. Then with @tig's fix it is working.

I could not find the reason for the same.

[vitalets]

@smehtaCAS if it's not too hard could you make a simplified jsfiddle demonstrating the issue?
thx