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.
Related
We currently search through a form for contacts, and AJAX is used to display the results from a PHP file below the form (on the same page). The form's onsubmit attribute includes a return:false value to allow the AJAX code to complete.
The results appear 'below the fold' and I'd like the focus to jump down to an ID (#peopleResults) but can't manage this; instead, it stays at the top of the parent page.
Should I be trying something in the actual PHP file or in the AJAX call (to the PHP file) to achieve this?
I already tried <script>window.location.hash = "peopleResults";</script> in the PHP file and referencing results.php#peopleResults in the AJAX call, but neither worked.
Is this possible? I guess I am trying to do the equivalent of appending #peopleResults to the URL upon pressing Submit (without the URL necessary changing)...
I already tried <script>window.location.hash = "peopleResults";</script>
location.hash includes the # – both when reading from it, as well when you set a new value.
So
window.location.hash = "#peopleResults"
would be the correct way to tell the browser to jump to an element with the ID (or anchor name) peopleResults.
I think you want to achieve this please check the fiddle.
This is done without using hash. As you just want to view the result after Ajax.
By this you don't need to change the URL.
Based on the reply to my comment, it would seem you're a little foggy on the AJAX portion too. From the documentation:
$.ajax({
url: "http://fiddle.jshell.net/favicon.png",
beforeSend: function( xhr ) {
xhr.overrideMimeType( "text/plain; charset=x-user-defined" );
}
})
.done(function( data ) {
if ( console && console.log ) {
//this is where you need to add your data to the div
//after the data is in the div, scroll to it.
console.log( "Sample of data:", data.slice( 0, 100 ) );
}
});
You can see, the function where I added the comments is where you need to do the scrolling. After you populate the div (how ever you're doing that), then just use the suggestion Learner Student or phpisuber01 made of scrolling to it:
$("html, body").animate({ scrollTop: $("#peopleResults").scrollTop() }, 1000);
jQuery AJAX documentation: https://api.jquery.com/jQuery.ajax/
jQuery scrollTop documentation: https://api.jquery.com/scrollTop/
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.
In the HTML, a dropdown with the ID="project_pick" will fire a change event, sending the selected value to the getallreports.php file. This works. The PHP file does a MySQL lookup and returns values inside some HTML. This also works, and looks great on the page. Here below is the jQuery/ajax code that sends the selected item to the PHP file:
$('#project_pick').change(function(e) {
$.ajax({
type: "POST",
url: "getallreports.php",
data: "project_id=" + $(this).val(),
success:function(data){
$('#reportstable').html(data);
}
});
});
The returned data appears inside the specified div, and includes anchor tags with specific IDs that should allow other JQuery events to happen. Snippet of returned HTML:
<table><tr>
<td>Report 1</td><td>click to change</td>
<td>Report 2</td><td>click to change</td>
</tr></table>
The jQuery code to trigger on the above click event is:
$('#change_1').click(function() {
alert('Change Report One was clicked');
});
However, clicking the above anchor tag does nothing. Also, the returned HTML does not even appear in the source -- although it shows on the screen and in firebug.
What am I missing? How can I get that click event to fire?
EDIT:
I've been reminded about the .on('click', etc) event (thanks Michael and Zirkms), but when I attempted to add it to my code the dropdown's .change event stopped firing. Perhaps the below code needs a facelift?
$('#project_pick').on(change(function(e) {
$.ajax({
type: "POST",
url: "getallreports.php",
data: "project_id=" + $(this).val(),
success:function(data){
$('#reportstable').html(data);
}
});
});
On the moment of $('#test').click() code execution #test didn't exist in the DOM, so you didn't bind that handler to somewhere.
Use
$(document).on('click', '#test', function() { ... });
instead
Or (better) if you have a particular node where you insert the retrieved html - use some particular selector rather than $(document) like
$('#reportstable').on(...)
does not even appear in the source
In the "view source" browsers usually show the response from the server as it was retrieved on request, without reflecting JS DOM modifications.
My PHP page
<ul id="upvote-the-image">
<li>Upvote<img src="image.png" /></li>
</ul>
is currently successfully sending variable to javascript
$("#upvote").each(function(index) {
var upthis = $(this).attr("rel");
var plusone = upthis;
$.post("upvote.php", {
'plusone': plusone
});
alert(plusone);
});
(The alert in the code is for testing)
I have multiple images using the rel tag. I would like for each to be able to be upvoted and shown that they are upvoted on the page without loading a new page.
My question, and problem: what is my next step? I would just like to know how to send a value to upvote.php. I know how touse mysql to add an upvote, just not how to send a value to upvote.php, or even if my javascript code opens the page correctly.
thanks
I think you need something like this:
<ul id="upvote-the-image">
<li><span rel="50" id="upvote">Upvote</span><img src="image.png" /></li>
</ul>
<span id="result"></span>
$("#upvote").click(function(index) {
var upthis = $(this).attr("rel");
var oOptions = {
url: upvote.php, //the receiving data page
data: upthis, //the data to the server
complete: function() { $('#result').text('Thanks!') } //the result on the page
};
$.ajax(oOptions);
}
You dont need an anchor, I changed it for a span, you can test asyc connection using F12 in your browser
Your javascript never opens the php page, it just sends data to it, and receives an http header with a response. Your php script should be watching for $_POST['plusone'] and handle database processing accordingly. Your next step would be to write a callback within your $.post function, which I recommend changing to the full ajax function while learning, as it's easier to understand and see all the pieces of what's happening.
$.ajax({
type: 'POST',
url: "upvote.php",
data: {'plusone': plusone},
success: function(IDofSelectedImg){
//function to increment the rel value in the image that was clicked
$(IDofSelectedImg).attr("rel")= upthis +1;
},
});
You'd need some unique identifier for each img element in order to select it, and send it's id to the php script. add a class instead of id for upvote and make the id a uniquely identifiable number that you could target with jquery when you need to increment the rel value. (From the looks of it, It looks like you're putting the value from the rel attribute into the database in the place of the old value.)
A good programming tip here for JQuery, Don't do:
<a href="javascript:return false;"
Instead do something like:
$(function(){
$('#upvote').on('click', function(event){
event.preventDefault();
$.post('upvote.php', {'plusone': $(this).attr('rel')}, function(data){
alert('done and upvoted');
});
});
});
That is a much better way to handle links on your DOM document.
Here are some Doc pages for you to read about that coding I use:
http://api.jquery.com/on/
http://api.jquery.com/jQuery.post/
Those will explain my code to you.
Hope it helps,
I have a a div, wherein, it displays the data, and beside it, is an edit button..if one clicks the edit button, it hides the div and shows a different div with input forms which allows the user to update the data..the problem now is, when the user submits the form, my script updates the data and hides this input forms and shows again the former div of data display, the data shown is not updated....my question now is,, how to show the updated data after the script show() it again ?
here's my jquery ajax code
$(function(){
$('#profileinfoedit').click(function(){
$('#profileinfomain').hide();
$('#profileinfoajax').show();
$('form#pdetails').submit(function(){
var cvid = $('#cvid').val();
var resumetitle = $('#resumetitle').val();
var name = $('#name').val();
var dob = $('#dob').val();
var gender = $('input[name=gender]:checked').val();
$.ajax({
type: "POST",
url: 'classes/ajax.personalupdate.php',
data: $("form#pdetails").serialize(),
success: function(data){
alert(data);
$('#profileinfoajax').hide();
$('#profileinfomain').show();
}
});
return false;
});
});
});
$('#datepicker').datepicker();
So location.reload is just refreshing the page, which as you have discovered is a quick and dirty fix.
If you want to do it without a page refresh, you would have to regenerate the html for just the 'profileinfomain' element from data received back from ajax.personalupdate.php. I would assume you would only want to do this on "success".
One approach would be to have the success data contain the html needed to regenerate the 'profileinfomain' element html. So perhaps have php return back data.profileinfomain_html, and then:
$('#profileinfomain').html(data.profileinfomain_html);
which will replace the inner content of the profileinfomain element.
If you are working in a framework of some sort, have the profileinfomain inner html content be a partial template included in so you only have to maintain its html in one place.
was able to sort it out via
$('#profileinfomain').show('normal',function(){
location.reload();
});
but, isn't there any better way to do this?