CODEWITHSUNDEEP
jqueryajaxplayframework
Chahal
Chahal

Reputation: 109

Loading templates with ajax in Play Framework

I am trying to load a template (html file) using an ajax driven html link. so i have a navigation bar on the left and each html anchor invokes a jquery ajax request to load a template in the right hand side div.

The page loads, it's a form, but when trying to validate the form it fails.

Are there any restrictions to loading html templates using ajax? If i load the page through a standard route definition (http://localhost:9000/signup) it loads and validates the form.

ajax code is something like:

    $.ajax({
      url: '/signup',
      type: 'GET',
      dataType: 'html',
      success: function(data){
        $('#signup).html(data);
      }             
    });

All /signup does is render the page:

    public static signup(){
      render();
    }

and the html template is:

    #{extends 'main.html' /}
    #{set title:'test the validation' /}

    #{jQueryValidate class:models.User.class, key:'user' /}
    <div>
<p>Candidate...</p>

<form method="POST" id="joinForm">
    <p class="field">
        <span class="error">#{error 'user.firstname' /}</span>                     <label>Mobile</label>
        <input type="text" name="user.firstname"
            value="${flash['user.firstname']}" />
    </p>

    <input type="submit" name="create" value="Register" />


and the form is submitted using:

    $('#joinForm').submit(function(e) {     
$.ajax({
 type: "POST",
 url: '@{candidate.index()}',
 beforeSend: doValidation,
 success: function() {
     $('#success').html("created...");
 }
 });
 e.preventDefault(); 
    });

the doValidation is the form validation (code taken from samples-and-tests/validation/Sample 7)

Appreciate any insight to solving this, before having to change my design

thanks

Upvotes: 1

Views: 1554

Answers (2)

Chahal
Chahal

Reputation: 109

I found the answer! It's a jquery solution.

From:

$('#joinForm').submit(function(e)

To:

$('#joinForm').live("submit", function(e)

The rest is the same.

Upvotes: 2

Dominik Dorn
Dominik Dorn

Reputation: 1831

It looks like you're not actually sending the data of the form to @{candidate.index()}

because your code block is missing the data: property

try it like this

    $('#joinForm').submit(function(e) {     
$.ajax({
 type: "POST",
 url: '@{candidate.index()}',
 data: $('#joinForm').serializeArray(),
 beforeSend: doValidation,
 success: function() {
     $('#success').html("created...");
 }
 });
 e.preventDefault(); 
    });

Upvotes: 0

Related Questions