How not to lose Div focus when inside button is clicked - javascript

Below is my HTML and js code, i want when write_post_text (id) get focus then write_post_upload (id) div should show and when write_post_container (id ) div lose the foucus then it should get hide, actually its working fine but the problem is. when user click the upload_post_img (id) button then it lose focus and the write_post_upload got hide with slideUp function but when. I want to keep the focus even when this button is clicked.
<div class="upload_post" id="write_post_container" tabindex='-1'>
<form method="post">
<div class="upload_div">
<textarea class="form-control" rows="1" cols="30" id="write_post_text" placeholder="Write what in your mind"></textarea>
</div>
<div class="upload" id="write_post_upload">
<input type="hidden" name="post_img">
<ul>
<li><button type="button" id="upload_post_img"><i class="fa fa-camera" ></i>Image</button></li>
</ul>
<input type="file" name="file" id="bTimelineFile" onchange="readURL(this);" />
<div class="post">
<button>Post</button>
</div>
</div>
</form>
Here is my JS code :
<script type="text/javascript">
$("#write_post_text").focusin(function() {
$("#write_post_upload").slideDown();
});
$("#write_post_container, #write_post_container *").blur(function(e){
if(!$(e.relatedTarget).is("#write_post_container, #write_post_container *")){
$("#write_post_upload").slideUp();
}
});
$("#upload_post_img").click(function () {
$("#bTimelineFile").focus().trigger('click');
$("#write_post_upload").show();
});
</script>

you can create a variable and change it whenever Choose file is clicked
like this
don't forget to reset it
$("#write_post_text").focusin(function() {
$("#write_post_upload").slideDown();
});
var blur = false;
$("#write_post_container, #write_post_container *").blur(function(e){
if(!$(e.relatedTarget).is("#write_post_container, #write_post_container *")){
if(!blur){
$("#write_post_upload").slideUp();
}
}
});
$("#upload_post_img").click(function () {
$("#bTimelineFile").focus().trigger('click');
$("#write_post_upload").show();
});
$("#bTimelineFile").click(function () {
blur = true;
});

Related

Click event open both Popup

