On button click the button do different task(HTML) - javascript

Now in my page i setup a dynamic grid boxes are there and in each boxes a button is there.. my motive is onclick o the button every button perform a different task but in my code every button perform the similar task.
and the second thing is that how can i generate the dynamic id of buttons
now here my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Digital Menu</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="style1.css">
<title>Page Title</title>
</head>
<body>
<div class="banner">
<div class="header">
<div class="header-inner container clear">
<a class="logo" href="#"><span class="sr">Lambda Logo</span></a>
<div class="navigation">
<ul class="navigation-menu">
<li class="navigation-item">New Orders
</li>
<li class="navigation-item">Open Orders
</li>
<li class="navigation-item"><a href="#complete_orders">Complete
Orders</a></li>
</ul>
</div>
<ul>
<h1>open orders</h1>
</ul>
</div>
</div>
<?php
include("connect.php");
$query="SELECT * FROM `orders`";
$filter_Result=mysqli_query($con,$query);
while($row = mysqli_fetch_array($filter_Result)){
echo "<div class='block'>";
echo "<div class='boxed'>";
echo "<div id='container'>";
echo "<td>" . $row['id'] . "</td>" ."<br>";
echo "<td>" . $row['status'] . "</td>"."<br>";
echo "<td>" . $row['created_date'] . "</td>"."<br>";
echo "<td>" . $row['uid'] . "</td>"."<br>"."<br>"."<br>"."<br>";
echo "<button class='button' style='vertical-align:middle' id='demo'
onclick='myFunction()'><span>click Me</span>";
echo "</button>";
echo "</div>";
echo "</div>";
echo "</div>";
}
?>
<script type="text/javascript">
function myFunction() {
document.getElementById('demo').innerHTML = 'Hello World';
}
</script>
</div>
</body>
</html>

You should pass unique value with your ID and function parameter. Refer this code. This will set unique ID for each button and carries that unique id as parameter in the function. So the function will display the message 'Hello World' with the ID.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Digital Menu</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="style1.css">
<title>Page Title</title>
</head>
<body>
<div class="banner">
<div class="header">
<div class="header-inner container clear">
<a class="logo" href="#"><span class="sr">Lambda Logo</span></a>
<div class="navigation">
<ul class="navigation-menu">
<li class="navigation-item">New Orders</li>
<li class="navigation-item">Open Orders</li>
<li class="navigation-item">Complete Orders</li>
</ul>
</div>
<ul><h1>open orders</h1></ul>
</div>
</div>
<?php
include("connect.php");
$query="SELECT * FROM `orders`";
$filter_Result=mysqli_query($con,$query);
$div = '';
while($row = mysqli_fetch_array($filter_Result)){
$div .= "<div class='block'><div class='boxed'><div id='container'>";
$div .= "<td>" . $row['id'] . "</td>" ."<br>";
$div .= "<td>" . $row['status'] . "</td>"."<br>";
$div .= "<td>" . $row['created_date'] . "</td>"."<br>";
$div .= "<td>" . $row['uid'] . "</td>"."<br>"."<br>"."<br>"."<br>";
$div .= "<button class='button' style='vertical-align:middle' id='demo" . $row['id'] . "' onclick='myFunction(\"" . $row['id'] . "\")'><span>click Me</span>";
$div .= "</button></div></div></div>";
}
echo $div;
?>
<script type="text/javascript">
function myFunction(id) {
document.getElementById('demo').innerHTML = 'Hello World' + id;
}
</script>
</div>
</body>
</html>
Now, if you want to perform different action for each button, then you can write the corresponding action using if or switch condition in the function.
For eg :
function myFunction(id) {
if( id == 1 ) {
document.getElementById('demo').innerHTML = 'First Button clicked';
} else if( id == 1 ) {
document.getElementById('demo').innerHTML = 'Second Button clicked';
}
}

Related

How to pass onclick="function(name)" in </a> tag and then fetch value by name from javascript?

<?php
$currency = file_get_contents('https://api.pro.coinbase.com/currencies');
$result = json_decode($currency);
$totalCurrency = array();
foreach($result as $key){
if($key->details->type == 'crypto'){
array_push($totalCurrency, $key);
}
}
?>
<!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.0">
<title>Aditya Dev ~~ Coinbase Deposit By PHP</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class="main">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<?php foreach($totalCurrency as $key): ?>
<li><a class="dropdown-item" href="#"><?= $key->id; ?></a></li>
<?php endforeach; ?>
</ul>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="index.js"></script>
</body>
</html>
In the PHP I fetch all crypto coin symbols from API and store it Here in this line $totalCurrency = array(); and then I run a loop to create a dropdown list like this
I want that if I click any currency from there javascript send an alert like this alert(symbol)
I am quite confused about how to do this, it's not a button its tag, please help me

