Solved

Pass Variable from Javascript to Codebehind

Posted on 2011-02-19
15
1,609 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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
 

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

Salesforce Made Easy to Use

On-screen guidance at the moment of need enables you & your employees to focus on the core, you can now boost your adoption rates swiftly and simply with one easy tool.

Question has a verified solution.

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

One of the pain points with developing AJAX, JavaScript, JQuery, and other client-side behaviors is that JavaScript doesn’t allow for cross domain request for pulling content. For example, JavaScript code on www.johnchapman.name could not pull conte…
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…
NetCrunch network monitor is a highly extensive platform for network monitoring and alert generation. In this video you'll see a live demo of NetCrunch with most notable features explained in a walk-through manner. You'll also get to know the philos…
In this brief tutorial Pawel from AdRem Software explains how you can quickly find out which services are running on your network, or what are the IP addresses of servers responsible for each service. Software used is freeware NetCrunch Tools (https…

636 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