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.
Related
I am creating new rows using jquery and want to delete that row when delete button is pressed. Adding new row part is working fine and the problem is in delete part. When I click on delete button then nothing happens. It doesn't even show alert which is written in code. It seems to me like delete button is not even getting pressed.
How can I delete that particular record when delete button is pressed?
JSfiddle is given below
https://jsfiddle.net/ec2drjLo/
<div class="row">
<div>
Currency: <input type="text" id="currencyMain">
</div>
<div>
Amount: <input type="text" id="amountMain">
</div>
<div>
<button id="addAccount">Add Account</button>
</div>
</div>
<div id="transactionRow">
</div>
As you have added the elements as a string, they are not valid HTML elements and that's why you can't add an event listener. You can add the click event to the document body and capture the event target, like
$(document).on('click', function (e){
if(e.target.className === 'deleteClass'){
//process next steps
}
}
You can try the demo below, not sure if it's the result you need, but the delete button works. Hope it helps!
let accountCount = 0;
$("#addAccount").click(function (e)
{
accountCount++;
let mystring = "<label class=\"ok\" id=\"[ID]\">[value]</label>";
let deleteString = "<button class=\"deleteClass\" id=\"deleteAccount"+ accountCount +"\">Delete Account</button>";
let currency = mystring.replace("[ID]", "currency"+ accountCount).replace("[value]", $("#currencyMain").val());
let amount = mystring.replace("[ID]", "amount"+ accountCount).replace("[value]", $("#amountMain").val());
$("#transactionRow").append(currency);
$("#transactionRow").append(amount);
let div = document.createElement('div');
div.innerHTML =deleteString;
$("#transactionRow").append(div);
$("#currencyMain").val('');
$("#amountMain").val('')
});
$(document).on('click', function (e)
{
if(e.target.className === 'deleteClass'){
var content = $("#transactionRow").html();
var pos = content.lastIndexOf("<label class=\"ok");
if(pos > 5)
$("#transactionRow").html(content.substring(0,pos));
else
alert("You cannot delete this row as at least one Account must be present");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="row">
<div>
Currency: <input type="text" id="currencyMain">
</div>
<div>
Amount: <input type="text" id="amountMain">
</div>
<div>
<button id="addAccount">Add Account</button>
</div>
</div>
<div id="transactionRow" style="border: 1px solid grey">
</div>
I am trying to speak the text that populates an HTML paragraph after a button is pressed. The library I am using for speech is speak.js, and so far, the simple demos I put together of my webpage speaking work. But, now I am pulling text off of the Internet after a button is pressed, and I would like this text to be spoken. I am having trouble figuring out how to pull the text into the HTML tag that has the speak() function.
<div class="container well" id="#wiki-body-container">
<p id="wiki-body" onchange="speak('!!! TEXT GOES HERE !!!')"></p>
<div id="audio"></div>
</div>
That is the HTML that I have. After a button is pressed, the paragraph with id wiki-body gets filled. This text what I want to use to populate the speak() function parameters.
How can I go about doing this?
EDIT (adding more code):
Here is the corresponding javascript I am using to populate the paragraph.
$(document).ready(function(){
$('#wiki-body-container').hide();
$('#search-button').click(function() {
console.log($("#search").val().replace(" ", "_"));
var searchTerm = $("#search").val().replace(" ", "_");
$.ajax({
type: "GET",
url: 'http://en.wikipedia.org/w/api.php?action=parse&format=json&prop=text§ion=0&page=' + searchTerm + '&callback=?',
contentType: "application/json; charset=utf-8",
async: false,
dataType: "jsonp",
success: function (data, textStatus, jqXHR) {
console.log(data);
var markup = data.parse.text["*"];
var section = $('<p></p>').html(markup);
// remove links as they will not work
section.find('a').each(function() { $(this).replaceWith($(this).html()); });
// remove any references
section.find('sup').remove();
// remove cite error
section.find('.mw-ext-cite-error').remove();
// fill in html section with text
$('#wiki-body-container').show();
$('#wiki-body').html($(section).find('p'));
speak(section); // Not able to call
},
error: function (errorMessage) {
console.log(errorMessage)
}
});
});
});
And here is the full HTML body.
<body>
<div class="jumbotron text-center">
<a title="By English: Redrawn in SVG by Otourly (concept by Paullusmagnus)
Deutsch: Nachgezeichnet als Vektorgrafik von Otourly (Konezpt von Paullusmagnus). (Original image Image:Wikipedia-logo.png) [CC BY-SA 3.0 (https://creativecommons.org/licenses/by-sa/3.0)], via Wikimedia Commons" href="https://commons.wikimedia.org/wiki/File:Wikipedia_svg_logo.svg"><img width="128" alt="Wikipedia svg logo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Wikipedia_svg_logo.svg/1000px-Wikipedia_svg_logo.svg.png"></a>
<p>Search Wikipedia by voice!</p>
<form class="form-inline">
<div class="input-group">
<input type="search" id="search" class="form-control" size="50" placeholder="Verbalize a query" required>
<div class="input-group-btn">
<button type="button" class="btn btn-danger" id="search-button"><span class="glyphicon glyphicon-search"></span></button>
</div>
</div>
</form>
</div>
<div class="container well" id="#wiki-body-container">
<p id="wiki-body"></p>
<div id="audio"></div>
</div>
</body>
If you don't want use a timer and check contents of <p> element, you can try DOMSubtreeModified event:
function changeText() {
document.getElementById( 'wiki-body' ).innerText = document.getElementById( 'text' ).value
}
document.getElementById( 'wiki-body' ).addEventListener( 'DOMSubtreeModified', function() {
speak( this.innerText )
} )
p {
width: 300px;
height: 50px;
background-color: #efefef;
border: 1px solid #ddd
}
<script src="http://yourjavascript.com/21843061212/speakclient.js"></script>
<input type="text" id="text" value="Stack Overflow" />
<button type="button" onclick="changeText()">Add and Speak this text</button>
<p id="wiki-body"></p>
<div id="audio"></div>
Note: The Speak function of code snippet above can't execute. Because I couldn't find a free CDN for the speak.js script. Please execute the code on the client.
Below is the script works fine with hover but need it to be either a toggle or a click function if anyone has any ideas on how to achieve this.
it collects data from different php files depending on the button that is hoverd over thats fine but when working on the page it pops up all the time kind of annoying
<script type="text/javascript">
$(document).ready(function(){
$(".container").hide();
$(['btn1', 'btn2', 'btn3']).each(function(){
var btn = this;
var con = $("#"+btn).children('.container');
$("#"+btn).hover(
function(){
$(".hover").mouseout();
$(this).addClass('hover');
var cache = $(con).children('p');
//check to see if content was loaded previously
if(cache.size()){
con.show();
}else{
$(con).show();
$(con).html('<img src="imgs/loader.gif" alt="Loading..." />');
$.ajax({
url: 'data/'+btn+'.php',
type: 'get',
success: function(data){
$(con).html(data);
}
});
}
},
//mouseout
function(){
if($.browser.msie){
$(con).hide();
}else{
$(con).fadeOut(250);
}
$(this).removeClass('hover');
}
);
});
});
</script>
<div id="btn1" class="wrapper">
<div class="button">
<p><i class="fa fa-users" aria-hidden="true"></i></p>
</div>
<div class="content">
</div>
</div>
<div id="btn2" class="wrapper">
<div class="button">
<p><i class="fa fa-comments" aria-hidden="true"></i></p>
</div>
<div class="content">
</div>
</div>
Thanks guys i figured out how to do this and also make the coding less.
so what it does is you create the dropdown button with the btn1 id
and the next button with id of btn2.
the parsing php files called btn1.php you code what you need to display the data in the content div of the buttons
Aaaargh sorry seems like only the first button works shows the conent div and closes when clicked but subsequent new buttons show the content div Ajax requests are all fine
but dont close when clicked again
<script>
$(".wrapper").click( function()
{
var btn = $(this).attr('id');
var conte = $('.content').css('display');
var con = $(this).children('.content');
if (conte == 'block') {
$(con).css('display','none');
} else if (conte == 'none') {
$(con).css('display','block');
$(con).html('<img src="imgs/loader.gif" alt="Loading..." />');
$.ajax({
url: 'configuration/'+btn+'.php',
type: 'get',
success: function(data){
$(con).html(data);
}
});
}
});
</script>
Got blocked.
Created a php page with normal html, css, js and php.
Inside of that file, wanted for the user to be able to see events accordingly to the selected date.
In order to do that, once the date was selected, the value associated that date would get posted into a php script.
Inside of that php script, the posted variable was going through some conditions and echoing the results.
Then, the result of this php script, would be displayed in the initial php page.
Ok, so far so good.
Thing is,
Want the text to appear styled, which means, want it to allow styling classes.
Did some research but can't seem to find any problem like that.
When you go to the page and write, for example, the following in input: 12/22/2016, you can see data being displayed. Problem is, it doesn't come anywhere close to styled.
This makes sense, somehow, because the php script doesn't have mentioned anywhere to use those styles.
The styles are being used in the initial php page (html/css/js/php), where the results will be displayed.
Initially I thought the style in the results would be recognized because it is called in the exact same page where those style files are mentioned.
What am I doing wrong?
This it the result of the php script:
<h1 class="hero-header-otro">It works! dfgdfgdfg</h1>
As you can see, it has the class called inside of the h1
This is the javascript code that posts in the php script and displays the results in a specific div of the same page where this js code is, which is the php page mentioned all the way through this message:
jQuery(function($) {
$(".date").datepicker({
onSelect: function(dateText) {
display("Selected date: " + dateText + "; input's current value: " + this.value);
$(this).change();
}
}).on("change", function() {
display("Got change event from field");
$.ajax({
type: "POST",
url: 'events_script.php',
data: ({dates: this.value}),
success: function(data) {
$('.results-ajax').html(data);
alert(data);
}
});
});
function display(msg) {
$("<p>").html(msg).appendTo(document.body);
}
});
The CSS:
.hero-content > h1.hero-header-otro {
font-size: 4rem;
margin-bottom: 20px;
font-weight: bold;
color: #ffffff;
}
Try using datatype html in ajax request:
$.ajax({
type: "POST",
url: 'events_script.php',
data: ({dates: this.value}),
dataType : 'html',
success: function(data) {
$('.results-ajax').html(data);
alert(data);
}
});
Got it fixed. This it the result of the php script:
<div class="tab-pane" role="tabpanel">
<div class="container day-events">
<div class="row event-list">
<div class="event-list-time col-md-3 col-sm-3 center" style="background-image: url(/lascruces_styles/img/events-img/event.jpg);">
<p class="event-list-start-time">2016-12-22 00:00:00</p>
<hr class="event-list-time-divider">
<p class="event-list-end-time">2016-12-22 00:00:00</p>
</div>
<div class="event-list-info col-md-9 col-sm-9">
<h2 class="event-list-name">dfgdfgdfg</h2>
<p>Organized by <span class="event-list-organizer">yyyyyyy</span></p>
<p class="event-list-description"><p>dffghfghgfhf</p></p>
<button type="button" class="btn more-info-list">More Information</button>
</div>
</div>
</div>
This is the javascript code that posts in the php script and displays the results in a specific div of the same page where this js code is, which is the php page mentioned all the way through this message:
jQuery(function($) {
$(".date").datepicker({
onSelect: function(dateText) {
display("Selected date: " + dateText + "; input's current value: " + this.value);
$(this).change();
}
}).on("change", function() {
display("Got change event from field");
$.ajax({
type: "POST",
url: 'events_script.php',
data: ({dates: this.value}),
dataType : 'html',
success: function(data) {
$('.results-ajax').html(data);
alert(data);
}
});
});
function display(msg) {
$("<p>").html(msg).appendTo(document.body);
}
});
The PHP:
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
while ($row = mysqli_fetch_assoc($result)) {
echo '<div class="tab-pane" role="tabpanel">
<div class="container day-events">
<div class="row event-list">
<div class="event-list-time col-md-3 col-sm-3 center" style="background-image: url(/lascruces_styles/img/events-img/event.jpg);">
<p class="event-list-start-time">'.$row['Start_Date'].'</p>
<hr class="event-list-time-divider">
<p class="event-list-end-time">'.$row['End_Date'].'</p>
</div>
<div class="event-list-info col-md-9 col-sm-9">
<h2 class="event-list-name">'.$row['Event_Name'].'</h2>
<p>Organized by <span class="event-list-organizer">'.$row['Company_Name'].'</span></p>
<p class="event-list-description">'.$row['Event_Description'].'</p>
<button type="button" class="btn more-info-list">More Information</button>
</div>
</div>
</div>
</div>';
}} else { echo 'No results found.'; }
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.