I am using .load to update my list, but this is not right approach as it get nested each time. what would be the alternate. I am new to Ajax.
$(document).on('click','#npDelete',function(){
var dataId = $(this).data("id");
alert(dataId);
$.ajax({
type:'get',
url:"{!! URL::to('deleteproject') !!}",
data:{'id':dataId
,},
success:function(data){
console.log('success');
console.log(data);
console.log(data.length);
$("#projects1").load("projects");
},
error:function(){
},
});
});
Projects is the page which contains the list of projects from database. So each time I delete a project the list is updated, its working fine but each time the ajax request is called plus one(+1) time
The quick and dirty solution would be to:
Import only the #projects1 element instead of the whole document
Replace the contents of the existing document's #projects1 element's parent element (so that the #projects1 element itself is replaced)
Such:
$("#projects1").parent().load("projects #projects1");
… but a nicer solution would be to have {!! URL::to('deleteproject') !!} return JSON that gave a true or false response and then delete the element that was actually clicked:
Add var $clicked_element = $(this); above var dataId = $(this).data("id"); and the you can $clicked_element.remove() when the request is successful. (Or possibly something like $clicked_element.parents("tr").remove() … but I'm having to speculate as to what your HTML looks like).
NB: Your HTML implies that you have multiple elements with the id #npDelete. This is invalid HTML. Don't do that. Use a class to identify a group of related elements. Use an id only to identify a unique element.
do
$("#projects1").html("projects");
and i suggest you use
$(document).ready(function(){});
or
$("#target").on('click',function(){});
at the beginning of your code instead of using $(document).on('click',function(){});
Related
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'm still new to jQuery and stuck trying to figure this one out, hope someone can help. I have this jQuery code that needs to pass different values depending on the clicked element. Each element created has a unique number in it's ID (which is needed). If I manually change the jQuery code to a specific ID and call, for example:
http://mysite/examplepost?effect=113
This will work. But I need to have $('#div- ...different numbers here...') to be able to handle multiple elements on the same page. I already have the PHP side producing different values using:
if($_GET['effect'] == $id){
I just need this to work with ajax so that it doesn't reload the page.
Example:
$('#div-113').on('click', function() {
var dataString = 'effect=113';
jQuery.ajax(
{
type:'GET',
url:'?',
data: dataString,
success: function(data){
alert('Works');
}
}
);
});
Any help would be appreciated.
I would give all your divs a common classname (i.e. myClickableDiv) and also a specific data-id.
This way you can target all your divs by that common classname, rather than having to figure it out depending on how the id is formed. The data-id allows you to only provide very specific information to the click handler (like an integer), without having to parse the id.
HTML:
<div class=".myClickableDiv" id="div-XXX" data-id="XXX">My Div</div>
JS:
$('.myClickableDiv').on('click', function() {
var dataString = $(this).attr('data-id');
jQuery.ajax({...});
});
I am using jquery.editinplace.js which is excellent but the problem I have it that I have multiple instances on a page - therefore need to somehow send a variable with it so it knows which row to update in the table
Can the ID be variable? e.g. #my_id123465, #my_id76543 then i can strip the #my_id in the backend PHP and be left with variable which tells me which row to update
So, example html for the page is currently: (there will be multiple of these)
<div id="my_notes" title="Click to edit">'.$item[comments].'</div>
And the jquery which is fired:
$(document).ready(function(){
$("#my_notes").editInPlace({
saving_animation_color: "#ECF2F8",
url: '/pages/includes/edit_in_place.php',
});
});
I'd almost like the code to be something like
$("#my_notes*").editInPlace({ // note the wildcard*
But that doesn't work
Try doing this:
$("div^='#my_notes'").editInPlace({ // etc
Have a look at the docs for this:
http://api.jquery.com/attribute-starts-with-selector/
Not tested, but could something like this work.
Note i have changed the id to a class identifier if you have multiple instances
$(document).ready(function(){
$(".notes").editInPlace({
saving_animation_color: "#ECF2F8",
url: function(item){
var id = $(item).attr("id");
return '/pages/includes/edit_in_place.php?id=' + id;
},
});
});
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?