ajaxSubmit button doesn't initially submit AJAX call

[Phillip Cole]

Hi everyone!

I have an ajaxSubmit button defined in a form snippet, which has a process function bound on submit, kind of like this:

def render: CssSel = {

  ".submit-button" #> SHtml.ajaxSubmit("SUBMIT", process, "id" -> "formSubmit")

}

def process(): JsCmd = {

  println("process called")

}

When I click the button, nothing happens. The process function is not being called.

On the same page that the snippet is defined, I have another piece of the same snippet which binds an ajaxCall to the website's window object, in javascript, also kind of like this:

  def attachScript: CssSel = {

    "*" #> Script {

      globalFunctionFunc

    }

  }

private val globalFunctionFunc=

    Function(

      "globalFunction",

      List(),

      SHtml.ajaxCall(

        JsNull,

        (param: String) =>{

          println("global function called")

        }

      )

    )

If I call this javascript function via the browser console, the function defined in the ajaxCall will be called, as expected.

Here's the weird part:

If I click the ajaxSubmit button first, its process method is not called. Then, if I call the javascript function via the browser console, the javascript function's corresponding backend ajaxCall function will run on the backend, and afterward, the ajaxSubmit button's function will be called.

Looking at the source of classpath/lift.js, inside the appendToQueue function, it seems like the ajaxSubmit button is adding a uriSuffix that gets appended to the data, and then piggybacked onto the ajaxCall from the global javascript function. Is there a way to force immediate evaluation of the ajaxSubmit process function's AJAX, instead of this lazy piggybacking evaluation?

On other pages with similar structures, this problem doesn't seem to occur. In fact, without even adding the attachScript and globalFunctionFunc parts, the ajaxSubmit button still fails to call its process function. What could possibly be causing this behavior on this specific page? Is there a common practice here that enables this lazy ajax evaluation?

Thank you for helping!

Phillip

[Antonio Salazar Cardozo]

Your ajaxSubmit is designed to work if it's inside an AJAX form (typically

built via data-lift="Form.ajax" or SHtml.makeFormsAjax). If you just

want a regular AJAX button, you'll want SHtml.ajaxButton.

ajaxSubmit sets up the uriSuffix because the AJAX submission of the form

will pick that up immediately when you click on the submit button. Since your

button probably sin't in an AJAX form, that suffix just hangs out until the next

AJAX request. Bad news bears! :)

Thanks,

Antonio

[Phillip Cole]

Thanks for the response! Unfortunately, I am using an AJAX form. My HTML looks like this:

<form data-lift="form.ajax>

  <div data-lift="lift:SnippetName>

    <input class="submit-button"></input>

  </div>

</form>

Are there any specific things that cause AJAX forms to do this? That's a bit of a silly question - but I'm still a bit new to Lift! What confuses me is this seems to work just fine in other areas of our project, but this one snippet is having troubles. I should have specified this earlier, but this problem only seemed to happen after upgrading our project to Lift 3.0.

[Phillip Cole]

Sorry, there is a typo. I meant to say 'data-lift="SnippetName"'. The extra 'lift:' bit should have been omitted and is not in my working code.

[Antonio Salazar Cardozo]

Hmmm… At this point, I think if you could post a project (https://www.assembla.com/wiki/show/liftweb/Posting_example_code)

we can look at with the relevant bits, that would go a long way towards helping

to figure it out.

I would check to see if maybe you have an event handler separately attached to

the button that is returning false (which would cancel the form submission). Also,

what version of Lift are you using?

Thanks,

Antonio

[Phillip Cole]

Hi Antonio,

I figured out the problem - your intuition was right! Another engineer had updated the code that handled our modals. Somewhere in there a 'return false;' was added that was preventing the form's submit event. This issue turned out to only happen in form snippets that were placed in modals, and removing that resolved all the issues.

Thanks for helping!

Phillip

[Antonio Salazar Cardozo]

Awesome! Glad that helped :)

Thanks,

Antonio