I am using ajax to auto refresh a div tag using this code in my index.php file:
<script type="text/javascript">
$(document).ready(function() {
$.ajaxSetup({ cache: false });
setInterval(function() {
$('#messanges').load('messanges.php');
}, 1000);
});
</script>
<div id="messanges"></div>
<textarea name="chat_input" id="chat_input"></textarea>
In messanges.php I have a auto scroll down code.
Cause I want it to start at the bottom when entering the chat.
<head>
<script>
var chat_height = $('#chat').outerHeight();
$('#chat_box').scrollTop(chat_height);
</script>
</head>
<div id="chat_box" style="height:700px; overflow:auto">
<div id="chat">
<div id="Name">Test user:</div>
<div id="img"><img src="picture.png" /></img></div>
<p class="triangle-isosceles left">
"Test" </p>
</div>
The code is now forcing the scroll to stay at the bottom because of the ajax auto refresh.
How can I make it auto refresh, but if I want to scroll up it will not force me down when it refresh?
try some like this
<head>
<script>
var chat_height = $('#chat').outerHeight();
if($('.doScroll').is(':checked'))
{
$('#chat_box').scrollTop(chat_height);
}
</script>
</head>
<input type="checkbox" class="doScroll" checked />
<div id="chat_box" style="height:700px; overflow:auto">
<div id="chat">
<div id="Name">Test user:</div>
<div id="img"><img src="picture.png" /></img></div>
<p class="triangle-isosceles left">"Test" </p>
</div>
Related
Sometimes when render reCAPTCHA widget, it will report an error Failed to load resource: net::ERR_BLOCKED_BY_RESPONSE from https://www.google.com/recaptcha/enterprise/anchor when load https://www.google.com/recaptcha/enterprise/webworker.js
image
And we can reproduce this by refresh the page again and again (use document demo code):
<html>
<head>
<title>reCAPTCHA demo: Explicit render after an onload callback</title>
<script type="text/javascript">
var onloadCallback = function() {
grecaptcha.enterprise.render('html_element', {
'sitekey' : ' site_key',
});
};
</script>
</head>
<body>
<form action="?" method="POST">
<div id="html_element"></div>
<br>
<input type="submit" value="Submit">
</form>
<script src="https://www.google.com/recaptcha/enterprise.js?onload=onloadCallback&render=explicit"
async defer>
</script>
</body>
</html>
In my _Layout view I have this as scripts (also CSS have been added):
<!-- jQuery -->
<script src="/Content/themes/sb-admin-2/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="/Content/themes/sb-admin-2/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Morris Charts JavaScript -->
<script src="/Content/themes/sb-admin-2/raphael/raphael-min.js"></script>
<script src="/Content/themes/sb-admin-2/morrisjs/morris.min.js"></script>
<script src="/Content/themes/sb-admin-2/js/morris-data.js"></script>
<!-- Moment -->
<script src="/Scripts/moment-with-locales.min.js"></script>
<!-- DateTimePicker -->
<script src="/Content/datetimepicker/bootstrap-datetimepicker.js"></script>
<!-- Custom Theme JavaScript -->
<script src="/Content/themes/sb-admin-2/js/sb-admin-2.js"></script>
<script>
$(document).ready(function () {
debugger;
$('.datetimepicker').datetimepicker({
sideBySide: true
});
});
</script>
And also, in my view where I want to show the datetimepicker I have this:
<div class="row">
<div class="form-group col-md-6">
<label>Publish Date</label>
<div class="input-group" id="datetimepicker">
#Html.TextBoxFor(x => x.PublishDate, new { #class = "form-control datetimepicker", placeholder = "Date", required = "required" })
<div class="input-group-addon"><i class="fa fa-calendar"> </i></div>
</div>
</div>
</div>
I tried many things to show the datetimepicker, have someone an idea of my problem? I don't have errors thrown in Console, I tried to debug but I didnt find nothing.
Your div has id="datetimepicker" but you are using selector for class ".datetimepicker".
Try to change:
$('.datetimepicker').datetimepicker({
sideBySide: true
});
into
$('#datetimepicker').datetimepicker({
sideBySide: true
});
I can't get this form to submit via Ajax to a PHP script and cannot figure out why. Please help. I am planning to use this in phone gap after development and was under the impression this ajax format would work better than xmlhttprequest method - is this really the case?
<html>
<head>
<title></title>
</head>
<body>
<h1>Welcome</h1>
<hr>
<form id="idForm" name="idForm">
<input type="text" size="8" id="date" name="date"><br>
<input type="hidden" size="8" id="reversedate" name="reversedate"><br>
<input type="hidden" size="1" id="dow" name="dow"><br>
<input type="submit" id="submitbutton" name="submitbutton">
</form>
<br><br><br>
<br>
<br>
<p id="p1">x</p>
<br>
log out
<script>
$('#submitbutton').click(function(){
$("#idForm").submit(function() {
var url = "fetchsimple.php"; // the script where you handle the form input.
$.ajax({
type: "POST",
url: url,
data: $("#idForm").serialize(), // serializes the form's elements.
success: function(data)
{
alert(data); // show response from the php script.
}
});
return false; // avoid to execute the actual submit of the form.
});
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/ui.js"></script>
</body>
</html>
I have a website like:
<!DOCTYPE html>
<html>
<body>
<script src="jquery-2.0.3.min.js"></script>
<div id="block">
<span id="c1" class="chunk">first </span>
<span id="c2" class="chunk">second </span>
<span id="c3" class="chunk">third </span>
</div>
<script>
var my = {
mousedown: function(event) {
$('.chunk').each(function() {
this.setAttribute('contenteditable', 'false');
});
},
mouseup: function(event) {
$('.chunk').each(function() {
this.setAttribute('contenteditable', 'true');
});
}
};
$('.chunk')
.on('mousedown', my.mousedown)
.on('mouseup', my.mouseup)
;
my.mouseup(null);
</script>
</body>
</html>
The desired outcome is like in chrome:
when I click the chunk, I can write text and I see a caret (cursor)
and when I select the contenteditable gets disabled for the time of selection
BUT IN FIREFOX:
I can not type anymore inside the contenteditable
because the onmousedown disables the contenteditable in time of onclick (I think)
CAN U HELP WITH FIX? I'm looking for cross-browser solution to this.
PLEASE
The answer appeared to be simpler thant I thought. The main containing parent has to have contenteditable=true, after this, everything worked in every browser like it should. And now the mousemove and mousedown simulating selectstart also work like they should (another feature of this project), so remember when having similar problem: just create one contenteditable main container and you will not have problems with selections
<!DOCTYPE html>
<html>
<body>
<script src="jquery-2.0.3.min.js"></script>
<div id="block" contenteditable="true">
<span id="c1" class="chunk">first </span>
<span id="c2" class="chunk">second </span>
<span id="c3" class="chunk">third </span>
</div>
</body>
</html>
Why doesn't this simply jQuery ajax code not load pull.php into the div with id of #alert?
...
<script src="jquery.js"></script>
<script>
$(document).ready(function() {
$(".pull_button").click(function() {
$("#alert").load("pull.php");
});
});
</script>
</head>
<body>
<div id="#alert"></div>
<nav>
<a class="pull_button">Pull Data</a>
</nav>
...
Take the # out of <div id="#alert">.
<div id="alert"> -> $('#alert')
<div class="alert"> -> $('.alert')