Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
Ok, I'm at my wits end here. I'm making a website for a friend, to showcase his work. Each piece has it's own page. On those pages, we have a link
<a class="btn" href="../contact_2.html">Contact us about this item</a>
that takes us to the contact form page, where the user is expected to fill income details before getting in touch. What we want to do is have the 'subject' field filled with the name of the subject of the page the link was clicked form. i.e. you're on (../port_pages/38mmspruce.html), you click the "contact us about" link, and when you get to the page "contact.html", the subject field already has "38mmSpruce" populated.
As it stands, the form functions perfectly - the $_POST method is in use, and it sends the form as it should. However, trying to get the subject field to populate is driving me round the bend. The closest I got was with this html:
<label for="subject">Subject *</label>
<input id="subject" type="text" name="subject" class="form-control"
placeholder="Please enter the subject you'd like to discuss *"
value="<? php echo $_POST='subject'?>"
rows="1" required="required">
which fills the subject field with:
<? php echo $_POST='subject' ?>
rather than the ACTUAL subject. I've tried this also where I've changed every occurrence of $_POST to $_GET, but it returns the same result. If I change the anchor to:
<a class="btn" href="../contact.php">Contact us about this item</a>
It fires an email off without loading the form page. I've tried adding query strings to the anchor too, but they don't return any data. I know this must be really simple but I've been banging my head against it for nearly a week now, and despite trying to research every possible variation on this question, I can't find the right answer. Here is the code for the relevant pages:
contact.php
<?php
$from = 'Demo contact form <example#example.com>';
$sendTo = 'Demo contact form <example#example.com>';
$subject = $_POST['subject'];
$fields = array('name' => 'Name', 'email' => 'Email', 'subject' =>
'Subject', 'message' => 'Message');
$okMessage = 'Contact form succesfully submitted. Thank you, I will get
back to you soon!';
$errorMessage = 'There was an error while submitting the form. Please
try again later';
try
{
$emailText = "You have new message from contact
form\n=============================\n";
foreach ($_POST as $key => $value) {
if (isset($fields[$key])) {
$emailText .= "$fields[$key]: $value\n";
}
}
mail($sendTo, $subject, $emailText, "From: " . $from);
$responseArray = array('type' => 'success', 'message' => $okMessage);
}
catch (\Exception $e)
{
$responseArray = array('type' => 'danger', 'message' => $errorMessage);
}
if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) &&
strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
$encoded = json_encode($responseArray);
header('Content-Type: application/json');
echo $encoded;
}
else {
echo $responseArray['message'];
}
?>
conatact.js
$(function () {
$("#contact-form").submit(function () {
var url = "contact.php";
$.ajax({
type: "POST",
url: url,
data: $(this).serialize(),
success: function (data)
{
var messageAlert = 'alert-' + data.type;
var messageText = data.message;
var alertBox = '<div class="alert ' + messageAlert + '
alert-dismissable"><button type="button" class="close" data-
dismiss="alert" aria-hidden="true">×</button>' + messageText +
'</div>';
if (messageAlert && messageText) {
$('#contact-form').find('.messages').html(alertBox);
$('#contact-form')[0].reset();
}
}
});
return false;
});
});
And finally, the form part of the html (edit. full page posted as requested)
<body>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-
toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Those That
Know</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-
collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
Home
</li>
<li>
About
</li>
<li>
Portfolio
</li>
<li class="active">
Contact
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
</nav>
<!-- Page Content -->
<div class="container">
<!-- Page Heading/Breadcrumbs -->
<div class="row">
<div class="col-lg-12 text-left">
<h1 class="page-header">Contact
<small>Get in touch</small>
</h1>
<ol class="breadcrumb">
<li>Home
</li>
<li class="active">Contact</li>
</ol>
</div>
</div>
<!-- /.row -->
<!-- Content Row -->
<!-- Map Column -->
<!-- Contact Details Column -->
<div class="row">
<div class="col-md-6">
<img class="img-responsive" src="images/About Main Pic.png"
alt="">
</div>
<div class="col-md-6">
<h2>Contact Details</h2>
<h2>Those That Know HQ<br>Wallsend-on-Tyne<br>
</h2>
<p><i class="fa fa-envelope-o"></i>
<abbr title="Email">E</abbr>: example#example.com
</p>
<p><i class="fa fa-clock-o"></i>
<abbr title="Hours">H</abbr>: Open 24 hours</p>
<ul class="list-unstyled list-inline list-social-icons">
<li>
<a class="btn btn-social-icon btn-facebook"
href="#"><i class="fa fa-
facebook-square fa-2x"></i></a>
</li>
<li>
<a class="btn btn-social-icon btn-envelope"><i
class="fa fa-envelope-square fa-2x"></i></a>
</li>
<li>
<a class="btn btn-social-icon-large btn-instagram"
href="#"><i class="fa fa-instagram fa-2x"></i></a>
</li>
<button onclick="goBack()">Back</button>
</div>
</div>
</ul>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Get in touch with <a href="contact_2.html">Those
That Know</a></h1>
<p class="lead">If you'd like to contact me about
placing an order, or about anything you've seen on the site, please
fill in the form below.</p>
<p>Please include information about the piece you've
been looking at. It'll help us to get started on your order.</p>
<form id="contact-form" method="post"
action="contact.php" name="contact-form" role="form">
<div class="messages"></div>
<div class="controls">
<div class="row">
<div class="col-md-6">
<label for="form_name">Name *</label>
<input id="form_name" type="text"
name="name" class="form-control" placeholder="Please enter your name
*" required="required">
</div>
<div class="col-md-6">
<label for="form_email">Email *</label>
<input id="form_email" type="email"
name="email" class="form-control" placeholder="Please enter your email
*" required="required">
</div>
<div class="col-md-12">
<label for="form_subject">Subject *
</label>
<input id="form_subject" type="text"
name="subject" class="form-control" placeholder="Please enter the
subject you'd like to discuss *"
value="<? php echo $_POST['subject'];?
>"
rows="1" required="required">
</div>
<div class="col-md-12">
<label for="form_message">Message *
</label>
<textarea id="form_message"
name="message" class="form-control" placeholder="Your message here *"
rows="4" required="required"></textarea>
</div>
<div class="col-md-12">
<input type="submit" class="btn btn-
success btn-send" value="Send message">
</div>
<div class="col-md-12">
<p class="text-muted"><strong>*
</strong> These fields are required.</p>
</div>
</div>
</div>
</form>
</div><!-- /.8 -->
</div> <!-- /.row-->
<!-- /.container-->
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © Those That Know 2016</p>
</div>
</div>
</footer>
<script>
function goBack() {
window.history.back();
}
</script>
<script src="https://code.jquery.com/jquery-1.12.0.min.js">
</script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/
bootstrap.min.js">
</script>
<script src="js/contact.js"></script>
</body>
</html>
As you can see, it's a Bootstrap form, and the .js and .php files came with it. I've changed the mail settings to real ones for testing to make sure it works, which it does, but I simply cannot figure out how to make the php 'echo' the subject from a page into the relevant field in the form. I've also removed all of my attempts at adding query strings after the page name in the link because I couldn't make any of them work. I really need a straight up answer to this puzzler-this is the 3rd time I've asked on here, and nothing is working. I think it's obvious that I have very weak skills, but I'm working on them and fixing this problem would really help me to move on to a new set of problems.
Your help is gratefully appreciated in advance.
Rename your contact_2.html to contact_2.php so it gets parsed by the PHP interpreter.
Change the href in
<a class="btn" href="../contact_2.html">Contact us about this item</a>
accordingly.
Finally replace your <? php echo $_POST='subject' ? > to
<?php if (!empty($_POST['subject'])) echo $_POST['subject']; ?>
like #manniL said.
Instead of echo $_POST='subject', use the correct syntax here:
echo $_POST['subject'];
Related
Someone can help me please with this code? I would add multiple images but I can't figure it out.
I tried the multiple command but it doesn't worked, I have no clue honestly.
HTML code:
<form action="<?= $_SERVER['PHP_SELF']; ?>" method="POST" enctype="multipart/form-data" data-abide>
<div class="photo-field">
<input type="file" name="file_img" pattern="^.+?\.(jpg|JPG|png|PNG|jpeg|JPEG)$" required>
<small class="error">Upload JPG or PNG only.</small>
</div>
<div class="title-field">
<input type="text" name="img_title" placeholder="Image title" required>
<small class="error">Image title is required.</small>
</div>
<input type="submit" value="Upload Image" name="btn_upload" class="button">
</form>
PHP code:
<li>Add Photo</li>
<li class="divider"></li>
</ul>
</section>
</nav>
<br/>
<!--Content goes here-->
<div class="row">
<div class="large-12 columns">
<?php
if(isset($_GET['success'])) {
if($_GET['success']=="yes"){?>
<div class="row">
<div class="small-6 large-6 columns">
<div data-alert class="alert-box success radius ">
Image "<?= $_GET['title']; ?>" uploaded successfully.
×
</div>
</div>
</div>
<?php } else {?>
<div class="row">
<div class="small-6 large-6 columns">
<div data-alert class="alert-box alert radius ">
There was a problem uploading the image.
×
</div>
</div>
</div>
<?php } }?>
The problem is, that there is no loop in the processing php script.
So only one file gets uploaded.
For more info and solutions see:
Multiple file upload in php
There are three tabs on page. Input,output and review. Html form is in input tab where user enter input in text box. I want to calculate something from that input value and display it in next tab OUTPUT by clicking submit button.
I already have that file which will do the calculation with that input.
Answers are really appreciated.
<div class="container tabs-wrap">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
Input
</li>
<li>
Output
</li>
<li>
Review & Email
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="input">
<h2>Web based two tier ground mount bill of material generator</h2>
<form class="form-horizontal" action="output.php" method="post" target="_blank">
<div class="form-group">
<label class="control-label col-sm-2" for="count">Module Count:</label>
<div class="col-sm-10">
<input type="number" class="form-control" id="count" placeholder="Enter Number of Modules" name="count">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary continue">Continue</button>
</div>
</div>
</form>
Try this,
$(function() {
$('#btnSubmit').on('click', function() {
// your code goes here
$('#outputSpan').text($('#count').val());
// not triiger output tab to be open
$('[href="#output"]').trigger('click');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container tabs-wrap">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
Input
</li>
<li>
Output
</li>
<li>
Review & Email
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="input">
<h2>Web based two tier ground mount bill of material generator</h2>
<form class="form-horizontal" action="output.php" method="post" target="_blank">
<div class="form-group">
<label class="control-label col-sm-2" for="count">Module Count:</label>
<div class="col-sm-10">
<input type="number" class="form-control" id="count" placeholder="Enter Number of Modules" name="count">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" id="btnSubmit" class="btn btn-primary continue">Continue</button>
</div>
</div>
</form>
</div>
<div role="tabpanel" class="tab-pane" id="output">
<h2>Output</h2>
<span id="outputSpan"></span>
</div>
</div>
</div>
Based on your code you should have all three tabs in one html file (not separate files). Have a look here for more info.
You could attach a function to the "continue" button that handles the calculation
$(".continue").on("click", function () {
//Handle calculation, changing tabs and writing results here
// do your calculations here
$('.nav-tabs a[href="#output"]').tab('show'); // change active tab
$( '.resultElemClass' ).text('calculationValue'); // output the result
});
One possible way to do this:
onFormSubmit(calculatedValue){
$('#output').html(calculatedValue);
}
The logic is that when you successfully submit a form, make sure that you append the calculated value to the #output, or which ever div you want to append it to.
If you are using AJAX to communicate with PHP, it would look something like this:
$.ajax({
url: "file.php",
type: "post",
data: values,
success: function (response) {
// you will get calculated value from your php page (what you echo or print)
$('#output').html(response);
}
});
Assuming the output tab is another view file, you can use export function of javascript. Like take the input process it as per your needs and then use function like:
// file1.js
export function value() {
return "Your output";
}
file1 is where you will be accepting input or processing the input
// output.js
import {hello} from 'file1'; // or './file1'
let val = value(); // val is Your output;
Make sure to put an 'if' in your output file and refresh it after a certain time interval(1 sec or so) so get the value as soon as it is available.
Please I am assigning user permission based on user type read from session data in Node.js and the hide html li elements based on the type of user. It seems to work but the behaviour it awful in the sense that. Whenever I load a page, all the menu items refresh/ loads again before they are hidden. How do I prevent this behaviour. It there something I have doing wrong or the approach is just not good. I have reference the client-side code on each page within the application
This is my code for the client side
$(document).ready(function () {
var CheckPermission = location.protocol + '//' + location.host + '/permission';
$.get(CheckPermission, function (data) {
if (data == 'Student') {
$("#Offer").find("#shareitem").show();
$("#Offer").find("#offeritem").hide();
$("#Offer").find("#returnitem").hide();
$("#Offer").find("#recallitem").hide();
$("#Offer").find("#renewitem").hide();
$("#Offer").find("#guestoffer").hide();
$("#Offer").find("#manageoffers").hide();
$("#Overview").hide();
$("#WithHolding").hide();
} else if (data == 'Admin') {
$("#Offer").find("#shareitem").hide();
$("#Discover").hide();
} else if (data == 'Teacher') {
$("#Offer").find("#shareitem").hide();
$("#Discover").hide();
} else {
$("#Offer").hide();
$("#Discover").hide();
$("#Overview").hide();
$("#WithHolding").hide();
$("#myAccount").hide();
$("#Message").hide();
}
})
});
This is my code on the server side
outer.get('/permission',function(req,res) {
if (req.user)
{
var UserType = req.user.UserType;
switch (UserType) {
case "Admin":
if ((req.isAuthenticated()) && (req.user.UserType == 'Admin')) {
res.send(UserType)
}
break;
case "Student":
if ((req.isAuthenticated()) && (req.user.UserType == 'Student')) {
res.send(UserType)
}
break;
case "Teacher":
if ((req.isAuthenticated()) && ((req.user.UserType == 'Admin') || (req.user.UserType == 'Professor'))) {
res.send(UserType)
}
break;
default :
if (req.isAuthenticated()) {
res.send(UserType)
}
}
}else{
res.send('undefined')
}
});
// This is my Navbar which contains the menus and it is called or references on each page through out the application
<script src="/javascript/ClientJs/HideMenus.js"></script>
//This my Javascript file which contains the permission instructions(client side)
<nav id="nav"class="navbar navbar-inverse navbar-fixed-top" style="z-index: 10;">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="/"><%=__('Borrowing Sys')%></a>
<div class="nav-collapse collapse" aria-expanded="true">
<ul id="menu"class="nav">
<li id="home"><%=__('Home')%></li>
<li id="Offer" class="dropdown">
<a href="/#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><%=__('Offer')%><span
class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li id="offeritem"><%=__('Offer Item')%></li>
<li id="recallitem"><%=__('Recall Item')%></li>
<li id="renewitem"><%=__('Renew Item')%></li>
<li id="returnitem"><%=__('Return Item')%></li>
<li id="odivider"class="divider"></li>
<li id="guestoffer"><%=__('Guest Offer')%></li>
<li id="shareitem"><%=__('Share Item')%></li>
<li id="manageoffers"><%=__('Manage Offers')%></li>
</ul>
</li>
<li id="Discover"class="dropdown">
<%=__('Discover Items')%><span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li><%=__('Discovery Map')%></li>
<li><%=__('Send a Request')%></li>
<li><%=__('Available Items')%>
</li>
</ul>
</li>
<li id="Message" class="dropdown">
<a href="/#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><%=__('Messages')%><span
class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><%=__('Private Messages')%></li>
</ul>
</li>
<li id="Overview"class="dropdown">
<a href="/#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><%=__('System Overview')%><span
class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><%=__('Data Analysis')%></li>
<li><%=__('User Activity Logs')%></li>
<li class="divider"></li>
<li><%=__('Remove Offers')%></li>
<li><%=__('Students Request')%></li>
</ul>
</li>
<li id="myAccount" class="dropdown">
<%=__('My Account')%><span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li id="youroffers"><%=__('Your Offers')%></li>
<li id="reservations"><%=__('Reservations')%></li>
<li id="divider"class="divider"></li>
<li id="profile"><%=__('My Profile')%></li>
<li id="invite"><%=__('Invite Friend')%></li>
<li ><%=__('Log out')%></li>
</ul>
</li>
</ul>
<!-- add search form -->
<div id="WithHolding" class="col-sm-3 col-md-3 pull-right">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="<%=__('Student ID')%>" Id="SearchStudent" name="SearchStudent">
<button id="Search" name="Search" class="btn btn-primary" type="button"><%=__('Check Clearance')%>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</nav>
This is a typical example of how i have referenced the NavBar on all pages. This is the overall structure of the design
<!DOCTYPE html>
<html lang="en">
<% include ./MyLayout/header %>
<body>
<% include ./MyLayout/navbar %>
<script src="/javascript/ClientJs/RenewItem.js"></script>
<div class="container">
<div class="row-fluid">
<div id="content" class="span12">
<div class="row-fluid">
<form class="form-horizontal span12" method="post" action="RenewItems">
<fieldset>
<legend><%=__('Renew Item')%>
<h6 style="color: #006dcc"><%=__('Extend/Renew item given to student')%></h6>
</legend>
<br>
<% if(SuccessMessage.length>0){ %>
<div class="row-fluid status-bar">
<div class="span12">
<div class="alert alert-success alert-dismissible" id="alertmessage" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
aria-hidden="true">×</span></button>
<strong><%=__('Success !')%></strong><%= SuccessMessage %>
</div>
</div>
</div>
<% } %>
<% if(ErrorMessage.length>0){ %>
<div class="row-fluid status-bar">
<div class="span12">
<div class="alert alert-danger alert-dismissible" id="alertmessage" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
aria-hidden="true">×</span></button>
<strong><%=__('Error!')%></strong> <%= ErrorMessage %>
</div>
</div>
</div>
<% } %>
<div class="row-fluid">
<div class="span8">
<div class="control-group">
<label for="BookingNo" class="control-label"><%=__('Booking Number:')%></label>
<div class="controls">
<input id="BookingNumber" name="BookingNumber" type="text" value="" required=""
title="<%=__('Please enter Booking number for the transaction')%>"
placeholder="<%=__('Booking Number')%>">
</div>
</div>
<div class="control-group">
<label for="ItemName" class="control-label"><%=__('Item Name:')%></label>
<div class="controls">
<input type="text" id="ItemName" name="ItemName" value="" required=""
title="<%=__('Please enter Item Name')%>" placeholder="<%=__('Item Name')%>">
</div>
</div>
<div class="control-group">
<label for="StudentID" class="control-label"><%=__('Student/Guest ID:')%></label>
<div class="controls">
<input id="StudentID" name="StudentID" type="text" value="" readonly required=""
title="<%=__('Please enter student matriculation ID')%>" placeholder="<%=__('Matriculation Number/Guest ID')%>">
</div>
</div>
<div class="control-group">
<label for="ItemNumber" class="control-label"><%=__('Item Number:')%></label>
<div class="controls">
<input id="ItemNumber" name="ItemNumber" type="text" value="" readonly
required="" title="<%=__('Please enter Item Number')%>" placeholder="<%=__('Item Number')%>">
</div>
</div>
<div class="control-group">
<label for="EmailID" class="control-label"><%=__('Student/Guest Email ID:')%></label>
<div class="controls">
<input type="text" id="StudentEmail" name="StudentEmail" value=""
placeholder="<%=__('Student/Guest Email')%>" readonly required=""
title="<%=__('Student/Guest Email ID cannot be empty')%>">
</div>
</div>
<div class="control-group">
<label for="ReturnDate" class="control-label"><%=__('Old Return Date:')%></label>
<div class="controls">
<input id="OldReturnDate" name="OldReturnDate" type="text" value="" readonly
placeholder="<%=__('DD-MM-YYYY')%>" required="" title="<%=__('Please search for item')%>">
</div>
</div>
<div class="control-group">
<label for="Remarks" class="control-label"><%=__('Duration:')%></label>
<div class="controls">
<select Id="Duration" name="Duration" class="form-control">
<option value="1 week"><%=__('1 week')%></option>
<option value="2 weeks"><%=__('2 weeks')%></option>
<option value="3 weeks"><%=__('3 weeks')%></option>
<option value="4 weeks"><%=__('4 weeks')%></option>
</select>
</div>
</div>
<div class="control-group">
<label for="ReturnDate" class="control-label"><%=__('New Return Date:')%></label>
<div class="controls">
<input id="ReturnDate" name="ReturnDate" type="text" value="" placeholder="<%=__('DD-MM-YYYY')%>"
readonly required="" title="<%=__('Please specify duration of extension')%>">
</div>
</div>
<div class="control-group">
<label for="Remarks" class="control-label"><%=__('Remarks:')%></label>
<div class="controls">
<textarea id="Remarks" name="Remarks" style="width: 70%;" rows="4" required=""
title="<%=__('Any remarks regarding the renewal of an item')%>"></textarea>
</div>
</div>
</div>
</div>
</fieldset>
<div class="form-actions">
<button type="reset" class="btn btn-default"><%=__('Cancel')%></button>
<button type="submit" class="btn btn-primary"><%=__('Renew')%></button>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
<% include ./MyLayout/footer_bottom%>
</html>
What about hiding everything first. Suppose your menu items are wrapped in a div or if menu items are in a OL/UL, you can set it up to hide on loading of page:
.menu-wrapper{
display:none;
}
$(document).ready(function () {
var CheckPermission = location.protocol + '//' + location.host + '/permission';
$.get(CheckPermission, function (data) {
//your stuff
}).always(function(){
$(".menu-wrapper").show();//this will toggle display:none
});
});
You are noticing this because of the delay in getting the response from the server.
All Menus Loaded First > Wait Few Seconds > Server Responds > Hide Menus
To avoid this, hiding menus during initial loading and showing them once you get the response will be the correct approach.
BTW, I will not prefer to show and hide menu items in the client side. The best option will be to get the list of allowed menu items from the server and rendering in the client side.
Please remember, an user can change the CSS styles to see the hidden menu and he could do operations that are not allowed, unless your server validates each request.
Change your html to render the menus in hidden mode, by adding the css class.
.menu-wrapper {
display:none;
}
<ul id="menu" class="nav">
<li id="home"class="hidden-menu"><%=__('Home')%></li>
<li id="Offer" class="dropdown menu-wrapper">
</li>
<li id="Discover" class="dropdown menu-wrapper">
</li>
<li id="Message" class="dropdown menu-wrapper">
</li>
<li id="Overview" class="dropdown menu-wrapper">
</li>
<li id="myAccount" class="dropdown menu-wrapper">
</li>
</ul>
Then after you get the permissions from the server, enable the nodes.
$(document).ready(function () {
var CheckPermission = location.protocol + '//' + location.host + '/permission';
$.get(CheckPermission, function (data) {
// If the menu should be shown then remove the css class
if(data === 'Admin') {
$("#Discover").removeClass('hidden-menu');
}
})
});
I have been having an issue with a website I have been developing. I am a beginner with javascript so sorry in advance for a dumb question. On the websites www.dynamitecoffeeco.com I have two different things each in their own container. When you click on the menu button, and then click on the search button, I would like one to close out and then the other open. I have tried using other solutions but they all are tailored to the accordion markup. Any and all help would be appreciated. And here is the code as well.
The nav collapse is the container holding the menu and the search collapse is holding the search bar. Thanks again.
<div id="nav-collapse" class="collapse">
<div class="wrapper">
<div class="row">
<?php wp_nav_menu(); ?>
</div>
</div>
</div>
<div id="search-collapse" class="collapse">
<div class="wrapper">
<div class="row">
<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
<label>
<input type="search" width="100%" class="search-field" placeholder="<?php echo esc_attr_x( 'Search …', 'placeholder' ) ?>" value="<?php echo get_search_query() ?>" name="s" title="<?php echo esc_attr_x( 'Search for:', 'label' ) ?>" />
</label>
</form>
</div>
</div>
</div>
Ok it took me some time to understand the problem but here goes.
First of all you have to put the class 'in' in your 'default' opened menu, probably #nav-collapse:
<div id="nav-collapse" class="collapse in">
Now in the link that opens the search button you should write:
<a data-toggle="collapse" href="#search-collapse">
in the link that goes back to the navigation menu use this code:
<a data-toggle="collapse" href="#nav-collapse">
This assumes you have properly loaded jquery/bootstrap.js/bootstrap.css
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
In this jQuery script, When I CLICK add customer link (in image 1) its load add customer form (in image 2) .How do I change this script to load automatically add customer form when I visited the page.Please help me thank you in advance .
Code:
<?php $this->load->view('template/admin_header.php'); ?><!-- load admin header -->
<!-- Script for add user box show Start -->
<script type='text/javascript'>//<![CDATA[
$(function () {
$(function () {
$('.load').on('click', function () {
var ID = $(this).attr('id');
$('.div').hide('fast');
$('.' + ID).show('fast');
});
});
});//]]>
</script>
<!-- Script for add user box show END -->
<div class="grid">
<div class="row">
<?php $this->load->view('admin/admin_topmenu.php'); ?>
</div>
<div class="row">
<?php echo form_open('admin/add_users_data') ?><!-- start of the form -->
<div class="span8">
<div style="padding-bottom:11px;">
<div class="div add_cus box"><!-- start of the add customer add form -->
<feildset>
<legend><i class="icon-user-2 on-right on-left"></i><strong>Add Customer</strong></legend>
<h6>*All fields marked are required</h6>
<lable>Name*</lable>
<div class="input-control text" data-role="input-control">
<input type="text" name="cus_name" placeholder="type your name">
<button class="btn-clear" tabindex="-1"></button>
</div>
<lable>Email*</lable>
<div class="input-control text" data-role="input-control">
<input type="text" name="cus_email" placeholder="type your email">
<button class="btn-clear" tabindex="-1"></button>
</div>
<lable>Phone*</lable>
<div class="input-control text" data-role="input-control">
<input type="text" name="cus_phone" placeholder="type your phone number">
<button class="btn-clear" tabindex="-1"></button>
</div>
<lable>Mobile (for Alerts)</lable>
<div class="input-control text" data-role="input-control">
<input type="text" name="cus_mobile" placeholder="type your mobile number">
<button class="btn-clear" tabindex="-1"></button>
</div>
<lable>Password*</lable>
<div class="input-control text" data-role="input-control">
<input type="password" name="cus_password" placeholder="Enter Your password">
<button class="btn-clear" tabindex="-1"></button>
</div>
<lable>Retype Password*</lable>
<div class="input-control text" data-role="input-control">
<input type="password" name="cus_passconf" placeholder="Enter Your password again">
<button class="btn-clear" tabindex="-1"></button>
</div>
<input name='cus_status' type='hidden' value='disabled'/>
<input type="submit" value="Add Customer" class="info">
</feildset>
</div><!-- END of the add customer add form -->
</div>
<div class="div add_oper">
RadioButton 2 Selected
</div>
<div class="div add_admin">
RadioButton 3 Selected
</div>
</div>
<?php echo form_close(); ?><!-- END of the form -->
<div class="span2">
<!-- start of side bar sub -->
<p><a href="#" id="add_cus" class="load item-title-secondary"><i class="icon-plus on-right on-left"></i>Add
Customer</a></p>
<p><a href="#" id="add_oper" class="load item-title-secondary"><i
class="icon-plus on-right on-left"></i>Add Operator</a></p>
<p><a href="#" id="add_admin" class="load item-title-secondary"><i
class="icon-plus on-right on-left"></i>Add Admin</a></p>
<!-- END of side bar sub -->
</div>
<div class="span3">
<!-- start of side bar main -->
<nav class="sidebar dark">
<ul>
<li>
<a href="<?php echo site_url('admin/add_users') ?>">
<i class="icon-plus-2"></i>
Add Users
</a>
</li>
<li>
<a href="<?php echo site_url('admin/manage_customer') ?>">
<i class="icon-user-2"></i>
Manage Customers
</a>
</li>
<li>
<a href="#">
<i class="icon-user"></i>
Manage Operators
</a>
</li>
<li>
<a href="#">
<i class="icon-user-3"></i>
Manage Admins
</a>
</li>
</ul>
</nav>
<!-- END of side bar main -->
</div>
</div>
</div>
<?php $this->load->view('template/admin_footer.php'); ?><!-- load admin footer -->
First of all, You need not use dom ready jquery event twice.
<script type='text/javascript'>//<![CDATA[
$(function () {
$(function () {
$('.load').on('click', function () {
var ID = $(this).attr('id');
$('.div').hide('fast');
$('.' + ID).show('fast');
});
});
});//]]>
</script>
It can be just
<script type='text/javascript'>//<![CDATA[
$(function () {
$('.load').on('click', function () {
var ID = $(this).attr('id');
$('.div').hide('fast');
$('.' + ID).show('fast');
});
});//]]>
</script>
Now for your question, If you want to load the add customer form on page load itself, You can achieve it by two ways.
Trigger the click event on page load. Add this line below your click handler
$('.load').click();
on page load, show the add_cus div. Add this line below your click handler
$('.add_cus').show('fast');
Hope its useful to you.