Solved

Pass Variable from Javascript to Codebehind

Posted on 2011-02-19
15
1,595 Views
Last Modified: 2012-06-27
I found a cool little jquery app that I'm trying to send data to a database with.

http://www.buildinternet.com/project/supersized/

So what I am doing is in the pageload I am calling all the images from the database.

then I need to pass the variable of all the images to the front javascript. I don't know how to do this.

 slides: [

                   < Pass Variable from codebehind here >
                              
                        ]
              };

any help would be greatly appreciated
<script type="text/javascript">
	    $(function () {
	        $.fn.supersized.options = {
	            startwidth: 640,
	            startheight: 480,
	            vertical_center: 1,
	            slideshow: 1,
	            navigation: 1,
	            thumbnail_navigation: 1,
	            transition: 1, //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left
	            pause_hover: 0,
	            slide_counter: 1,
	            slide_captions: 1,
	            slide_interval: 3000,
	            slides: [

                   < Pass Variable from codebehind here >
					
				]
	        };
	        $('#supersized').supersized();
	    });
    </script>

Open in new window

0
Comment
Question by:TheWebGuy38
  • 6
  • 4
  • 3
  • +1
15 Comments
 
LVL 23

Expert Comment

by:Rajkumar Gs
ID: 34932056
Try like
var jsvariable = ‘<%=codebehindvariable %>’;

Open in new window

where codebehindvariable is a variable from code-behind

0
 

Author Comment

by:TheWebGuy38
ID: 34932273
Something like this?

but get a invalid character


<script type="text/javascript">
	    $(function () {
           var GetPhotoString = ‘<%=codebehindvariable %>’;
	        $.fn.supersized.options = {
	            startwidth: 640,
	            startheight: 480,
	            vertical_center: 1,
	            slideshow: 1,
	            navigation: 1,
	            thumbnail_navigation: 1,
	            transition: 1, //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left
	            pause_hover: 0,
	            slide_counter: 1,
	            slide_captions: 1,
	            slide_interval: 3000,
	            slides: [

                   GetPhotoString
					
				]
	        };
	        $('#supersized').supersized();
	    });
    </script>

Open in new window

0
 
LVL 35

Expert Comment

by:Miguel Oz
ID: 34932286
Use a hidden field in your page:
http://www.eggheadcafe.com/community/aspnet/2/10103563/get-hidden-value-from-c.aspx
e.g
Markup
<INPUT id="hidden1" type="hidden" runat="server" value="test">
C++ code behind
hidden1.value = "yourData";
js
var data = hidden1.value;
0
 

Author Comment

by:TheWebGuy38
ID: 34932355
Simple, makes sense

Doesn't seem to work for me though :(
<script type="text/javascript">

	    var GetPhotoString = hiddenGetPhotoString.value;

        $(function () {
	           $.fn.supersized.options = {
	            startwidth: 640,
	            startheight: 480,
	            vertical_center: 1,
	            slideshow: 1,
	            navigation: 1,
	            thumbnail_navigation: 1,
	            transition: 1, //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left
	            pause_hover: 0,
	            slide_counter: 1,
	            slide_captions: 1,
	            slide_interval: 3000,
	            slides: [

                   GetPhotoString
					
				]
	        };
	        $('#supersized').supersized();
	    });
    </script>







aspx
<input id="hiddenGetPhotoString" type="hidden" runat="server" />



codebehind

 hiddenGetPhotoString.Value = "{image : 'slides/tower.jpg', title : 'City Clock Tower', url : 'http://www.flickr.com/photos/wumbus/4582735030/in/set-72157623876357531/'}"

Open in new window

0
 
LVL 8

Accepted Solution

by:
Anurag Agarwal earned 500 total points
ID: 34933133
hey
Create a <asp:HiddenField/> control on the web page and set it's value to the value of the variable in the code behind. Assuming you have named the control "myval", access it using the following specifier in JavaScript.
document.getElementById("<%=myval.ClientID%>").value.
0
 
LVL 23

Expert Comment

by:Rajkumar Gs
ID: 34933343
Try double quotes for my code
<script type="text/javascript">
	    $(function () {
           var GetPhotoString = "<%=codebehindvariable %>";
	        $.fn.supersized.options = {
	            startwidth: 640,
	            startheight: 480,
	            vertical_center: 1,
	            slideshow: 1,
	            navigation: 1,
	            thumbnail_navigation: 1,
	            transition: 1, //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left
	            pause_hover: 0,
	            slide_counter: 1,
	            slide_captions: 1,
	            slide_interval: 3000,
	            slides: [

                   GetPhotoString
					
				]
	        };
	        $('#supersized').supersized();
	    });
    </script>

Open in new window

0
 

Author Comment

by:TheWebGuy38
ID: 34934082
this is what I tried

