I am trying to load this javascript in a form somehow
<script type="text/javascript" src="https://ssl.gstatic.com/trends_nrtr/744_RC08/embed_loader.js"></script> <script type="text/javascript"> trends.embed.renderExploreWidget("TIMESERIES", {"comparisonItem":[{"keyword":"programming","geo":"","time":"all"}],"category":0,"property":""}, {}); </script>
The only way I could think of was to add it to an html document and load that in to a webbrowser control like so:
HTML DOC:
<HTML>
<HEAD>
<TITLE>test</TITLE>
</HEAD>
<BODY>
<script type="text/javascript" src="https://ssl.gstatic.com/trends_nrtr/744_RC08/embed_loader.js"></script> <script type="text/javascript"> trends.embed.renderExploreWidget("TIMESERIES", {"comparisonItem":[{"keyword":"dominos pizza","geo":"","time":"all"}],"category":0,"property":""}, {}); </script>
</BODY>
</html>
Code:
WebBrowser1.DocumentText = IO.File.ReadAllText("C:\Users\Zach\Desktop\test.html")
Seems simple enough but nothing loads at all.
Is this not possible or Is there a better way to accomplish what I am trying to do?
Related
I use jquery and I see that currently, Jquery is given a reference in every content page.
I am planning to move all the references to the master page so that it will be easy to update them when its needed.
So , I remove the jquery references from the content page and place them in the head section of the master page as shown below :
<head id="Head1" runat="server">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link href="App_Themes/masterStyleSheet.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/redmond/jquery-ui.css"
<asp:ContentPlaceHolder ID="ExtraHeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
When I run the application I get the following error :
JavaScript runtime error: 'jQuery' is undefined
From my research online this is the right way to do it .. but I get the error. Can anyone help me and point out whats wrong or what needs to be done ?
Move the jquery script tag above the jquery ui script tag and remove one of the jquery ui references since you don't need to include them twice:
<head id="Head1" runat="server">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link href="App_Themes/masterStyleSheet.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/redmond/jquery-ui.css"
<asp:ContentPlaceHolder ID="ExtraHeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
jQuery is undefined since the jquery ui library is trying to use the jQuery reference before it is defined in the jquery-1.9.1.js file.
First, change the order of the call to jQuery UI and jQuery library, all library or plugin that use jQuery need that defined jQuery before you call it, this is for all libraries or framewors:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
then so that you can see in your code you are calling twice a jQuery UI, check this and also if you are calling twice a jQuery or other libraries:
http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js
http://code.jquery.com/ui/1.10.3/jquery-ui.js
you are calling jQuery ui library before jQuery library is loaded
your code
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
change it to
call jQuery library file first
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
How do i include jquery ui to be used in my system? I've already put the code in my header:
<script type="text/javascript" src="/scripts/jquery.min.js"></script>
And how can I include the date picker which I already downloaded from jqueryUI. Here is the code of the date picker :
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
<div class="demo"><p>Date: <input type="text" id="datepicker"></p></div>
I got confused how to export the downloaded file to asp. Thank you.
Did you also include the references to JQuery?
<link type="text/css" href="css/themename/jquery-ui-1.8.23.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.23.custom.min.js"></script>
See: JQuery UI Documentation
I have made this example and it works fine on a plain aspx webpage. I use Visual Studio 2010.
Head-part:
<title>Show/hide element</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#CheckBoxShowHide').click(function () {
$("#ShowHideElement").slideToggle();
});
});
</script>
<style type="text/css">
#ShowHideElement
{
width:400px;
height:100px;
background-color:Aqua;
}
</style>
Body-part:
<form id="form1" runat="server">
<asp:CheckBox ID="CheckBoxShowHide" runat="server" Text="Show/hide" />
<div id="ShowHideElement">
This is the element for show/hide
</div>
</form>
When I have a masterpage and the same code on the child webpage JQuery dosent work. The loading of the JQuery javascript file fails. The child page and the masterpage are in the same folder. If I put the code on the masterpage it works fine but I want JQuery on the child page too. Please help me.
I can see another problem as well, you are trying to grab the checkbox ID based on its server ID not ClientID. Once a asp control has been rendered onto the client its ID gets changed. Try the following code:
<title>Show/hide element</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#<%=CheckBoxShowHide.ClientID%>').click(function () {
$("#ShowHideElement").slideToggle();
});
});
</script>
<style type="text/css">
#ShowHideElement
{
width:400px;
height:100px;
background-color:Aqua;
}
</style>
Body-part:
<form id="form1" runat="server">
<asp:CheckBox ID="CheckBoxShowHide" runat="server" Text="Show/hide" />
<div id="ShowHideElement">
This is the element for show/hide
</div>
</form>
The following line is the only thing I changed:
$('#<%=CheckBoxShowHide.ClientID%>').click(function () {
Hope it helps.
Are you sure your page is loading jQuery, use a absolute URL in your master page to reference the jQuery library.
If jQuery is on your masterpage, it will work on your child page.
Master <head>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
Child <head>
<head>
<script type="text/javascript">
$(document).ready(function () {
//Do Child jQuery Stuff here....
});
</script>
<head>
If you are having issues the only other thing to check is to make sure that your path to the jquery file is right. (ie Maybe it should be ../js/jquery.js)
Use this to make sure that isn't the issue if the other thing I suggested doesn't work:
For your Master Page <head>:
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
Or (if you want to host it)
<head>
<script type="text/javascript" src='<%=ResolveURL("~/js/jquery.js")%>'></script>
</head>
Where ~/ is your root.
You should be able to just place the link to the JQuery library in the HEAD section of the master page. When the page is ran it will generate the HTML content for the master page with the link in the HEAD section, the content page should be able to then make user of the JQuery library. I know we had an issue with how the link was being done. Maybe try linking in the HEAD of the master page like this instead:
<script type="text/javascript" src='<% = ResolveURL("~/js/jquery.js") %>' ></script>
The '<% %>' is a way to do inline server side code as the page loads, so the page will inject the correct src given the location of the URL.
I work on a ASP.NET application using Jquery. Jquery is really powerfull and I use a lot of it.
In my master page I include all libraries I use and a js file who contain the jquery code available for all the application (interface interactions). In this js File (Main.js) I make some things so I use the $(document).ready( ... etc .. )
But in some pages, who are more complex I need to use some other jquery code.. So I add some head Content with other script tag.. And this the problem, I have to add the $(document).ready() instruction again.
There is a lot of problems with my asp controls with this way to do, the autopostback controls doesn't do their autopostback.. I think this is a problem with the multiple $(document).ready() declaration because when I remove the second one(in the page not in the master page) the controls are working.
So how can I do to add some javascript code in a specific page without multiple $(document).ready() declaration. (I don't want to embed all the jquery code in all pages).
I hope I'm clear enough, thanks for responses
Edit here is code
Master page part
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="SiteMaster" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<link href="Styles/jquery-ui-1.8.9.custom.css" rel="stylesheet" type="text/css" />
<link href="Styles/menu.css" rel="stylesheet" type="text/css" />
<script src="/js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="/js/jquery-ui-1.8.7.custom.min.js" type="text/javascript"></script>
<script src="/js/jquery.cookie.js" type="text/javascript"></script>
<script src="/js/jquery.ui.datepicker-fr.js" type="text/javascript"></script>
<script src="/js/jquery.color.js" type="text/javascript"></script>
<script src="/js/Menu.js" type="text/javascript"></script>
<script src="/js/iphone-style-checkboxes.js" type="text/javascript"></script>
<script src="/js/jquery.tools.min.js" type="text/javascript"></script>
<script src="/js/Main.js" type="text/javascript"></script>
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
Some content....
</body>
</html>
Main.js
$(document).ready(function () {
/// <reference path="jquery-1.4.4-vsdoc.js" />
//There is a lot of content here......
});
And A page
<%# Page MasterPageFile="~/Site.master" Language="C#" AutoEventWireup="true" CodeBehind="Dep.aspx.cs" Inherits="Dep" %>
<asp:Content ID="HeadContent1" ContentPlaceHolderID="HeadContent" runat="server">
<link href="../../Styles/nyroModal.css" rel="stylesheet" type="text/css" />
<script src="../../js/jquery.nyroModal.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#tbxDateDebut').datepicker();
$('#tbxDateFin').datepicker();
$('.nyroModal').nyroModal();
});
</script>
</asp:Content>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
//Here comes the controls... (lot of code)
</asp:Content>
main.js
$(document).ready(function () {
//There is a lot of content here......
if ($.pageReady) $.pageReady($);
});
page.js
<script type="text/javascript">
$.pageReady = function() {
// fired on DOM ready
}
</script>
The answer is in your question:
But in some pages, who are more complex I need to use some other jquery code.. So I add some head Content with other script tag.. And this the problem, I have to add the $(document).ready() instruction again.
"But in some pages..."
Unfortunately you have to add a reference for every js file that refers to uncommon elements. That is if you have page 1 with a <div id="element1"> and another page (page 2) with <div id="element676"> you would not want to include all in the Jquery handling into Main.js . In fact that would give an error if you had not yet seen page 2.
Damn you guys are quick.... as I was writing #Raynos gave the correct answer.
well an alternative is to move all of you jquery document ready to the bottom of your page
<body>
... here goes your other html ....
<script>
//$(document).ready(function(){//this is not needed
... here goes the first ready...
//});//this is not needed
//$(document).ready(function(){//this is not needed
... here goes the second ready ... and so on...
//});//this is not needed
</script>
</body>
So in effect you are using document.ready when all other elements are ready :) PS
I'm inclined to think that there's something at work here other than your multiple $(document).ready() calls. AFAIK, multiple calls against $(document).ready() (and even bubbled-up versions, like $('#someid').ready()) shouldn't cause issues as they are all aggregated together silently by jQuery for you.
I'd double-check my syntax for starters, and make sure that all your blocks are properly encapsulated, all statements end with a ;, and all that jazz.
<script src="<%=("../Scripts/jquery-1.6.1.min.js") %>" type="text/javascript" />
<script src="<%=("../Scripts/jquery-datePicker.js") %>" type="text/javascript" />
<script type="text/javascript">
$(function() {
$("#txtDate").datepicker();
});
</script>
I have used this code but it doesnot show me the popup calender on click on textbox.
what can be the problem.
it doesnot give any error.
Perhaps you should use the document.ready function
$(document).ready(function() {
$("#txtDate").datepicker();
});
why not set path directly? and close script tag with this </script>
<script src="../Scripts/jquery-1.6.1.min.js" type="text/javascript" ></script>
<script src="../Scripts/jquery-datePicker.js" type="text/javascript" ></script>
Use ClientID for server control
<script type="text/javascript">
$(function() {
$("#<%= txtDate.ClientID %>").datepicker();
});
</script>
you can also use ready function
<script type="text/javascript">
$(document).ready(function() {
$("#<%= txtDate.ClientID %>").datepicker();
});
</script>
if ID selector doesn't work then use class selector it is good for ASP.NET server control
<asp:TextBox ruat="server" ID="txtDate" CssClass="DateField"></asp:TextBox>
<script type="text/javascript">
$(document).ready(function() {
$(".DateField").datepicker();
});
</script>
ID of ASP.NET server control is different than that of the normal HTML ID. So if you are using a Server control, then run your code, open the page source, get the ID that is displayed in the page source and use this ID instead of txtDate.
Also use
$(document).ready(function() { $("#<id>").datepicker(); });