How can I set PHP cookie with JavaScript in CodeIgniter

I want to set a PHP cookie through a button click event of JavaScript how can I achieve this. Is there any big minds can help me.
<script>
function openC(){
<?php setcookie('z', 'on', time() + (86000), "/" ); ?>
oopen();
}
</script>
<div class="row">
<div class="col-12 p-rel">
<button type="button" onclick="openC()" id="opner" class="btn hide btn-dark "><i
class="fa fa-bars"></i></button>
</div>
</div>
above is my code if I try to echo my cookie in another page like my header page I get nothing
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--Favicon-->
<link rel="icon" href="<?= base_url() ?>assets/new_assets/images/favicon.png" type="image/gif" sizes="16x16">
<link href="<?= base_url() ?>assets/new_assets/css/style.css" rel="stylesheet" type="text/css"/>
<!--Site Title-->
<title><?php echo!empty($title) ? $title : ""; ?></title>
<p> <?php echo $_COOKIE["z"]; ?></p>
</head>
<script type="text/javascript">
var url = "<?php echo base_url(); ?>";
</script>

JavaScript not gathering post information in added .php file

I'm working on my first page for my exam and i must use the undersceleton theme.
I have created a custom .php file but the code won't work, the javascript doesn't seem to pick up the post information from WP. If i use the same code on the index.php it works just fine.
According to what information i managed to gather i must call in the added .php for the header and footer, which i did and it still doesn't work. The header with the nav bar and footer are loading perfectly but the posts won't.
I also tried to copy the content from the page.php or content.php nothing seems to work.
Any ideas?
<!DOCTYPE html>
<?php /* Template Name: ekszerek */ ?>
<?php get_header(); ?>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link href="https://fonts.googleapis.com/css?family=Domine:400,700|Roboto" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<div class"container">
<div class="row">
<div class="col-sm-4 col-md-4 grid_ss">
<?php /* Variable for row creation */
$startRow = true;
$postCounter = 0; ?>
<?php /* Loop start*/ if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php if ($startRow) {
echo '<!-- START OF INTERNAL ROW --><div class="row">';
$startRow = false; } ?>
<?php $postCounter += 1; ?>
<div class="col-sm-4">
<div class="paper">
<div class="poster" >
<?php if ( has_post_thumbnail() ) : ?>
<a class="img_thumb" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php the_post_thumbnail( 380, 288 ); ?>
</a>
<?php endif; ?>
</div>
<div class="posted_on">
<?php underskeleton_posted_on(); ?>
</div>
<h1 class="paper_h1">
<?php if ( is_single() ) { the_title( '<h1 class="entry-title">', '</h1>' );
} else {
the_title( '<h2 class="entry-title">', '</h2>' );
} if ( 'post' === get_post_type() ) : ?>
<?php endif; ?>
</h1>
<hr/> <!-- Text separator -->
<div class="paper_p">
<?php echo get_excerpt(); ?>
</div>
<a class="btn" href=(<?php the_permalink(); ?>)>Megnyit</a>
<div class="space"></div>
<h2 class="paper_h2">
<!-- .entry-meta -->
</h2>
</div>
</div>
<?php /* Check if counter hits 3, if yes start new row */
if ( 3 === $postCounter ) {
echo '</div><!-- end of row -->';
$startRow = true;
$postCounter = 0; } ?>
<?php /* End of the loop */ endwhile; ?>
<?php /* If you are returning an odd number of posts (i.e., anything other than a multiple of 3), we will need to close the row div.*/
if ($postCounter !== 0 ) { echo '</div><!-- end of row -->'; } ?>
<?php else: ?>
<div class="page-header"><h1>Uh Oh!</h1></div>
<p>Sorry, for some reason the contents of this page isn't displaying.</p>
<?php endif; ?>
</div>
</div>
<?php
get_footer();

Boostrap dropdown not working

