Wednesday, March 28, 2012

Trace AJAX webpage

I tried to trace AJAX enabled webpage and got the error:Sys.WebForms.PageRequestManagerParseErrorException. The message received from the server can not be parsed.

Any idea about that?

You can't use trace with Ajax. Trace kind of intercepts the page and reformats it so it can append the trace data. You'll have to try playing around with the debug functions that are part of Ajax Beta 1 and 2...


It should be possible to use tracing with MS AJAX. Just don't use in-page tracing. Set pageOutput to false, and look at the Trace.axd page.

Additional detailshere.


Thank you, muslon. It works.

Trace="True" and partial postbacks

When a page is set to Trace="True", partial postback fail with an error stating that there is a problem parsing the page and the reason could be because Trace is set to True. OK, so how are we supposed to trace our pages then?

You can use Tracing but you can't use the pageouput option (so that the trace gets displayed on your webpage). That's causing the error. What you can do is set the page output to false.

<traceenabled="true"pageOutput="false"/>

If you want to view the tracelog, you can view it usingtrace.axd(http://somewebsite/trace.axd)

Track ajax application with google analytics

Hi everyone,

I have an ecommerce application where i use ajax in createUserWizard and in Chart.
To track user activity i use google analytics urchinTracker function.
With ajax a request to the server is made without changing the url of the page, so i have to call urchinTracker function with onreadystatechange.
http://www.google.com/support/analytics/bin/answer.py?answer=33985&topic=7292

The problem is how can i use this code. How i can insert it inside my page.

I have the urchinTracker function in my masterpage:
<scripttype="text/javascript">
_uacct ="UA-XXXXXXXX;
urchinTracker();
</script>

In my content page i have a MultiView control inside the UpdatePanel.
When i skip the step inside the multiView i need to call the urchinTracker function to assign a page filename for the tracking.
How can i do that?

This solution don't work:

ProtectedSub Page_PreRender(ByVal senderAsObject,ByVal eAs System.EventArgs)HandlesMe.PreRender

If mvCreaUtente.ActiveViewIndex = 0Then
Dim sbAsNew System.Text.StringBuilder
sb.Append("<script>")
sb.Append("urchinTracker('/registrazione/step1.html')")
sb.Append("</")
sb.Append("script>")
Me.Page.RegisterClientScriptBlock("ScriptUrlTracking", sb.ToString)
EndIf

End Sub

Thanks

You should set it up in javascript. Tie the endRequest event of the PageRequestManager to a function that will call the urchin tracker function.


Thanks Paul for your reply. Could you please write a simple example of this javascipt code?

Thx


Be happy to. Something like this:

function handleUrchin(ev){ urchinTracker('/registrazione/step1.html');}function pageLoad(){ var prm = Sys.WebForms.PageRequestManager.getInstance(); prm.add_endRequest(handleUrchin);}
Obviously that's pretty simple, and you could add a switch statement or something if you have more than one type of urchin request to do.

Thanks Paul, your reply help me!Wink

Tracking Link Clicks

Hi,

I posted this before in the "Web Forms" section, but I was just thinking what I might need is an AJAXian solution.

I'm trying to figure out the best way to track user clicks on links. I could easily do this by making all the links LinkButton's and just use the PostBackUrl property or response.redirect or something like that to send the user on to the page they clicked to.

However, this is not a very good solution because spiders would be unable to crawl these links and I need to have the option of opening the pages from the links in a new browser window at times.

So basically if the HyperLink control had an "OnClick" property that fired before doing the default thing (ie following the link), that would be ideal, but it does not.

So I was just wondering if anyone had any good ideas on how to create a "link" control that would allow search engines to crawl the links, allow me to at times open the linked page into a new browser window (ie target=_blank), and also to record the user clicks into a database?

Would there be a way to use the javascript onclick event to fire some function that calls a service or something on the server to update my database with the click information? If so how would I do that?

Hi,

I just replied in your other thread. Though now I've seen you mention AJAX this would allow you to accomplish a lot more.

Cheers,

Al

Tranfering items between Listboxes in an upadated Panel

hi,

i have a page in which there are 2 listboxes. I have also taken 2 buttons (HTML)... Buttons are used to transfer items between Listboxes...

Its working fine and items are transfered between Listboxes...

when i want to put an updated panel and in the <content template>, i put listboxes its not working.....

any anybody has an idea??

Regards,

Suryansu

Would you show us your source code for the page please?


What do you mean by "not working", can you give a sample and a bit more explanation?

If you are having problems with your UpdatePanel specifically, check out:http://blogs.visoftinc.com/archive/2007/09/23/asp.net-ajax--updatepanel-not-working--common-problems.aspx

-Damien


suppose i select one value from drop downbox...As per the value the LIstbox1 is changed and from listbox1 , i will select some items and add to the listbox2...again suppose i select another item from dropdownbox...as per the value in the dropdownbox, the listbox1 items changed...but i want the items in selected in LISTBOX2 should be retained..next time when i select some items from listbox1 to listbox2 , it should be added to the listbox2......

So i thought to use updated panel and so i put DROPDOWNBOX and LISTBOX in the updated panel...so Items in the LISTBOX2 willnot refreshed again and again...items will be only added......

ProtectedSub Page_Load(ByVal senderAsObject,ByVal eAs System.EventArgs)HandlesMe.Load

ListBox2.EnableViewState =True

IfNot IsPostBackThen

Button2.Attributes.Add("onClick","javascript:testme();")

EndIf

ProtectedSub DropDownList1_SelectedIndexChanged(ByVal senderAsObject,ByVal eAs System.EventArgs)Handles DropDownList1.SelectedIndexChanged

Dim varSelectedDDlistAsString

varSelectedDDlist = DropDownList1.SelectedValue

Dim strQueryAsString ="select attribute_value,attribute_display_name from tblattribute_displayname"

ds = objTest.BindData(strQuery)

ListBox1.Items.Clear()

' ||||| Set the DataValueField to the Primary Key

ListBox1.DataValueField ="attribute_value"

' ||||| Set the DataTextField to the text/data you want to display

ListBox1.DataTextField ="attribute_display_name"

' ||||| Set the DataSource the the OleDBDataReader's result

ListBox1.DataSource = ds

ListBox1.DataBind()

EndSub

<%@.PageLanguage="VB"AutoEventWireup="false"CodeFile="Default8.aspx.vb"Inherits="Default8"EnableEventValidation="false" %>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml">

<headid="Head1"runat="server">

<title>Untitled Page</title>

<scripttype="text/javascript">

var selecetedfield="";

function testme()

{

//alert('hiiiiii');

//alert('hyyy');

//var thisdate= new date();

//alert(thisdate);

//return true;

//alert("hi")

//alert(document.getElementById('ListBox1').options.length);

//alert(document.getElementById('ListBox2').options.length);

var list = document.getElementById('ListBox2');

for(var i = 0; i < list.options.length; ++i)

{

selecetedfield= selecetedfield +",(" +list.options[i].value +") ";

}

// alert(selecetedfield)

// alert(list.options[i].value);

document.form1.HiddenField1.value = selecetedfield;

selecetedfield="";

//alert(document.form1.HiddenField1.value)

}

function setSize(list1,list2)

{

list1.size = getSize(list1);

list2.size = getSize(list2);

}

function selectNone(list1,list2){

list1.selectedIndex = -1;

list2.selectedIndex = -1;

addIndex = -1;

selIndex = -1;

}

function getSize(list){/* Mozilla ignores whitespace,

IE doesn't - count the elements

in the list */

var len = list.childNodes.length;var nsLen = 0;

//nodeType returns 1 for elements

for(i=0; i<len; i++){if(list.childNodes.item(i).nodeType==1)

nsLen++;

}

if(nsLen<2)return 2;

else

return nsLen;

}

var selectedList;

var availableList;

function createListObjects(){

availableList = document.getElementById("ListBox1");

selectedList = document.getElementById("ListBox2");

//alert(availableList)

//alert(selectedList)

}

function delAttribute(){

//availableList = document.getElementById("ListBox1");

// selectedList = document.getElementById("ListBox2");

var selIndex = selectedList.selectedIndex;

if(selIndex < 0)

return;

availableList.appendChild(selectedList.options.item(selIndex));

// selectNone(selectedList,availableList);

// setSize(availableList,selectedList);

}

function addAttribute(){

//alert('hi');

//availableList = document.getElementById("ListBox1");

// selectedList = document.getElementById("ListBox2");

var addIndex = availableList.selectedIndex;

//alert(addIndex)

if(addIndex < 0)return;

selectedList.appendChild(availableList.options.item(addIndex));

// selectNone(selectedList,availableList);

// setSize(selectedList,availableList);

}

</script>

</head>

<bodyonload="createListObjects()">

<formid="form1"runat="server">

<div>

<asp:AccessDataSourceID="AccessDataSource2"runat="server"DataFile="~/PMO - Accounts.mdb"

SelectCommand="SELECT DISTINCT [attribute_section] FROM [tblattribute_displayname]">

</asp:AccessDataSource>

<asp:HiddenFieldID="HiddenField1"runat="server"/>

<asp:ButtonID="Button1"runat="server"Style="z-index: 103; left: 195px; position: absolute;

top: 91px"Text="Click"Width="33px"/>

<inputid="Button3"style="z-index: 107; left: 542px; position: absolute; top: 82px; width: 56px;"

type="button"value=">>"onclick="addAttribute()"unselectable="on"/>

<inputid="Button4"style="z-index: 108; left: 542px; position: absolute; top: 110px; width: 57px;"

type="button"value="<<"onclick="delAttribute()"/>

<asp:ScriptManagerID="ScriptManager1"runat="server">

</asp:ScriptManager>

<asp:UpdatePanelID="UpdatePanel1"runat="server">

<ContentTemplate>

<br/>

<asp:ButtonID="Button2"runat="server"Style="z-index: 101; left: 189px; position: absolute;

top: 119px"Text="Execute"Width="54px"/>

<asp:GridViewID="GridView1"runat="server"Style="z-index: 109; left: 10px; position: absolute;

top: 180px"Height="1px"Width="1px">

</asp:GridView>

<br/>

<br/>

<br/>

<br/>

</ContentTemplate>

</asp:UpdatePanel>

<asp:DropDownListID="DropDownList1"runat="server"DataSourceID="AccessDataSource2"

DataTextField="attribute_section"DataValueField="attribute_section"Height="82px"

Style="z-index: 105; left: 265px; position: absolute; top: 23px"AutoPostBack="True">

</asp:DropDownList>

<asp:ListBoxID="ListBox1"runat="server"Height="107px"Style="z-index: 100; left: 414px;

position: absolute; top: 55px"Width="121px"></asp:ListBox>

<asp:ListBoxID="ListBox2"runat="server"Style="z-index: 102; left: 606px; position: absolute;

top: 56px"Height="103px"Width="126px"></asp:ListBox>

</div>

</form> </body>

</html>

Transforming plain ID to adorned ID

I must be missing something obvious here. Suppose I create an ASP.NET Web User Control, and I use a ModalPopupExtender inside it. In the ascx, I set various properties of the extender to refer to controls within the Web User Control, such as PopupDragHandleControlID="TitleText". At runtime, the control with ID "TitleText" gets a more complicated ID on the rendered page (call it an 'adorned' ID, not sure what the offical term is), such as "ctl00_ContentPlaceHolder1_MyCtrl1_TitleText". The behaviour javascript for the extender does things like -

this._dragHandleElement = $get(this._PopupDragHandleControlID);

That wouldn't work with the 'plain' ID, in fact by adding various alert() boxes I can see that _PopupDragHandleControlID has been transformed - somewhere - to the 'adorned' version. I've written an extender that declares and uses ID properties in just the same way, but they don't get transformed from the 'plain' version at runtime. So, I either have to use ugly workarounds like setting that ID programmatically from server-side code (e.g. MyExtender1.BlahID = MyBlahCtrl.ClientID), or ... figure out how to get that transformation to happen automatically like it seems to for ModalPopupExtender. Can anyone point me in the right direction?

(Note, I'm not talking about the TargetControlID property, so ResolveTargetControlID wouldn't come into it, and I'm talking about an extender that's right next to the controls in question.)

Thanks in advance for any leads.

Kevin.

All extender properties that reference ID's are decorated with theIDReferencePropertyAttribute. It helps converts server side ids into client versions so that the behavior can resolve them easily. If you look at the ModalPopupExtender.cs file, the PopupDragHandleControlID has that attribute and so so any other properties that are used to get control IDs.


Do you have any references that confirm that's so and detail where it occurs? The reasons I ask are 1. My extender's properties that ref IDs already have that attribute, and no such conversion occurs, and 2. The documentation for that attribute doesn't mention anything like that, merely that it can be used by designers to help out by giving a list of control IDs at design time - no mention of anything happening at runtime. But if that attribute is the answer and if you have more information on it, please do say so I can figure out why it isn't working for me.

Or does anyone else have details on how the conversion occurs for PopupDragHandleControlID et al?

Thanks in advance for any help

Kevin.


It happens in ExtenderBaseDesignerHelpers.cs file. It is part of the Toolkit framework. If you are building on top of ExtenderControlBase this is taken care of automatically.

Should have included these links earlier

http://ajax.asp.net/ajaxtoolkit/Walkthrough/CreatingNewExtender.aspx

http://ajax.asp.net/ajaxtoolkit/Walkthrough/ExtenderClasses.aspx


Aha. In fact, I had a hand-rolled extender built with ref to various online docs rather than one done as per that walkthrough, which when followed showed up I'd not got the ECB derivation stuff right. In the interim, I'd done some tracing through the ACT code and you're quite right, that attribute is used as a signal for the base classes to apply some transformation before serialising. Funny the docs don't mention that. Anyway, thanks for the pointers - it's running ok now.

Kevin.

Transparent PNG in AdRotator - Applying Behavior

I'm having a bit of trouble with AdRotator. I have images that are transparent PNG files. I created a style that applys the behavior to correct IE6 inability to display transparent PNG images. When I add the reference, images don't appear. They work in FireFox, just not IE6 (I haven't checked IE7). This behavior works everywhere else in the site.

Is there a workaround?

<asp:AdRotator id="AdRotator1" runat="server" borderstyle="None" datasourceid="SqlDataSource2" cssclass="adRotator"></asp:AdRotator>

.adRotator {
behavior: url('/behaviors/pngbehavior.htc');
border: 0px;
padding: 0px;
margin: 0px;
}

You need to haveheight andwidth set in AdRotator or CSS.