After submit, If the page is too large, the user has to scroll down to see the results given from foo.php, I want it force the browser to scroll down to that result message, if that's possible. I'm pretty much willing to do anything to get the page to scroll down automatically, doesn't need to be using ajax. etc.
$(function(){
$('button[type=submit]').click(function(e){
e.preventDefault();
$.ajax({
type: "POST",
url: "foo.php",
data: $("#myform").serialize(),
beforeSend: function(){
$('#result').html('<div class="success"><img src="../images/loading-blue.gif" width="25" /></div>');
},
success: function(data){
$('#result').html(data);
//var objDiv = document.getElementById("#result");
//objDiv.scrollTop = objDiv.scrollHeight;
//(example I found online, didn't work)
}
});
});
});
In jQuery, this should be your ticket.
$('html, body').animate({scrollTop:$(document).height()}, 'slow');
Using javascript. Where result is the id of the result div
document.getElementById('result').scrollIntoView();
$("body").animate({scrollTop:$("#result").offset().top},500);
This will scroll right at $("#result").
For a better response you should also give us the CSS of #result, cause we don't know it's position (absolute, fixed, static, relative)
If result is indeed the last element on the page, an improvement to Rottingham's answer would be to do this:
$("html, body").animate({scrollTop:$(document).height()-$(window).height(), "slow");
This is better because the time specified in the second parameter should be the time that it takes for your window to reach the end of the page, whereas with Rottingham's answer, it would move down a little too fast.
Related
I've created a dynamic table in PHP, where every image in a row has a specific url in the ID.
For example:
When a user clicks on this image, it executes an action. This works fine.
Afterwards, in the second ajax, it's supposed to reload the colorbox with the previous url. This also works, however, the javascript seems to be loaded again (with the new values though)?
$('#cboxLoadedContent img[alt="markmessage"]').live('click', function(){
var returnurl = "<?php echo $_SESSION['returnpage']; ?>";
var markurl = $(this).attr('id');
alert(markurl);
// Do the action
$.ajax({
method:'GET',
url: markurl,
cache:false
});
// Reload colorbox again with previous contenturl.
$.ajax({
type: 'GET',
url: returnurl,
dataType: 'html',
cache: true,
beforeSend: function() {
$('#cboxLoadedContent').empty();
$('#cboxLoadingGraphic').show();
},
complete: function() {
$('#cboxLoadingGraphic').hide();
},
success: function(data) {
$('#cboxLoadedContent').empty();
$('#cboxLoadedContent').append(data);
}
});
});
</script>
Is there any way to PREVENT the javascript from being re-appended to the colorbox? I've tried a few methods (like removing it with DOM), but nothing seems to work...
The javascript may NOT be disabled, it's supposed to process a new url afterwards...
Try to replace live to one in first line:
$('#cboxLoadedContent img[alt="markmessage"]').one('click', function(){
Try the simple click event binding. Here you only bind it to the selected elements, not to new appended elements. If you want the event to be fired only once, use one.
I'm not sure which version of jQuery you are using, but live() is deprecated as of 1.7, you might want to try using on().
The below is my code. Div id jp_current_track_title changes automatically when other events occur. I am trying to capture whats gets into the div "Track_title and post it onchange to like.php. as of now i cant figure it out. Im getting something back into the result div but its not posting. What am i doing wrong?
$(document).ready(function() {
$('#track_title').change(function() {
var content = $('#track_title').html();
$.ajax({
url: 'like.php',
type: 'POST',
success: function(info){ $("#result").html(info)
},
data: {
content: content,
}
});
});
});
Instead of detecting changes in jp_current_track_title, can you capture the other events that caused the update to jp_current_track_title? If so, can you get the updated title from there?
You aren't going to get 'change' events when the contents of a div change, it doesn't work like that.
See here:
Fire jQuery event on div change
The main answer mentions how you can track DOMNodeInserted / DOMNodeRemoved / DOMSubtreeModified events, however those don't work in IE.
Your best bet is to use setTimeout() and check the innerHTML of the div on regular intervals to see if the value has changed.
I have this JavaScript code:
$(document).ready(function(){
$('#sel').change(function(){
$.ajax({
type: "POST",
url: "modules.php?name=TransProject_Management&file=index",
data: "&op=index_stat&stat="+$(this).val(),
cache: false,
success: function(data) {
//alert(data);
$("#ajax_results").html(data);
}
});
});
});
On status change i need to refresh a div without page reload. But it returns blank page. If i try alert the result on success, i get the response, also i checked with inspect element, its ok. The problem is that it returns blank page.
The file i'm working on, is the same( modules.php?name=TransProject_Management&file=index ) i called in ajax.
the html:
<body>
//...
<div id="ajax_results">
//.....
//somewhere here is the select option <select id="sel">......</select>
//.....
</div>
</body>
Any help, would be very appreciated.
use the following code to return your response html:
echo json_encode(array($your_response));
Then in your javascript, you will need to reference the data as:
success: function(data) {
$("#ajax_results").html(data[0]);
}
since it is now an array.
this in your ajax function refers to the jQuery XHR object, NOT the $('#sel') object. Just assign it to a variable before the ajax function like var sel = $(this) then use it later inside the function. Try this:
$('#sel').change(function(){
var sel = $(this);
$.ajax({
type: "POST",
url: "modules.php?name=TransProject_Management&file=index",
data: "&op=index_stat&stat="+sel.val(),
cache: false,
success: function(data) {
//alert(data);
$("#ajax_results").html(data);
}
});
});
});
Hmm, first glance the code looks good. Have you tried using Chrome debug tools? Hit F12 and check the Network tab, this will show you what is being returned. You can also debug without using an alert so you can step through to see what exactly the properties are.
Just thought, you might need to add 'd' to the data returned. Anyway, if you do what I suggested above, put a pause break on the line and run the code you will see what you need.
Based on your comments below the question, it seems that you are using the same script to display your page and to call in the javascript. This script seems to return a complete html page, starting with the <html> tag.
A page can only have one <html> tag and when you try to dump a complete html page inside an element in another page, that will lead to invalid html and unpredictable results.
The solution is to have your ajax script only return the necessary elements / html that needs to be inserted in #ajax_results, nothing more.
I have a function that when i click a button I call more results from my table, Im trying to get this to work when the button is 100px top of the window, however I cant seem to get it to work...
$(function(){
$('#showMore').click(function(event) {
event.preventDefault();
var number = $(".directory").children().length;
$.ajax({
type: "POST",
url: "getentries.php",
data: "count="+number,
success: function(results){
$('.directory').append(results);
}
});
});
});
So far ive tried
$(function(){
$('#showMore').offset(function(event) {
....
The jQuery .offset() function is not for establishing an event handler. You're looking for .scroll(). In the event handler for "scroll" events, you can use .offset() to find out the current position.
I'll offer the caveat that browsers fire a lot of scroll events, so you may want to introduce a delay before doing any serious work in response to the user scrolling the window.
I have some ajax/jquery code in one of my pages and the problem I'm having is that it doesn't work the first time the page is loaded. If I refresh the page it works no prob. It does work in firefox first time. All the variables that I'm using are ok as I've alerted them out. I don't get a success or error message. It justr doesn't appear to do anything?
Any ideas?
$('.window .request').click(function (e) {
var itm = document.getElementById('txtItm').value;
var qty = document.getElementById('txtQty').value;
var msg = document.getElementById('txtMessage').value;
var op_id = document.getElementById('txtOp_id').value;
$.ajax({
type: "POST",
url: "do_request.php?msg="+msg+"&itm="+itm+"&qty="+qty+"&op_id="+op_id,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
document.getElementById('div_main').style.display='none';
document.getElementById('div_success').style.display='block';
var row_id = document.getElementById('txtRow').value;
document.getElementById('row'+row_id).style.backgroundColor='#b4e8aa';
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert('Error submitting request.');
}
});
});
It's hard to determine what the problem might be given the information and it sounds like you've not fully tested the page in a consistent manner. It seems likely there is another element on the page affecting the click event, as opposed to the handler logic itself, but there's no way to tell. Make sure you are binding to the click event after the page is ready:
$(document).ready(function(){
$("#uniquedomid").bind('click',function(){
// click handler logic
});
});
Also, as you're new to JQuery, one thing you're going to want to start looking at are all the various ways in which JQuery can improve your life. It does almost everything. But for starters, you're going to want to start using:
$("#uniquedomid")
Instead of
document.getElementById("uniquedomid")
And
$("#uniquedomid").val();
Instead of
document.getElementById("uniquedomid").value