Develop Reference

Call to $.post() Jquery not passing parameters successfully

/**
* Created by quantumveil on 2/10/15.
*/
$(document).ready(function(){
$('a').on('click',function(){
//$href=$(this).attr('href');
//console.log($href);
var $convoid=$(this).attr('id');
console.log($convoid);
//$('#convoarea').load($href);
$.get('inbox.php',{convoid:$convoid},function(data){$('#convoarea').html(data);//the callback sets whati t had to
//now add the on click handler to send button
$('#send').on('click',function(){
var $msgbody=$('#sendbody').val();
console.log($msgbody);
///now what i have to do is sent this $msgbody to the inbox.php thru get k
$.post('inbox.php',{sendbody:$msgbody,convoid:$convoid},function(data){
$('#sendbody').before(data);
console.log('here'+$msgbody);
});//the callback function will append it to other messages :3
return false;
});
}//callback ends hre
);
return false;
});
//for send button
});
Hi. I'm trying to code a social networking site and I want the inbox to be responsive and dynamic. I've recently started learning Jquery for the purpose being. I've googled this before and found no help and so it brings me here on this community. The above Javascript/Jquery code is supposed to pass some post parameters when the SEND button is clicked. Another file, inbox.php, is to receive those and work appropriately. Now here's what bugs me. The callback function to $.post() is executed, so I'm assuming the parameters are being passed to inbox.php. But when I try accessing them in inbox.php using following line
if($msgbody=get_post('sendbody')&&$convoid=get_post('convoid'))
I only receive a value of 1 and not the message's actual body. Here's how the function get_post is defined
function get_post($var1){
if(isset($_POST[$var1])){$var=$_POST[$var1];
return filter($var);}
else return 0;
}
I've tried accessing them directly through $_POST['sendbody'] but an error of undefined index is being generated. Any help will be highly appreciated. (PS the other call to .get() in the beginning of this js file is passing the parameters so there's nothing wrong with file paths)
EDIT: It's fixed but I want an explanation. All I did was in the inbox.php changed the first line which was
if($msgbody=get_post('sendbody')
to
if(isset($_POST['sendbody'])$msgbody=$_POST['sendbody']
Now all I can wonder is if it has something to do with filter() function in the definition of my get_post() function. Anybody?

Execute javascript inside the target of an Ajax Call Drag and Drop Shopping Cart without Server language

Well i wanna create an Ajax Drag and Drop Shopping cart using only javascript and ajax. Currently i'm using the example in this page as a stepping stone. Right now it's only with local jquery and it works fine but i want to make the cart work with ajax calls. Note that i do not want to use a server side language( like php, rubby, asp etc), only html and javascript.
My initial thought was that at the $(".basket").droppable i should add an ajax call to another html page containing the "server logic" in javascript, execute in that file all the necessary steps( like reading the get variables (product name, product id and quantity), set a cookie and then return an ok response back. When the server got the "ok" response it should "reload" the cart div with the updated info stored inside the cookie.
If this was with php i would know how to do it. The problem is that as far as i know, you can execute javascript once it reaches the DOM, but how can you execute that js from inside the page that isbeing called upon ? ( thanks to Amadan for the correction)
I've thought about loading the script using $.getScript( "ajax/test.js", function( data, textStatus, jqxhr ).. but the problem with that is that the url GET variables i want to pass to the "server script" do not exist in that page.
I havent implemented all the functionality yet as i am stuck in how to first achieve javascript execution inside an ajax target page.
Below is a very basic form of my logic so far
// read GET variables
var product = getQueryVariable("product");
var id = getQueryVariable("id");
var quantity= getQueryVariable("quantity");
//To DO
//--- here eill go all the logic regarding cookie handling
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) {
return pair[1];
}
}
alert('Query Variable ' + variable + ' not found');
}
Any help regarding this matter will be appreciated.
Note: Logic in simple words:
1)have an html page with products+cart
2)Have an "addtocart.html" with the "Cart Server Logic"( being the target of the ajax call when an item is dropped into the product.)
If you have some other idea on this, please enlighten me :)
thanks in advance
Foot Note-1:
if i try loading the scipt using
$("#response").load("ajax/addtocart.html?"+ $.param({
product: product,
id: id,
quantity:quantity
})
);
i get the alert about not being able to find the url parameters( something that i thing is normal as because the content is being loaded into the initial page, from which the request is started, there are no get parameters in the url in the first place)

The problem is that as far as i know, you cannot execute javascript contained in the target of an ajax call, as that page never reaches the browser interpreter.
This is either incorrect or misleading. The browser will execute any JavaScript that enters DOM. Thus, you can use $.load to load content and execute code at the same time. Alternately, you can use hacked JSONP to both execute code and also provide content as a JSON document.
EDIT: Yes, you can't get to the AJAX parameters from JavaScript. Why do you want to? Do you have a good reason for it, or is it an XY problem?
The way I'd do it is this:
$('#response').load(url, data, function() {
onAddedToCart(product, id, quantity);
});
and wrap your JS code in your HTML into the onAddedToCart function.
Depending on what exactly you're doing, it could be simplified even further, but this should be enough to cover your use case.

