All,
Can u please tell me whats wrong with the following code.I am trying to open a modal window here and the contents of it is a text box.
Also i get the java script error .dialog is not a function.
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
$("#a").click( function(e) {
e.preventDefault();
var html='<div id="e_ls" style="overflow:auto;text-align:justify"><textarea rows="10" cols="10"></textarea></div>';
$e_ls = jQuery('#e_ls');
$e_ls.html(html);
$("#e_ls").dialog("open");
});
});
</script>
</head>
<a href="" id="a" >a</a>
</html>
Thanks....
Its more than just the Jquery UI File Missing. You are pulling it in incorrectly.
Try:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$("#e_ls").dialog({ autoOpen: false });
$("#a").click( function(e) {
e.preventDefault();
$e_ls = jQuery('#e_ls');
$("#e_ls").dialog('open');
});
});
</script>
</head>
<body>
<a href="" id="a" >a</a>
<div id="e_ls" style="overflow:auto;text-align:justify">
<textarea rows="10" cols="10"></textarea>
</div>
</body>
</html>
With the above the e_ls is hidden by default and only called when you ask. Note you do not need the preventDefault() if you put no href in your tag or use a different tag. the preventDefault is only required because you have an active link which also is incorrect...
Ideally you should use a or a if you want to format it like a link you can use CSS <a id="a" style="cursor:pointer; text-decoration: underline; color:00F">a</a>
You need to download and include the jqueryUI code from http://www.jqueryui.com
You need the jQueryui javascript file.
Related
I'm having trouble getting the following to work:
$('#elem').trigger('click');
When I run it, it doesn't trigger a click but it doesn't show any error logs in the console either.
I've also tried the following with no luck:
$('#elem')[0].click();
Any ideas as to what could be going wrong or a solution for this?
Update: Jquery is working and when I inspect the element, #elem does appear (it's an id for a button)
HTML:
<a:button id="elem">My Button</Button>
JQuery:
P.when('A', 'jQuery').execute(function (A, $) {
//when this function is called, it should trigger a button click
triggerButtonClick = function() {
$('#elem').trigger('click');
};
});
Try it in document.ready function, then all dom loads when the document is ready.You can do something like this based on your requirement.
$( document ).ready(function() {
$('#radio').click(function(){
$('#elem')[0].click();
})
});
i have tried this code and it works
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("chk1").click(function(){
$('#usr').trigger('click');
});
});
</script>
</head>
<body>
<form action="sample.php">
<button id="chk1">click</button>
<input class="form-control" type="submit" id="usr">
</form>
</body>
</html>
this code works for me:
$(window).load(function() {
$('#menu_toggle').trigger('click');
});
$(document).ready(function () {
$('#elem').click(function () {
alert('clicked');
$(this).css('color', 'red');
});
$('#elem').trigger('click');
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<body>
<div id="elem" >test</div>
</body>
</html>
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 Just can't find the answer to this.
I have a div in my webpage, above on a different layer. I simply want to have a button or tag inside this div which will hide it. I have tried:
<html>
<head>
<script language="javascript">
myFunction()
{
document.getElementById("corporate_background").setAttribute("style", "display:none;");
}
</script>
</head>
<body>
<p>aajhahaksha</p>
<div id="corporate_background">
Close
<P>content...</P>
</div>
</body>
Could someone please show me where I have gone wrong.
Do this:
<html>
<head>
<script language="javascript">
function myFunction()
{
document.getElementById("corporate_background").setAttribute("style", "display:none;");
}
</script>
</head>
<body>
<p>aajhahaksha</p>
<div id="corporate_background">
Close
<P>content...</P>
</div>
</body>
This is just because you didn't define myFunction() as a function .
Next time, open your debugger with F12, and see what it is saying... !
You missed out declaring your function at the beginning
myFunction()
{
document.getElementById("corporate_background").setAttribute("style", "display:none;");
}
You should declare using the keyword function.
function myFunction()
{
document.getElementById("corporate_background").setAttribute("style", "display:none;");
}
You should probably use an event listener on your anchor also instead of using inline javascript. No harm just best practice.
Try this:
<html>
<head>
<script language="javascript">
function myFunction()
{
document.getElementById("corporate_background").style.display='none';
}
</script>
</head>
<body>
<p>aajhahaksha</p>
<div id="corporate_background">
Close
<P>content...</P>
</div>
</body>
</html>
I think what you wanna do is hide the content, so you can hide content like this,
Make the button ;
<button id="btn" name="button">Hide content</button>
By clicking the button it wil hide the div corporate_background
<script>
$(document).ready(function () {
$('#btn').click(function () {
$('#corporate_background').hide();
});
});
</script>
Sample code:
<html>
<head>
.....
</head>
<body>
<div id="content">
<form>
....
<input type="submit" onclick="loadAnotherPage()"/>
</form>
</div>
</body>
</html>
I want to load another page say edit_profile.php in the content div. How can it be achieved without refreshing the page?
I tried to use jQuery load() method. But looks like I missed something. Any help would be highly appreciated.
When you click submit button it's submit form and page refresh that's why its not working.
Instead of type submit set button and then set function onclick.
function loadAnotherPage(){
$("#content").load('edit_profile.php');
}
$(document).ready(
function() {
$('#load_file').click(
$.post('edit_profile.php',
{},
function(data){
$("#content").html(data);
},''
)
);
}
);
Try this
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<div id="content"></div>
<button id="loadpage">load new page</button>
<script>
$(document).ready(function () {
$("#loadpage").click(function() {
$.get("edit_profile.php", function(response){
$("#content").html(response);
});
})
});
</script>
</body>
</html>