but GetPhotoString is returning "null"

 
<script type="text/javascript">

	    //var hiddenGetPhotoString = "";
	    //var GetPhotoString = hiddenGetPhotoString.Value;
	    var GetPhotoString = document.getElementById("hiddenGetPhotoString");
        document.write(GetPhotoString);

	    $(function () {
	        $.fn.supersized.options = {
	            startwidth: 640,
	            startheight: 480,
	            vertical_center: 1,
	            slideshow: 1,
	            navigation: 1,
	            thumbnail_navigation: 1,
	            transition: 1, //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left
	            pause_hover: 0,
	            slide_counter: 1,
	            slide_captions: 1,
	            slide_interval: 3000,
	            slides: [

					GetPhotoString
				]
	        };
	        $('#supersized').supersized();
	    });
    </script>

Open in new window

0
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 

Author Comment

by:TheWebGuy38
ID: 34936442
java is throwing an error right here.
on GetPhotoString. anyone know what this syntax should look like to pass that variable in?

 slides: [

                              GetPhotoString
                        ]
              };


 
<script type="text/javascript">

	    //var hiddenGetPhotoString = "";
	    //var GetPhotoString = hiddenGetPhotoString.Value;
	    //var GetPhotoString = document.getElementById("hiddenGetPhotoString");
	    var GetPhotoString = "{ image: 'slides/tower.jpg', title: 'Kevin Perelman Photography', url: 'http://www.KevinPerelmanPhotography.com' },{ image: 'slides/tower.jpg', title: 'Kevin Perelman Photography', url: 'http://www.KevinPerelmanPhotography.com' }";
        document.write(GetPhotoString);

	    $(function () {
	        $.fn.supersized.options = {
	            startwidth: 640,
	            startheight: 480,
	            vertical_center: 1,
	            slideshow: 1,
	            navigation: 1,
	            thumbnail_navigation: 1,
	            transition: 1, //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left
	            pause_hover: 0,
	            slide_counter: 1,
	            slide_captions: 1,
	            slide_interval: 3000,
	            slides: [

					GetPhotoString
				]
	        };
	        $('#supersized').supersized();
	    });
    </script>

Open in new window

0
 
LVL 35

Expert Comment

by:Miguel Oz
ID: 34938729
Please set the hiddien as per my previous comment, have you set up the value in code behind code?
Please post your aspx and code behind on how you assign the value. e.g.
Markup
<INPUT id="hiddenGetPhotoString" type="hidden" runat="server" value="test">
C++
Code behind:
hiddenGetPhotoString.Value = "{ image: 'slides/tower.jpg', title: 'Kevin Perelman Photography', url: 'http://www.KevinPerelmanPhotography.com' },{ image: 'slides/tower.jpg', title: 'Kevin Perelman Photography', url: 'http://www.KevinPerelmanPhotography.com' }";

0
 
LVL 8

Expert Comment

by:Anurag Agarwal
ID: 34940655
the code behind doesn't exist on the client side where your jQuery code is executing. What you could do is assign the value of the property to a hidden field on the server side so that when you need to check it with jQuery on the client side it will be available. So you might do the following on the client side.

<asp:HiddenField ID="hfValueINeedToKnow" runat="server"/>
Code Behind:
hfValueINeedToKnow.Value = <some value>;
jQuery:
$("#<%= hfValueINeedToKnow.ClientID %>").val();


otherwise give your aspx and code behind code
0
 

Author Comment

by:TheWebGuy38
ID: 34940800
ok, let me give you the full code so you understand what's going on.


 
.vb

Imports System.Data
Imports System.Data.SqlClient
Imports System.IO

Partial Class SlideShow3_Default
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load




        Dim Conn As SqlConnection
        Dim CmdSelect As SqlCommand
        Dim Dr As SqlDataReader
        Dim SQL

        Dim GetPhotoString
        Dim TotalPhotoString

        Conn = New SqlConnection(WebConfigurationManager.ConnectionStrings("SQLDbconn").ConnectionString)
        Conn.Open()

        SQL = "SELECT * FROM Images ORDER BY DateStamp DESC"

        CmdSelect = New SqlCommand(SQL, Conn)

        Dr = CmdSelect.ExecuteReader()
        'do whatever
        If Dr.HasRows Then
            While Dr.Read()

                'get images
                GetPhotoString = "{ image: '" & Dr("ImageLarge") & "', title: 'Kevin Perelman Photography', url: 'http://www.KevinPerelmanPhotography.com' },"

                TotalPhotoString = TotalPhotoString + GetPhotoString


            End While
        Else

        End If
        Dr.Close()
        Conn.Close()


        Dim FinalOutput As String = TotalPhotoString.Remove(TotalPhotoString.Length - 1, 1)

        hiddenGetPhotoString.Value = FinalOutput
        'hiddenGetPhotoString.Value = "{image : 'slides/tower.jpg', title : 'City Clock Tower', url : 'http://www.flickr.com/photos/wumbus/4582735030/in/set-72157623876357531/'},{image : 'slides/tower.jpg', title : 'City Clock Tower', url : 'http://www.flickr.com/photos/wumbus/4582735030/in/set-72157623876357531/'}"
        'Response.Write(Str)



    End Sub

   