How to override variable parameter loaded from another script

I have a script that loads the code dynamically. It is kind of a search engine. When I press a search button, the action gets triggered and a new page opens with many parameters.
I want to override one of the parameters generated with the script in the new URL. JS code is quite big and hard to read, but I have found the important part in the Firebug DOM editor.
This is the pattern of the URL generated when you perform the search:
http://www.example.com/...?ParameterOne=123&ParameterTwo=Two&ThisParameter=Sth&ParameterFour=Four...
What I want to edit is "ThisParameter" and change its value. This is the part edited in the DOM that does what I want:
Foobar = {
_options: [],
...
var options = {"ParameterOne":123,"ParameterTwo":"Two","ThisParameter":"ABC","ParameterFour":Four,...}
...
And this is the output of "ThisParameter" when you choose "Copy path" in Firebug's DOM tab:
_options[0].ThisParameter
I am wondering it this is possible at all. What makes me think that it is, is the fact that I can change this parameter in Firebug and it works perfectly. So, if Firebug can edit it, there should be a way to influence it with another script.
Looking forward to any suggestions, thank you in advance!

Since you cannot edit the dynamic script you have the following options:
You have to try to give the script the correct input and hope it uses your value.
Add a script to the results page which will read the url and arguments, change it and redirect, as we discussed here. (If you put everything in functions it should not conflict with the dynamic script if the functions are uniquely named.)
You could try adding something like this jQuery code to the page with the search button:
$('input[name=search_button_name]').click(function(e) {
e.preventDefault();
var form_search = $('#search_form_id');
$('<input>').attr({
type: 'hidden',
name: 'ThisParameter',
value: 'SomethingElse'
}).appendTo(form_search);
f.submit();
});

You can override any js function and method, or wrap you code around it. The easiest thing would be to look at the code you get and once it gets loaded, you re-declare a method with your own functionality.
I you are trying to replace a parameter in a specific jquery request, you can even wrap around the jquerys ajax method:
var jquery_ajax = $.ajax
$.ajax = function(options){
// parse only a specific occurence
if(options.url.indexOf("example.com") > -1) {
// change the url/params object - depending on where the parameter is
options.params.ThisParameter = "My Custom value"
}
// call the original jquery ajax function
jquery_ajax(options);
}
But it would be a lot cleaner to override the method that builds the ajax request rather than the ajax request itself.

I would investigate further on the scope of the variable options (var options), is it global? i.e. if you type 'options' in the Firebug console, does it display its properties?
If so, you could then access it via your own script and change is value, e.g.
options.ThisParameter = 'my-own-value';
You might hook your script to the click event of the search button.
I hope this helps, it could be more specific maybe if you have some sample code somewhere.

javascript or jquery simple code

I have a problem. I don't know JavaScript or jQuery; only HTML, CSS, PHP, and design. I need a simple jQuery function, but I don't know how to do it.
I need to make a call to the following webservice:
http://vkontakte.ru/share.php?act=count&url=http://viberieto.ru/
This function returns a number near ')'. I need to display this number in <div id="count">.
How do I do that? Can you help me?

Because of restriction due to crossdomain policy you probably need get the data through jsonp.
Luckily this is easily done with jQuery.
$.getScript("http://vkontakte.ru/share.php?act=count&url=http://viberieto.ru/");
This will create a new script tag containing the code returned by the webservice. To handle the response you'll need to create a object structure like the one from the url:
var VK = {
Share: {
count: function(arg1, arg2) {
// Insert the value into the div
$('#count').html(arg2);
}
}
};
VK
Edit: Fixed typo

I want to request JSON inside of a WordPress page

For the last few hours I've been trying to set up this http://code.google.com/apis/books/docs/dynamic-links.html on a WordPress blog. Google's API sends back a JSON response (which is supposed to be "put" into _GBSBookInfo variable). However, that variable never is assigned so my javascript callback function explodes saying the variable doesn't exist. So far, all of my javascript is in the WordPress header.
I tried this outside of WordPress and it works fine.
This is the static page:
<script src="http://books.google.com/books?bibkeys=0307346609&jscmd=viewapi&callback=response_handler">
This is the handler:
function response_handler(data) {
var bookInfo = _GBSBookInfo["0307346609"]; // the var that doesn't exist
document.getElementById("test123").innerHTML = bookInfo.thumbnail_url;
}
Thanks for any help in advance, WordPress has been extremely frustrating by limiting so much! If I'm doing anything stupid please say so, I'm a new javascript programmer.
EDIT:
I've used firebug so far to identify the problem to be: the _GBSBookInfo variable never gets "created" or "exists". I'm not sure how javascript works at this level. Hopefully this helps.
ERRORS:
Error: _GBSBookInfo is not defined
Line: 79

Try replacing _GSBookInfo with data, like so:
function response_handler (data) {
var bookInfo = data["0307346609"];
document.getElementById("test123").innerHTML = bookInfo.thumbnail_url;
}
Based on your post, google returns this:
response_handler({
"0307346609": {
"bib_key":"0307346609",
....
"thumbnail_url":"http://bks2.books.google.com/books?somethumbnailstuff"
}
});
... so the above code should work for you.