Develop Reference

Uncaught ReferenceError: show value is not defined(Only for mobile device)

Hi I had implemented the code in which on adding to cart the item gets add and also one popup gets open which shows cart item.
On desktop it is working well but on mobile device it is not working.
For mobile device it is shoeing error as
Uncaught ReferenceError: showvalue is not defined
Here is my below code
<script type="text/javascript">
function showvalue(value, product) {
$('#<%= lblproduct1.ClientID %>').text(product);
$('#<%= lblVessel.ClientID %>').text(value);
$('.cart_popup').show();
setTimeout(function () {
$('.cart_popup').fadeOut('slow');
}, 5000);
return false;
}
function Showprogress() {
$('#<%= Progress.ClientID %>').show();
}
Html side on .ascx page
<asp:Button ID="AddToBasketButton" OnClientClick="Showprogress()" runat="server" OnClick="AddToBasketButton_Click" EnableViewState="false" ValidationGroup="AddToBasket" Text="Add to Cart" />
My .cs side code (Passing total and productquantity)
ScriptManager.RegisterClientScriptBlock(this.Page, typeof(UpdatePanel), UniqueID, "showvalue('" + Total + "','" + productquantity + "');", true);
I am facing issue for mobile device only.
On clicking button my page get refresh and popup is not getting open

I had remove jquery popup and made use of Ajax Modal popup.
The popup was opening fine as I was calling it from .cs side but to hide it automatically after 5 second it was not working in that case I had used below code.
<asp:Button ID="AddToBasketButton" OnClientClick="Showprogress();" runat="server" OnClick="_Click" Text="button" />//button click and onclient click
//Below div is only showing processing image :-)
<div id="Progress" runat="server" style="display: none;">
<img src="../images/spinner.gif" />
</div>
My script
<script type="text/javascript">
$(document).ready(function () { hide_pop(); });
function Showprogress() {
$('#<%= Progress.ClientID %>').show();
hide_pop();
return false;
}
function hide_pop() {
setTimeout(function () {
$('.popup_cart_main').fadeOut('slow');//Popup Panel class
$('.modalBackground').fadeOut('slow');//Background blacklayout Class
}, 5000);
return false;
}
Modalpopup
<asp:LinkButton ID="lnkDummy" runat="server" ></asp:LinkButton>
<cc1:ModalPopupExtender ID="ModalPopupExtender1" BehaviorID="mpe" runat="server"
PopupControlID="pnlPopup" TargetControlID="lnkDummy" BackgroundCssClass="modalBackground" >
</cc1:ModalPopupExtender>
<asp:Panel ID="pnlPopup" runat="server" CssClass="popup_cart_main" Style="display: none">
<div class="cart_popup" >
Solved
</div>
</asp:Panel>
This code is working in all browser and all mobile including iphone & Android
I also think(According to actual question) that in case if I had not removed jquery popup and only placed below code my popup had been started working in mobile too
$(document).ready(function () { showvalue (); });// based on actual question

Ensure that your script is rendered before calling RegisterClientScriptBlock. HTML parsing is linear.

Did you miss to copy the closing tag or you just didn't do it on code too?
It should be:
<script type="text/javascript">
function showvalue(value, product) {
$('#<%= lblproduct1.ClientID %>').text(product);
$('#<%= lblVessel.ClientID %>').text(value);
$('.cart_popup').show();
setTimeout(function () {
$('.cart_popup').fadeOut('slow');
}, 5000);
return false;
}
function Showprogress() {
$('#<%= Progress.ClientID %>').show();
}
</script>
Try another approach:
In javascript:
<script type="text/javascript"> var jName = '<%=cName()%>'</script>
In c#:
protected string cName() {
return "examplevarcontent";
}

Assign href of anchor tag

I want to assign href of Anchor tag using JavaScript.
<%# Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="AnchorTRY.aspx.cs" Inherits="AnchorTRY" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<a id="anchr" runat="server"> </a>
<script type="text/javascript">
if (System.Web.HttpContext.Current.Session["Email"] == null && System.Web.HttpContext.Current.Session["uid"] == null)
{
document.getElementById("anchr").setAttribute('href', "User Login.aspx");
document.getElementById("anchr").innerText = "Create Your Own Package";
}
else {
document.getElementById("anchr").setAttribute('href', "Cities.aspx");
document.getElementById("anchr").innerText = "Add to Your Package";
}
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server">
</asp:Content>

