I am trying to make a chatbox. Everything is working properly but when I click the "Start Chat" button, the alert shows "Object Object". Otherwise data fetching is perfect. I just can't see the modal chat box.
There is another almost similar example but in it the issue got solved by putting the <div id="user_model_details"></div> while that doesn't seem to be the case in this one.
<noscript><meta http-equiv="refresh" content="0; url=JSDisabled.html" /></noscript>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="js/User.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/User.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<div class="split Connect_Content" id="Connect_Cnt">
<div id="user_model_details"></div>
<script>
$(document).ready(function() {
fetch_user();
setInterval(function() {
fetch_user();
}, 5000);
function fetch_user() {
$.ajax({
url: "include/abcde.php",
method: "POST",
success: function(data) {
$('#Connect').html(data);
}
})
}
function make_chat_dialog_box(to_user_id, to_username) {
var modal_content = '<div id="user_dialog_' + to_user_id + '" class="user_dialog" title="Chat window with ' + to_username + '">';
//alert (modal_content);
modal_content += '<div style="height:30%; border:1px solid #ccc; overflow-y: scroll; margin-bottom:3%; padding:5%;" class="chat_history" data-toid="' + to_user_id + '" id="chat_history_' + to_user_id + '">';
modal_content += '</div>';
modal_content += '<div class="form-group">';
modal_content += '<textarea name="chat_message_' + to_user_id + '" id="chat_message_' + to_user_id + '" class="form-control"></textarea>';
modal_content += '</div><div class="form-group" align="right">';
modal_content += '<button type="button" name="send_chat" id="' + to_user_id + '" class="btn btn-info send_chat">Send</button></div></div>';
alert(modal_content);
var test = $('#user_model_details').html(modal_content);
alert(test);
}
$(document).on('click', '.start_chat', function() {
var to_user_id = $(this).data('toid');
var to_username = $(this).data('tousername');
//alert (to_user_id);
//alert (to_username);
make_chat_dialog_box(to_user_id, to_username);
$("#user_dialog_" + to_user_id).dialog({
autoOpen: false,
width: 400
});
$('#user_dialog_' + to_user_id).dialog('open');
});
});
</script>
</div>
Finally found the mistake in this one. Extreme silly mistake.I closed the </div> at the end of the page rather then closing it in the same line like this:
<div class="split Connect_Content" id="Connect_Cnt"></div>
</div> at end of page needs to be erased. It solved the problem. Sorry to disturb you guys.
Related
How to make the function of adding new sections and subsections work on the created sections.
'use strict';
const btnNewChapter = document.querySelector('.btn-new-chapter');
const btnAddChapter = document.querySelector('.btn-add-chapter');
const btnAddSubChapter = document.querySelector('.btn-add-sub-chapter');
const main = document.querySelector('.main');
const mainBody = document.querySelector('.main-body');
const chapterListBody = document.querySelector('.chapter-list-body');
let appData = [];
btnNewChapter.addEventListener('click', function(){
const ol = document.createElement('ol');
ol.classList.add('main-body');
ol.innerHTML = '<ul class="chapter-list">' +
'<li class="chapter-list-title">' +
'<div class="data">' +
'<h1 class="title">' +
'<input type="text" class="chapter-title" placeholder="Chapter Title">' +
'</h1>' +
'<button class="btn-add-chapter">Add Body Text</button>' +
'<button class="btn-add-sub-chapter">Add SubBody Text</button>' +
'</div>' +
'</li>' +
'</ul>' +
'<ul class="chapter-list-body">' +
'<li class="chapter-list-text">' +
'<div class="chapter">' +
'<input type="text" class="chapter-text" placeholder="Chapter Body">' +
'</div>' +
'</li>' +
'</ul>';
main.append(ol);
})
btnAddChapter.addEventListener('click', function(){
const li = document.createElement('li');
li.classList.add('chapter-list-text');
li.innerHTML = '<div class="chapter">' +
'<input type="text" class="chapter-text" placeholder="Chapter Body">' +
'</div>';
chapterListBody.append(li);
});
btnAddSubChapter.addEventListener('click', function(){
const li = document.createElement('li');
li.classList.add('sub-chapter-list-text');
li.innerHTML = '<div class="subchapter">' +
'<input type="text" class="sub-chapter-text" placeholder="SubChapter Body">' +
'</div>';
chapterListBody.append(li);
});
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/normalize.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript</title>
</head>
<body class='main'>
<button class="btn-new-chapter">Add New Chapter</button>
<ol class="main-body">
<ul class="chapter-list">
<li class="chapter-list-title">
<div class="data">
<h1 class="title">
<input type="text" class="chapter-title" placeholder="Chapter Title">
</h1>
<button class="btn-add-chapter">Add Body Text</button>
<button class="btn-add-sub-chapter">Add SubBody Text</button>
</div>
</li>
</ul>
<ul class="chapter-list-body">
<li class="chapter-list-text">
<div class="chapter">
<input type="text" class="chapter-text" placeholder="Chapter Body">
</div>
</li>
<!-- <li class="sub-chapter-list-text">
<div class="subchapter">
<input type="text" class="sub-chapter-text" placeholder="Тело Подраздела">
</div>
</li> -->
</ul>
</ol>
<script src="/scripts/script.js"></script>
</body>
</html>
Next I am going to add button "Save Data", what will add inputs value and chapters to local storage and "remove" button, what will remove chapters, subchapters or titles from local storage and update the page?
In your code you're creating the event listeners before you insert the HTML.
That way your listeners can't be attached to those new items.
You also can't just re-run the event listener after you added the HTML or the events will stack up on the already added HTML resulting in duplication of functionality.
What I did here is I added a counter variable that keeps track of what event goes where.
I also removed the HTML from you HTML file and re-used the same function again for the very first run. That way you don't have the HTML in your code twice.
You don't have to use a counter. You could also use a class you add or remove to keep track of what already has the event but I thought this was the easiest to explain.
'use strict';
const main = document.querySelector('.main');
let counter = 0;
function addChapterHtml(counter) {
const chapterListBody = document.querySelector(`.chapter-list-body.counter${counter}`);
const li = document.createElement('li');
li.classList.add('chapter-list-text');
li.innerHTML = '<div class="chapter">' +
'<input type="text" class="chapter-text" placeholder="Chapter Body">' +
'</div>';
chapterListBody.append(li);
}
function addSubChapterHtml(counter) {
const chapterListBody = document.querySelector(`.chapter-list-body.counter${counter}`);
const li = document.createElement('li');
li.classList.add('sub-chapter-list-text');
li.innerHTML = '<div class="subchapter">' +
'<input type="text" class="sub-chapter-text" placeholder="SubChapter Body">' +
'</div>';
chapterListBody.append(li);
}
function addNewChapterHtml() {
counter ++;
const ol = document.createElement('ol');
ol.classList.add('main-body');
ol.innerHTML = '<ul class="chapter-list">' +
'<li class="chapter-list-title">' +
'<div class="data">' +
'<h1 class="title">' +
'<input type="text" class="chapter-title" placeholder="Chapter Title">' +
'</h1>' +
'<button class="btn-add-chapter counter' + counter + '">Add Body Text</button>' +
'<button class="btn-add-sub-chapter counter' + counter + '">Add SubBody Text</button>' +
'</div>' +
'</li>' +
'</ul>' +
'<ul class="chapter-list-body counter' + counter + '">' +
'<li class="chapter-list-text">' +
'<div class="chapter">' +
'<input type="text" class="chapter-text" placeholder="Chapter Body">' +
'</div>' +
'</li>' +
'</ul>';
main.append(ol);
// after adding the HTML into your DOM we attach the event listeners to those new buttons
document
.querySelector(`.btn-add-chapter.counter${counter}`)
.addEventListener('click', () => addChapterHtml(counter));
document
.querySelector(`.btn-add-sub-chapter.counter${counter}`)
.addEventListener('click', () => addSubChapterHtml(counter));
}
// this event listener can be added right now since the button is in the HTML already
document
.querySelector('.btn-new-chapter')
.addEventListener('click', addNewChapterHtml);
// Now let's use the functions we created above to add the first sections
addNewChapterHtml();
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/normalize.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript</title>
</head>
<body class='main'>
<button class="btn-new-chapter">Add New Chapter</button>
<script src="/scripts/script.js"></script>
</body>
</html>
I'm working on a todo website called Notekeeper+. It has a edit mode toggle, so there is view mode and edit mode, however when I put it in edit mode, my input element does not appear. This makes no sense because this website starts in edit mode, and the input shows. I have compared the website when it started to the website when I put it in edit mode after putting it in view mode and it is the same.
Javascript:
editMode = true;
items = 1
function toggleEditMode() {
console.log(editMode)
if (editMode == true) {
editMode = false
for (i = 0; i < items; i++) {
document.getElementById('item' + (i + 1)).innerHTML = "<h1 id=\"itemTitle" + (i + 1) + "\">" + document.getElementById('itemTitle' + (i + 1)).value + "</h1>"
}
} else {
editMode = true
for (i = 0; i < items; i++) {
document.getElementById('item' + (i + 1)).innerHTML = "<input type=\"text\" id=\"itemTitle" + (i + 1) + "\" value=\"" + document.getElementById('itemTitle' + (i + 1)).innerHTML + ">"
}
}
}
HTML (in edit mode):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Notekeeper+</title>
<link href="/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="/script.js"></script>
<div class="bar">
<h2>Notekeeper+</h2>
</div>
<button onclick="toggleEditMode()" class="right">Toggle Edit Mode</button>
<button class="right">+task</button>
<button class="right">+note</button>
<div class="grid-container">
<div id="item1"><input type="text" id="itemTitle1" value="New Note"></input></div>
</div>
</body>
</html>
Full code can be found at https://repl.it/#UCYT5040/Notekeeper. Feel free to fork that repl for testing.
You are missing 2 semicolons and a quotation 😛, although to be frank, the semicolons weren't strictly necessary, so you were just missing an ending quote for the value attribute.
editMode = true;
items = 1
function toggleEditMode() {
if (editMode == true) {
editMode = false;
for (i = 0; i < items; i++) {
document.getElementById('item' + (i + 1)).innerHTML = "<h1 id=\"itemTitle" + (i + 1) + "\">" + document.getElementById('itemTitle' + (i + 1)).value + "</h1>"
}
} else {
editMode = true;
for (i = 0; i < items; i++) {
document.getElementById('item' + (i + 1)).innerHTML = "<input type=\"text\" id=\"itemTitle" + (i + 1) + "\" value=\"" + document.getElementById('itemTitle' + (i + 1)).innerHTML + "\">"
}
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Notekeeper+</title>
<link href="/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="/script.js"></script>
<div class="bar">
<h2>Notekeeper+</h2>
</div>
<button onclick="toggleEditMode()" class="right">Toggle Edit Mode</button>
<button class="right">+task</button>
<button class="right">+note</button>
<div class="grid-container">
<div id="item1"><input type="text" id="itemTitle1" value="New Note">
</div>
</body>
</html>
These types of errors are usually why I prefer using document.createElement(tagName) and setAttribute(name, value) rather than directly modifying HTML.
I am making admin portal, where admin can see the total number of current booking, for this we have to refresh table every 10 sec automatically and there will be also refresh button, which updates the table, I am using the JQuery, Ajax, Json, Spring MVC, Here is also one problem when I click on button It repeats the information. So please help me making these two things automatically refreshing Jquery table form database and Button which also refresh information without repeating the information, Thanks in advance for help and any suggestion,
Note: This is working code, thanks to Prog and ChrisH619
<!DOCTYPE html>
<html>
<head>
<title>Service for home - New Page - Next Generation of Service Provider - Admin Home Page</title>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
<link href="assets/styles.css" rel="stylesheet" media="screen">
<link href="assets/DT_bootstrap.css" rel="stylesheet" media="screen">
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="vendors/flot/excanvas.min.js"></script><![endif]-->
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="vendors/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
function fetchData(){
$(".data-contacts-js tbody").empty();
$.get("http://www.service4homes.com:8080/HomeServiceProvider/booking/getAllBookingDetails", function(data) {
$.each(data, function(i, contact) {
$(".data-contacts-js").append(
"<tr><td>" + contact.custId + "</td>" +
"<td>" + contact.custName + "</td>" +
"<td>" + contact.custMobile + "</td>" +
"<td>" + contact.custEmail + "</td>" +
"<td>" + contact.custAddress + "</td>" +
"<td>" + contact.Date + "</td>" +
"<td>" + contact.Time + "</td></tr>"
);
});
});
}
$(document).ready(function(){
$("#data-contacts-js > tbody").html("");
setInterval(function(){
fetchData();
},10000); // this will call your fetchData function for every 5 Sec.
});
$(document).ready(function(){
$("#data-contacts-js > tbody").html("");
$('#fetchContacts').click(function() {
fetchData();
});
});
</script>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<!--/span-->
<div class="span9" id="content">
<div class="row-fluid">
<!-- block -->
<div class="block">
<div class="navbar navbar-inner block-header">
<div class="muted pull-left">Carpenter Services</div>
</div>
<div class="block-content collapse in">
<div class="span12">
<table class="data-contacts-js table table-striped" >
<thead>
<tr>
<th>ID</th>
<th>Customer Name</th>
<th>Customer Mobile</th>
<th>Customer Email</th>
<th>Address</th>
<th>Date</th>
<th>Time</th>
<th>Status</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<button id="fetchContacts" class="btn btn-default" type="submit">Refresh</button>
</div>
</div>
<!-- /block -->
</div>
</div>
</div>
</div>
<!--/.fluid-container-->
<script src="vendors/jquery-1.9.1.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="vendors/datatables/js/jquery.dataTables.min.js"></script>
<script src="assets/scripts.js"></script>
<script src="assets/DT_bootstrap.js"></script>
<script>
$(function() {
});
</script>
</body>
</html>
Change your jQuery:
$(".data-contacts-js").append(
to
$(".data-contacts-js tbody").append( /*This nests properly in html*/
and before your
$.each(
remember to remove all the children :)
$(".data-contacts-js tbody").empty();
$.each(
If you then want to use exactly the same code to run (on a refresh, not just a fetch) with an abort:
$(document).ready(function(){
var getDataTimeoutId = null,
refetchTime = 10 /* time in seconds */
isFetching = false,
getData = function(){
if (isFetching) {return;}
if (getDataTimeoutId !== null){
window.clearTimeout(getDataTimeoutId);
getDataTimeoutId = null;
}
isFetching = true;
$.get(
/* ajax get */
).success(function(){
setDataTimeout(); /* Only auto re-get if there wasn't an error */
}).always(function(){
isFetching = false; /* always clear the status */
});
},
setDataTimeout = function(){
getDataTimeoutId = window.setTimeout(function(){
getData();
}, refetchTime * 1000);
};
$('#fetchContacts').click(function(){
getData();
);
setDataTimeout();
});
This means that the code will run every 10s, or a click. But won't hammer the server for multiple pending requests.
:)
Try below code: - Use setInterval
1st Step :
You should create one common function which will fetch all data form Database as below.
function fetchData(){
$(".data-contacts-js tbody").empty(); // this will remove all <tr>.
$.get("http://localhost:8080/Hotels/reservation/getAllBookingDetails", function(data) {
$.each(data, function(i, contact) {
$(".data-contacts-js").append(
"<tr><td>" + contact.custId + "</td>" +
"<td>" + contact.custName + "</td>" +
"<td>" + contact.custMobile + "</td>" +
"<td>" + contact.custEmail + "</td>" +
"<td>" + contact.custAddress + "</td>" +
"<td>" + contact.Date + "</td>" +
"<td>" + contact.Time + "</td></tr>"
);
});
});
}
Step 2:
Make function which will call function automatically in every 10 sec. using SetInterval as below.
$(document).ready(function(){
setInterval(function(){
fetchData();
},10000); // this will call your fetchData function for every 10 Sec.
});
Step 3:
Make one event function for refresh button click event and put this function in .ready() function.
$('#fetchContacts').click(function() {
fetchData();
});
You could simply use jQuery datatables. This is a fully featured jQuery plugin for tables with huge data sets, which supports things like refreshing in a given time interval. See here
i having problem in creating textbox using jquery that is implemented in webview. here is the code
<html>
<head>
<title>jQuery Mobile List Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>
<script type="text/javascript">
var counter = 1;
$('#AddQuestion').live('pagecreate', function() {
$('#button').click(function() {
$('#TextBoxesGroup').append("<input type ='text' id='option" + counter + "' placeholder='option" + counter + "'>");
$('#TextBoxesGroup').textinput();
if (counter > 4) {
document.getElementById("button").style.display = 'none';
}
counter++;
});
});
</script>
</head>
<body>
<div data-role="page" id="AddQuestion">
<div data-role="header" data-position="fixed">
<h1>AddQuestion</h1>
</div>
<div data-role="content">
<form name="newdocument">
<div data-role="listview" id="TextBoxesGroup"></div>
<input type="button" value="Add Option" id="button">
</form>
</div>
</div>
</body>
</html>
i have tried this code in jsfiddle and when i press the add option button it shows unstyle textbox. what would be the problem?
You need to trigger create on the page to have jQuery mobile apply the additional markup and classes required for styling.
<script type="text/javascript">
var counter = 1;
$('#AddQuestion').live('pagecreate', function() {
$('#button').click(function() {
$('#TextBoxesGroup').append("<input type ='text' id='option" + counter + "' placeholder='option" + counter + "'>");
$('#TextBoxesGroup').textinput();
if (counter > 4) {
document.getElementById("button").style.display = 'none';
}
$('#AddQuestion').trigger('create');
counter++;
});
});
</script>
I am trying to load some data from an API into html. But it is not returning anything. My code is below. I have inspected it with developer tools but no errors. Kindly help please.
<html>
<head>
<style type="text/css">
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.getJSON('http://uapi.staging.simplestream.com//tvplayer/channels/programmes/2013-09-01/referer/tvplayer?format=json',function(data){
$('#content').empty();
$.each(data, function(entryIndex, entry){
var html = '<div class="data">';
html += '<div class="title">' + entry['title'] + '</h3>';
html += '<div class="shortDesc">' + entry['synopsis'] + '</div>';
html += '<div class="duration">' + entry['duration'] + '</div>';
$('#content').append(html);
});
});
return false;
});
</script>
</head>
<body>
<div id="content" style="width:500px; height:800px;">
<div class="ellipsis title"></div>
<div class="ellipsis shortDesc"></div>
<div class="duration"></div>
</div>
</body>
</html>