I am trying to send post request using jquery. This is the request i am trying to send
$.post("https://api.steampowered.com/IEconService/DeclineTradeOffer/v1/", {
key: "1234567891011121314151617181920",
tradeofferid: "$offerid"
}).done(function(data) {
alert("Data Loaded: " + data);
});
Inside my php i have $offerid , and key is always the same .
I want to send it on button click so i created button inside my php
$offerid = $value2['tradeofferid'];
echo '<button id="cancel-offer"> Cancel offer </button>';
how i can connect button with jquery request and send $offerid to the request ?
You just need to select the button by its id attribute, then add a click handler:
$('#cancel-offer').click(function() {
$.post("https://api.steampowered.com/IEconService/DeclineTradeOffer/v1/", {
key: "1234567891011121314151617181920",
tradeofferid: "<?= $offerid ?>"
}).done(function(data) {
alert("Data Loaded: " + data);
});
});
I would suggest you have a quick read through the jQuery documentation. It makes a great reference, and also gives you an idea of what jQuery is and is not capable of.
Modify your code like this:
php:
echo '<button id="cancel-offer" data-id="'.$offerid.'"> Cancel offer </button>';
js:
$('#cancel-offer').click(function(){
$.post( "https://api.steampowered.com/IEconService/DeclineTradeOffer/v1/", { key: "1234567891011121314151617181920", tradeofferid: $(this).attr('data-id') },function( data ) {
alert( "Data Loaded: " + data );
});
});
Related
My page has an html form to collect email, first name, last name and a checkbox. The form begins with this header:
<form action="echo_test.php" method="post" name='register' id='register'>
I submit the form with this button:
<div class="EMail_Pwd_JoinPage"><button class="btn_joinnow" style="color:rgb(255,255,255);" id="btn_submit" onclick="GetDate(); GetCkBx();">Submit data</button></div>
That calls this jquery function:
<script type="text/javascript">
$("#btn_submit").on("click", function (event) {
event.preventDefault();
form_data = $('form').serialize()
console.log("Okay, I'm starting");
console.log(form_data);
console.log("More Info");
GetDate();
return $.ajax({
type: "POST",
url: "echo_test.php",
data: form_data,
success: function (responseText) {
console.log("Server Reply " + responseText);
},
error: function (error) {
console.log("Okay, I failed" + error);
}
});
});
</script>
It submits to echo_test.php on my server:
<?php
echo 'Hello ' . htmlspecialchars($_POST["firstname"]) . '!';
?>
In the onclick event submit code above it should reply from the server:
success: function (responseText) {
console.log("Server Reply " + responseText);
},
But the Chrome dev console does not show any reply. The other console.log messages above do appear correctly (including the serialized form data).
I asked a similar question back in May, but the situation is different here.
Why doesn't this code echo back from the server?
Idk what does onclick attribute mean,
onclick="GetDate(); GetCkBx();"
So i think just remove onclick attribute. And here new code,
<div class="EMail_Pwd_JoinPage"><button type="submit" class="btn_joinnow" style="color:rgb(255,255,255);" id="btn_submit">Submit data</button></div>
Also update your button action jQuery code,
$("#btn_submit").on("submit",
As per my comment, remove onclick="GetDate(); GetCkBx();" from the button tag and call those two functions in the click event handler you created.
New Button Tag:
<button class="btn_joinnow" style="color:rgb(255,255,255);" id="btn_submit">Submit data</button>
in echo_test.php return the echo statement or use die().
<?php
echo 'Hello ' . htmlspecialchars($_POST["firstname"]) . '!';
return;
?>
I am trying to use ajax in wordpress.
I don't get ajax response. If I have done mistake on code, please let me know.
Here is my jquery code
// ajax submitting for the name
$("#sendemp").submit(function(e) {
e.preventDefault();
var submit_val = $("#searchbox").val();
alert('submitval is ' + submit_val);
$.ajax( {
type : "POST",
url : "./wp-admin/admin-ajax.php",
data : {
action : 'deatils_search',
user_name : submit_val
},
success : function(data) {
alert('hhh');
$('#accordion3').html(data);
// $( "#searchbox" ).autocomplete({
// source: data
// });
}
});
});
Here is my php code
function deatils_search() {
$name=$_POST['user_name'];//retrive data from post array on form submitting
$jason =$name;
echo json_encode($jason) ;
//echo '</div>';
//wp_reset_query();
die();
} // end theme_custom_handler
add_action( 'wp_ajax_deatils_search', 'deatils_search' );
add_action( 'wp_ajax_nopriv_deatils_search', 'deatils_search');
I tried to print alert('hhh'); on success message in ajax call. But it doesn't print anything.
Where I have done the mistake?
Please check bellow network tab on chrome
Don't use $ as a jQuery shortcut within WordPress javascript. WordPress is set to run jQuery in noConflict mode. Replace $ with jQuery.
When I replace the following method with click method., Every thing started to work.
$("#sendemp").click(function(e) {
So I got a select menu and when an user select an option, it calls a post function via ajax that generates some table rows via PHP and then it returns the html coding for it. In it, there is an Add button.
What I am trying to do is that when the user clicks the add button, a form shows up.
But for some reason, it is not working...
Here is the code:
$(document).ready(function () {
$(".add_form").hide();
$("#console").change(function () {
var id = $(this).val();
var dataString = 'console_id=' + id;
$.ajax({
type: "POST",
url: "generate-games-list",
data: dataString,
cache: false,
success: function (html) {
$("#games_table_body").html(html);
}
});
});
$(".add_button").click(function () {
alert("HELLO");
var id = this.id;
$.post('manage_games', 'game_id=' + id, function (response) {
alert(response);
});
$("#game_id").val(id);
$(".add_form").show();
});
});
Here is the PHP code that returns the table rows:
$console = Console::find(Input::get('console_id'));
$type = GameType::find(Input::get('type_id'));
if(!Input::has('console_id'))
return "Error";
else{
foreach($console->games()->get() as $console_game){
$available_consoles_string = "";
$game_types_string = "";
//Get all the consoles the game can be played on
foreach($console_game->consoles()->orderBy('name', 'asc')->get() as $available_consoles){
$available_consoles_string = $available_consoles_string . " " .$available_consoles->name .", ";
}
//Get all the types that the game falls in
foreach($console_game->types()->orderBy('type', 'asc')->get() as $game_types){
$game_types_string = $game_types_string . " " .$game_types->type .", ";
}
return "<tr><td>" .$console_game->name. "</td><td>". $available_consoles_string. "</td><td>" .$game_types_string. "</td><td><input type='button' id='" .$console_game->id. "' class='add_button' value='Add'/> / View</td></tr>";
}
}
Any idea why it is not working? When I mean not working, I mean the alert is not showing up but I am not getting any error on the Chrome Console...
Thanks,
Ara
Simply use .on():
$(document).on("click", ".add_button", function(){
// your event code
});
When your js runs a click event is attached to all current elements with the .add_button class. However, you're adding extra buttons via ajax and these won't have trigger the same click event.
To fix this use the code above. It attaches the event to the document so even if you add buttons once the page has loaded the click event will be triggered by them.
I have a method in my controller that lets users check something called "POE Status".
This returns a string that i display in a div tag on my view. I also provide 2 buttons. one to enable POE and the other to disable. Both the enable and disable commands will return the POE status as a result.
So I'm trying to use ajax to update the page with the new status once either one of the two buttons are clicked.
What I'm noticing is that both buttons will work the first time the page is loaded. But after the initial ajax call is made and the view updated, if i try to use the buttons again, nothing happens.
I have the following HTML: (i'm not including all the html, just the parts that I think matter....)
<div class="span6" id="clientajaxcontainer">
<h2>Port POE Status: Port <?php echo $portname;?></h2>
<p><p>
<?php echo $poeStatus;?>
<button class="btn" id="enable">Enable POE</button>
<button class="btn" id="disable">Disable POE</button>
</div>
Then I have the following javascript:
<script>
//Enable POE button
$('#enable').click(function() {
alert('in POEOn');
console.log('On');
//disbled button until ajax request is done.
$(this).attr("disabled","disabled");
$('#disable').attr("disabled","disabled");
var htmlstring;
$.ajax({
url:"<?php echo site_url('controller/poeOn);?>",
type:'POST',
dataType:'text',
success: function(returnDataFromController) {
htmlstring = "<h2>Port POE Status: Port " + $('#port').val() + "</h2><p><p>" + returnDataFromController + "<button class='btn' name='enable' id='enable'>Enable POE</button> <button class='btn' name='disable' id='disable'>Disable POE</button>";
alert(htmlstring);
$('#clientajaxcontainer').html(htmlstring);
console.log(htmlstring);
}
});
//re-enable the buttons.
$(this).removeAttr("disabled");
$('#disable').removeAttr("disabled");
});
//Disable POE button
$('#disable').click(function() {
alert('in POEoff');
console.log('Off');
//disbled button until ajax request is done.
$(this).attr("disabled","disabled");
$('#enable').attr("disabled","disabled");
$.ajax({
url:"<?php echo site_url('controller/poeOff);?>",
type:'POST',
dataType:'text',
success: function(returnDataFromController) {
htmlstring = "<h2>Port POE Status: Port " + $('#port').val() + "</h2><p><p>" + returnDataFromController + "<button class='btn' name='enable' id='enable'>Enable POE</button> <button class='btn' name='disable' id='disable'>Disable POE</button>";
alert(htmlstring);
$('#clientajaxcontainer').html(htmlstring);
console.log(htmlstring);
}
});
//re-enable the buttons.
$(this).removeAttr("disabled");
$('#enable').removeAttr("disabled");
});
</script>
Can you tell me where I'm going wrong?
Thanks.
The problem is that you are not creating a "live" binding for your buttons and once you call $('#clientajaxcontainer').html(htmlstring); you replace the buttons with new elements which do not have a click binding. Try this instead:
$('#enable').live('click', function() {
//...
}
$('#disable').live('click', function() {
//...
}
If you're using jQuery 1.8 you can use the on() method instead of live(). That would look like this:
$(document).on('click', '#enable', function() {
//...
}
$(document).on('click', '#disable', function() {
//...
}
Here's the relevant documentation:
http://api.jquery.com/live/
http://api.jquery.com/on/
I am attempting to get a link to fire JQuery's .click() function so that I can call another script behind the scenes. All of the JQuery is generated dynamically by PHP.
The code looks correct, but the .click is not firing.
This is the code that generates the jquery:
$jscript = "$(\"".$server ."Restart\").click(function()
{
$.get(\"modules/test.php\", {command: \"RESTART\", server: \"$server\"},
function(data){
alert(\"Data Sent: \" + data);
}
);
});
";
This is the code as it looks after generation (with just an alert right now because I can't get it to do anything):
$("critRestart").click(function()
{
$.get("modules/test.php", {command: "RESTART", server: "crit"},
function(data){
alert("Data Sent: " + data);
}
);
});
This is the link that is clicked on that should be firing that event:
<div id="critRestart">RESTART</div>
Can anyone help?
You need a # in an #id selector, like this:
$("#critRestart").click(function() {
Without the #, it's looking for a <critRestart> element (an element selector).