Partial Postback loses my CSS changes done client side.

[Jigabyte]

Hi,

On the page load I call a javascript function which repositions a few divs. Which works fine but when I click on a button which does a partial post back the divs move back to they're original position. Why is this?

Is it because I am moving the div's client side and when doing a partial postback it resorts back to the original positions.

Really confused with this one,

Many Thanks.

Jiggy!

[dclamp]

Can you post your code?

[Jigabyte]

Its difficult to show code because it's so big but I will try and explain; here is the code on my page load:-

Private Sub LoadPhotos()

Dim CarouselItem As C1CarouselItem
Dim sThumbPath As String
Dim iPhotoRows As Int16

'Initialisation.
Carousel.Items.Clear()

If Session(CICRefNo) = 0 Then
Exit Sub
End If

sqlDCData.ConnectionString = conString.ConnectionString.ToString & Session(DatabaseName) & ";"
sqlDCData.Open()
sqlDAPhotos = New SqlDataAdapter("SELECT * FROM PH_PHOTOS WHERE PH_CI_REFNO=" & Session(CICRefNo) & " ORDER BY PH_PHOTO_NO", sqlDCData)
sqlDTPhotos = New DataTable("PH_PHOTOS")
sqlDAPhotos.Fill(sqlDTPhotos)

If sqlDTPhotos.Rows.Count = 0 Then
ScriptManager.RegisterStartupScript(UP_CICMaint, UP_CICMaint.GetType, "DisableDrag", "disabledrag()", True)
End If

For iPhotoRows = 0 To sqlDTPhotos.Rows.Count - 1
sThumbPath = sqlDTPhotos.Rows(iPhotoRows).Item("PH_PATH") & sqlDTPhotos.Rows(iPhotoRows).Item("PH_NAME")
sThumbPath = sThumbPath.Substring(0, sThumbPath.Length - 4) & "_tb.jpg"
CarouselItem = New C1CarouselItem
CarouselItem.ImageUrl = sThumbPath
CarouselItem.Caption = sqlDTPhotos.Rows(iPhotoRows).Item("PH_REFNO")
CarouselItem.LinkUrl = sqlDTPhotos.Rows(iPhotoRows).Item("PH_PATH") & sqlDTPhotos.Rows(iPhotoRows).Item("PH_NAME")
Carousel.Items.Add(CarouselItem)

If iPhotoRows = 0 Then
'Show the first photo details
inpPhotoRefNo.Value = sqlDTPhotos.Rows(0).Item("PH_REFNO")
Session("PH_REFNO") = sqlDTPhotos.Rows(0).Item("PH_REFNO")
Session("PHOTO_PATH") = sqlDTPhotos.Rows(0).Item("PH_PATH")
Session("PHOTO_NAME") = sqlDTPhotos.Rows(0).Item("PH_NAME")
imgPhoto.ImageUrl = sqlDTPhotos.Rows(0).Item("PH_PATH") & sqlDTPhotos.Rows(0).Item("PH_NAME")
txtPhotoNo.Text = sqlDTPhotos.Rows(0).Item("PH_PHOTO_NO")
If sqlDTPhotos.Rows(0).Item("PH_MINI_PHOTO") Then
chkCICMiniPhoto.Checked = True
Else
chkCICMiniPhoto.Checked = False
End If
'--------------------------------------------------------------------------------------------------------------

'Move blobs on to photo.
ScriptManager.RegisterStartupScript(Me, Me.GetType, "LoadBlobs", "LoadBlobData()", True)
End If

Next

sqlDTPhotos.Dispose()
sqlDAPhotos.Dispose()
sqlDCData.Close()
sqlDCData.Dispose()

End Sub

As you can see I call a javascript function call LoadBlobData. Blobs are small divs with a background picture of a circle and a number. Basically the user can drag these blobs on to a photo image. Here is the code for LoadBlobData:-

