CODEWITHSUNDEEP
javascriptscalaplayframeworkplayframework-2.3typesafe
Anand Krishnan
Anand Krishnan

Reputation: 11

In Play-Scala (activator), not able to dynamically populate a <div> from javascript

Please find the code here - https://github.com/iamanandkris/RedirectURL/blob/master/app/views/editRedirect.scala.html. I am trying to print the contents of Input 1,2 and 3 in to the div as and when the focus changes from any of these 3 objects. I am able to see that the java script is getting invoked when the focus changes and am able to get the alert also. I am able to populate the below 3 values

     var idToGet = document.getElementById('uid').value
     var qargsToGet = document.getElementById('qargs').value
     var rurlToGet = document.getElementById('rurl').value

But the statement is not working 

     var s= document.getElementById('thecurrenturl');
     s.html = "testing again";

Please go thru the full code below:

@(redirectForm: Form[RedirectModel])(implicit flash: Flash, lang: Lang)
@import helper._
@import helper.twitterBootstrap._

@main(Messages("products.form")) {
  <h2>@Messages("products.form")</h2>

  @helper.form(action = routes.Redirects.save()) {
    <fieldset>

      <label for="targetURL">Target URL: </label>
      <div id="thecurrenturl"></div>

      <legend>
        @Messages("products.details", Messages("products.new"))
      </legend> 

      @inputText(
         redirectForm("uid"), '_label -> "User ID",'onBlur->"myFunction()",'_help -> "Enter a valid user id."
      )
      @textarea(
         redirectForm("qargs"), 'onBlur->"myFunction()"
      )
      @textarea(
         redirectForm("rurl"), 'onBlur->"myFunction()"
      )

    </fieldset>



    <p><input type="submit" class="btn primary"
        value='@Messages("products.new.submit")'></p>
  }

    <script type="text/javascript">
        var successFn = function(data) {
            console.debug("Success of Ajax Call");
            console.debug(data);
            };
            var errorFn = function(err) {
            console.debug("Error of ajax Call");
            console.debug(err);
        }

        ajax1 = {
            success: successFn,
            error: errorFn
        }

        function myFunction() {

            alert("test")
            var idToGet = document.getElementById('uid').value
            var qargsToGet = document.getElementById('qargs').value
            var rurlToGet = document.getElementById('rurl').value

            var s= document.getElementById("thecurrenturl");
            s.html = "testing again";

            alert(idToGet+'/'+qargsToGet+'/'+rurlToGet)
            jsRoutes.controllers.Redirects.getString()
            .ajax(ajax1);

        }
    </script>
}

Upvotes: 0

Views: 77

Answers (1)

Daniel Olszewski
Daniel Olszewski

Reputation: 14401

Change line below

s.html = "testing again";

to

s.innerHTML = "testing again";

html is a jQuery function.

Upvotes: 2

Related Questions