We Keep Coding

Passing parameters between html pages using jquery

I have one html page which contains a jquery function.
<script>
function loadCustomers() {
$.ajax({
type: 'GET',
url: 'http://localhost:8080/cache/getCustomers',
dataType: 'json',
success: function(data) {
var rows = [];
$.each(data,function(id,value) {
rows.push('<tr><td><a href="clientSiteInfo.html?client=">'+id+'</td><td>'+value+'</td></tr>');
});
$('table').append(rows.join(''));
}
});
};
window.onload = loadCustomers;
</script>
I have linked another html page for each row. When each rows populated, the id values has to be passed to the clientSiteInfo.html page.
In the clientSiteInfo.html page i have another jquery function similar to above.
<script>
function loadSites() {
$.ajax({
type: 'GET',
url: 'http://localhost:8080/cache/getSite?clientName='+${param.client},
dataType: 'json',
success: function(data) {
var rows = [];
$.each(data,function(id,value) {
rows.push('<tr><td>'+id+'</td><td>'+value.machine+'</td><td>'+value.state+'</td></tr>');
});
$('table').append(rows.join(''));
}
});
};
window.onload = loadSites;
</script>
in the GET url I try to read client parameter. But it is not passing from my initial page.
What Im doing wrong here? I look for simple solution

jQuery doesn't have a native way to read the url parameters. However, javascript works just fine:
function getParameterByName(name) {
const match = RegExp(`[?&]${name}=([^&]*)`).exec(window.location.search);
return match && decodeURIComponent(match[1].replace(/\+/g, ' ') );
}
In your code you would just call it as getParameterByName('client')

PHP jQuery HTML - Getting custom HTML attribute

I have a PHP file which puts out all orders in the system and adds the custom attribute oid (order-id) to all the links. My links look like:
<a href='#' class='completeOrder' oid='$order_id'>$status</a>
Which gives correct html, when I do inspect element I get this
<a href='#' class='completeOrder' oid='8'>Un-completed</a>
What I would like to do is when this link is clicked, spawn a form with checkboxes and a submit button with the correct order ID in it's html to send. So I can send the form and the order id to another PHP file for processing ( in this case updating the order status ).
What I am doing to spawn the form with the checkboxes is using a jQuery AJAX call, but when I try to alert the order ID to check if jQuery got the oid correctly it tells me its undefined... :
$("body").delegate(".completeOrder", "click", function(event) {
event.preventDefault();
getCompleteOrderTools();
$(".content").toggleClass("hidden");
$('div.hidden').fadeIn(800).removeClass('hidden');
$("#notifications-drop").toggleClass('hidden');
});
function getCompleteOrderTools() {
var o_id = $(this).attr('oid');
alert(o_id);
$.ajax({
url: "action.php",
method: "POST",
data: {
getCompleteOrderTools: 1,
orderId: o_id
},
success: function(data) {
$(".row").append(data);
},
});
}

Your main issue was that you are referencing this in wrong context as the this available in your function getCompleteOrderTools is different that this that you wanted to refer for the click event of your desired link.
You have 2 options :
either use jQuery(this).attr('oid');
Or
use jquery data attributes
<a href='#' class='completeOrder' data-oid='$order_id'>$status</a>
jQuery(this).data('oid');
So your code with .attr will look like :
$("body").delegate(".completeOrder", "click", function(event) {
event.preventDefault();
var myThis = $(this);//This is the 'this' corresponding to the link clicked
getCompleteOrderTools(myThis);
$(".content").toggleClass("hidden");
$('div.hidden').fadeIn(800).removeClass('hidden');
$("#notifications-drop").toggleClass('hidden');
});
function getCompleteOrderTools(myThis) {
var o_id = myThis.attr('oid');
alert(o_id);
$.ajax({
url: "action.php",
method: "POST",
data: {
getCompleteOrderTools: 1,
orderId: o_id
},
success: function(data) {
$(".row").append(data);
},
});
}

The jQuery object ain't passed to your function. You should do the following:
$("body").delegate(".completeOrder", "click", function(event) {
event.preventDefault();
getCompleteOrderTools(jQuery(this));
$(".content").toggleClass("hidden");
$('div.hidden').fadeIn(800).removeClass('hidden');
$("#notifications-drop").toggleClass('hidden');
});
function getCompleteOrderTools(_this) {
var o_id = _this.attr('oid');
alert(o_id);
$.ajax({
url: "action.php",
method: "POST",
data: {
getCompleteOrderTools: 1,
orderId: o_id
},
success: function(data) {
$(".row").append(data);
},
});
}
By passing jQuery(this) to your function, you now have full access to the jQuery object from your click event.

Replace the URL, contents and title without reloading the page

I want to create one page site by change div content with out load new page.
So, I've implemented my code like this:
HTML:
<title>Post title</title>
<body>
<a class="js-post-bt" href="/post/1" data-id="1"></a>
<a class="js-post-bt" href="/post/2" data-id="2"></a>
<a class="js-post-bt" href="/post/3" data-id="4"></a>
<div id="post-container"></div>
</body>
Script
$(function() {
$(".js-post-bt").on("click", function(e) {
var post_id = $(this).attr("data-id");
$.ajax({
url: "post_title.php?id="+post_id,
success: function(data) {
var title = data;
$.ajax({
url: "post.php?id="+post_id,
success: function(data2) {
// how to change url to post/post_id?
document.title = title;
$("#post-container").html(data2);
}
});
}
});
e.preventDefault();
});
});
Is it possible to create only one ajax call and get returned data either title and post data.
ANd how to change browser address to post/post_id after anchor link clicked.

