I want to add Show more/less button to any text that has more than 100 characters. I use (this is in index.php):
$(document).ready(function() {
var content = $('.textcontent').html();
var lessContent = content.substr(0, 100);
if (content.length > 100) {
$('.textcontent').html(lessContent).append("<a href='#' class ='showMore'>...</a>")
} else{
$('.textcontent').html(content);
}
$('body').on('click', '.showMore', function(event){
event.preventDefault();
$(this).parent('.textcontent').html(content).append("<a href='#' class='showLess'>...</a>")
});
$('body').on('click', '.showLess', function(event){
event.preventDefault();
$(this).parent('.textcontent').html(lessContent).append("<a href='#' class='showMore'>...</a>")
});
});
So it worked for a normal element like(also in index.php):
<div class = 'textcontent'>blablabla</div> .
But for elements loaded from database using ajax, it doesn't work. (v this is in index.php as well)
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("pul").innerHTML = this.responseText;
}
};
xmlhttp.open("GET","home.php",true);
xmlhttp.send();
Now the home.php
echo "<div class ='textcontent'>$content</div>"
Does anybody knows why? Please help me. Thanks alot.
Related
I have created the below code which should on load, dump the document visible state to a mysql database via xmlhttp.open and .send.
The code does not execute as desired on open, but functions as expected with switching tabs, minimizing browser, etc.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
//Identify if visible or not
function handleVisibilityChange() {
var state = 'Visable';
if (document.hidden) {
var state = 'Hidden';
} else {
var state = 'Visable';
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
}
};
xmlhttp.open("GET","./track2.php?state="+state,true);
xmlhttp.send();
}
document.addEventListener("visibilitychange", handleVisibilityChange, false);
</script>
</head>
<body>
</body>
</html>
This file is being loaded as an include in a number of php pages, sort of stats tracker for the site.
This is my first php project. I have imlemented partial ajax postback by refering to this article: PHP AJAX SQL reference article
Now, I am trying to show a loading gif when the partial loading starts and hide it when the partial loading completes. Here is the code that I am using in Javascript:
function showUser1(str)
{
if (str == "")
{
document.getElementById("mems").innerHTML = "I caanot fetch: " + str;
return;
}
else
{
document.getElementById("loadgif").style.visibility= "visible";
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else
{
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
document.getElementById("outerpicwrapper").innerHTML = "";
document.getElementById("mems").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET","getmembers.php?q2="+str,true);
xmlhttp.send();
document.getElementById("loadgif").style.visibility= "hidden";
}
}
In the first line of body, I have written:
<img id="loadgif" src="img/loading.gif" class="loadinggif" />
In the CSS file, i have written:
.loadinggif
{
position: absolute;
z-index: 200;
visibility: hidden;
}
The code is working fine and shows the data but, loading gif is not shown.
I have even tried display:none and display:block in place of visibility.
Kindly help.
The problem is AJAX is asynchronous. Thus your code doesn't wait for the data to be fetched and
document.getElementById("loadgif").style.visibility= "visible";
document.getElementById("loadgif").style.visibility= "hidden";
These lines are executed simultaneously.
To prevent this from happening you can put
document.getElementById("loadgif").style.visibility= "hidden";
inside the callback as well
function showUser1(str)
{
if (str == "")
{
document.getElementById("mems").innerHTML = "I caanot fetch: " + str;
return;
}
else
{
document.getElementById("loadgif").style.visibility= "visible"; // This line displays the loading gif
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else
{
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
document.getElementById("outerpicwrapper").innerHTML = "";
document.getElementById("mems").innerHTML = xmlhttp.responseText;
document.getElementById("loadgif").style.visibility= "hidden"; // This line hides the loading gif
}
};
xmlhttp.open("GET","getmembers.php?q2="+str,true);
xmlhttp.send();
}
}
Finally, I made my issue work out using JQuery.
I just made display:none in CSS and called the show() function of jquery on the loading gif div. This show function was written inside the javascript code.
I have this code, including buttons, each of which calls a ajax function when clicked, and a popup which is filled with the content from the ajax function.
<script>
function loadindex1() {
var xmlhttp;
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//select the div to change by id
document.getElementById("tt_popup").innerHTML = xmlhttp.responseText;
}
}
//select the file to show next
xmlhttp.open("GET", "stop_1.php", true);
xmlhttp.send();
}
function loadindex2() {
var xmlhttp;
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//select the div to change by id
document.getElementById("tt_popup").innerHTML = xmlhttp.responseText;
}
}
//select the file to show next
xmlhttp.open("GET", "stop_2.php", true);
xmlhttp.send();
}
</script>
</head>
<body>
<div data-role="popup" id="tt_popup" >
<p>Have patience...</p>
</div> <!-- /popup -->
<div id="tt_div1"></div>
<a href="#tt_popup" data-role="button" data-rel="popup" class="ui-btn ui-corner-all" onclick="loadindex1()" id="button_stop1" data-transition="flip" >
<img src="/Pictures/Location_original.png" alt="Problems?" id="loc_img" />
</a>
<a href="#tt_popup" data-role="button" data-rel="popup" class="ui-btn ui-corner-all" onclick="loadindex2()" id="button_stop2" data-transition="flip" >
<img src="/Pictures/Location_original.png" alt="Problems?" id="loc_img" />
</a>
I now want to also know which button is clicked, so I can do something with that. I want use local-storage, and make a panel where a user can view information about the place of the last-clicked button. But I first need to know which button is clicked.
(I omitted some of the code, because the full code is rather long)
I tried to put this in a script tag in the head:
document.getElementById('button_stop1').onclick = function() {
alert("button was clicked");
}
But that didn't do anything. The button did the same as before.
I also tried:
(function () {
// Enables stricter rules for JavaScript
"use strict";
// Reference two buttons, and a textbox
var playButton = document.getElementById("play"),
stateTextBox = document.getElementById("state"),
ignoreButton = document.getElementById("ignore");
// Function that changes the value of our stateTextBox
function changeState(event) {
stateTextBox.value = event.target.id + " was clicked";
}
// Event handlers for when we click on a button
playButton.addEventListener("click", changeState, false);
ignoreButton.addEventListener("click", changeState, false);
}());
But that also did nothing. At least my first try worked when I used a button without all that kind of stuff I put in the button. So I figured it had something to do with that.
I think I can't call two functions in one button,but I ran out of things to try.
If each button calls a different function, why do you need to determine which button was clicked?
If you really must, I guess you could create something, like this (in JQuery):
$(document).on("pageinit",function()
{
$(".ui-btn").on("click", function()
{
var button_value = $(this).val();
var button_id = $(this).attr("id");
alert("You\'ve just clicked on the "+button_value+" button, with ID: "+button_id+"!");
});
});
To close this off, thanks to Omar:
HTML:
<div data-role="popup" id="tt_popup">
<p>Have patience...</p>
</div>
button_stop1
button_stop2
Javascript:
$(document).on("pagecreate", function () {
$("#button_stop1, #button_stop2").on("click", function () {
$("#tt_popup p").text("Button with ID " + this.id + " was clicked");
});
});
as seen in this fiddle solved the problem.
While user is in a specific page I should allow them to click on a link. Then a lightbox to be shown and once form inside lightbox has been submitted, the lightbox should be closed and user should be redirected to index page.
I have two javascript function, first one is used to show the lightbox, and second one is to submit lightbox form and fading it. The problem is that I do not know how to redirect user to index page.
function rateItem(){
document.getElementById("box").style.display = "Block";
document.getElementById("frame").style.display = "Block";
if(window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
}
else
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
document.getElementById("box").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("get","../Item/rate",false);
xmlhttp.send();
return false;
}
function rate(id){
rate = $('#rate').val();
document.getElementById("box").style.display = "Block";
document.getElementById("frame").style.display = "Block";
if(window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
}
else
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
document.getElementById("box").style.display = "none";
document.getElementById("frame").style.display = "none";
window.location="http://localhost:9001/index"; << does not work
window.location.replace("http://localhost:9001/index"); <<does not work
}
}
xmlhttp.open("POST","../Item/submit?rate="+rate+"&id="+id,false);
xmlhttp.send();
}
Any jquery solution would be appreciated as well
Replace the line
window.location="http://localhost:9001/index";
with this
window.location.replace("http://localhost:9001/index");
For jquery based redirection use this:
var url = "http://localhost:9001/index";
$(location).attr('href',url);
Try using:
window.location.href=url
I have these two buttons that a user can click to either approve/deny somebody on a site, and the code works perfect in IE, but when I try and use firefox, nothing at all happens when I click the buttons.
the javascipt/ajax code is:
function ApproveOrDenyStudent(i, action){
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
var newStudentEmail = "newStudentEmail" + i;
var emailField = document.getElementById(newStudentEmail);
var email = emailField ? emailField.value : '';
// Approve/deny the user
if (action == 0){
xmlhttp.open("GET","ApproveStudent.php?email="+email,true);
}
else if (action == 1){
xmlhttp.open("GET","DenyStudent.php?email="+email,true);
}
xmlhttp.send();
window.location.reload();
}
any help would be great! Thanks!
You got a race condition!
xmlhttp.send();
window.location.reload();
You are making an asynchronous call. You are making the Ajax request and replacing the page right away! The call to the server is not getting out.
Reload the page when the request is complete.
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState == 4){
window.location.reload(true);
}
};
xmlhttp.send();