I have to show login and register as a slidedown/popup. Following code works for one popup but breaks when i try to add popup for register also. It show both popup
<div class="register-popup">
<a class="button-register" href="#" >Register</a>
<div class="popup-register">
CLOSE
<form>
<P><span class="title">Username</span> <input name="" type="text" /></P>
<P><span class="title">Password</span> <input name="" type="password" /></P>
<P><input name="" type="button" value="Login" /></P>
</form>
</div>
</div>
<div class="login-popup">
<a class="button-login" href="#" >Login</a>
<div class="popup-login">
CLOSE
<form>
<P><span class="title">Username</span> <input name="" type="text" /></P>
<P><span class="title">Password</span> <input name="" type="password" /></P>
<P><input name="" type="button" value="Login" /></P>
</form>
</div>
</div>
I am looking for following functionality
One popup should open at a time and other should close automatically
Popup should open & close when one click on the individual links
Fiddle example http://fiddle.jshell.net/rvepks5q/1/
I tried for sometime, i am doing something wrong.
You may also want to try this
$(document).ready(function(){
$(".button-register").click(function(){
if ($(".popup-login").is(":hidden") && $(".popup-register").is(":hidden"))
{
$(".popup-register").slideDown("slow");
}
else if(!$(".popup-login").is(":hidden"))
{
$(".popup-login, .overlay-register").hide();
$(".popup-register").slideDown("slow");
}
else if(!$(".popup-register").is(":hidden"))
{
$(".popup-register").slideUp("slow");
}
});
$(".button-login").click(function(){
if ($(".popup-login").is(":hidden") && $(".popup-register").is(":hidden"))
{
$(".popup-login").slideDown("slow");
}
else if(!$(".popup-register").is(":hidden"))
{
$(".popup-register, .overlay-register").hide();
$(".popup-login").slideDown("slow");
}
else if(!$(".popup-login").is(":hidden"))
{
$(".popup-login").slideUp("slow");
}
});
});
Try this fiddle
Change document.body to element you want to click on.
http://fiddle.jshell.net/rvepks5q/3/
You can also close opened popup if you open another one.
http://fiddle.jshell.net/rvepks5q/5/
Attach click handlers to individual links instead
$(".button-login").click(function () {
if ($(".popup-login").is(":hidden")) {
$(".popup-login").slideDown("slow");
} else {
$(".popup-login, .overlay-login").hide();
}
});
$(".button-register").click(function () {
if ($(".popup-register").is(":hidden")) {
$(".popup-register").slideDown("slow");
} else {
$(".popup-register, .overlay-register").hide();
}
});
example
js
$(".button-login").on("click", function(){
if(!$(".popup-login").hasClass("opened")){
$(".popup-login").show();
$(".popup-login").addClass("opened");
$(".popup-register").hide();
$(".popup-register").removeClass("opened");
}else {
$(".popup-login").hide();
$(".popup-login").removeClass("opened");
$(".popup-register").hide();
$(".popup-register").removeClass("opened");
}
});
$(".button-register").on("click", function(){
if(!$(".popup-register").hasClass("opened")){
$(".popup-register").show();
$(".popup-register").addClass("opened");
$(".popup-login").hide();
$(".popup-login").removeClass("opened");
}else {
$(".popup-register").hide();
$(".popup-register").removeClass("opened");
$(".popup-login").hide();
$(".popup-login").removeClass("opened");
}
});
You are assigning two click handlers, but both listen to a click on the body.If you want your code to work you have to either assign your listeners to the elements or use event bubbling to see where the click is coming from.
That way you don't have to put unnecessary event-handlers on your dom.
var $body = $(document.body);
var $loginButton = $body.find('.button-login')[0];
var $registerButton = $body.find('.button-register')[0];
var $loginPopup = $body.find('.popup-login');
var $registerPopup = $body.find('.popup-register');
$(document.body).click(function (e) {
if(e.target === $loginButton) {
$registerPopup.hide();
$loginPopup.toggle();
}
if(e.target === $registerButton) {
$loginPopup.hide();
$registerPopup.toggle();
}
});
http://fiddle.jshell.net/rvepks5q/11/

Change submit button to close button

How can i change behaviour of button if form submit was successful?
<form method="post" enctype="multipart/form-data" style="margin: 0;" id="frmGenerate">
<div class="clearfix">
<div class="input-group">
<input type="text" placeholder="Customer Name:" name="CustomerName">
<input type="text" placeholder="Generated Url:" name="CustomerUrl" readonly="readonly" />
</div>
</div>
<div class="clearfix">
<div class="input-group">
<button type="submit" class="btn">Generate</button>
</div>
</div>
</form>
And here is my JS code:
$('#frmGenerate').submit(function(e) {
var clientName = $(this).find('input[name="CustomerName"]').val();
$.ajax(
{
url: '#Url.Action("GenerateToken","Admin")',
type: 'GET',
data: { customerName: clientName },
success: function(response) {
if (response.result) {
$('#frmGenerate').find('input[name="CustomerUrl"]').val(response.message).select();
$('#frmGenerate').find('button.btn').text('Close');
} else {
alert(response.message);
}
}
});
e.preventDefault();
});
This is modal windows, which i open to generate token. When it's generated successful then i set generated token in modal input and change text of button to close, but i don't know how to change button's behaviour.
Better approach would be not to change existing button, but hide it and show another.
HTML:
<div class="clearfix">
<div class="input-group">
<button type="submit" class="btn">Generate</button>
<button type="button" class="btn btn-close hide">Close</button>
</div>
</div>
JS:
$('#frmGenerate').find('.btn').hide();
$('#frmGenerate').find('.btn-close').show();
Depends on what type of button you are using. Button must be used like: <button></button> Not like <button/>
And then use:
$(".btn").html('Close');
you can change attribute of button
$('#frmGenerate').find('button.btn').attr('type', 'button');
and then:
$('#frmGenerate').find('button.btn').on('click', function(){ /*close function */});
I see you have changed the text of your button to 'Close' after the form has been submitted. So the remaining part is the jQuery that handles a click event on the button.
....
$('.btn').click(function(){
var buttonText = $(this).val();
if(buttonText === 'Close'){
//code when close button is clicked
}else if(buttonText === 'Generate'){
//code when Generate button is clicked...
}
});//end button.click function
And I would use input type='button' or button than input type='submit'. Why dont you submit form using ajax as well? much better.
Hope this helps...

