Results 1 to 3 of 3

Thread: jQuery assign innerHtml to result of ajax

  1. #1
    Join Date
    Mar 2011
    Posts
    1,952
    Thanks
    59
    Thanked 105 Times in 103 Posts
    Blog Entries
    4

    Default jQuery assign innerHtml to result of ajax

    Hey everyone,

    I've got this code

    HTML Code:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript">
    jQuery(function($){
    	var field1 = $('#fldrChatWindowInput'), 
    	$('#send').click(function(){
    		if(!field1.html()){
    			alert("Please enter a value");
    			field1.focus();
    			return;
    		}
    		jQuery.ajax({
    			url: 'process.php',
    			type: 'post',
    			data: 'field1value=' + field1.html() + '&field2value=' + field2.value,
    			success: function(results){
    				alert(results);
    			}
    		});
    	});
    });
    </script>
    <div id="fldrChatWindow"></div>
    <div id="fldrChatWindowInput" contenteditable></div>
    <input type="button" value="Submit" id="send">
    Instead of alerting results, I'd like to assign it to a global variable that I'd use in normal javascript(not jQuery).

    Sorry if the question is a little bit easy.
    Keyboard1333
    Last edited by keyboard; 04-02-2012 at 11:36 AM.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Your question is different than the title suggests. And using global variables when they're not required risks errors and/or conflicts. To answer the title:

    Code:
    		jQuery.ajax({
    			url: 'process.php',
    			type: 'post',
    			data: 'field1value=' + field1.html() + '&field2value=' + field2.value,
    			success: function(results){
    				$('#target_id').html(results);
    			}
    		});
    where target_id is the unique id of an element you want to send the results to.

    If you want to do that with regular javascript:

    Code:
    		jQuery.ajax({
    			url: 'process.php',
    			type: 'post',
    			data: 'field1value=' + field1.html() + '&field2value=' + field2.value,
    			success: function(results){
    				document.getElementById('target_id').innerHTML = results;
    			}
    		});
    Still no global involved though.

    To answer your question in the post, hmm. It's sort of a trick question. You can make a variable be a global variable simply by prefacing it with window. Like:

    Code:
    		jQuery.ajax({
    			url: 'process.php',
    			type: 'post',
    			data: 'field1value=' + field1.html() + '&field2value=' + field2.value,
    			success: function(results){
    				window.myGlobalVar = results;
    			}
    		});
    where myGlobalVar can be any unique variable name you like.

    Alternatively, you could declare a global ahead of time:

    Code:
    <script type="text/javascript">
    var myGlobalVar;
    jQuery(function($){
    	var field1 = $('#fldrChatWindowInput'), 
    	$('#send').click(function(){
    		if(!field1.html()){
    			alert("Please enter a value");
    			field1.focus();
    			return;
    		}
    		jQuery.ajax({
    			url: 'process.php',
    			type: 'post',
    			data: 'field1value=' + field1.html() + '&field2value=' + field2.value,
    			success: function(results){
    				myGlobalVar = results;
    			}
    		});
    	});
    });
    </script>
    What makes it a trick question is, regardless of how you do it, that value will not be available until the jQuery.ajax function has completed successfully. So, you might as well use it right within the success function, and at that point there's no sense in making it global.
    Last edited by jscheuer1; 04-02-2012 at 02:01 PM. Reason: syntax
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Mar 2011
    Posts
    1,952
    Thanks
    59
    Thanked 105 Times in 103 Posts
    Blog Entries
    4

    Default

    Thanks for your reply John.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •