Opening a bootstrap modal dialog on by loading a view in codeigniter - php

Scenario: User clicks the Login with Facebook link, but actually user is not registered in the database. Code for the url is:
<a href="<?php echo $this->authlib->fbloginURL(site_url() . 'auth/facebooklogin'); ?>">
In the auth/facebooklogin() function, I am checking for this condition, and if the user is not registered, I want to open a modal for registration.
Code Snippet in facebooklogin() that checks and redirects:
if(is_null( $this->authlib->has_account( $fb_id ) ) ) // User has no account
redirect('/auth/register_modal');
And the register_modal() function simply loads the new view that I want to display:
function register_modal()
{
$this->load->view('include/header');
$this->load->view('auth/register_modal');
$this->load->view('include/footer');
}
Now for the purpose of discussion my modal dialog is:
<div class="modal hide" id="myModal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h3>Login to MyWebsite.com</h3>
</div>
<div class="modal-body">
<form method="post" action='' name="login_form">
<p><input type="text" class="span3" name="eid" id="email" placeholder="Email"></p>
<p><input type="password" class="span3" name="passwd" placeholder="Password"></p>
<p><button type="submit" class="btn btn-primary">Sign in</button>
Forgot Password?
</p>
</form>
</div>
<div class="modal-footer">
New To MyWebsite.com?
Register
</div>
</div>
This does not work.. I was wondering what am I doing wrong? All relevant bootstrap files are loaded in the header.

Found the solution myself. I just had to change the following in my modal:
<div class="modal hide" id="myModal">
to
<div class="modal show" id="myModal">
i.e. change the hide to show. Silly me :)

Login
</diV>
<div class="modal-body">
</div>
<div class="modal-footer" id="modal-footer" >
</div>

Related

How can i prevent jquery add a string to url?

So i got a problem that when i click a submit button of a form, my action attribute link was added a new line that i don't want it
Here is modal that contain the form:
<!--modal-->
<div class="modal fade" id="changepass" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel2">Password changing</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<form action="" id="passchange">
<div class="modal-body">
<div class="row">
<div class="form-password-toggle">
<label class="form-label" for="basic-default-password12">Enter New
Password</label>
<div class="input-group">
<input type="password" class="form-control"
id="basic-default-password12"
placeholder="············"
aria-describedby="basic-default-password2" name="newpass" />
<span id="basic-default-password2"
class="input-group-text cursor-pointer"><i
class="bx bx-hide"></i></span>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary"
data-bs-dismiss="modal">No</button>
<button type="submit" class="btn btn-primary btn-ok">Yes</button>
<!--Get id function-->
</div>
</form>
</div>
</div>
</div>
<!--/modal-->
Here is the button when i click, it will open modal box:
<div class="card-header d-flex align-items-center justify-content-between">
<h5 class="mb-0"><?=$detail['last_name']?>'s Information</h5>
<small class="text-muted float-end"><button type="button" class="btn btn-primary"
data-id="<?=$detail['id']?>" onclick="changepassword(this)">Change
password</button></small>
</div>
Here is jquery i'm using to pass a php value to the modal:
<script>
function changepassword(elm) {
let id = $(elm).data('id');
let modal = $('#changepass');
$('#passchange').attr('action',
`http://localhost/NguyenTranTienHiep1/index.php/backend/PasswordChange/${id}`);
modal.modal('show');
}
</script>
So the link i want it to be on the url bar is (id is changable):
http://localhost/NguyenTranTienHiep1/index.php/backend/PasswordChange/id
here is the link that i don't expect it to be:
http://localhost/NguyenTranTienHiep1/index.php/backend/PasswordChange/30?newpass=test
i want to call a php function and it will grab the input but the line "?newpass=test" prevent it to run.
Your form is using GET method to send data to server. Form with GET method will append a list of name/value pairs after the question mark (?) at the end of your URL and each one separated by an ampersand (&). You can change method to POST so you will get no data appended to the URL and sensitive data such as password changes should use POST.
<form action="" method="POST" id="passchange">
You can learn more about sending data to server in here
<script>
function changepassword(elm) {
let id = $(elm.target).attr('data-id');
let modal = $('#changepass');
$('#passchange').attr('action',
`http://localhost/NguyenTranTienHiep1/index.php/backend/PasswordChange/${id}`);
modal.modal('show');
}
</script>

passing value to bootstrap model using php