function LoadBlobData() {
$.ajax({
type: "POST",
url: "CICMaint.aspx/ShowBlobs",
data: "{'PhotoRefNo':'" + $("input[id*='inpPhotoRefNo']").val() + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
cache: false,
success: function (response) {
ResetBlobs(response.d[0].PhotoNo);
//Set hidden field data
$("input[id*='inpPhotoPath']").val(response.d[0].PhotoPath);
$("input[id*='inpPhotoName']").val(response.d[0].PhotoName);
$("input[id*='inpPortrait']").val(response.d[0].Portrait);
//----------------------------------------------------------------------
$("#ctl00_ContentPlaceHolder1_C1AccordionPane3_cnt_txtPhotoNo").val(response.d[0].PhotoNo);
$("#ctl00_ContentPlaceHolder1_C1AccordionPane3_cnt_chkCICMiniPhoto").val(response.d[0].CICMiniPhoto);
//Change format if portrait
if (response.d[0].Portrait) {
$("#ctl00_ContentPlaceHolder1_C1AccordionPane3_cnt_divPhoto").css("height", "390");
$("#ctl00_ContentPlaceHolder1_C1AccordionPane3_cnt_divPhotoContainer").css("height", "390");
$("#ctl00_ContentPlaceHolder1_C1AccordionPane3_cnt_divPhotoContainer").css("width", "295");
$("#ctl00_ContentPlaceHolder1_C1AccordionPane3_cnt_divPhotoSpacer").css("width", "95");
$("#ctl00_ContentPlaceHolder1_C1AccordionPane3_cnt_divKPIs").css("height", "471");
$("#ctl00_ContentPlaceHolder1_C1AccordionPane3_cnt_divBinSpacer").css("height", "96");
$("#ctl00_ContentPlaceHolder1_C1AccordionPane3_cnt_imgPhoto").css("width", "295");
$("#ctl00_ContentPlaceHolder1_C1AccordionPane3_cnt_imgPhoto").css("height", "390");
} else {
$("#ctl00_ContentPlaceHolder1_C1AccordionPane3_cnt_divPhoto").css("height", "295");
$("#ctl00_ContentPlaceHolder1_C1AccordionPane3_cnt_divPhotoContainer").css("width", "390");
$("#ctl00_ContentPlaceHolder1_C1AccordionPane3_cnt_divKPIs").css("height", "376");
$("#ctl00_ContentPlaceHolder1_C1AccordionPane3_cnt_divBinSpacer").css("height", "0");
$("#ctl00_ContentPlaceHolder1_C1AccordionPane3_cnt_divPhotoSpacer").css("width", "0");
$("#ctl00_ContentPlaceHolder1_C1AccordionPane3_cnt_imgPhoto").css("width", "390");
$("#ctl00_ContentPlaceHolder1_C1AccordionPane3_cnt_imgPhoto").css("height", "295");
}
//---------------------------------------------------------------------
for (var blobcount = 1; blobcount <= 5; blobcount++) {
if (response.d[blobcount - 1] !== null) {
if (response.d[blobcount - 1].ImageURL !== null) {
var blob = $('#ctl00_ContentPlaceHolder1_C1AccordionPane3_cnt_divPointer' + blobcount);
var kpi = $('#ctl00_ContentPlaceHolder1_C1AccordionPane3_cnt_txtKPI' + blobcount);
var right = $('#ctl00_ContentPlaceHolder1_C1AccordionPane3_cnt_divRight' + blobcount);
var fixedright = $('#ctl00_ContentPlaceHolder1_C1AccordionPane3_cnt_divFixedPointer' + blobcount);
blob.css('position', 'absolute');
blob.css('left', response.d[blobcount - 1].X - 390);
blob.css('top', response.d[blobcount - 1].Y);
blob.css('background-image', 'url(' + response.d[blobcount - 1].ImageURL + ')');
right.css('margin-left', '67px');
right.css('margin-bottom', '12px');
fixedright.css('visibility', 'visible');
$("input[id*='inpRefNo" + blobcount + "']").val(response.d[blobcount - 1].RefNo);
$("#ctl00_ContentPlaceHolder1_C1AccordionPane3_cnt_txtKPI" + blobcount).val(response.d[blobcount - 1].KPI);
}
}
else {
$("input[id*='inpRefNo" + blobcount + "']").val("");
}
}
}
});
}

This does a web method call to a server side function to get the data to move the blobs from an SQL database. Please excuse any bad code as I am a novice at this. Here is my web method code:-

<WebMethod(EnableSession:=True)> Public Shared Function ShowBlobs(PhotoRefNo As String) As BlobData()

Dim objBlobs(5) As BlobData
Dim sSQL As String
Dim sqlDCData As New SqlConnection
Dim sqlDAPhotoBlob As SqlDataAdapter
Dim sqlDTPhotoBlob As DataTable
Dim sqlDAPhoto As SqlDataAdapter
Dim sqlDTPhoto As DataTable
Dim conString As ConnectionStringSettings = ConfigurationManager.ConnectionStrings("LiveData")
Dim iRows As Int16

