Internet solutions team

What to use with Jquery for Div html , innerHtml Or text?

I was working on project which uses Google maps. We allow users to create polygon on the Google map and when user starts drawing polygon we were to show tool tips, you can read how we are showing tooltips using Jquery on teh googel maps here [http://www.isolutionteam.co.uk/show-tooltip-on-google-map-polygon-drag-handle-using-jquery/].

Tool tip were worked great in all three browsers IE 7, Firefox 3.6.4 and Chrome 4.1.249.  Then there was a requirement to change tool tip text on every click of mouse on the map.  This process invoice to count vertices of polygon on the map.

I E was going  mad on second click when I was using $(“#maptooltipcontainer”).html(toolTipText). but it worked fine with Firefox and chrome versions mentioned above.
Then i changed $(“#maptooltipcontainer”).text(toolTipText). and it started working on all three browsers.

Move selected item to the left hand side list box, move all items to the left hand side list box, move selected item to the right hand side list box, and move all items to the right hand list box.  Let’s   implement above features using JQuery.

ASP.NET Code

<div style=”float: left;”>

<asp:ListBox ID=”ListBox1″ runat=”server”

Height=”550px” SelectionMode=”Multiple”>

<asp:ListItem>One</asp:ListItem>

<asp:ListItem>Two</asp:ListItem>

<asp:ListItem>Three</asp:ListItem>

<asp:ListItem>Four</asp:ListItem>

<asp:ListItem>Five</asp:ListItem>

<asp:ListItem>Six</asp:ListItem>

<asp:ListItem>Seven</asp:ListItem>

<asp:ListItem>Eight</asp:ListItem>

<asp:ListItem>Nine</asp:ListItem>

<asp:ListItem>Ten</asp:ListItem>

</asp:ListBox>

</div>

<!– buttons –>

<div style=”float: left; width: 100px; height: 550px; text-align: center; vertical-align: text-bottom;”>

<br />

<br />

<a id=”btnRightAll”>Move all ></a>

<br />

<br />

<a id=”btnRight”>Right >></a>

<br />

<br />

<a id=”btnLeft”><< Leftt</a>

<br />

<br />

<a id=”btnLeftAll”>< Move all</a>

<br />

<br />

<asp:Button ID=”btnDone” runat=”server” Text=”Done” />

</div>

<div style=”float: left;”>

<asp:ListBox ID=”ListBox2″ runat=”server”

Height=”550px” SelectionMode=”Multiple”></asp:ListBox>

</div>

JQUERY Code

<script type=”text/javascript”>

$(document).ready(function() {
//move selected item to the right
$(“#btnRight”).click(function() {
$(“#<%=ListBox1.ClientID%> > :0ption[selected]“).appendTo($(“#<%=ListBox2.ClientID%>”));
});

//move all items to the right
$(“#btnRightAll”).click(function() {
$(“#<%=ListBox1.ClientID%> > :0ption”).appendTo($(“#<%=ListBox2.ClientID%>”));
});

// move selected item to the left
$(“#btnLeft”).click(function() {
$(“#<%=ListBox2.ClientID%> > :0ption[selected]“).appendTo($(“#<%=ListBox1.ClientID%>”));
});

// move all items to left list
$(“#btnLeftAll”).click(function() {
$(“#<%=ListBox2.ClientID%> > :0ption”).appendTo($(“#<%=ListBox1.ClientID%>”));
});
});

</script>

Note:

In javascript replace first letter of “:0ption”
with English letter “o” I am using 0 (zero) as it was putting smiley while i was using English letter o.