I'm trying to get the bootstrap dropdown work. The same code works perfectly when executed in standalone manner, however when I integrate it with my existing code, it doesn't work. The button displays, but doesn't dropdown!
The files required for bootstrap and jquery are installed locally, not using CDN.
this.renderLaunchJobs = function( data ) {
var allData = myModel.getMetaData();
workingJobData = {};
backupJobData = {};
var html = '<table style="width:70%"';
html += '<tr>';
html += '<td> Build # </td>';
html += ' <td> <input type="text" name="firstname" style="width:50%;"> </td>';
html += '<td> </td>'
html += '<td> <input type="radio" name="group" id="production" checked>';
html += '<label for="production"> Production</label> </td>';
html += '<td> <input type="radio" name="group" id="private">';
html += '<label for="private">Private</label> </td>';
html += '</tr>';
//adding transfer method
html += '<tr>';
html += '<td> Transfer method </td>';
html += '<td>';
html += myUtils.getDropDownBox("transfermethod_id","width:50%;", workingSubJobData.transfermethod_id, allData['transfermethods'], "id", "nickname" );
html += '</td>';
html += '</tr>';
//adding nested dropdown
html += '<tr>';
html += '<td>';
html += '<div class="container">';
// html += ' <h2>Multi-Level Dropdowns</h2>';
// html += ' <!--<p>In this example, we use jQuery to open multi-level dropdowns on click (see script section below).</p>-->';
html += ' <div class="dropdown">';
html += ' <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials';
html += ' <span class="caret"></span></button>';
html += ' <ul class="dropdown-menu">';
html += ' <li><a tabindex="-1" href="#">HTML</a></li>';
html += ' <li><a tabindex="-1" href="#">CSS</a></li>';
html += ' <li>';
html += ' <a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>';
html += ' <ul class="dropdown-menu">';
html += ' <li><a tabindex="-1" href="#">2nd level dropdown</a></li>';
html += ' <li><a tabindex="-1" href="#">2nd level dropdown</a></li>';
html += ' <li>';
html += ' <a class="test" href="#">Another dropdown <span class="caret"></span></a>';
html += ' <ul class="dropdown-menu">';
html += ' <li>3rd level dropdown</li>';
html += ' <li>3rd level dropdown</li>';
html += ' </ul>';
html += ' </li>';
html += ' </ul>';
html += ' </li>';
html += ' </ul>';
html += ' </div>';
html += '</div>';
html += '</td>';
html += '</tr>';
html += '</table>';
var jobs = data;
if( jobs.length == 0 ) {
html += " <br> <font color='red' size='3'> <strong> No Jobs found to Launch. Please add a Job profile. </strong> </font> <br>";
} else {
html += '<br> <br> <br>';
html += myJobs.getJobsHtmlTable( jobs, allData );
}
$('#page_holder').html( html );
$('.tree2').treegrid({
expanderExpandedClass: 'icon-minus-sign',
expanderCollapsedClass: 'icon-plus-sign',
initialState: 'collapsed'
});
}
Index.html file
<!DOCTYPE html>
<html lang="en" class=" js no-touch rgba hsla backgroundsize cssanimations csstransforms csstransforms3d csstransitions fontface generatedcontent svg inlinesvg svgclippaths boxsizing lastchild js no-touch rgba hsla backgroundsize cssanimations csstransforms csstransforms3d csstransitions fontface generatedcontent svg inlinesvg svgclippaths boxsizing lastchild js no-touch rgba hsla backgroundsize cssanimations csstransforms csstransforms3d csstransitions fontface generatedcontent svg inlinesvg svgclippaths boxsizing lastchild">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=IE7">
<title>A Bootstrap Project</title>
<!-- bootbox -->
<!--
<script src="js/bootbox/bootstrap.min.js"></script>
<script src="js/bootbox/bootbox.min.js"></script>
-->
<link href="treegrid/bootstrap-2.3.2/css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="js/bootbox/bootstrap.min.css">
<!--Favicon -->
<link rel="shortcut icon" href="favicon.ico">
<!-- Style -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/navigation.css">
<link rel="stylesheet" href="css/customize.css">
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="stylesheets/ie_lt9.css" />
<![endif]-->
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="css/ie_not.css">
<!--<![endif]-->
<script src="js/jquery.min.js"></script>
<script src="js/modernizr.custom.js"></script>
<script src="js/modernizr.js"></script>
<script src="js/highlight.pack.js"></script> <!-- syntax highlighting -->
<script src="js/fastclick.js"></script> <!-- remove 300ms delay on tap -->
<script src="js/pagify.js"></script><!-- dynamic page loading -->
<script src="js/jquery.ba-hashchange.min.js"></script> <!-- monitor hashchanges -->
<script src="js/jquery.tooltipster.min.js"></script> <!-- tooltips -->
<script src="js/jquery-ui.widget.min.js"></script> <!-- for selective tables -->
<script src="js/select2.js"></script> <!-- select2 -->
<script src="js/scripts.js"></script> <!-- all custom scripts -->
<script src="js/screenshot.js"></script> <!-- all custom scripts -->
<script src="js/utils.js"> </script>
<script src="js/model.js"> </script>
<script src="js/render.js"> </script>
<script src="js/reports.js"> </script>
<script src="js/comments.js"> </script>
<script src="js/settings.js"> </script>
<script src="js/jobs.js"> </script>
<!-- auto complete -->
<script src="js/autocomplete/jquery-1.7.1.min.js"></script>
<script src="js/autocomplete/jquery.ui.core.min.js"></script>
<script src="js/autocomplete/jquery.ui.widget.min.js"></script>
<script src="js/autocomplete/jquery.ui.position.min.js"></script>
<script src="js/autocomplete/jquery.ui.autocomplete.min.js"></script>
<link rel="stylesheet" href="js/autocomplete/jquery-ui-1.8.16.custom.css"/>
<!-- date Picker -->
<!-- <script src="datepicker/jquery.min.js"></script> -->
<script src="datepicker/jquery.plugin.js"></script>
<script src="datepicker/jquery.datepick.js"></script>
<link rel="stylesheet" href="datepicker/jquery.datepick.css">
<!-- Boot Box -->
<script src="js/bootbox/bootstrap.min.js"></script>
<script src="js/bootbox/bootbox.min.js"></script>
<!--- Tree Grid -->
<link rel="stylesheet" href="treegrid/css/jquery.treegrid.css">
<script type="text/javascript" src="treegrid/js/jquery.treegrid.js"></script>
<script type="text/javascript" src="treegrid/js/jquery.treegrid.bootstrap2.js"></script>
<!--
<link rel="stylesheet" href="js/bootbox/bootstrap.min.css">
-->
<!--
<link rel="stylesheet" href="datepicker/jquery-ui.css">
<script src="datepicker/jquery-1.10.2.js"></script>
<script src="datepicker/jquery-ui.js"></script>
-->
<!--
<link rel="stylesheet" href="datepicker/style.css">
-->
<link href="fileupload/uploadfile.min.css" rel="stylesheet">
<script src="fileupload/jquery.uploadfile.min.js"></script>
<script type="text/javascript" >
$(document).click(function() {
$("#globalwarningdiv").removeClass("visible");
$("#globalinfodiv").removeClass("visible");
});
$(document).keypress(function(e) {
$("#globalwarningdiv").removeClass("visible");
$("#globalinfodiv").removeClass("visible");
});
$("#globalwarningdiv").click(function(e) {
e.stopPropagation();
});
$("#globalinfodiv").click(function(e) {
e.stopPropagation();
});
$(document).ready( function() {
myModel.getAllData();
});
</script>
</head>
<body>
<div class="content_wrapper">
<div class="logo"><img src="images/logo.png"></div>
<div id='login-menu' style='display:block;' >
<!--
<div class="mobile_menu_toggle"><a class="icon_arrow_down" href="#">Menu</a></div>
<ul class="sidenav">
<li class="" id="menu-login"> Log-in </li>
</ul>
-->
</div>
<!--
<div id='logout-menu' style='display:none;' >
<div class="mobile_menu_toggle"><a class="icon_arrow_down" href="#">Menu</a></div>
<ul class="sidenav">
<li class="" id="menu-login"> Log-in </li>
</ul>
</div>
-->
</div>
<div class="content" style="display:block;">
<div id="page_holder" style="display: block;">
<h3> Welcome. </h3>
<!-- <script src="js/components.js"></script> -->
</div>
</div>
</div>
</div>
</body>
</html>
I have checked to make sure there is no problem with dependencies. Bootstrap and jquery are perfectly loaded into the page. Other bootstrap components except dropdown works well.
What am I missing? :(

How to show title on popup on dialog box

<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$("#orderdetail1<?php echo $OrdersRows['ID'];?>").click(function(e){
e.preventDefault();
modalbox(this.href,this.title,550,800);
});
</script>
</head>
<body>
<div> <a id="orderdetail1<?php echo $OrdersRows['ID'];?>" href="<?php echo SITE_ADDRESS."ecommerce/orders/OrderListEdit.php"?>?id=<?php echo $OrdersRows['ID'];?>&Task=configration" title="<?php echo $OrdersRows['CompanyName']." - ".$OrdersRows['FirstName']." ".$OrdersRows['Surname']." - ".$OrdersRows['Phone'];?>"> <img src="../../images/icon_settings.png" border="0" title="<?php echo $OrdersRows['CompanyName']." - ".$OrdersRows['FirstName']." ".$OrdersRows['Surname']."'s Order Detail ";?>"/></a></div>
</body>
How to get title using this code. A dialog box is opening using this code but title is not showing

Categories