If PhotoRefNo = "" Then
Return objBlobs
Exit Function
End If

sqlDCData.ConnectionString = conString.ConnectionString.ToString & HttpContext.Current.Session(DatabaseName) & ";"
sqlDCData.Open()

sSQL = "SELECT * FROM PH_PHOTOS WHERE PH_REFNO=" & PhotoRefNo
sqlDAPhoto = New SqlDataAdapter(sSQL, sqlDCData)
sqlDTPhoto = New DataTable("PH_PHOTOS")
sqlDAPhoto.Fill(sqlDTPhoto)

If sqlDTPhoto.Rows.Count > 0 Then
objBlobs(0) = New BlobData
objBlobs(0).PhotoNo = sqlDTPhoto.Rows(0).Item("PH_PHOTO_NO")
objBlobs(0).CICMiniPhoto = sqlDTPhoto.Rows(0).Item("PH_MINI_PHOTO")
objBlobs(0).PhotoPath = sqlDTPhoto.Rows(0).Item("PH_PATH")
objBlobs(0).PhotoName = sqlDTPhoto.Rows(0).Item("PH_NAME")
objBlobs(0).Portrait = sqlDTPhoto.Rows(0).Item("PH_PORTRAIT")
End If

sqlDTPhoto.Dispose()
sqlDAPhoto.Dispose()

sSQL = "SELECT * FROM PB_PHOTO_BLOBS WHERE "
sSQL += "PB_PH_REFNO=" & PhotoRefNo & "ORDER BY PB_SORT_ORDER"
sqlDAPhotoBlob = New SqlDataAdapter(sSQL, sqlDCData)
sqlDTPhotoBlob = New DataTable("PB_PHOTO_BLOBS")
sqlDAPhotoBlob.Fill(sqlDTPhotoBlob)


For iRows = 0 To sqlDTPhotoBlob.Rows.Count - 1
'Need to do this because the first array element is created to store the photo information the blobs relate to.
If iRows <> 0 Then
objBlobs(iRows) = New BlobData
End If
objBlobs(iRows).RefNo = sqlDTPhotoBlob.Rows(iRows).Item("PB_REFNO")
objBlobs(iRows).X = sqlDTPhotoBlob.Rows(iRows).Item("PB_X")
objBlobs(iRows).Y = sqlDTPhotoBlob.Rows(iRows).Item("PB_Y")
objBlobs(iRows).ImageURL = sqlDTPhotoBlob.Rows(iRows).Item("PB_IMAGE_URL")
objBlobs(iRows).KPI = sqlDTPhotoBlob.Rows(iRows).Item("PB_KPI")
objBlobs(iRows).SortOrder = sqlDTPhotoBlob.Rows(iRows).Item("PB_SORT_ORDER")
Next

sqlDTPhotoBlob.Dispose()
sqlDAPhotoBlob.Dispose()
sqlDCData.Close()
sqlDCData.Dispose()

Return objBlobs

End Function

Okay this is my problem. All the above is in an update panel because I have over tabs with controls on that I don't want to re-render. Because I move the blobs (divs) in javascript if the user clicks on a button on my page this causes a partial postback. In doing this it loses the css which re-positions my blobs.

Is there anyway after postback not to use what the server initially set on the first page load? It only does this once as I check for ispostback.

Many Thanks,

Jiggy!

[Jigabyte]

Its difficult to show code because it's so big but I will try and explain; here is the code on my page load:-



As you can see I call a javascript function call LoadBlobData. Blobs are small divs with a background picture of a circle and a number. Basically the user can drag these blobs on to a photo image. Here is the code for LoadBlobData:-



This does a web method call to a server side function to get the data to move the blobs from an SQL database. Please excuse any bad code as I am a novice at this. Here is my web method code:-



Okay this is my problem. All the above is in an update panel because I have over tabs with controls on that I don't want to re-render. Because I move the blobs (divs) in javascript if the user clicks on a button on my page this causes a partial postback. In doing this it loses the css which re-positions my blobs.

Is there anyway after postback not to use what the server initially set on the first page load? It only does this once as I check for ispostback.

Many Thanks,

Jiggy!

Looks like this isn't the best site for javascript / jquery support

[tr333]

Looks like this isn't the best site for javascript / jquery support

I'm guessing this thread should be in the ASP.NET forum? Hopefully a mod can move it there.