31

Simple problem. I have a js variable I want to be concatenated too within a jQuery selector. However it is not working. No errors are popping up either. What is wrong? How do I correctly concatenate a variable to some text in a jQuery selector.

<div id="part2"></div>

<script type="text/javascript" >

$('#button').click(function () 
{
var text = $('#text').val();    
var number = 2;
$.post('ajaxskeleton.php', {
red: text       
}, 
    function(){
    $('#part' + number).html(text);
    }); 
});


</script>
thank_you
  • 11,001
  • 19
  • 101
  • 185
  • 3
    You should create a fiddle: http://jsfiddle.net/. – valentinas Aug 26 '12 at 23:02
  • @ason328, do you know about the `console.log()`. With its help, by placing it in interesting lines, you can see what is going on in your code step by step – d.k Aug 26 '12 at 23:07
  • No, I was unaware of it. I'll look into that now. – thank_you Aug 26 '12 at 23:07
  • @valentinas jsfiddle isn't great for testing AJAX code – Alnitak Aug 26 '12 at 23:10
  • can you post the whole code? it doesn't work without the #text and #button divs right now - also your div id needs to start as part, not part2 – zenkaty Aug 26 '12 at 23:12
  • @Alnitak it _is_ great for testing AJAX code. They have an acho api for XML, JSON, HTML, etc.. Here's the documentation: http://doc.jsfiddle.net/use/echo.html – valentinas Aug 26 '12 at 23:37
  • @valentinas what I meant is that it's not good for testing calls to your _own_ AJAX calls, unless you can override the cross origin policies. – Alnitak Aug 27 '12 at 10:30
  • @Alnitak there is no need to do your own AJAX calls - api is there to simulate them. You can specify what output you want to get and that way skip the back-end altogether. – valentinas Aug 27 '12 at 21:23

2 Answers2

47

There is nothing wrong with syntax of

$('#part' + number).html(text);

jQuery accepts a String (usually a CSS Selector) or a DOM Node as parameter to create a jQuery Object.

In your case you should pass a String to $() that is 

$(<a string>)

Make sure you have access to the variables number and text.

To test do:

function(){
    alert(number + ":" + text);//or use console.log(number + ":" + text)
    $('#part' + number).html(text);
});

If you see you dont have access, pass them as parameters to the function, you have to include the uual parameters for $.get and pass the custom parameters after them.

Community
  • 1
  • 1
sabithpocker
  • 15,274
  • 1
  • 42
  • 75
4

Your concatenation syntax is correct.

Most likely the callback function isn't even being called. You can test that by putting an alert(), console.log() or debugger line in that function.

If it isn't being called, most likely there's an AJAX error. Look at chaining a .fail() handler after $.post() to find out what the error is, e.g.:

$.post('ajaxskeleton.php', {
    red: text       
}, function(){
    $('#part' + number).html(text);
}).fail(function(jqXHR, textStatus, errorThrown) {
    console.log(arguments);
});
Alnitak
  • 334,560
  • 70
  • 407
  • 495
  • what is the scope inside the $.get call back? will the variables number and text be accessible there? – sabithpocker Aug 26 '12 at 23:13
  • 1
    @sabithpocker if your above code is complete, then `number` and `text` will be accessible because they're part of the _lexical scope_. The "gotcha" variable in callbacks is `this`, but you're not using that. – Alnitak Aug 26 '12 at 23:14
  • Thank you for shedding light into lexical scope. – sabithpocker Aug 26 '12 at 23:23