Hiding and showing div in Jquery

I want to Hide a div On a button click. Here I am having 2 divs (Login and container). When the page loads, container will be hidden. And On click on a #submit button, I want to show the container div and hide the Login div.
The problem is Now login page is showing when the page loads, but After clicking the button I cannot make the div hide or show
Javascript:
<script>
$('#submit').click(function() {
console.log("Called2")
$('#container').show();
$('#login').hide();
});
</script>
HTML:
<div id="login" >
<div id="loginformcontainer">
<form>
<label> Username:
<input type="text" name="uname">
</label>
<label> Password:
<input type="password" name="pwd">
</label>
<div class="buttons1">
<button type="button" id="submit" value="Login" class="btn">
Submit
</button>
<button type="reset" id="reset" value="Reset" class="btn">
Clear All
</button>
</div>
<div>
<div id="container" style="display: none;">
<p> Index Page</p>
</div>
Write your code in document.ready function so it work,
$(document).ready(function(){
$('#submit').click(function() {
console.log("Called2")
$('#container').show();
$('#login').hide();
});
});
or, its shorthand,
$(function(){
$('#submit').click(function() {
console.log("Called2")
$('#container').show();
$('#login').hide();
});
});
for changing its visibility every time you can use toggle() function like,
$(function(){
$('#submit').click(function() {
console.log("Called2")
$('#container, #login').toggle();
});
});
See if this is the issue, you have not a closing </div> tag here:
</div>
<div> //<----------------here you can see an opening tag instead
<div id="container" style="display: none;">
put a closing </div> above.
and try putting your script in doc ready:
$(function(){
$('#submit').click(function() {
console.log("Called2")
$('#container').show();
$('#login').hide();
});
});
As it is a submit button handling the forms, submit event might be more useful. In this way you can validate and prevent from submitting.
Please check the jQuery docs for submit.
Look on the demo
$('#container').hide();
$('#submit').click(function() {
console.log("Called2")
$('#container').show();
$('#login').hide();
})
I believe that you not declare the <div id="container" ></div>
Write your script in document.ready inside the <script> function so it work...
Or you can't declare the library of Jquery.
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.0.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
Your html
<div id="signIn" >Sign In</div>
<div id="login" >
<div id="loginformcontainer">
<form>
<label> Username:
<input type="text" name="uname">
</label>
<label> Password:
<input type="password" name="pwd">
</label>
<div class="buttons1">
<button type="button" id="submit" value="Login" class="btn">
Submit
</button>
<button type="reset" id="reset" value="Reset" class="btn">
Clear All
</button>
</div>
<div>
Your Jquery
$('#login').hide();
$('#signIn').click(function() {
alert("try");
});
$("#submit").click(function() {
$('#login').fadeOut();
//do your code
});
Upon page loads, the login div will hide and if you click the sign in then login div will just fade in. If the user clicks the submit button, before you hide the login div, make sure you will validate the user action. Refer to jquery documentation for further explanation.
Isn't submit button causing postback and thus you're loosing css style set by javascript.

How do I show a div with a form only if a button is clicked?

