Incorrect div -HTMLMobile

[Ken]

If you use code:

Code: Select all

If ContainerMobile(#PB_Any, #PB_Mobile_Page)
  HtmlMobile("<div class=" + Chr(34) + "card" + Chr(34) + ">")
  HtmlMobile("<h2 class=" + Chr(34) + "card__title" + Chr(34) + ">Card Title</h2>")
  HtmlMobile("<div class=" + Chr(34) + "card__content" + Chr(34) + ">Lorem ipsum dolor sit amet.</div>")
  HtmlMobile("</div>")
  CloseMobileContainer()
EndIf

You get HTML:

Code: Select all

<div class="card"></div>
<h2 class="card__title">Card Title</h2>
<div class="card__content">Lorem ipsum dolor sit amet.</div>

You would think you get:

Code: Select all

<div class="card">
<h2 class="card__title">Card Title</h2>
<div class="card__content">Lorem ipsum dolor sit amet.</div>
</div>

[Peter]

HtmlMobile() attempts to repair defective HTML.

Therefore it converts <div class="card"> to <div class="card"></div>

Workaround:

Code: Select all

If ContainerMobile(#PB_Any, #PB_Mobile_Page)
  
  Html.s = "<div class=" + Chr(34) + "card" + Chr(34) + ">" + 
           "<h2 class=" + Chr(34) + "card__title" + Chr(34) + ">Card Title</h2>" + 
           "<div class=" + Chr(34) + "card__content" + Chr(34) + ">Lorem ipsum dolor sit amet.</div>" + 
           "</div>" 
  
  HtmlMobile(Html)
  
  CloseMobileContainer()
  
EndIf

P.S.: You can also write it like this:

Code: Select all

  Html.s = ~"<div class=\"card\">" + 
           ~"<h2 class=\"card__title\">Card Title</h2>" + 
           ~"<div class=\"card__content\">Lorem ipsum dolor sit amet.</div>" + 
           ~"</div>" 

[Caronte3D]

I think would be better if the HtmlMobile write the code as is.
This way we can do things like wrap a fragment of SB code like this:

Code: Select all

HtmlMobile("<div class=" + Chr(34) + "card" + Chr(34) + ">")
...
SB code
...
HtmlMobile("</div>")

I miss that feature many times.

Also would be nice if SB add a default ID to elements, so we can access easy from JS side without have to add it ourselves.

[Quin]

Also would be nice if SB add a default ID to elements, so we can access easy from JS side without have to add it ourselves.

+100
Would be super nice.

[Fred]

It's the browser which autofix this, when using .append() in jQuery() or raw innerHTML +=.

More info here: https://chat.deepseek.com/a/chat/s/6c0c ... cc065567f6

[Quin]

Your link doesn't work Fred, but I did find this and this, which confirms your information.

[Ken]

Thanks Peter for the workaround. It did work well.

I also did test with original HTML using ajax.

If you have in root file test.html and it has this content:

Code: Select all

<div id="mytest">
	<h5>Spiderbasic is nice</h5>
	<script>
		function myfunc(){
			var mytext = 'Spiderbasic is very nice';
			return mytext
			}
	</script>
  </div>

In Spiderbasic app:

Code: Select all

If ContainerMobile(#PB_Any, #PB_Mobile_Page)
  HtmlMobile("<div id=" + Chr(34) + "result" + Chr(34) + ">")
  HtmlMobile("<script>$(" + Chr(34) + "#result" + Chr(34) + ").load(" + Chr(34) + "test.html#mytest" +  Chr(34) + ");")
  ButtonMobile(0, "Run myfunc")
  CloseMobileContainer()
EndIf 


Procedure MobileEvents()
    Select EventMobile()
      Case 0
        !alert(myfunc());
    EndSelect
  EndProcedure

  BindEvent(#PB_Event_Mobile, @MobileEvents())