Develop Reference

Css and jquery not loaded after call to ajax even when using .on to delegate

I'm loading some content via ajax when I click on a button and it works well though it doesn't load the css (bootstrap) for the new html content I added to an existing div.
I've tried everything and checked everywhere but other answers seem to say that the solution to my problem is to delegate my click call with .on but it doesn't work.
So here is the html code.
<button id="reloadtweet" class="btn btn-info mt-4 new">Reload to get new tweets</button>
<div id="newtweet" class="newt"></div>
Then the jquery code to load ajax on click:
<script>
$(document).ready(function () {
$('body').on('click', '#reloadtweet', function (event) {
event.preventDefault();
reloadtweetb();
})
});
</script>
And lastly the ajax bit:
<script>
function reloadtweetb() {
console.log("reloadtweetb is working!");// sanity check
$.ajax({
url : "/reloadtweet",
type : "POST", // http method
data : { confnum : {{ confnum }},
csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val(),
}, // data sent with the post request
// handle a successful response
success : function(json) {
if (json.success) {
//alert('success');
$('#newtweet').append('<p class="mt-3">See the last 15 tweets with the hashtag <b>#'+json.twitterwhashtag+'</b> over the last 7 days:</p>');
$('#newtweet').append('<div class="row" align="center">');
var i;
for (i = 0; i < json.tweettext.length; i++) {
$('#newtweet').append('<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 mt-2 mb-2 d-flex align-items-stretch justify-content-center">');
$('#newtweet').append('<div class="card bg-light" style="width: 28rem;">');
$('#newtweet').append('<div class="card-body">');
$('#newtweet').append('<h5 class="card-title font-weight-bold">'+ json.tweetusers[i]+'</h5>');
$('#newtweet').append('<small>'+ json.tweetdate[i]+' <br> Retweet count:'+ json.tweetretweetcount[i]+'<br> See on <i class="fab fa-twitter"></i></small>');
$('#newtweet').append('<hr class="my-3" style="border-top: 2px dotted grey;">');
$('#newtweet').append('<p class="card-text" style="font-size: .9rem; font-weight: 400; color: #747373;">'+ json.tweettext[i]+'</p>');
$('#newtweet').append('</div>');
if(json.tweetimage[i]!='') {
$('#newtweet').append('<img class="card-img-top" src="'+ json.tweetimage[i] +'" height="200" alt="Organize a carbon-neutral conference">');
}
$('#newtweet').append('</div>');
$('#newtweet').append('</div>');
}
$('#newtweet').append('</div>');
}else{
alert('nada');
}
console.log("success"); // another sanity check
},
// handle a non-successful response
error : function(xhr,errmsg,err) {
$('#results').html("<div class='alert-box alert radius' data-alert>Oops! We have encountered an error: "+errmsg+
" <a href='#' class='close'>×</a></div>"); // add the error to the dom
console.log(xhr.status + ": " + xhr.responseText); // provide a bit more info about the error to the console
}
});
};
</script>
It looks like this after the ajax call:
after ajax call
instead of like this:
it should be like that

Getting a paragraph's text after a button press and passing it into a javascript function

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&section=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.

How to pass a value form db to popup windows

I want to pass value to popup windows by using a tag with href when I click a
get values form db into hidden layer how to passing values by js.
A tag code
<a 'href=index.php?id=3'></a>
Hidden layer
<div class='wrap'>
<div class='content'>
<h2>Well Hello!</h2>
<p>
<? if ( isset($_GET['id'])){
$id = $_GET['id'];
echo $id ;} ?>
</p>
</div>
</div>
js code
$('a').on('click', function(){
$('.wrap, a').toggleClass('active');
return false;
});

If you want to do this the javascript way, see this example.
$(document).ready(function() {
$('a.toggle-wrap').on('click', function(e) {
e.preventDefault(); // prevent default behaviour of the link that would reload the page
$('.wrap, a.toggle-wrap').removeClass('active'); // remove class active on every link clicking
var target_id = $(this).attr("data-id"); //get the desired id from link
var wrap_element = $('.wrap[data-target=' + target_id + '] p');
var link_element = $('a[data-id=' + target_id + ']');
link_element.toggleClass('active');
$.ajax({
type: "GET",
url: "someOtherScriptThatOnlyOutputsResults.php",
data: "id="+target_id,
success: function(resultData) {
wrap_element.html(resultData).toggleClass('active'); // only toggle desired ids
}, error: function() {
wrap_element.html('Could not load data').toggleClass('active');
}
});
});
});
.wrap {
display: none;
}
.wrap.active {
display: block;
}
a {
color: green;
}
a.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="toggle-wrap" data-id="3">Link 3</a>
<a class="toggle-wrap" data-id="4">Link 4</a>
<div class="wrap" data-target="3">
<div class="content">
<h2>Well Hello content 3!</h2>
<p>Your db content related to id 3 from database, using php.
</p>
</div>
</div>
<div class="wrap" data-target="4">
<div class="content">
<h2>Well Hello content 4!</h2>
<p>Your db content related to id 4 from database, using php.
</p>
</div>
</div>
Add identifiers to the hidden wrap(s) and the link(s) and work with those. By using queries as seen in the js snippet, you can target certain HTML tags. Use CSS display to hide and show your wrap tag.
Create a new PHP file someOtherScriptThatOnlyOutputsResults.php to get and return data:
<?php
if(isset($_GET['id'])) {
$pdo = new PDO('mysql:host=someHost;dbname=someDatabase', 'someUser', 'somePass');
$statement = $pdo->prepare("SELECT columnWithContent FROM yourContentTable WHERE id = ?");
$statement->execute(array($_GET['id']));
$row = $statement->fetch();
$content = $row['columnWithContent'];
echo $content;
}
?>