I have a table inside a div that contains a form for the user to fill out. Above the div is a button that says "Customer info". I want to show the form only if the customer wants to fill out the information. The idea is that if they want to fill it out they can click the button and the form will appear below. There are many of these sections so I only want the customer to have to see what they want to see. Below is an example...
<input type="button" value="Customer Info" onClick="">
<div>
<form>
<table>
<tr>
<td>Name:<input type="text" value="" id="name" name="name"></td>
</tr>
</table>
</div>
My question is how can I write a simple javascript function that will act upon clicking the button that will show and hide the Div? The form would still be there just hidden and the values would just be blank.
You can use the onClick event to do that:
Working Example
HTML:
<button id="some_id">Hide div</button>
<form id="some_form">
<form>
javascript:
<script type="text/javascript">
var theButton = document.getElementById('some_id');
theButton.onclick = function() {
document.getElementById('some_form').style.visibility='hidden';
}
</script>
Inline javascript is considered bad practice
ie. onClick=""
Use something like this instead
<input id="info" type="button" value="Customer Info">
<div id="myDiv">
<form>Name:
<input type="text" value="" id="name" name="name">
</input>
</form>
</div>
var button = document.getElementById("info");
var myDiv = document.getElementById("myDiv");
function show() {
myDiv.style.visibility = "visible";
}
function hide() {
myDiv.style.visibility = "hidden";
}
function toggle() {
if (myDiv.style.visibility === "hidden") {
show();
} else {
hide();
}
}
hide();
button.addEventListener("click", toggle, false);
on jsfiddle
Here is the code suggested by David Thomas in the comments. It performs exactly the same task, but uses shorthand if-else for the toggle function and doesn't provide you with separate show and hide functions.
<input id="info" type="button" value="Customer Info">
<div id="myDiv">
<form>Name:
<input type="text" value="" id="name" name="name">
</input>
</form>
</div>
var button = document.getElementById("info");
var myDiv = document.getElementById("myDiv");
function toggle() {
myDiv.style.visibility = myDiv.style.visibility === "hidden" ? "visible" : "hidden";
}
toggle();
button.addEventListener("click", toggle, false);
on jsfiddle
<script type="text/javascript">
$("#music").click(function () {
$("#musicinfo").show("slow");
});
</script>
you can change effect like as toggle, fadeToggle in place of show...

Appending to div and being unable to bind the added buttons

I have a php function that echos code of a form that has a button. when that button is click it will append a file field and a another button that if clicked would repeat the above. however when the added button is clicked nothing happened.
I am thinking it has something to do with binding the button.
Here is the code:
$formtoreturn = '
<div class="form_holder">
<form action="'.site_url().'xxxxx" method="post" enctype="multipart/form-data" >
<div id="fields_holder">
<span class="form_holder-label" id="fileC">Select image or images</span>
<div class="fields" id="field1">
<input type="file" name="fileID-input[]" id="fileID-input" class="fileC-input">
<a rel="add" id="add_file1" class="add_file" href="javascript:;"><img src="wp-content/plugins/wl_extendor_wishlist/images/add-icon.png"></a>
</div>
</div>
<div class="clear"></div>
<input type="hidden" value="'.$u_id.'" name="user_id" id="user_id">
<input type="submit" name="submittestimonial" value="Submit Testimonial">
</form>
<iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>
</div>
<script>
var filecount = 1;
var $j = jQuery.noConflict();
$j(document).ready(function() {
$j(\'#fields_holder\').on(\'click\', \'.add_file\', function() {
var toappend = \'<div class="fields" id="field1"><input type="file" name="fileID-input[]" id="fileID-input" class="fileC-input"><a rel="add" id="add_file1" class="add_file" href="javascript:;"><img src="wp-content/plugins/wl_extendor_wishlist/images/add-icon.png"></a></div>\';
if($j(this).attr("rel") == "add"){
$j(this).attr("rel", "ded");
$j("#fields_holder").append(toappend);
filecount++;
}
});
});
</script>
';
echo $formtoreturn;
Hope the code and my question is clear.
Thanks in advanced.
I would suggest you to change your JavaScript code from
$j('#fields_holder').on('click', '.add_file', function() {
// ...
});
to
$j(document).on('click', '#fields_holder .add_file', function() {
// ...
});
Then the event will bubble up and handled in click handler of a document.
UPDATE
Though I've made a test and it's working well for me in both variants.

Categories

Resources