i am trying to to get div with onclick event on li but it dosen't work so give useful answer.
my code is as follows:
<script>
function myFunction(){
var x=document.get.ElementById('demo'){
if(x.style.display==='none'){
x.style.display='block';
}
else{
x.style.display='none';
}
}
</script>
html part is as follows
<ul>
<li onclick="myFunction()"> THIS IS DEMO</li>
</ul>
<div class="demo"></div>
Try this:
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<script>
function myFunction(){
var x=document.getElementsByClassName('demo')[0];
if(x.style.display==='none'){
x.style.display='block';
}else{
x.style.display='none';
}
}
</script>
</head>
<body>
<ul>
<li onclick="myFunction()"> THIS IS DEMO</li>
</ul>
<div class="demo">Demo</div>
</body>
</html>
You had to use "getElementsByClassName", not "getElementById". When you get element by className, it returns an array, so you have to add [0] at the end.
Related
I have a file, which needs to have 90 modals with lots of long texts, because I need to create a modal when a link is clicked.
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="inc/bootstrap.css" rel="stylesheet">
<script src="inc/jquery.min.js"></script>
<script src="inc/bootstrap.min.js"></script>
</head>
<body>
<script>
$(function(){
$('a').click(function(){
var link = $('#name').html(); // I need sent this to my calculator file
$.ajax({
url : "result.php",
type : "post",
dataType:"text",
data : {
name: link
},
success : function (a){
$('#result').html(a);
}
});
});
});
</script>
<div id="result"></div>
I need this text for php script
</body>
</html>
resuilt.php
/* I used PHP becase i need more functions, this only a example how
* to creat and call a modal after click on a link.
*/
function create_modal($modal_ID = 'myModal')
{
return "<div class='modal fade' id='$modal_ID' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'>
<div class='modal-dialog'>
<div class='modal-content'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal'><span aria-hidden='true'>×</span><span class='sr-only'>Close</span></button>
<h4 class='modal-title' id='myModalLabel'>Nhãn</h4>
</div>
<div class='modal-body'>
Nội dung
</div>
<div class='modal-footer'>
<button type='button' class='btn btn-default' data-dismiss='modal'>Close</button>
<button type='button' class='btn btn-primary'>Save changes</button>
</div>
</div>
</div>
</div>";
}
echo create_modal();
?>
The result is, I need to click on the link two times to show my modal. But it can't close or does anything.
Where did it go wrong? And is there any way to make my idea better?
you can add
success : function (a){
$('#result').html(a);
$('#myModal').modal('show');
}
just add $('#myModal').modal('show'); when ajax load your modal in #result
I don't think 90 modals is a good idea.
Try saving data maybe in a databas.
Assign your links different ids.
Use jquery to listen to click events
Get data from your server
Populate modal with values from the server.
Check this stack overflow link.
Let me know if you need help
My view (template) #extends on first line:
#extends('layout')
#section('content')
<p>This is my body content.</p>
#stop
My layout :
<!DOCTYPE html>
<html>
<head>
<title>Hello!!!</title>
</head>
<body>
<div>
#yield('content')
</div>
</body>
</html>
If load page header (Status Code:500 Internal Server Error)
Its better if you turn on debugging and post the error log along..
And this should work usually..and make sure your blade files are on root of views folder .
index.blade.php
#extends('layout')
#section('content')
<p>This is my body content.</p>
#endsection
layout.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Hello!!!</title>
</head>
<body>
<div>
#yield('content')
</div>
</body>
</html>
--Use this on Routes--
Route::get('/', function () {
return view('index');
});
I tried to write an AJAX-type form with Twitter Bootstrap, but the updated div element disappears. Can I fix that?
<!DOCTYPE html>
<html>
<head><link href="bootstrap.min.css" rel="stylesheet" media="screen"></head>
<script>
function wordCloud(){document.getElementById("cloud").innerHTML = "WordCloud";}
</script>
<body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="bootstrap.min.js"></script>
<div id="cloud"></div>
<form onsubmit="wordCloud()">
<fieldset>
<button type="submit" class="btn">Submit</button>
</fieldset>
</form></body>
</html>
Change as follows.
function wordCloud(){document.getElementById("cloud").innerHTML = "WordCloud";}
replace
function wordCloud(){document.getElementById("cloud").innerHTML = "WordCloud"; return false; }
and
<form onsubmit="wordCloud()">
replace
<form onsubmit="return wordCloud()">
I have a web page on which I use jQuery's AJAX to load new elements into a div. This part of my page works fine.
I now want to add a similar event to these newly-added elements. To do this I planned to use jQuery's .live() method but nothing appears to happen.
So I initially start with this
<div id="change-agent-list" class="tooltip">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
Into .middle I asynchronously load markup that looks like this:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
</head>
<body>
<form name="main" method="post" action="/ils/agent-selector/" id="main">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTQ1MTc3ODM4NGRkg9mLyLiGNVcP/ppO9C/IbwpxdwI=" />
</div>
<ul id="content_0_agentsUL">
<li>
Agent 1
</li>
<li>
Agent 2
</li>
<li>
Agent 3
</li>
</ul>
<div id="agent-details"></div>
</form>
</body>
</html>
When the page initially loads I use this script - my intention is to add a click handler for each of the .agent-name elements that are asynchronously added later.
$j(document).ready(function () {
$j(".agent-name").live("click", function() {
var agentDetails = $j(".agent-details");
var loadingContent = '<div id="ajax-load"><img src="/sitecore/__/_images/global/ajax-load.gif" alt="AJAX content loading" /></div>';
agentDetails.show();
agentDetails.empty().html(loadingContent);
var modalURL = $j(".agent-name").attr("href");
agentDetails.load(modalURL);*/
return false;
});
});
The problem is that no events are being bound to the .agent-name elements. I've tried replacing all the inner script with a simple alert() so that I can see if any events are being bound to the .agent-name elements, and I can't get this alert() to display.
So in other words, no events are being bound to my .agent-name elements.
Even if I move the agent-name class to the list elements and change the jQuery to simply
$j(".agent-name").live("click", function() {
alert('1');
});
I still get nothing when I click on the elements.
Can anyone explain why, or how I fix this so that I can late-bind events to elements created in an AJAX callback?
I eventually solved this by using jQuery's on instead of "live".
You can only have one #agent-name because IDs are unique. You can just use $('#agents .link') since you already have a class on each anchor.
Not sure if this is helpful, but this works for me:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".agent-name").live("click", function() {
alert("click");
return false;
});
});
</script>
</head>
<body>
<form name="main" method="post" action="/ils/agent-selector/" id="main">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTQ1MTc3ODM4NGRkg9mLyLiGNVcP/ppO9C/IbwpxdwI=" />
</div>
<ul id="content_0_agentsUL">
<li>
Agent 1
</li>
<li>
Agent 2
</li>
<li>
Agent 3
</li>
</ul>
<div id="agent-details"></div>
</form>
</body>
</html>
Why doesn't this simply jQuery ajax code not load pull.php into the div with id of #alert?
...
<script src="jquery.js"></script>
<script>
$(document).ready(function() {
$(".pull_button").click(function() {
$("#alert").load("pull.php");
});
});
</script>
</head>
<body>
<div id="#alert"></div>
<nav>
<a class="pull_button">Pull Data</a>
</nav>
...
Take the # out of <div id="#alert">.
<div id="alert"> -> $('#alert')
<div class="alert"> -> $('.alert')