iPhone Webkit jQuery strangeness: Can't update content

By : Parand
Source: Stackoverflow.com
Question!

Running into the strangest problem on iPhone using jQuery with my WebViewController.

I have a div into which I append content:

<div id="thumbnails">
  Here are your thumbnails:
  <div id="mythumbs"></div>
</div>

The code looks like:

for (var i = 0; i < thumbs.length; i++) {
  var item = thumbs[i];
  $('<img class="imgthumb" />').data('url', item.Url).attr({
    "src": item.Thumbnail.Url,
  }).appendTo($('#mythumbs'));
};

Works great.

Then I switch to other divs ($('#thumbnails').hide(); $('#someotherdiv').show()), go on about my business, and eventually switch back to the thumbnails div.

At this point I can't seem to append any content to that div using jQuery anymore. I can remove just fine, but the append no longer works.

The exact same code works great on Firefox and Safari outside of the iPhone, but once in the embedded WebKit it fails.

If I modify the DOM directly using JavaScript it works, but if I use jQuery it fails:

var x = document.createTextNode('THE FIRST THING');
document.getElementById('thumbspage').appendChild(x);
$('#thumbspage').append('-- THE SECOND THING');

"THE FIRST THING" shows up but "THE SECOND THING" doesn't.

Any ideas? This thing is driving me nuts.

By : Parand


Answers

Finally found a work-around:

I was calling my objective-c function using window.location . It turned out if I added a setTimeout around the call to window.location everything started working again. I'm guessing calling window.location would immediately call the objective-C code, interrupting the javascript thread, leaving things in a bad state. By adding the setTimeout it allows the javascript thread to finish before jumping into the objective-C code. Or something like that.

By : Parand


<ToolboxData("<{0}:StateDropDownList runat=server></{0}:StateDropDownList>")> _
Public Class StateDropDownList
    Inherits DropDownList

    Protected Overrides Sub RenderContents(ByVal output As HtmlTextWriter)
        output.Write(Text)
    End Sub

    Protected Overrides Sub RenderChildren(ByVal writer As System.Web.UI.HtmlTextWriter)
        MyBase.RenderChildren(writer)
    End Sub


    Private Sub LoadStates()
        MyBase.Items.Add(New ListItem("Alabama", "AL"))
        'Additional states removed for size
        MyBase.Items.Add(New ListItem("Wyoming", "WY"))
    End Sub

    Public Sub New()
        'tried does not work
        ' LoadStates()
    End Sub

    Private Sub StateDropDownList_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Init
        'tried does not work
        ' LoadStates()
    End Sub


    Private Sub StateDropDownList_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        'tried does not work
        'If Not Page.IsPostBack Then
        '    LoadStates()
        'End If
    End Sub

    Protected Overrides Sub Render(ByVal writer As System.Web.UI.HtmlTextWriter)
        MyBase.Render(writer)
    End Sub
End Class


Extend DropDownList control and override OnLoad event and add your items like that :

protected override void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
    	this.Items.Add(new ListItem("Illinois","IL"));
    }
}
By : Canavar


This video can help you solving your question :)
By: admin