End Class




.aspx

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="SlideShow3_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    
	<link rel="stylesheet" href="supersized.css" type="text/css" media="screen" />
	
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
	<script type="text/javascript"src="js/effects.core.js"></script>
	<script type="text/javascript"src="js/effects.slide.js"></script>
	
	<script type="text/javascript" src="supersized.3.0.js"></script>
	<script type="text/javascript">

	    //var hiddenGetPhotoString = "";
	    //var GetPhotoString = hiddenGetPhotoString.Value;
	    var GetPhotoString = document.getElementById("hiddenGetPhotoString");
	    //var GetPhotoString = "{ image: 'slides/tower.jpg', title: 'Kevin Perelman Photography', url: 'http://www.KevinPerelmanPhotography.com' },{ image: 'slides/tower.jpg', title: 'Kevin Perelman Photography', url: 'http://www.KevinPerelmanPhotography.com' }";
        document.write(GetPhotoString);

	    $(function () {
	        $.fn.supersized.options = {
	            startwidth: 640,
	            startheight: 480,
	            vertical_center: 1,
	            slideshow: 1,
	            navigation: 1,
	            thumbnail_navigation: 1,
	            transition: 1, //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left
	            pause_hover: 0,
	            slide_counter: 1,
	            slide_captions: 1,
	            slide_interval: 3000,
	            slides: [

					GetPhotoString
				]
	        };
	        $('#supersized').supersized();
	    });
    </script>
	
	<style type="text/css"></style>
</head>
<body>
    <form id="form1" runat="server">
    <input id="hiddenGetPhotoString" type="hidden" runat="server" value="bah" />
    <div>

    <!--Loading display while images load-->
<div id="loading">&nbsp;</div>

<!--Slides-->
<div id="supersized"></div>

<div id="prevthumb"></div>
<div id="nextthumb"></div>
		

<!--Control Bar-->
<div id="controls-wrapper">
	<div id="controls">
	
		<!--Slide counter-->
		<div id="slidecounter">
			<span class="slidenumber"></span>/<span class="totalslides"></span>
		</div>
		
		<!--Slide captions displayed here-->
		<div id="slidecaption"></div>
		
		<!--Navigation-->
		<div id="navigation">
			<img id="prevslide" src="images/back_dull.png"/><img id="pauseplay" src="images/pause_dull.png"/><img id="nextslide" src="images/forward_dull.png"/>
		</div>
		
		
		
	</div>
</div>
    </div>
    </form>
</body>
</html>

Open in new window

0
 
LVL 8

Expert Comment

by:Anurag Agarwal
ID: 34942219
hey try this code
if similar to your output i think
http://www.c-sharpcorner.com/UploadFile/raj1979/5004/
0
 

Author Comment

by:TheWebGuy38
ID: 34946365
that was for a different page I was working on.
implemented the datalist with a dataset

only question I have about this one is why does the initial loading of the lighbox take so long to load
http://www.kevinperelmanphotography.com/slideshow4/default.aspx
0
 
LVL 35

Expert Comment

by:Miguel Oz
ID: 34946577
Can you post what the value of the following variables?
codebehind (Put breakpoint on line 51)
- FinalOutput
- hiddenGetPhotoString.ClientId

On the javascript  (Put breakpoint on line 89)
GetPhotoString

Thanks
0
 
LVL 8

Expert Comment

by:Anurag Agarwal
ID: 34949338
Good you have implemented with datalist.
I saw the link which you have provided.Its really very slow .
My guess is that server-side code is not very well optimised, and/or database tables do not have indexes on proper columns, might be slow connection speed etc. May be someother reasons too .
0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

In an ASP.NET application, I faced some technical problems. In this article, I list them out and show the solutions that I found.  I hope it will be useful. Problem: After closing a pop-up window, the parent page should be refreshed automaticall…
In .NET 2.0, Microsoft introduced the Web Site.  This was the default way to create a web Project in Visual Studio 2005.  In Visual Studio 2008, the Web Application has been restored as the default web Project in Visual Studio/.NET 3.x The Web Si…
This video gives you a great overview about bandwidth monitoring with SNMP and WMI with our network monitoring solution PRTG Network Monitor (https://www.paessler.com/prtg). If you're looking for how to monitor bandwidth using netflow or packet s…
Polish reports in Access so they look terrific. Take yourself to another level. Equations, Back Color, Alternate Back Color. Write easy VBA Code. Tighten space to use less pages. Launch report from a menu, considering criteria only when it is filled…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now