Ajax setInterval is executed twice for manipulated notification

First, Let's me explain. I have a page to monitoring my users. In this page, I can see all the request of my users on a table and I can see too the total of the request is in to the server. My question is, How can I make a notification when a new request is come. I want to make a notification like big window pop-up said "New Request Is Come" and one tone of music that will be play.
This is my code :
Main page
<!-- start: Header -->
<div class="container-fluid-full">
<div class="row-fluid">
<noscript>
<div class="alert alert-block span12">
<h4 class="alert-heading">Warning!</h4>
<p>You need to have JavaScript enabled to use this site.</p>
</div>
</noscript>
<!-- start: Content -->
<!--First indicator-->
<marquee>Belum Diterima: <span id="request_belum_terima"><?php
if ($request_belum_terima > 0) {
echo $request_belum_terima;
} else {
echo "0 ";
};
?></span> buah Request</marquee>
<div class="box-header">
<h2><i class="halflings-icon align-justify"></i><span class="break"></span>Penerimaan Request</h2>
<div class="box-icon">
<i class="halflings-icon chevron-up"></i>
</div>
</div>
<!--Table one-->
<div class="box-content" id="things_table">
<?php $this->load->view('view_monitoring_belum_terima'); ?>
</div>
<!--Second indicator-->
<marquee>Belum Selesai: <span><?php
if ($request_sudah_terima > 0) {
echo $request_sudah_terima;
} else {
echo '0 ';
}
?></span> Request</marquee>
<div class="box-header">
<h2><i class="halflings-icon align-justify"></i><span class="break"></span>Outstanding Request</h2>
<div class="box-icon">
<i class="halflings-icon chevron-up"></i>
</div>
</div>
<!--Table two-->
<div class="box-content" id="things_table2">
<?php $this->load->view('view_monitoring_belum_selesai'); ?>
</div>
</div><!--/.fluid-container-->
</div><!--/row-->
<?php $this->load->view('view_monitoring_modal') ?>
<div class="clearfix"></div>
<!-- start: JavaScript-->
<?php $this->load->view('/include/js.html'); ?>
<!-- end: JavaScript-->
<?php $this->load->view('view_monitoring_js'); ?>
I using codeigniter and some jquery to develop my app. So, I solve it one by one.
First, I use the indicator from first marquee. If you can see, there are one ID's jquery on span tag. For ex, First indicator have value 1. So, I use ajax to pool the data from database and check it with old value;
This is the code :
Controller
public function hitungRequestBelumTerima() {
$row = $this->model_request->hitungRequestBelumTerima();
echo json_encode($row);
}
Model
public function hitungRequestBelumTerima() {
$this->db->select('*');
$this->db->where('is_approved', 1);
$this->db->where('by_who is not null');
$this->db->where('it_person is null');
$query = $this->db->get('tbl_requestfix');
if ($query->num_rows() > 0) {
return $query->num_rows();
}
return NULL;
}
After that, I write a jquery's code to autorefresh the indicator like this :
function refresh() {
var ini;
var requestMasuk = $('#request_belum_terima').text();
setTimeout(function() {
$.ajax({
url: '<?php echo base_url() . 'control_closing/hitungRequestBelumTerima/' ?>',
type: 'POST',
dataType: 'json',
success: function(obj) {
if (obj > requestMasuk) {
ini = obj;
$('#request_belum_terima').text(obj);
alert("New request coming");
}
}
}).always(function() {
$('#request_belum_terima').text(ini);
}).done(function() {
$('#request_belum_terima').text(ini);
});
$('things_table2').fadeOut('slow').load('<?php ?>').fadeIn('slow');
refresh();
}, 20000);
}
$(document).ready(function() {
refresh();
}
It working to refresh, but I dont know, why alert is pop up twice. So, the case is : one new request but two alert of notif has pop-up on one interval. So, in first 10 minutes for ex, Alert is raising. In 20 minutes, alert still coming. But in 30 minute, the alert is not raise. Why the alert raise twice ?

use setInterval instead of setTimeout. Here is your ajax function (ajax not tested, as you say its working)
function refresh() {
var ini;
var requestMasuk = $('#request_belum_terima').text();
$.ajax({
url: '<?php echo base_url() . 'control_closing/hitungRequestBelumTerima/' ?>',
type: 'POST',
dataType: 'json',
success: function(obj) {
if (obj > requestMasuk) {
ini = obj;
$('#request_belum_terima').text(obj);
alert("New request coming");
}
}
}).always(function() {
$('#request_belum_terima').text(ini);
}).done(function() {
$('#request_belum_terima').text(ini);
});
$('things_table2').fadeOut('slow').load('<?php ?>').fadeIn('slow');
}
$(document).ready(function() {
setInterval(function () {
refresh();
}, 20000);
}

.click js is fired twice, if another js is present

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.