CODEWITHSUNDEEP
jqueryjquery-uiscalalift
Christopher Chiche
Christopher Chiche

Reputation: 15345

Liftweb WiringUI And JQueryUI Conflict

I am doing a part in my application requiring a HTML block to be loaded in function of a valueCell.

My code is working but JQuery is not doing its job, the tabs are not displayed. I can read the "Hello world" and the tab name but I don't have the tab layout.

Moreover, I can add that, if I remove the use of Wiring UI (just by using displayFormOK instead of displayForm in the html page), it works perfectly well.

Here is my code:

snippet:

object Menu {

  val searchType = ValueCell[Option[SearchType]](Some(Type1))
  //I removed some stuff to update the cell

  def displayForm = {
    WiringUI.apply(searchType)(displayFormAjax)
  }

  def displayFormOK ={
    displayFormAjax(searchType.get)(NodeSeq.Empty)
  }

  def displayFormAjax(sType: Option[SearchType])(n:NodeSeq):NodeSeq =
   {sType match{
      case None => <h3> Error on type </h3>
      case Some(x) => {x.displayForm}
   }}
}

Here is my trait representing the object selected

trait SearchType {
  val name:String
  def displayForm:NodeSeq = {
    <div id="tabs">
      <ul>
        <a href={"#"+name}> {name} </a></li>)}
      </ul> ++
      <div id={name}>Hello World </div> 
    </div>
  )}
}

The code in the trait is more complex, in fact I want to generate an arbitrary number of tabs.

Finally here is my html code

<script>
    $(function() {
        $( "#tabs" ).tabs();
    });
</script>

<form class="lift:form.ajax">        
    <div class="lift:Menu.displayForm"></div>
</form>

Upvotes: 3

Views: 263

Answers (1)

Christopher Chiche
Christopher Chiche

Reputation: 15345

I found the solution to my problem. In fact, as I added some html blocks after "Loading" the script, it was not applied to my block. So, I had to call the script each time WiringUI was used. Here is my solution: 

def displayForm = {
  def cmdG(id: String, first: Boolean, setCmd: JsCmd) = new JsCmd{
    def toJsCmd = setCmd.toJsCmd + "; $(\"#tabs\").tabs();"
  }

  WiringUI.apply(searchType,cmdG _)(displayFormAjax)
}

Obviously I removed the script from my html file.

Note: I also realized that this was not the best solution I had in my code and I will now use this JsCmd feature to disable the tabs I don't want to use.

Upvotes: 1

Related Questions