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.
Related
This is a screenshot of a normal google search
I'm trying to get the tiny message box when you go to the mic icon on Google search engine. I want to incorporate that to my bootstrap buttons. Following is the code where i want to add a similar message box on Connect and Disconnect button.
<div class="container">
<div class="row">
<div class="col-12 col-sm-6 col-md-6">
<br>
<img style="width:30%" src="icon1.jpg">
<br>
<br>
<button type="button" class="btn btn-success" >
<a style="color:white;" href= "options.html" >
Connect
</a>
</button>
</div>
<div class = "col-12 col-sm-6 col-md-6 ">
<br>
<img style="width:30%" class="float-right" src="icon1.jpg" >
<br>
<br>
<br>
<br>
<br>
<div class ="text-right">
<button type="button" class="btn btn-danger ">
<a style="color:white;" href= "options.html" >
Disconnect
</a>
</button>
</div>
</div>
</div>
</div>
What you're looking for are tooltips. Check out bootstrap's documentation about them here.
You can follow this code with bootstrap. use data-toggle="tooltip" to your button from where you want hover, title is the tooltip/popup and add below script to the footer. For more follow the link https://www.w3schools.com/bootstrap/bootstrap_tooltip.asp
Hover over me
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
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.
I want to Show/Hide replies for each comment. In order to do that, my jQuery selector has to be variable class name (so that I can show/hide replies of a specific comment without affecting replies of other comments). I've written the PHP code appending comment_id with the class to make the classes different. But I get these IDs from Laravel blade loop and I do not know how to do the same in jQuery. Here's my blade.php -
#foreach($comments as $comment)
<div class="box-comment">
<div class="comment-text">
{{$comment->body}}<br />
<button class="btn btn-link text-muted toggle-replies-{{$comment->id}}">Show/Hide Replies</button>
</div> <!-- /.comment-text -->
</div> <!-- /.box-comment -->
<div class="box-comment reply-box-{{$comment->id}} initially-hidden" style="padding-left: 30px;">
<input type="text" placeholder="Write a reply...">
</div>
#foreach($comment->replies as $reply)
#if($comment->id == $reply->comment_id)
<div class="box-comment reply-box-{{$comment->id}} initially-hidden" style="padding-left: 30px;">
<div class="comment-text">
{{$reply->body}}
</div> <!-- /.comment-text -->
</div> <!-- /.box-comment -->
#endif
#endforeach
#endforeach
And this is jQuery:
<script>
$(document).ready(function() {
$(".toggle-comments").click(function(){
$(".comment-box").slideToggle();
});
$(".toggle-replies-1").click(function(){
$(".reply-box-1").slideToggle();
});
});
</script>
I've manually put a '1' there and it shows/hides the replies of the first comment. I need to do it for all the comments. It shouldn't be difficult but I'm still learning jQuery. I hope someone can help me with it.
Try this :
#foreach($comments as $comment)
<div class="box-comment">
<div class="comment-text">
{{$comment->body}}<br />
<button class="btn btn-link text-muted show_hide_replies" id="{{$comment->id}}">Show Replies</button>
</div>
</div>
<div class="box-comment reply-box-{{$comment->id}} initially-hidden" style="padding-left: 30px;">
<input type="text" placeholder="Write a reply...">
</div>
#foreach($comment->replies as $reply)
#if($comment->id == $reply->comment_id)
<div class="box-comment reply-box-{{$comment->id}} initially-hidden" style="padding-left: 30px;">
<div class="comment-text">
{{$reply->body}}
</div>
</div>
#endif
#endforeach
#endforeach
<script type="text/javascript">
$(document).ready(function() {
$(".toggle-comments").click(function(){
$(".comment-box").slideToggle();
});
$(".show_hide_replies").click(function(ev) {
var getElem = $(this).attr("id");
$(".reply-box-"+getElem).slideToggle()
$(this).text(function(i, text){
return text === "Show Replies" ? "Hide Replies" : "Show Replies";
})
})
});
</script>
I have the code below that should display the chat window when I click on the user name in <li>
Code <ul> which contains the User list and received the click
<ul class="chat-contacts">
<li class="online" data-user-id="USERCODE">
<a href="#">
<div class="media">
<div class="media-body">
<div class="contact-name">USERNAME</div>
</div>
</div>
</a>
</li>
</ul>
This is the chat window code. If I put a static content of the <ul> window appears, however when I feed the the <ul> with content dynamic the click does not work. Can someone help me??
<script id="chat-window-template" type="text/x-handlebars-template">
<div class="panel panel-default">
<div class="panel-heading" data-toggle="chat-collapse" data-target="#chat-bill">
<i class="fa fa-times"></i>
<a href="#">
<span class="pull-left">
<img src="{{ user_image }}" width="40">
</span>
<span class="contact-name">{{user}}</span>
</a>
</div>
<div class="panel-body" id="chat-bill">
</div>
<form id="messageForm">
<input id="nameInput" type="hidden" class="input-medium" value="Macbook" />
<input id="messageInput" type="text" class="form-control" placeholder="Digite uma mensagem" />
</form>
</div>
</script>
Your click event is not working. The event doesn't know the element exists.
This can happen when using jQuery('.chat-contacts li').click(function(){// do something})
I would try setting the click event with this:
jQuery(document).on('click', '.chat-contacts li', function(){
});
Setting the event with on will force jQuery to scan for new elements in the list.
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'];