I'm trying to integrate my error handling with facebox to show my errors in a cleaner way. The problem that is occurring is that when I try to call jQuery.facebox, it is telling me that it is not a function. But I am able to use facebox's rel on links throughout my application.
Head:
<script language="javascript" src="http://code.jquery.com/jquery-latest.js" type="text/javascript" />
<script language="javascript" src="/Resources/js/jquery.min.js" type="text/javascript"></script>
<script language="javascript" src="/Resources/js/jquery-1.2.2.pack.js" type="text/javascript"></script>
<link href="/Resources/css/facebox.css" media="screen" rel="stylesheet" type="text/css"/>
<script src="/Resources/js/facebox.js" type="text/javascript" />
Then from my codebehind on the masterpage Im calling facebox like this:
ScriptManager.RegisterStartupScript(Page, typeof(string), "ErrorMessage", "jQuery.facebox({ div: '#error' });", true);
And the error div is down towards the end of the masterpage:
<div id="error" style="display:none;">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" style="background-color:#5F92CB; color:#fff; padding:6px; font-weight:bold;" align="left">Error Occurred while processing request</td>
</tr>
<tr>
<td style="padding:4px;" class="boldText"><asp:Label ID="lblErrorMessage" runat="server" /></td>
</tr>
</table>
</div>
Any help would be greatly appreciated. thanks
If you really need to use multiple versions of jquery on the same page, which is doable but not always preferable (may give headaches), you will have to use jQuery's noconflict mode. Check for more info and implementation details the following urls: link 1, link 2
It's important to know which plugins use which version of jQuery. This is because you will have to load them in the right order. You will need to load the older version plugins before the new jQuery version.
That said it's beter to run scripts when the DOM is loaded, just like Brian said, use the following snippet to accomplish that:
$(document).ready(function() { jQuery.facebox({ div: '#error' }); })
Try wrapping it in document.ready as in:
ScriptManager.RegisterStartupScript(Page, typeof(string), "ErrorMessage", "$(document).ready(function() { jQuery.facebox({ div: '#error' }); });", true);
The reason it's failing is because it's running before the facebox plugin is ready most likely.
Related
I'm trying to automate html events using c#.
I have html dropdown and on change of its value it shows/hides specific divs.
Below is sample HTML code.
<!DOCTYPE html>
<html>
<body>
<select id="ddl">
<option value="1" selected="selected">TextBox</option>
<option value="2">Button</option>
</select>
<input style="display: none" type="text" class="textboxclass" />
<div class="btn" style="display: none">
<button type="button">Submit</button>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$('#ddl').change(function()
{var name = $('#ddl option:selected').text();
var id = $('#ddl option:selected').val();
if(id =="1"){$('.textboxclass').show();$('.btn').hide();}
else{$('.textboxclass').hide();$('.btn').show();}});
</script>
</body>
</html>
I'm using mshtml.dll to read the HtmlDocument and I have to fire "change" event programmatically.
Tried different ways like below ones:
HTMLOptionElement drpelem.select=true; HTMLSelectElement
elem.click();
But it's not working. Please guide me.
I think this question was already asked and answered in a different form, here: https://stackoverflow.com/a/1456714/19020 or here: https://stackoverflow.com/a/11175179/19020 -- since mshtml is used by Internet Explorer.
But really, to load a full browser experience you'll need to load an ActiveX control, or COM control or whatever they're called by Microsoft nowadays. As far as I know, mshtml.dll just renders the HTML.
I am a noob at jQuery, so please help me out.
I am using Visual Studio 2005 with ASP.net 2 (I know, we're planning an upgrade soon!)
I am simply trying to embedd the DateBox FlipBox control on my website, as the users will be using the website via their iPads.
How do I go about getting this to work? Will it work?
I have placed this in my master page.
<head runat="server">
<link href="http://cdn.jtsage.com/jtsage-datebox/-4.0.0/jtsage-datebox-4.0.0.jqueryui.min.css" rel="stylesheet" type="text/css" />
<script src="http://cdn.jtsage.com/jtsage-datebox/-4.0.0/jtsage-datebox-4.0.0.jqueryui.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://dev.jtsage.com/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.core.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.calbox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.datebox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.flipbox.min.js"></script>
<script type="text/javascript" src="http://cdn.jtsage.com/jtsage-datebox/i18n/jquery.mobile.datebox.i18n.en_US.utf8.js"></script>
<title>Tec-NQ Boarding Register</title>
<asp:ContentPlaceHolder id="ContentPlaceHolderHead" runat="server">
</asp:ContentPlaceHolder>
</head>
And in my ASPx page I've simply put an <input> statement, as per the sample instructions here.
<input type="text" data-role="datebox" data-options='{"mode":"calbox"}'>
But all I get is a textbox! Where/how do I get the date control to show up?
I had a closer look at that link, and there are heaps of <div> statements outlining the actual control and a calendar icon.
<div class="input-group"><input type="text" data-options="{"mode":"calbox", "useInline":false, "useInlineAlign": "right"}" data-role="datebox" id="in1" class="form-control" readonly="readonly"><div class="input-group-addon" title="Open Date Picker"><span class=" glyphicon glyphicon-calendar"></span></div></div>
I've even tried to paste that code directly into my ASPX page, but I get a whole heap of junk.
How do you get this thing to work please? It's driving me nuts.
Thanks
The answer was staring at my face!
https access priveleges
Once I downloaded the js files directly and stored them locally, everything worked off the bat!
Newbie over here looking for some help. I'm having trouble implementing the Slick carousel on my site. I would like to use "Slider Syncing" found at http://kenwheeler.github.io/slick/
Please see my code here: http://jsfiddle.net/g1xd6vtx/
The site I'm building is a C# .NET MVC4 project built in Visual Studio 2012.
Sample HTML:
<div class="slider slider-for">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div class="slider slider-nav">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
CSS (which I have placed in the head section):
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
Javascript (which I have placed in the scripts section):
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: true,
centerMode: true,
focusOnSelect: true
});
Thank you for any help! :)
A little late, but this might help others:
I noticed that you have to have a block or inline-block element inside .slider-nav DIV. In this case I added an H1. Then style it to cover the parent DIV, then add text-align:center; to the parent DIV.
CSS
.slider-nav h1{
display:inline-block;
width:100%;
height:80px;
}
.slider-nav .slick-slide{
height:80px;
color:#fff;
background:green;
cursor:pointer;
text-align:center;
margin:0 10px;
}
HTML
<div class="slider-nav">
<div><h1>1</h1></div>
<div><h1>2</h1></div>
<div><h1>3</h1></div>
<div><h1>4</h1></div>
<div><h1>5</h1></div>
</div>
Demo:
http://jsfiddle.net/g1xd6vtx/2/
I have a user control called header.aspx. In my user control if I do this it will work.
<script type="text/javascript">
function greeting(){
Alert("hi");
}
</script>
<asp:button id="button1" OnClientClick="greeting" /> </asp:button>
I am using this user control in a page called default.aspx. I tried using src="~scripts/foo.js". If I do that it does not work. The question is pretty simple I guess. How would I call a java script function in a user control which is stored in an external location( not in the page. Located in the scripts folder). Thanks in advance.
As I can understand this is clearly a path issue.
Just follow these steps might help you.
Create a .js file first. Put your code and save it in the folder you want it to.
Now Drag and Drop the js file inside the head section of your html code from the Solution Explorer window. This will give you the correct path for the js file.
The above steps is what I follow, when I create an external js file for my controls.
Also make sure you call your function in this manner also suggested by others Else your function won't get call:
<asp:button id="button1" OnClientClick="greeting();" /> </asp:button>
Just use the code below:
<script src="<%: ResolveUrl("~/Scripts/foo.js") %>"></script>
Script: test.js
function greeting() {
alert("hi");
return false;
}
user control: <asp:Button ID="button1" OnClientClick="return greeting()" runat="server" Text="click" />
Page:
<head runat="server">
<title></title>
<script src="test.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:temp ID="temp" runat="server" />
</div>
</form>
</body>
</html>
This should work now.
<asp:button id="button1" OnClick=" javascript : greeting();" /> </asp:button>
try to use it. havent trie but i think it should work.
First of all you need to create a seprate javascript file and then add this in your page in this way. add this tag in the tag of your page.
use
OnClientClick="greeting()"
you missed "()" in OnClientClick="greeting"
Please see the whole html code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="scripts/foo.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:button id="button1" runat="server" OnClientClick="greeting()" Text="hit" />
</div>
</form>
</body>
</html>
Thanks.
External javascript file reference:
<script src="yourpath/yourfilename.js"></script>
Button Control
<asp:Button ID="button1" OnClientClick="greeting();" runat="server" Text="click" />
I want to use Ajax for my chat application instead of refreshing an Iframe every second for new messages. Someone told me to use webservices with ajax. What should I do with my code to use Ajax?
Here is the code which shows Iframe which is called every second and Iframe src has an aspx page which displays chat messages
<script type="text/javascript">
function refreshConversatio() {
document.getElementById('iframeDisplayMessage').src = 'frmMessageDisplay.aspx';
}
</script>
<body>
<div id="divMessageDisplayPage" style="height: 724px; ">
<asp:PlaceHolder ID="ContentPlaceHolderDisplayMessage" runat="server">
<iframe id="iframeDisplayMessage" name="iframeDisplayMessage" width="76%" style="background-color:White;" height="95%" frameborder="0" src="frmMessageDisplay.aspx"
onload="document.getElementById('iframeDisplayMessage').contentWindow.scrollTo(0,document.getElementById('iframeDisplayMessage').contentWindow.document.body.scrollHeight)">
</iframe>
</asp:PlaceHolder>
</div>
<script type="text/javascript">
setInterval(function () { refreshConversatio(); }, 1000)
</script>
</body>
This is the Aspx page which is called in Iframe and it has literal which displays messages
<div id="divConversation" style="width: 100%;">
<asp:Literal ID="RecepientConversation" runat="server"/>
</div>
Take a look at leveraging SignalR to accomplish the task. Patrick Fletcher has a pretty nice set of tutorials with examples for building a basic chat app.
Tutorial Link:
http://www.asp.net/signalr/overview/signalr-20/getting-started-with-signalr-20/introduction-to-signalr
http://www.asp.net/signalr