I have a button and I am trying to pass value to a model.Inside button I have name="className" value="CPS210-CompSci-I (4)" button is type submit.
<button type="submit" data-toggle="modal" data-target="#myModal"
class="btn btn-info btn-md" name="className" value="CPS210-CompSci-I (4)">
<span class="glyphicon glyphicon-comment"></span> Comment
</button>
I have a model. Inside model I have php $className =$POST['className'];
echo "$className";
<div ng-app class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><?php echo "Note for $firstname $lastname" ?></h4>
</div>
<div class="modal-body">
<div class="form-group">
<textarea class="form-control" ng-model="note"
placeholder="Here you can write a a note for the student. " id="message"
required data-validation-required-message="Please enter a Goal"></textarea>
<p class="help-block text-danger"></p>
<label class="light">
</div>
<hr>
<?php $className = $_POST['className'];
echo "$className";
?>
<h4>Note Regarding:{{note}} </h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Variables are only added to the $_POST array after a form has been submitted. You're page must "refresh" before the array is filled. When the modal triggers and opens a new modal box on the scree, this is not considered a page refresh, therefore the value of the button you clicked is not added to the array.
You either need to put your button inside a form tag, which will trigger the modal to open when the page "refreshes" and the value in that key exists. This would be annoying and defeat the whole purpose of bootstrap modals.
You're other, more likely option, is to use javascript to move the value in the button to the spot in the modal when the button is clicked.
$('button[name="className"]').click(function(){
var className = $(this).val();
$('#class-name').html(className);
});
And edit your modal where you want the class name to this:
<hr>
<p id="class-name"></p>
<h4>Note Regarding:{{note}} </h4>

Bootstrap Modal Form wont work with CodeIgniter