You can use history api in HTML5
Demo -> http://html5demos.com/history
Howto ->
http://diveintohtml5.info/history.html
http://html5doctor.com/history-api/

If you want to make just one ajax call, which is a good idea, you will also need to change the code on your server.
It should respond a json object:
json_encode( array( "title" => $title, "post_data" => $post_data ) );
And you ajax call becomes:
$(function() {
$(".js-post-bt").on("click", function(e) {
var post_id = $(this).attr("data-id");
$.ajax({
url: "post_title.php?id="+post_id,
dataType: "json",
success: function(json_data){
document.title = json_data["title"];
$("#post-container").html(json_data["post_data"]);
}
});
e.preventDefault();
});
});

jQuery $.ajax always delete the first row on dynamic table

i have a problem in a dynamic table, adding new line work perfectly but remove line not.
this is my code:
<script type="text/javascript">
$(document).ready(function(){
$(document).on("click", ".trash", function(e){
e.preventDefault();
var $ligneParent = $(this).parent().parent();
trash($ligneParent);
});
});
function trash(aLigneToTrash) {
if (confirm("Vous allez supprimer définitivement cette ligne !")) {
var maincourante = $('table td.textemc').html();
var data = 'maincourante=' + maincourante;
console.log(maincourante);
$.ajax({
type: "POST",
url: "form/delete/deletemc.php",
data: data,
cache: false,
success: function() {
aLigneToTrash.fadeOut('slow', function() {
aLigneToTrash.remove();
});
}
});
return false;
}
}
</script>
my problem is the variable "maincourante" who return the first entry all the time.
this variable should return the value of the line i want to delete.
this is my new line code:
var nouvelle_ligne = $('<tr><td class="thtime">'+hours+'h'+minutes+'</td><td class="textemc">'+texte+'</td><td class="button"><button><i class="icon-pencil"></i></button></td><td class="button"><button class="trash"><i class="icon-trash"></i></button></td></tr>').fadeIn('fast');
$('#tablemc').append(nouvelle_ligne);

It's a bit hard to tell without seeing the actual DOM, but you don't ever actually remove this:
aLigneToTrash
I think you probably want to do:
var data = 'maincourante=' + aLigneToTrash.html();
$('table td.textemc').html() will always select the first td.textemc in the DOM (this is just how jQuery works).

thanks for your help.
i try this:
function trash(aLigneToTrash) {
if (confirm("Vous allez supprimer définitivement cette ligne !")) {
var data = 'maincourante=' + aLigneToTrash.html();
console.log(data);
$.ajax({
type: "POST",
url: "form/delete/deletemc.php",
data: data,
cache: false,
success: function() {
aLigneToTrash.fadeOut('slow', function() {
aLigneToTrash.remove();
});
}
});
return false;
}
}
and console.log return to me :
maincourante=<td class="thtime">09h28</td><td class="textemc">ryhjzreyjryjryjr54654</td><td class="button"><button><i class="icon-pencil"></i></button></td><td class="button"><button class="trash"><i class="icon-trash"></i></button></td>
i want the value of the "td class="textemc" like this maincourante=ryhjzreyjryjryjr54654

i will do this and this work perfectly
var data = 'maincourante=' + aLigneToTrash.children('.textemc').html();
thanks again for your help

try updating your ajax call to this:
....
$.ajax({
type: "POST",
url: "form/delete/deletemc.php",
data: data,
cache: false,
success: function() {
aLigneToTrash.fadeOut('slow', function() {
aLigneToTrash.remove();
$('#tablemc').append(' ');/*add a space to let browser know that there is a change*/
});
}
});
return false;
}
}
</script>
I had similar issue so it seems browsers (esp. IE ) dont detect much of changes on tables so; this hack worked for me. I hope it does to you. (assuming #tablemc is the base table)

Unable to hide a imag using .hide()

I have the following view inside my asp.net mvc , which display a ajax-loading imag, which i am trying to hide after starting a jquery function as follow:-
<div id= "geturl" data-url="#Url.Action("ListPackages", "Home")">
<h1>All Processes</h1>
<img id="tobehide" src="~/Content/ajax-loading2.gif" />
<ul id="products">
</ul>
Then the following JavaScript file:-
$(document).ready(function () {
$.ajax({
url: $('#geturl').data('url'),
type: 'GET',
cache: false,
success: function (result) {
$('#tobehide').hide();
$.each(result.data, function (key, val) {
var str = val.packageName;
$('<li/>', { text: str })
.appendTo($('#products'));
});
}
});
});
Currently the data will be filled in the but the loading-imag will not be hiden.so how i can force the imag to hide when the java script starts executing?.
Best Regards

Your code is correct, and should work fine!
Try using FireBug or Chrome developer tools to see what's the javascript error you are getting back from the ajax call.
If that still doesn't help, and you want the image to be hidden regardless, then use the 'complete' callback on the jquery ajax call you are using.
$(document).ready(function () {
$.ajax({
url: $('#geturl').data('url'),
type: 'GET',
cache: false,
complete: function (result) {
$('#tobehide').hide();
$.each(result.data, function (key, val) {
var str = val.packageName;
$('<li/>', { text: str })
.appendTo($('#products'));
});
}
});
});

It should work fine. No mistake in your code Brother.
try adding async option. Set it to false. and try again