Change you code to this,
<script type="text/javascript">
function setHref() {
var flag = <%
if (System.Web.HttpContext.Current.Session["Email"] == null && System.Web.HttpContext.Current.Session["uid"] == null)
{
response.write("true");
}
else
{
response.write("false");
}
%>;
if(flag == true)
{
document.getElementById("anchr").setAttribute('href', "User Login.aspx");
document.getElementById("anchr").innerText = "Create Your Own Package";
}
else {
document.getElementById("anchr").setAttribute('href', "Cities.aspx");
document.getElementById("anchr").innerText = "Add to Your Package";
}
}
</script>
In the code we are assigning the output of your server-side code to a JavaScript variable 'flag' and according to its value JavaScript code will assign the href attribute.
And we have placed this code in to a JavaScript function, we will call it when document loads, so that it will change 'href' of anchor properly otherwise the code couldn't access anchor tag before it loads.
Call the function in body tag like this,
<body onload="setHref();">
Hope it works, let me know if you want more help. Thank you.

<a href="Index/MasterPage?modID=<%=Session["ProductID"]%> ">
can use like this directly we can assign session values to href

jQuery append() under an element ID?

I am building a navigation bar that is driven based off of values retrieved from a SharePoint List. Right now, I am using an <ul> for my column headers and <li> for my contents. I can get the headers to display correctly and can also get the contents of that column to display correctly. What I'm having troubles with is that the <li> seems be appended to the <ul> which is great, but it's also putting it inside of it. My <ul> has a border around it and I want the content to be appended directly under that border but instead, it's putting everything inside of it.
Here is the specific block of code I believe is wrong:
$('#TableElement').hover(function () {
$('[id^=Header]').hover(function () {
$("#" + this.id).append("<li>" + this.id + "</li>");
});
});
Here is all of my code:
/////////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////
////////////////////////////////////////EVERYTHING BELOW THIS LINE IS GOOD TO GO/////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////
//Print Headers to Screen. This will drive the core functionalty of the navpart
var siteUrl = '/sites/dev';
ExecuteOrDelayUntilScriptLoaded(retrieveListItems, "sp.js");
theCounter = 0;
var Headers = new Array();
var getCurrentElementId = null;
function retrieveListItems() {
var clientContext = new SP.ClientContext(siteUrl);
var oList = clientContext.get_web().get_lists().getByTitle('myList');
var camlQuery = new SP.CamlQuery();
camlQuery.set_viewXml("<Where><IsNotNull><FieldRef Name='Title' /></IsNotNull></Where>");
this.collListItem = oList.getItems(camlQuery);
clientContext.load(collListItem);
clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}
function onQuerySucceeded(sender, args) {
var listItemInfo = '';
var listItemEnumerator = collListItem.getEnumerator();
while (listItemEnumerator.moveNext()) {
var oListItem = listItemEnumerator.get_current();
theCounter += 1;
Headers[theCounter - 1] = oListItem.get_item('Title');
}
var HeaderDisplay = _.uniq(Headers);
for (var i = 0; i <= HeaderDisplay.length - 1; i++) {
$('#TableElement').append("<th id=Header" + i + ">" + HeaderDisplay[i] + "::::::" + "</th>");
}
}
function onQueryFailed(sender, args) {
alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
/////////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////
////////////////////////////////////////EVERYTHING ABOVE THIS LINE IS GOOD TO GO/////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////
// You got the headers to print as expected. Right now you need to figure out how to get the current ID
// that the mouse is over. Try looking at another project you did where the mouse goes into the table header
// and the outline expands.
$('#TableElement').hover(function () {
$('[id^=Header]').hover(function () {
// Come back to this::::::: var content = $(this).html();
$("#" + this.id).append("<li>" + this.id + "</li>");
});
});
//This should be the universal onmouseover event that will expose only links
//and values relavent to the selected header.
//$(document).ready(function onPageLoad() {
// $().SPServices({
// operation: "GetListItems",
// async: false,
// listName: "myList",
// CAMLQuery: "<Query><Where><IsNotNull><FieldRef Name='Title' /></IsNotNull></Where></Query>",
// completefunc: function completeFunction(xData, Status) {
// $(xData.responseXML).SPFilterNode("z:row").each(function () {
// var Headers = "<th>" + $(this).attr("ows_Title") + "</th>";
// $("#TableElement").append(Headers);
// });
// }
// });
//});
HTML Code:
<%# Assembly Name="$SharePoint.Project.AssemblyFullName$" %>
<%# Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%# Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%# Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%# Register Tagprefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<%# Import Namespace="Microsoft.SharePoint" %>
<%# Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="VisualWebPart1UserControl.ascx.cs" Inherits="AnotherMarcPart.VisualWebPart1.VisualWebPart1UserControl" %>
<!DOCTYPE Html />
<html>
<head>
<link rel="Stylesheet" type="text/css" href="c:\users\administrator\documents\visual studio 2010\Projects\AnotherMarcPart\AnotherMarcPart\VisualWebPart1\Stylesheet1.css" />
<title></title>
</head>
<body>
<ul id="TableElement"></ul>
<script type="text/javascript" src="c:\users\administrator\documents\visual studio 2010\Projects\AnotherMarcPart\AnotherMarcPart\VisualWebPart1\jQuery_v1.10.2.js"></script>
<script type="text/javascript" src="c:\users\administrator\documents\visual studio 2010\Projects\AnotherMarcPart\AnotherMarcPart\VisualWebPart1\jquery.SPServices-2013.01.js"></script>
<script type="text/javascript" src="c:\users\administrator\documents\visual studio 2010\Projects\AnotherMarcPart\AnotherMarcPart\VisualWebPart1\Underscore.js 1.5.2.js"> </script>
<script type="text/javascript" src="c:\users\administrator\documents\visual studio 2010\Projects\AnotherMarcPart\AnotherMarcPart\VisualWebPart1\JScript1.js"></script>
</body>
</html>

<li> tags must go inside a <ul>. If you want your content after the <ul>, then don't put it in an <li> (perhaps put it in a <div> instead) and use jQuery's .after() or .insertAfter() to put it after the <ul>.
Also, this code is likely wrong:
$('#TableElement').hover(function () {
$('[id^=Header]').hover(function () {
$("#" + this.id).append("<li>" + this.id + "</li>");
});
});
You don't want two .hover() handlers inside of one another. You will be installing the second .hover() over and over every time you hover over the first one. That will give you lots of duplicate event handlers and the function inside will get executed multiple times.
If .insertAfter() isn't exactly what you want, then show us your HTML and show us exactly where you want the new content inserted. You said you wanted it after the <ul> tag's border so that's what .insertAfter() will do.
Based on how you've edited your question, you would append to that other UL like this:
$("#TableElement").append("<li>" + this.id + "</li>");
That will make the <li> be the last <li> inside of the TableElement <ul> which will be inside it's border. There is no way to put an <li> inside a <ul> and have the <li> be outside the border around the <ul>. To do that, you would have to create a container object AFTER the <ul> and put the content into that container instead.

Javascript variables in asp.net usercontrols - overwriting variables in same inserted usercontrol

I have four same UserControls inserted into Default.aspx. I want to write the data into HiddenField and write this data into Label1 using javascript.
The method only works for the last loaded UserControl - HiddenFieldLoader3.
Why the method does not work in all usercontrols? How can i fix my code?
Default.aspx
<%# Register Src="~/HiddenFieldLoader.ascx" TagPrefix="uc1" TagName="HiddenFieldLoader" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Default.aspx</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="HiddenFieldLoader.js"></script>
</head>
<body>
<form id="form1" runat="server">
<uc1:HiddenFieldLoader runat="server" ID="HiddenFieldLoader" />
<uc1:HiddenFieldLoader runat="server" ID="HiddenFieldLoader1" />
<uc1:HiddenFieldLoader runat="server" ID="HiddenFieldLoader2" />
<uc1:HiddenFieldLoader runat="server" ID="HiddenFieldLoader3" />
</form>
</body>
</html>
UserControl: HiddenFieldLoader.ascx
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="HiddenFieldLoader.ascx.cs" Inherits="NewControls.HiddenFieldLoader" %>
<script type="text/javascript">
HFLoader.declareVariables("<%=Button1.ClientID %>", "<%=HiddenField1.ClientID %>", "<%=Label1.ClientID %>");
</script>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<asp:HiddenField ID="HiddenField1" runat="server" />
<input type="button" ID="Button1" value="Save" runat="server" />
<input type="button" ID="Button2" onclick="HFLoader.showEvent();" value="Show" runat="server" />
Javascript file: HiddenFieldLoader.js
HFLoader = {
button: null,
hiddenField: null,
label: null,
declareVariables: function (btn, hf, label) {
HFLoader.button = btn;
HFLoader.hiddenField = hf;
HFLoader.label = label;
},
///////SHOW EVENT
showEvent: function () {
$("#" + HFLoader.label).html($("#" + HFLoader.hiddenField).val());
},
//////!SHOW EVENT
saveHiddenField: function (data) {
$("#" + HFLoader.hiddenField).val(data);
},
buttons: function () {
$("#" + HFLoader.button).click(function () {
var datatest = "Data from button ID: " + $(this).attr("id");
HFLoader.saveHiddenField(datatest);
$("#" + HFLoader.label).html($("#" + HFLoader.hiddenField).val());
return false;
});
},
init: function () {
$(function () {
HFLoader.buttons();
});
}
};
HFLoader.init();

It doesn't work because you're using a single instance variable, HFLoader, and not an instance.
So one way to fix it is to wrap your HFLoader in a closer (function, local scope) so that the object is scoped per method call. In the example below, I wrapped the HFLoader variable in a creator function. Then, each call to HFLoaderCreator will produce a different version (instance) of the HFLoader object. The reason I chose to do it this way instead of creating a true JS class was because it required minimal code changes to demonstrate how it could be done.
Edit. Let's also say you want to recall the HFLoader at a later date to call on things, such as the saveHiddenField method. To do this, I've done 2 this. 1) I've added data('HFLoader') to the three elements passed in, so you can use any one of them to recall the HFLoader settings. And 2) I've added custom events that you can trigger to call the methods. These two options show two different ways that jQuery plugin developers use to allow access to underlying structures.
<script type="text/javascript">
HFLoaderCreator("<%=Button1.ClientID %>", "<%=HiddenField1.ClientID %>", "<%=Label1.ClientID %>");
</script>
function HFLoaderCreator(btn, hf, label)
{
var HFLoader = {
button: null,
hiddenField: null,
label: null,
declareVariables: function (btn, hf, label) {
HFLoader.button = btn;
HFLoader.hiddenField = hf;
HFLoader.label = label;
},
saveHiddenField: function (data) {
$("#" + HFLoader.hiddenField).val(data);
},
buttons: function () {
$("#" + HFLoader.button).click(function () {
var datatest = "Data from button ID: " + $(this).attr("id");
HFLoader.saveHiddenField(datatest);
$("#" + HFLoader.label).html($("#" + HFLoader.hiddenField).val());
return false;
});
// add the data so it can be recalled at a later date
$("#" + HFLoader.button).data('HFLoader', HFLoader);
$("#" + HFLoader.hiddenField).data('HFLoader', HFLoader);
$("#" + HFLoader.label).data('HFLoader', HFLoader);
// add custom event handlers - saveHiddenField
$("#" + HFLoader.button).on('saveHiddenField', HFLoader.saveHiddenField);
$("#" + HFLoader.hiddenField).on('saveHiddenField', HFLoader.saveHiddenField);
$("#" + HFLoader.label).on('saveHiddenField', HFLoader.saveHiddenField);
// add custom event handlers - showEvent
$("#" + HFLoader.button).on('showEvent', HFLoader.showEvent);
$("#" + HFLoader.hiddenField).on('showEvent', HFLoader.showEvent);
$("#" + HFLoader.label).on('showEvent', HFLoader.showEvent);
},
init: function () {
$(function () {
HFLoader.buttons();
});
}
};
HFLoader.declareVariables(btn, hf, label);
HFLoader.init();
return HFLoader;
}
So now to make use of it all. In JS, if you wanted to look up the HFLoader data based on the Button1 ID, you might do something like this:
<script type="text/javascript">
var HFLoader = $('#<%=Button1.ClientID %>').data('HFLoader');
HFLoader.showEvent();
</script>
If you wanted to use ButtonID1 to trigger the custom event, which would ultimately call the showEvent method, you could do:
<script type="text/javascript">
$('#<%=Button1.ClientID %>').trigger('showEvent');
</script>
And if you wanted to do it inline, like your first example...
<input type="button" ID="Button2" onclick="$('#<%=Button1.ClientID %>').data('HFLoader').showEvent();" value="Show" />
Although I'd highly recommend instead using JS to wire an event to Button2, such as:
$(function()
{
$('#<%=Button2.ClientID').click(function()
{
$('#<%=Button1.ClientID %>').data('HFLoader').showEvent();
return false;
});
});
That way it's not inline script. Overall, the script for HFLoader is a bit hacked together. I'd recommend taking a look at the examples I've put together to extract the pieces of useful information and consider rethinking and/or rewriting the way you're doing things. Your brain is pushing you towards some kind of "global" view, or some kind of automatically scoped variable called HFLoader. But if you have 5 instances on a page, then you really want instances of some HFLoader object and not some global concept of HFLoader. It's like creating a new instance of a class instead of using a static or singleton instance of a class -- two very different concepts!
I hope this helps.