I'm very new to codeigniter.
here's my problem. when i load my MODAL LOGIN form and i press the submit button. It wouldn't do anything. What i would like to happen is just to go to these 4 views (student,instructor,adviser,admin) pages. I don't want to pass values for now. Focus only on switching views.
index.php (the modal part)
<!-- Modal Log in Form-->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="padding:35px 50px;">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4><span class="glyphicon glyphicon-lock"></span> Login</h4>
</div>
<div class="modal-body" style="padding:40px 50px;">
<form action="" method="POST" id="form" role="form">
<div class="form-group">
<label for="usrname"><span class="glyphicon glyphicon-user"></span> Username</label>
<input type="text" class="form-control" id="usrname" placeholder="Enter id no.">
</div>
<div class="form-group">
<label for="psw"><span class="glyphicon glyphicon-eye-open"></span> Password</label>
<input type="text" class="form-control" id="psw" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox" value="" checked>Remember me</label>
</div>
<input type="Submit" value="LOG IN" class="btn btn-success btn-block">
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
<p>Not a member? Sign Up</p>
<p>Forgot Password?</p>
</div>
</div>
</div>
I didn't put anything on that action="". because of this.(to be dynamic) when the user want to sign in as student he/she go to student page. or as admin he/she go to admin page. and etc.
freelancer.js
$(document).ready(function(){
$("#myBtn").click(function(){
$("#myModal").modal();
document.getElementById("form").action ="<?php echo base_url().'index.php/logbooks/studentsignin'?>";
});
});
$(document).ready(function(){
$("#myBtn2").click(function(){
$("#myModal").modal();
document.getElementById("form").action ="<?php echo base_url().'index.php/logbooks/instructorsignin'?>";
});
});
$(document).ready(function(){
$("#myBtn3").click(function(){
$("#myModal").modal();
document.getElementById("form").action ="<?php echo base_url().'index.php/logbooks/advisersignin'?>";
});
});
$(document).ready(function(){
$("#myBtn4").click(function(){
$("#myModal").modal();
document.getElementById("form").action ="<?php echo base_url().'index.php/logbooks/adminsignin'?>";
});
});
logbooks.php (from the controller)
class logbooks extends CI_Controller{
function __construct(){
parent::__construct();
}
function studentsignin(){
$this->load->view('student_view');
}
function instructorsignin(){
$this->load->view('instructor_view');
}
function advisersignin(){
$this->load->view('adviser_view');
}
function adminsignin(){
$this->load->view('admin_view');
}
}
but if i just input the relative path for example http://localhost/WEB/index.php/logbooks/studentsignin in the browser. I can view the student page.
PLEASE help. I don't know how to solve this problem.
Change your submit button to just button.
In click event after set "form action" you can use this too:
$(document).ready(function(){
$("#myBtn4").click(function(){
$("#myModal").modal();
$("#form").attr('action',"<?php echo base_url('index.php/logbooks/adminsignin')?> ";
});
$("#form").submit();
});
The point is use $("#form").submit();
I hope It Work For you.

Passing a portlet id to a popup modal after pressing a button - Laravel

I have some portlets here that has an ID for each of it. What I'm trying to do is to pass these IDs to a popup modal after pressing an Add button in the portlet.
Here is the portlet view:
#foreach($portlets as $portlet)
<div class="box span4">
<div class="box-header well" data-original-title>
<h2><i class="icon-th"></i> {{$portlet->portlet_title}} </h2>
</div>
<div class="box-content">
<div class="row-fluid">
// some contents over here
</div>
<div class="box-icon">
<i class="icon-plus-sign"></i>
</div>
</div>
</div>
#endforeach
Notice the Add New Link button at the bottom of the code, when I press that, a modal will appear. Here is the view of it:
<div class="modal hide fade" id="linkSettings">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Add New Link</h3>
</div>
<form method="post" action="{{ URL::to('addlink') }}" >
<div class="modal-body">
<div class="control-group">
<label class="control-label" for="focusedInput">Link Title:</label>
<div class="controls">
<input class="input-xlarge focused" id="link_title" name="link_title" type="text">
</div>
</div>
<div class="control-group">
<label class="control-label" for="focusedInput">Add A Link:</label>
<div class="controls">
<input class="input-xlarge focused" id="link_url" name="link_url" placeholder="eg. http://www.example.com/" type="text">
</div>
</div>
</div>
<div class="modal-footer">
Close
<input type="submit" id="submit" name="submit" value="Submit" class="btn btn-primary">
</div>
</form>
</div>
This modal has a form in it to be processed in the controller. But how do I send the portlet ID to this modal so that it can be stored in the database during processing in the controller? Because I want it to automatically know what portlet I want to add links in it. Any idea?
If anything, please let me know.
You could attach a jQuery event handler to clicking the "Add New Link" button, and use it to populate a hidden field in the modal view.
i.e. something like:
$("a.new_link").click(function(){
portlet_id = $(this).parent().parent().attr("id");
$("div.modal form input.my_hidden_field").val(portlet_id)
});
And somewhere in the <form> for the modal:
<input type="hidden" name="portlet_id" class="my_hidden_field"/>
Then, you just need to get the portlet_id POST parameter with Laravel/PHP to determine the portlet ID that was used.
Edit
Revised handler based on the code you gave:
$('.btn-settingLink').click(function(e){
e.preventDefault();
$('#linkSettings').m‌​odal('show');
// get the portlet_id and modify the midden field
portlet_id = $(this).parent().parent().attr("id");
$("div.modal form input.my_hidden_field").val(portlet_id)
});

How do I reference an html form field inside Twitter Bootstrap's pop-up modal?

My page has a form fields like so.
<form id = "registerform" class="form-horizontal" action = "insert.php" method = "post">
<div class="control-group">
<label class="control-label" for="inputTeamName">Team Name</label>
<div class="controls">
<input id="inputTeamName" class = "span11" type="text" placeholder="Team Name" name = "inputTeamName" data-toggle="tooltip" title="Innuendos encouraged" data-placement="left">
</div>
</div>
<div class="control-group">
<div class="controls">
Register
</div>
</div>
</form>
When the user clicks the register button, a modal loads
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Confirm Registration</h3>
</div>
<div class="modal-body">
<ul class="unstyled">
<li>Team Name:</li>
</ul>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button class="btn btn-primary">Confirm</button>
</div>
It looks like this - http://twitter.github.io/bootstrap/javascript.html#modals
I want to use the modal to confirm the user's input. How do I reference the text the user entered in the form field and display it inside of the modal?
Thanks
To be clear, I added a div tag inside <li>Team Name:</li>:
<div class="modal-body">
<ul class="unstyled">
<li>Team Name:<div id = "divTeamName"></div></li>
</ul>
</div>
Add the following script (possibly just before the closing html tag):
<script type="text/javascript">
$("#registerBtn").click(function() {
$(divTeamName).text($('#inputTeamName').val());
});
</script>
The JQuery code above will respond after your register button has been clicked, displaying the text from the input into the div I've added above.
JsFiddle:
http://jsfiddle.net/6y4yQ/1/
<script type="text/javascript">
$("#inputTeamName").keypress(function() {
var TeamName = $(this).val();
$(this).after(TeamName);
});
</script>

Categories