I am fairly new to this and I need help making the link "login" to be replaced with logged in after clicking submit with javascript/jquery.
Here is what I have on my index page. Currently I have a pop up login page and I need to stop the function after clicking the word submit and then replace login with logged in.
This is a simple demo site and only needs simple code. Thank you!
<Head>
<script type='text/javascript' charset='utf-8'>
$(document).ready(function(){
$('.popbox').popbox();
});
<div id= "toggle" class='popbox'>
<a div id=login class='open' href='#'>Login</a>
<div class='collapse'>
<div class='box'>
<div class='arrow'></div>
<div class='arrow-border'></div>
<form name="myform" action="#" method="post" id="subForm">
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId:'193731474136796', cookie:true,
status:true, xfbml:true
});
</script>
<img src="facebookbutton.png">
<script>
//your fb login function
function fblogin() {
FB.login(function(response) {
//...
}, {scope:'read_stream,publish_stream,offline_access'});
}
</script>
<div class="line-separator"></div>
<div class="input">
<input type="username" name="cm-name" id="name" placeholder="Username" />
</div>
<div class="input">
<input type="password" name="cm-password" id="password" placeholder="Password" />
</div>
<input type="submit" value="login" id="submit" /> Forgot Username or Password?
</form>
And I have a linked javascript page for the popup.
(function(){
$.fn.popbox = function(options){
var settings = $.extend({
selector : this.selector,
open : '.open',
box : '.box',
arrow : '.arrow',
arrow_border : '.arrow-border',
close : '.close'
}, options);
var methods = {
open: function(event){
event.preventDefault();
var pop = $(this);
var box = $(this).parent().find(settings['box']);
box.find(settings['arrow']).css({'left': box.width()/2 - 10});
box.find(settings['arrow_border']).css({'left': box.width()/2 - 10});
if(box.css('display') == 'block'){
methods.close();
} else {
box.css({'display': 'block', 'top': 10, 'left': ((pop.parent().width()/2) -box.width()/2 )});
}
},
close: function(){
$(settings['box']).fadeOut("fast");
}
};
$(document).bind('keyup', function(event){
if(event.keyCode == 27){
methods.close();
}
});
$(document).bind('click', function(event){
if(!$(event.target).closest(settings['selector']).length){
methods.close();
}
});
return this.each(function(){
$(this).css({'width': $(settings['box']).width()}); // Width needs to be set otherwise popbox will not move when window resized.
$(settings['open'], this).bind('click', methods.open);
$(settings['open'], this).parent().find(settings['close']).bind('click', function(event){
event.preventDefault();
methods.close();
});
});
}
}).call(this);
EDIT:
I figured out what was wrong. Thank you guys!
jsfiddle
This is a pretty simple solution. It replaces the login link with a span that contains the text you wanted.
http://jsfiddle.net/gVVcM/
jQuery:
$('button').on('click',function(){
$('#login').replaceWith('<span>Logged In</span>');
});
HTML:
<a id='login' href='#'>Log In</a>
<button>Submit</button>
edit: now that you posted the submit id.
$('#submit').on('click',function(){
$('#login').replaceWith('<span>Logged In</span>');
});
edit2: Prevent Default?.
$('#submit').on('click',function(e){
e.preventDefault();
$('#login').replaceWith('<span>Logged In</span>');
});
If you're using jQuery you can call the following once you've successfully logged in.
$('a#login.open').text('Logged In');
This is if you're trying to be super specific about the element you're searching for. If you are using chrome or anything other than IE you can try this out in the console debugger window to see that it works.
Related
i am trying to build a media gallery, while working on that i am screwed up with inserting image source and closing the pop on same insert click.
here it is, from where i am calling my popup and ajax
<div class="place"></div>
<div class="popup_bk" id="popup_bk"></div>
<div class="popup_gal" id="popup_bk"></div>
<script>
$(document).ready(function() {
function close (){
$(".popup_gal").hide();
$(".popup_bk").hide();
}
$('.actlink').click(function() {
$(".popup_gal").load("http://gtc.app/admin/media/gallery/").fadeIn('slow');
$(".popup_bk").fadeIn('slow');
});
$('.popup_bk').click(function() {
close();
});
});
</script>
and the other gallery page which is loaded via load (ajax) call is
<input type="checkbox" class="sel_img" value="<?php echo $media->id; ?>">
<img src="<?php echo $media->file_path . $media->file_name;?>" class="thumbnail index-thumb">
<input type="button" id="insert" name="insert" value="insert" class="btn btn-primary btn-lg pull-right" id="insert-btn">
<script>
$(document).ready(function() {
$('#insert').click(function(event) {
var chImg='';
$('.sel_img:checked').each(function(idx,ele){
chImg+=$(this).siblings('img').attr('src');
});
$('.place').html(chImg);
});
});
</script>
so can any help me with this screwed code, is this a good approach to do so or can be improved
secondly! i want to retrieve my processed data at <div class="place"></div> when it clicked on insert button and on the same time the popup should be closed.
thanks i tried more and its done with this
<script>
$(document).ready(function() {
$('#insert').click(function(event) {
var chImg='';
$('.sel_img:checked').each(function(idx,ele){
chImg+=$(this).siblings('img').attr('src');
});
$('.place').attr('src',chImg);
$('.popup_gal').css('display','none');
$('.popup_bk').css('display','none');
//alert(chImg);
});
});
I use jquery mobile build a alarm project, i created two page in my index.html, when i click Add Alarm button, the dialog page show up, then i can set the alarm date and time, I want to use setInterval to trigger alarm when i click save button.
But in found that, the function in setInterval doesn't work. How could this happen?
Below is my html file:
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Share Alarm</h1>
Add Alarm
</div>
<ul data-role="listview">
...
</ul>
</div>
<div data-role="page" id="addNewAlarm">
<div data-role="header">
<h1>New Alarm</h1>
</div>
<div data-role="content">
<form action="" method="post" data-ajax="false" id="setAlarm">
<div data-role="fieldcontain">
<input id="alarmTitle" type="text" placeholder="title" data-inline="true"/>
<input id="alarmDate" type="date" data-role="datebox" name="alarmdate"
data-options='{"mode":"calbox","useFocus": true, "useNewStyle":true}' class="ui-icon-datebox"
readonly/>
<input id="alarmTime" type="datetime" data-inline="true" data-role="datebox"
data-options='{"mode":"timeflipbox","useFocus": true, "useNewStyle":true}'
class="ui-icon-datebox"/>
</div>
<input type="submit" value="Save" data-inline="true" data-icon="check" id="saveAlarm"/>
</form>
</div>
<div data-role="footer"></div>
</div>
and this is my js file:
$(document).ready(function () {
$("#saveAlarm").click(function () {
var deStr = $("#alarmDate").datebox('getTheDate').toLocaleDateString();
var dtStr = $("#alarmTime").datebox('getTheDate').toTimeString();
setTimer($("#alarmTitle").val(),deStr,dtStr);
setInterval(function(){alert(1111);},1000);
alert(123);
});
});
function setTimer(title,dateStr,timeStr) {
var timer = setInterval(function(){
var now=new Date();
console.log(now.toTimeString());
if(now.toLocaleDateString() == dateStr && now.toTimeString() == timeStr){
alert("Alarm "+title+"has gone off !");
// clearInterval(timer);
}
},1000);
return timer;
}
Both two setInterval function didn't work. What's wrong with my code?
I finally figure it out, Same like #Khanh TO commented, i used below js code instead of my original one, and it works well now.
var timer=[],timerId,deStr,dtStr;
$(document).on("pagehide", "#addNewAlarm", function () {
$("#saveAlarm").click(function () {
deStr = $("#alarmDate").datebox('getTheDate').toLocaleDateString();
dtStr = $("#alarmTime").datebox('getTheDate').toTimeString().substring(0, 5);
if ($.inArray(timerId,timer) == -1) {
setTimer($("#alarmTitle").val(),deStr,dtStr);
timer.push(timerId);
}
});
});
function setTimer(title, dateStr, timeStr) {
var timer = setInterval(function () {
var now = new Date();
console.log(now.toTimeString());
if (now.toLocaleDateString() == dateStr && now.toTimeString().substring(0, 5) == timeStr) {
alert("Alarm " + title + "has gone off !");
clearInterval(timer);
}
}, 1000);
return timer;
}
jQuery Mobile automatically enhances pages by registering its functions to handle the jQuery ready. If you want to include custom JavaScript
in a document, you have to take care not to have your code executed before jQuery Mobile has finished
processing the document. This means you have to wait for a different event, called pageinit
$(document).on("pageinit", function() {
//Your code.
});
Or you could try delegated event:
$(document).on("click","#saveAlarm",function () {
var deStr = $("#alarmDate").datebox('getTheDate').toLocaleDateString();
var dtStr = $("#alarmTime").datebox('getTheDate').toTimeString();
setTimer($("#alarmTitle").val(),deStr,dtStr);
setInterval(function(){alert(1111);},1000);
alert(123);
});
I am trying to hide a button (not inside form tags) after it has been clicked. Below is the existing code. All solutions I have tried either break the functionality or interfere with the form on the page.
The content between the DIV hidden-dev tags is hidden until the button near the bottom of the code is clicked. Once that button is clicked, all of the remaining content is shown to the user.
Once the content is shown, there is no use for the button "Check Availability" so I would like to hide it (especially because the submit button appears for the core form, and it is confusing to see both at the bottom of the full length page.
Here's the existing code that does everything properly (except hide the button after the click)...
<html>
<head>
<style>
.hidden-div {
display:none
}
</style>
</head>
<body>
<div class="reform">
<form id="reform" action="action.php" method="post" enctype="multipart/form-data">
<input type="hidden" name="type" value="" />
<fieldset>
content here...
</fieldset>
<div class="hidden-div" id="hidden-div">
<fieldset>
more content here that is hidden until the button below is clicked...
</fieldset>
</form>
</div>
<span style="display:block; padding-left:640px; margin-top:10px;">
<button onclick="getElementById('hidden-div').style.display = 'block'">Check Availability</button>
</span>
</div>
</body>
</html>
Change the button to :
<button onclick="getElementById('hidden-div').style.display = 'block'; this.style.display = 'none'">Check Availability</button>
FIDDLE
Or even better, use a proper event handler by identifying the button :
<button id="show_button">Check Availability</button>
and a script
<script type="text/javascript">
var button = document.getElementById('show_button')
button.addEventListener('click',hideshow,false);
function hideshow() {
document.getElementById('hidden-div').style.display = 'block';
this.style.display = 'none'
}
</script>
FIDDLE
This is my solution. I Hide and then confirm check
onclick="return ConfirmSubmit(this);" />
function ConfirmSubmit(sender)
{
sender.disabled = true;
var displayValue = sender.style.
sender.style.display = 'none'
if (confirm('Seguro que desea entregar los paquetes?')) {
sender.disabled = false
return true;
}
sender.disabled = false;
sender.style.display = displayValue;
return false;
}
Here is another solution using Jquery I find it a little easier and neater than inline JS sometimes.
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
/* if you prefer to functionize and use onclick= rather then the .on bind
function hide_show(){
$(this).hide();
$("#hidden-div").show();
}
*/
$(function(){
$("#chkbtn").on('click',function() {
$(this).hide();
$("#hidden-div").show();
});
});
</script>
<style>
.hidden-div {
display:none
}
</style>
</head>
<body>
<div class="reform">
<form id="reform" action="action.php" method="post" enctype="multipart/form-data">
<input type="hidden" name="type" value="" />
<fieldset>
content here...
</fieldset>
<div class="hidden-div" id="hidden-div">
<fieldset>
more content here that is hidden until the button below is clicked...
</fieldset>
</form>
</div>
<span style="display:block; padding-left:640px; margin-top:10px;"><button id="chkbtn">Check Availability</button></span>
</div>
</body>
</html>
CSS code:
.hide{
display:none;
}
.show{
display:block;
}
Html code:
<button onclick="block_none()">Check Availability</button>
Javascript Code:
function block_none(){
document.getElementById('hidden-div').classList.add('show');
document.getElementById('button-id').classList.add('hide');
}
You can use this
Html
<button class="btn-plus" onclick="afficherTexte(<?php echo $u["id"]."2" ?>,event)">+</button>
Java script
function afficherTexte(id,event){
var x = document.getElementById(id);
x.style.display = "block";
event.target.style.display = "none";
}
I have been working on Chrome extension and am having problems. What I'm trying to do: when you click on the icon to the right of the search bar, a search bar comes up which you type your query in and hit enter. It will then go to http://dev.bukkit.org/search/?search=(whatever was entered). This is what I have but it is not working.
<scriptLANGUAGE="JavaScript">
function whatURL() {
window.location= 'http://dev.bukkit.org/search/?search=' + document.form1.url.value;
}
</SCRIPT>
<FORM name=form1>
<inputtype="text"id="url">
<inputtype="button"id="btnSearch"value="Search"onClick="return whatURL()"/>
</FORM>
Thank you:) Note: I have the manifest and everything, its just the javascript part thats not working.
EDIT: Rewrote it now it works!!!
<html>
<head>
<script>
function onLoad() {
document.getElementById("mytextfield").focus();
}
function onKeyPress(e) {
if (e.keyCode == 13) {
openResults();
}
}
function openHomePage() {
window.open("http://dev.bukkit.org/");
}
function openResults() {
window.open("http://dev.bukkit.org/search/?search=" + encodeURIComponent(document.getElementById("mytextfield").value));
}
</script>
</head>
<body onload="onLoad();">
<img src="png-3.png" onclick="openHomePage();" style="border-width: 0px; cursor: pointer" /><br>
<div name="myFormDiv" style="center: 6px;">
<br>
<input type="search" id="mytextfield" name="mytextfield" value="Search..." onkeypress="onKeyPress(event);" />
</div>
</div>
</body>
</html>
Try changing...
<inputtype="button"id="btnSearch"value="Search"onClick="return whatURL()"/>
to..
<inputtype="button"id="btnSearch"value="Search"onClick="whatURL()"/>
window.location doesn't need to be returned to anything. You're already making the window point to your given url when you execute window.location = "http://myurl.com"
I have the following html
<div id="personalText" >
<div class="display">
edit
<p id="descText">{{profile.desc}}</p>
</div>
<div class="edit" style="display:none;">
<textarea cols='40' rows='9' id="desc_text" style="border:none; display:block;">{{profile.desc}}</textarea>
<input type="submit" value="Update"/>
</div>
</div>
and this is piece of js I have
$("#editButton").click(function() {
$(".display, .edit").toggle();
var desc_text = $("#desc_text").text();
return false;
});
$("input[type='submit']").on("click", function() {
var dec_text = $('#desc_text').val();
$.ajax({
type: "POST",
url:"/users/update_desc/",
data: {
'val': dec_text,
},
}).success(function(){
$(".display, .edit").toggle();
$("#descText").html(dec_text);
});
return false;
});
The problem is that the $("#editButton").click(function() is fired twice if the js snippet below it is present, however if I comment out the $("input[type='submit']").on("click", function() then it is working fine.
Also the textarea should show the text inside it, but it is does not display anything. Although the text is present there but it does not show it.