enter link description hereI have following jquery ajax,which includes page into div after click on cells:
$(function () {
$('.yo').click(function (e) {
e.preventDefault();
var value = $('#prodajx').val();
var value1 = $('#cityajx').val();
var value2 = $('#regionajx').val();
$.post('demo_link_table_static.php', {value: value, value1: value1, value2: value2}, function (data) {
$("#search_results").html(data);
});
return false;
});
});
Now I want id of td in ajax post method... How can I get id of td (after click) and post it to another page? Thank you.
$(function () {
$('.yo').click(function (e) {
e.preventDefault();
var value = $('#prodajx').val();
var value1 = $('#cityajx').val();
var value2 = $('#regionajx').val();
var id_td = $(this).attr('id');
$.ajax({
url: "demo_link_table_static.php",
type: "POST",
data : "id_td="+id_td+"&value="+value+"&value1="+value1+"&value2="+value2,
success:function(data){
$("#search_results").html(data);
}
});
return false;
});
});
var id_current = $(this).attr('id');
var id_0 = $('#prodajx').attr('id');
var id_1 = $('#cityajx').attr('id');
var id_2 = $('#regionajx').attr('id');
Related
UPDATE 2 18.05.2020
(AJAX) URL pagination on refresh + window.history.replaceState + window.history.pushState +location.pathname
After refresh Test3
$(document).ready(function(){
load_data(1);
function load_data(page)
{
$('#load_data').html('<div id="status" style="" ></div>');
$.ajax({
url:"pagination2.php",
method:"POST",
data:{page:page},
success:function(data){
$('#load_data').html(data);
}
});
}
$(document).on('click', '.pagination_link', function(event)
{
event.preventDefault();
var page = $(this).attr("id");
load_data(page);
//Now push PAGE to URL
window.history.pushState({page}, `Selected: ${page}`, `${ 'page=' + page}`)
//window.history.pushState({page}, `Selected: ${page}`, `./selected=${page}`)
return event.preventDefault();
});
window.addEventListener('popstate', e => {
var page = $(this).attr("id");
load_data(e.state.page);
console.log('popstate error!');
});
//history.replaceState({page: null}, 'Default state', './');
var params = new URLSearchParams(location.search);
params.set('page');
window.history.replaceState({}, "", decodeURIComponent(`${location.pathname}?${params}`));
});
I've built a PHP AJAX pagination that works -> ajax pagination.
I'm new to jQuery/ajax. I am not able to understand the usage the url parameter.
My output: pagination2.php
I want the output: pagination2.php/page=2,3,4....
Any ideas?
My code index.php
$(document).ready(function(){
load_data(1);
function load_data(page)
{
$('#load_data').html('<div id="status" style="" ></div>');
var action = 'pagination2';
$.ajax({
url:"pagination2.php",
method:"POST",
data:{page:page},
complete: function(){
alert(this.url)
},
success: function(data){
$('#load_data').html(data);
},
})
}
$(document).on('click', '.pagination_link', function(event)
{
event.preventDefault();
var page = $(this).attr("id");
load_data(page);
return event.preventDefault();
});
});
pagination2.php
echo "<span class='pagination_link' style='cursor:pointer;' id='".$i."'>".$i."</span>";
UPDATE1
I added: history.pushState but I don't know if this method is correct. I can manipulate next - back /selected=2, selected=3... But, another problem arises, after refresh selected disappears. Test 2
$(document).ready(function(){
load_data(1);
function load_data(page)
{
$('#load_data').html('<div id="status" style="" ></div>');
var action = 'pagination2';
$.ajax({
url:"pagination2.php",
method:"POST",
error: function(xhr, text){
alert("Whoops! The request for new content failed");
},
data:{page:page},
success:function(data){
$('#load_data').html(data);
},
})
}
$(document).on('click', '.pagination_link', function(event) pagination
{
event.preventDefault();
var page = $(this).attr("id");
load_data(page);
history.pushState({page}, `Selected: ${page}`, `./selected=${page}`)
return event.preventDefault();
});
window.addEventListener('popstate', e => {
var page = $(this).attr("id");
load_data(e.state.page);
console.log('popstate error!');
});
history.replaceState({page: null}, 'Default state', './');
});
<script>
$(document).ready(function () {
$("#state").change(function () {
var stateId = $("#state").val()
phpurl = "sample_url" + stateId;
$.ajax({
url: phpurl,
success: function (data) {
$("#district").html(data).trigger("chosen:updated");
},
error: function(data) {
}
});
});
});
</script>
Above is my code to generate district based on state, and it works fine. I just want set the value what is selected by user. At present the selected value is cleared after selecting a state and submit.
You can use a global to hold selected value
var selectedDistrict = 0;
$("#district").change(function () {
selectedDistrict = $("#district").val();
});
then do:
$("#district")
.html(data)
.trigger("chosen:updated")
.val(selectedDistrict)
.trigger("chosen:updated");
in your ajax success.
Means your code will become:
<script>
var selectedDistrict = 0;
$(document).ready(function () {
$("#district").change(function () {
selectedDistrict = $("#district").val();
});
$("#state").change(function () {
var stateId = $("#state").val()
phpurl = "sample_url" + stateId;
$.ajax({
url: phpurl,
success: function (data) {
$("#district").html(data)
.trigger("chosen:updated")
.val(selectedDistrict)
.trigger("chosen:updated");
},
error: function(data) {
}
});
});
});
</script>
I have this javascript that stores able values in an array:
<script>
$(function(){
$('#preview').click(function(){
var thesum=0;
var rowid=[];
var rowfields=[];
var supplier = document.getElementById("sid").value;
var terms=document.getElementById("terms").value;
var podate=document.getElementById("date1").value;
var reqdate=document.getElementById("date2").value;
var contp=document.getElementById("contactp").value;
var count = ($('#listOfProducts tr').length);
//loop start
var i=0;
grid=$('#listOfProducts input[type="checkbox"]:checked').each(function(){
var $row = $(this).parents('tr');
var $trid =$(this).closest('tr').attr('id');
rowid[i]=$trid;
rowfields.push({itemname: $row.find('td:eq(0)').text(), productname:$row.find('td:eq(1)').text(), productdesc: $row.find('td:eq(2)').text(), unitprice:$row.find('td:eq(3)').text(), quantity:$row.find('td:eq(5) input').val(), amount:$row.find('td:eq(6) input').val()});
i++;
});//each close
var dataString = JSON.stringify(rowfields);
});//preview click close
});//function close
</script>
i need to pass the rowfields array to my controller so i can start manipulating the data on other functions. Can you please help me with this?
Jquery ajax
$(document).ready(function(){
$('#preview').click(function(){
var thesum=0;
var rowid=[];
var rowfields=[];
var supplier = document.getElementById("sid").value;
var terms=document.getElementById("terms").value;
var podate=document.getElementById("date1").value;
var reqdate=document.getElementById("date2").value;
var contp=document.getElementById("contactp").value;
var count = ($('#listOfProducts tr').length);
//loop start
var i=0;
grid=$('#listOfProducts input[type="checkbox"]:checked').each(function(){
var $row = $(this).parents('tr');
var $trid =$(this).closest('tr').attr('id');
rowid[i]=$trid;
rowfields.push({itemname: $row.find('td:eq(0)').text(), productname:$row.find('td:eq(1)').text(), productdesc: $row.find('td:eq(2)').text(), unitprice:$row.find('td:eq(3)').text(), quantity:$row.find('td:eq(5) input').val(), amount:$row.find('td:eq(6) input').val()});
i++;
});//each close
var dataString = JSON.stringify(rowfields);
//ajax function
//http://api.jquery.com/jQuery.ajax/
$.ajax({
//controller path
url: "/path/to/url",
type: "POST",
dataType: "json",
contentType: "json",
data: dataString
success: function(response){
console.log(response);
},
error: function(response){
console.log(response);
}
}); //ajax close
});//preview click close
});//function close
Problem: New Inserted Dom elements aren't been wired correctly, function deletepost not firing. This happens only on IE and for new elements only added to DOM.
$(function(){
$('#postentry').submit(function() {
var tyu = $('#tittle_ent').val();
if(tyu.length <= 2)
{alert('Enter More Text!'); return false;}else
{
$.ajax({
type:'post',
url: '/posts_in.php',
dataType: "json",
data: $("#postentry").serialize(),
success:function(data){
var tittle = data[0];
var id= data[1];
$('<div></div>').attr('id','post'+id).addClass('boxee').html(tittle).prependTo('#boxer');
$('<img src="img/page-text-delete-icon.png" name="'+id+'">').attr({id:'postchk'+id,onclick: 'deletepost(this.name);'}).appendTo('#post'+id);
$('#tittle_ent').val('').focus();
}
});
return false;
}
});
});
Use jquery live
$(function(){
$("#boxer img").live("click", function(){
deletepost($(this).attr("name"));
});
$('#postentry').submit(function() {
var tyu = $('#tittle_ent').val();
if(tyu.length <= 2)
{alert('Enter More Text!'); return false;}else
{
$.ajax({
type:'post',
url: '/posts_in.php',
dataType: "json",
data: $("#postentry").serialize(),
success:function(data){
var tittle = data[0];
var id= data[1];
$('<div></div>').attr('id','post'+id).addClass('boxee').html(tittle).prependTo('#boxer');
$('<img src="img/page-text-delete-icon.png" name="'+id+'">').attr({id:'postchk'+id,onclick: 'deletepost(this.name);'}).appendTo('#post'+id);
$('#tittle_ent').val('').focus();
}
});
return false;
}
});
});
'onclick' is ancient/oldschool stuff, especially when using jquery. Try this variant instead:
$('<img src="img/page-text-delete-icon.png" name="'+id+'">')
.attr('id', 'postchk'+id)
.click(function () { deletepost(this.name); }) /// use .click() instead.
.appendTo('#post'+id);
Yeah , You must used jQuery live() function, the more detail example can be found here http://developerfaq.wordpress.com/2011/07/28/fire-event-on-dynamically-generated-dom-element-with-jquery/
I'm looking to auto submit when a specific checkbox is checked.
I need it to pass to ajax.
Here is what I have so far:
$(document).ready(function () {
$("input[name=<?php echo("$newseo"); ?>]").click(function(){
var id=$(this).attr('id');
var favorite=$(this).val();
$.ajax({
type:'POST',
url:'check_favorite.php',
data:'id= ' + id + '&favorite='+favorite
});
}
});
});
But I just can't seem to get it to work,
Any help would be great, Thanks!
Here you go, this should do it. Your AJAX looks fine. I put together a JSFiddle to demonstrate.
$("input[name=TestCheck]:checked").live('click', function(e) {
var id=$(this).attr('id');
var favorite=$(this).val();
alert(id + " - " + favorite);
// Post here ...
$.ajax({
type:'POST',
url:'check_favorite.php',
data: {id: id, favorite: favorite}
});
});
JSFiddle : http://jsfiddle.net/4GQ6K/1/
I don't really like using obtrusive JavaScript and inputting PHP into JavaScript like that but there is no reason it shouldn't work.
$('#my_checkbox').change(function(){
if($(this).is(':checked'))
{
$('#my_form').submit();
}
});
Use your server side code[php] to set a id or a class to your specific checkbox. Then bind a click event to the given class name, e.g.
php code sets a class named .sCheckBx.
then on document.ready bind your event :
$(document).ready(function () {
$(".sCheckBx").click(function(){
var id=$(this).attr('id');
var favorite=$(this).val();
$.ajax({
type:'POST',
url:'check_favorite.php',
data:'id= ' + id + '&favorite='+favorite
});
}
});
});
Try this
$(document).ready(function () {
$("checkboxId").click(function(){
var $this = $(this);
if($this.is(":checked")){
var id=$this.attr('id');
var favorite=$this.val();
$.ajax({
type:'POST',
url:'check_favorite.php',
data:'id= ' + id + '&favorite='+favorite
});
}
}
});
});