Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Pass Variable from Javascript to Codebehind

Posted on 2011-02-19
15
Medium Priority
?
1,611 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 36

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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

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 2000 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
 

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 36

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 36

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

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Lots of people ask this question on how to extend the “MembershipProvider” to make use of custom authentication like using existing database or make use of some other way of authentication. Many blogs show you how to extend the membership provider c…
Just a quick little trick I learned recently.  Now that I'm using jQuery with abandon in my asp.net applications, I have grown tired of the following syntax:      (CODE) I suppose it just offends my sense of decency to put inline VBScript on a…
this video summaries big data hadoop online training demo (http://onlineitguru.com/big-data-hadoop-online-training-placement.html) , and covers basics in big data hadoop .
Look below the covers at a subform control , and the form that is inside it. Explore properties and see how easy it is to aggregate, get statistics, and synchronize results for your data. A Microsoft Access subform is used to show relevant calcul…
Suggested Courses

972 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