I have a button that i use to call code behind in my aspx file. I am trying to change the text on the button to no avail.
HTML:
<button class="radius button" runat="server" id="buttonUpload" onServerClick="buttonUpload_Click" >Execute SQL</button>
Here is the javascript:
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<%--<asp:ScriptManager ID="scripman1" runat="server" EnablePageMethods="True">
</asp:ScriptManager>--%>
<link rel="stylesheet" href="stylesheets/foundation.min.css">
<link rel="stylesheet" href="stylesheets/app.css">
<script src="javascripts/modernizr.foundation.js"></script>
<style >
#import "css/datatables/demo_page.css";
#import "css/datatables/demo_table.css";
#import "Table Sorter/style.css";
</style>
<script type="text/javascript" src="js/tablesorter/jquery.tablesorter.js"></script>
<script type="text/javascript" src="js/vendor/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#buttonUpload").text('Save');
});
I have tried $("#buttonUpload").html('Save'). Nothing seems to work.
Wait until the DOM has been loaded first (and jQuery). .text() and .html() will both work.
$(document).ready(function() {
$("#buttonUpload").text('Save');
});
I found out the problem was the runat"server" property
<button class="radius button" runat="server" id="buttonUpload" onServerClick="buttonUpload_Click" >Execute SQL</button>
When you remove that the button's text updates fine.
Related
I have created a VERY simple program on a VERY simple html file. I wish to simply find out how to link javascript to html and css. Here follows my example code:
(index.html)
<head>
<title>JavaScript</title>
<link rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
<div class="picture">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRZAb6KcZrNTBM1UflIMAQfAGuTKN0XWYFsiTgm5M5NRwXO_udT"/>
</div>
<button class="show_btn">Show</button>
<button class="hide_btn">Hide</button>
<script src="script.js"></script>
</body>
JS:
$(document).ready(function(){
$(".hide_btn").click(function(){
$("p").slideUp();
});
$(".show_btn").click(function(){
$("p").slideDown();
});
});
CSS:
.picture { display: none; }
Now with this code, I am attempting to use two buttons to show and hide a picture of a fish...I can't seem to get it to work however, and I believe it has something to do with how I am linking my files. Please Help!
Based off of your comment in your question it would appear that you are using jQuery but you do not have jQuery as part of your source code.
You will need to include the jQuery source above script.js.
Here is an example of how it should look like using Google CDN for the jQuery library:
<head>
<title>JavaScript</title>
<link rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
<div class="picture">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRZAb6KcZrNTBM1UflIMAQfAGuTKN0XWYFsiTgm5M5NRwXO_udT"/>
</div>
<button class="show_btn">Show</button>
<button class="hide_btn">Hide</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="script.js"></script>
</body>
try this in javascript
<html>
<head>
</head>
<body>
<div class="picture" id="picture">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRZAb6KcZrNTBM1UflIMAQfAGuTKN0XWYFsiTgm5M5NRwXO_udT" />
</div>
<button class="show_btn" onclick="show();">Show</button>
<button class="hide_btn" onclick="hide();">Hide</button>
<script type="text/javascript" >
function show(){
var imgdiv = document.getElementById("picture");
imgdiv.style.display="block";
}
function hide(){
var imgdiv = document.getElementById("picture");
imgdiv.style.display="none";
}
</script>
</body>
</html>
I would definitely use jQuery for something like this. Here's a Plunker that shows how you can accomplish this.
http://embed.plnkr.co/DwTwNuF162rfgcQOdT7u/preview
<html>
<head>
<script data-require="jquery#*" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div class="picture" id="picture">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRZAb6KcZrNTBM1UflIMAQfAGuTKN0XWYFsiTgm5M5NRwXO_udT" />
</div>
<button class="show_btn" onclick="show()">Show</button>
<button class="hide_btn" onclick="hide()">Hide</button>
</body>
<script>
function show() {
$('#picture').show();
}
function hide() {
$('#picture').hide();
}
</script>
</html>
If you are using jquery you also need to link the jquery source above your .js link,
here is the google cdn (so you dont have to download it):
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
First things first:
Include this in your <head>:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
If you're on Chrome try using the developer tools; right click on the page then inspect element. On the developer tools pane, select the CONSOLE tab which logs all your errors in your javascript
And try this in your script:
$(document).ready(function() {
$(".show_btn").click(function() {
$(".picture").css('display', 'block');
});
$(".hide_btn").click(function() {
$(".picture").css('display', 'none');
});
});
Also I've noticed that you have div.picture display set to "none".
All that you need to do is the following
<script type="text/javascript"></script>
You can write javascript inside the script tags. (if you want to add javascript in HTML
the following is to link it to another file.
<script src="path to other file" > </script>
I want to create simple custom popup using jquery. My html code is as follows.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
alert("Thiws should be custom popup");
});
});
</script>
</head>
<body>
<button id="btn1">Show Text</button>
</body>
</html>
On clicking button it should open a form in popup asking username, email address and also it should have submit button
For reference what i want to ask
http://www.c-sharpcorner.com/UploadFile/736ca4/custom-popup-window-using-jquery/
You can use the function and css I wrote here:
https://jsfiddle.net/mm7b7t5t/
Opening a hello world popup:
var hello = new popup([{text:"Close"}], "Hello!", "<p>Hello World</p>");
hello.open();
You can make popups draggable, add multiple buttons etc etc
jQuery dialog is a mess in my opinion, I prefer my own popup code ^^
Just create a html file and copy/paste that code.
<html>
<head>
<title></title>
</head>
<body>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#OpenDialog").click(function () {
$("#dialog").dialog({modal: true, height: 400, width: 400 });
});
});
</script>
<a id="OpenDialog" href="#">Click here to open dialog</a>
<div id="dialog" title="Dialog Title">
<p>test</p>
</div>
</body>
</html>
I used this Plugin in Webforms. I have Content Place holder on my Form so I converted the Code into Below:
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$('#<%=dialog.ClientID %>').dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$('#<%=opener.ClientID %>').click(function() {
$('#<%=dialog.ClientID %>').dialog("open");
});
});
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<div id="dialog" runat="server" title="Basic dialog">
<p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<button runat="server" id="opener">Open Dialog</button>
</asp:Content>
But it is not working. How do i solve this ?
The <button> element submits the page back to the server after being clicked. This is its default behavior inside a form (a Webforms page is a form) and that's why you cannot see the dialog.
You can just add a type="button" to your button like this:
<button runat="server" type="button" id="opener">Open Dialog</button>
It will prevent the button from posting the page back to the server and you will be able to see the dialog.
I wanted to use the date time picker like following
<script type="text/javascript">
$(function() {
$('#datetimepicker4').datetimepicker({
pickTime: false
});
});
</script>
<div class="well">
<div id="datetimepicker4" class="input-append">
<input data-format="yyyy-MM-dd" type="text"></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar">
</i>
</span>
</div>
</div>
But the problem is that the I got error in JS undefiend is not a function
Im using bootstrap3 in MVC5 application what can be the issue here ?
I try to add the following librarys which doesnt help...
<script src="//code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="~/Content/bootstrap.min.css" />
<script type="text/javascript" src="https://eonasdan.github.io/bootstrap-datetimepicker/scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="https://eonasdan.github.io/bootstrap-datetimepicker/scripts/moment.js"></script>
<script type="text/javascript" src="https://eonasdan.github.io/bootstrap-datetimepicker/scripts/bootstrap-datetimepicker.js"></script>
Please call jQUery top off the all script
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
Have you tried putting your Datepicker instantiate script below HTML code?
<div class="well">
<div id="datetimepicker4" class="input-append">
<input data-format="yyyy-MM-dd" type="text"></input>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar">
</i>
</span>
</div>
</div>
<script type="text/javascript">
$(function() {
$('#datetimepicker4').datetimepicker({
pickTime: false
});
});
</script>
Add jquery
<script src="~/Scripts/jquery.ui.datepicker-de.js"></script>
In my case, there was problem with jquery-s involved, i need jquery for my layout, and i was importing that part after
#RenderBody()
I fixed this by creating in BundleConfig script only for jquery and imported that script before RenderBody() part, of course in my Layout part.
bundles.Add(new ScriptBundle("~/bundles/jquerym").Include(
"~/Scripts/libs/jquery-{version}.js"));
After this, i didnt have problem that jquery is not ready, and i didnt have to import that part on page where i show datetimepicker. This is different datetimepicker from yours but it's basically same:
<script type="text/javascript" src="/Scripts/moment.min.js"></script>
<script type="text/javascript" src="/Scripts/bootstrap-datetimepicker.js"></script>
<link rel="stylesheet" href="~/Content/bootstrap-datetimepicker.min.css" />
<script>
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
i have a input like this "
<input type='button' name='osx' value='Demo' class='osx demo' runat="server" />
that when i click on this , it runs a jQuery plugin.
now i want to call this input's click event on my page load, in fact i want to run it's plugin at page load, so i use this code :
<script>
$("document").ready(function () {
window.getElementById("osx").click();
});
</script>
but when i run my page , i get this error :
Line: 16
Error: Object doesn't support property or method 'getElementById'
can enyone help me ,please?
i done all of your answers but non of them worked for me!!!
here in my page's code :
<%# Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<link type='text/css' href='css/osx.css' rel='stylesheet' media='screen' />
<script>
$("document").ready(function () {
document.getElementById("osx").click();
}
</script>
</head>
<body>
<div id='container'>
<div id='content'>
<div id='osx-modal'>
<input id='osx' type='button' name='osx' value='Demo' class='osx demo' runat="server" />
or <a href='#' class='osx'>Demo</a>
</div>
<!-- modal content -->
<div id="osx-modal-content">
<div id="osx-modal-title" dir="rtl">
OSX Style Modal Dialog</div>
<div class="close">
x</div>
<div id="osx-modal-data">
<h2>
Hello! I'm SimpleModal!</h2>
<p>
SimpleModal is a lightweight jQuery Plugin which provides a powerful interface for
modal dialog development. Think of it as a modal dialog framework.</p>
<p>
SimpleModal gives you the flexibility to build whatever you can envision, while
shielding you from related cross-browser issues inherent with UI development..</p>
<p>
As you can see by this example, SimpleModal can be easily configured to behave like
an OSX dialog. With a handful options, 2 custom callbacks and some styling, you
have a visually appealing dialog that is ready to use!</p>
<p>
<button class="simplemodal-close">
Close</button>
<span>(or press ESC or click the overlay)</span></p>
</div>
</div>
</div>
</div>
<script type='text/javascript' src='js/jquery.simplemodal.js'></script>
<script type='text/javascript' src='js/osx.js'></script>
</body>
</html>
where am i do wrong?
<script>
$(document).ready(function () {
document.getElementById("osx").click();
});
</script>
or
<body onload="document.getElementById('osx').click();">
with id="osx" added to your input element
<script>
$(document).ready(function () {
$("input[name=osx]").click();
});
</script>
http://jsfiddle.net/rNGgm/
OR Without jQuery
<script>
document.addEventListener('DOMContentLoaded',function(){
document.getElementById("osx").click();
});
</script>
http://jsfiddle.net/rNGgm/1/
Try this
$(document).ready(function () {
document.getElementById("<%=btnProvideContactInfo.ClientID%>").click();
});
Try with .trigger() like
<script type="text/javascript">
$("document").ready(function () {
$(".osx").trigger('click');
});
</script>
And you didnt have the id atribute.So add it and try
<input type='button' name='osx' value='Demo' class='osx demo' id='osx' runat="server" />
You can use "trigger":
<script>
$(function () {
$(".osx").trigger("click");
});
</script>
use jQuerys .trigger()
<input type='button' id='osx' value='Demo' class='osx demo' runat="server" />
this is jQuery code..
<script>
$("document").ready(function () {
$('#osx').trigger('click');
});
</script>
I think you place id in input type.
<input type='button' name='osx' value='Demo' class='osx demo' id='osx' runat="server" />
Why it did not work for you
getElementById is not a method of window object. It is a method of document object, so use document.getElementById("osx").click(); and your input tag should have id='osx'.
you were using $("document"). Dont put quotes around document in $(document).
How to solve it
Add id attribute to your input element -
<input id='osx' type='button' name='osx' value='Demo' class='osx demo' runat="server" />
And if you like to use jQuery, then -
$(document).ready(function () {
$("#osx").click();//using id selector
}
otherwise using document.getElementById
$(document).ready(function () {
document.getElementById("osx").click();
}