Current context value is not rendered from Usercontrol to .aspx page

i have default.aspx page and one user control.
usercontrol is having following code for multiple file uploads.
now the problem is when i add a file for upload that current context file is not giving me any value it is still zero i guess because it is rendering from user control.
what should i do?
My Usercontrol UPLOAD.ASCX
<%# Control Language="C#" AutoEventWireup="true" CodeFile="FileUpload.ascx.cs" Inherits="FileUpload" %>
<script type="text/javascript" src="_scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
var i = 1;
$(document).ready(function () {
$("#addfile").click(function () {
$("#dvfiles").append("<input name=" + i + "fu type=file /><a href=#>remove</a><br>");
i++;
});
$("#dvfiles a").live('click', function () {
$(this).prev("input[type=file]").remove();
$(this).remove();
});
});
$(document).submit(function () {
var flag = true;
$("#dvfiles input[type=file]").each(function () {
if ($(this).val() == "") {
$(this).css("background", "Red");
flag = false;
}
});
return flag;
});
</script>
<div id="Fileuploader">
Attach a file..<br />
<asp:Label ID="lblMessage" runat="server"></asp:Label><br />
<asp:Button ID="btnUpload" runat="server" Text="Upload"
onclick="btnUpload_Click" />
</div>
UPLOAD.ASCX.CS
protected void btnUpload_Click(object sender, EventArgs e)
{
try
{
HttpFileCollection filecolln = Request.Files;
//here i don't get values of current files.
// this is zero. because of this following if condition failed
//please help here
if (filecolln.Count > 0)
{
for (int i = 0; i < filecolln.Count; i++)
{
HttpPostedFile file = filecolln[i];
if (file.ContentLength > 0)
{
file.SaveAs(ConfigurationManager.AppSettings["FilePath"] + System.IO.Path.GetFileName(file.FileName));
}
}
lblMessage.Text = "Uploaded Successfully!";
}
else
{
lblMessage.Text = "No files selected!";
}
}
catch (Exception ex)
{
lblMessage.Text = ex.Message;
}
}
Default.aspx code
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"
Inherits="_Default" %>
<%# Register TagPrefix="ucFileuploader" tagName="Fileuploader" src="FileUpload.ascx" %>
<!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>
</head>
<body>
<form id="form1" runat="server">
<div>
<ucFileuploader:Fileuploader ID="Fileuploder" runat="server" />
</div>
</form>
</body>
</html>

The problem is that you are using javascript an id names.
so when you have control with id addfile in .aspx it is rendered as is,
but when you have control with id addfile in user control with id Fileuploader,
than the rendered id is Fileuploader_addfile,
so change id name in java script with the proper id.
To chechk what is name of rendered id, open page in browser, open source of the page and find you element and copy id into java script.
Change all ids in java script with rendered id names.

I would suspect it could be this line:
<script type="text/javascript" src="_scripts/jquery-1.4.1.min.js"></script>
Which should be:
<script type="text/javascript" src="/_scripts/jquery-1.4.1.min.js"></script>