Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Aug 2014
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question How to embed Javascript method call in an Ajax response data?

    Here is my Ajax code.
    Code:
    									$.ajax({
    														url : ..., 
    														data : JSON.stringify(json),
    														type : "POST",
    														
    														beforeSend : function(xhr) {
    														// ...
    														},
    														success : function(response) {
    															
    															var specifications = response.specifications;
    													
    															var respContent = '';
    															for(var i in specifications){
    																respContent += '<dt>' + i + '</dt><dd>' + specifications[i] + '</dd>';
    															}														
    															
    															$("#specificationList").html(respContent);
    												
    														}
    													});
    I need to add a Javascript method on the response content so that the end result is something like the followings:

    Code:
    	<dl>
    		<dt>abc</dt>
    		<dd>
    			123<span class="glyphicon glyphicon-remove" th:onclick="'javascript:deleteSpecification(\'' + 'abc' + '\');'"></span>
    		</dd>  		
    	</dl>
    How to achieve it?

    Thanks for your inputs in advance.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,919
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    You put any JS that is supposed to be executed on the returned content into the success function. So, you appended the response content to the specificationList element, and then you can traverse the DOM and execute the click function right from the success function.

  • #3
    New to the CF scene
    Join Date
    Aug 2014
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    You put any JS that is supposed to be executed on the returned content into the success function. So, you appended the response content to the specificationList element, and then you can traverse the DOM and execute the click function right from the success function.
    Thanks for your response.

    I don't quite follow you though. Can you give me a code snap for your second sentence?

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,919
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    Something like:
    PHP Code:

    success 
    : function(response) {
        var 
    specifications response.specifications;
        var 
    respContent '';
        for(var 
    i in specifications){
            
    respContent += '<dt>' '</dt><dd>' specifications[i] + '</dd>';
        }
        $(
    "#specificationList").html(respContent);
        
    // here comes the new stuff
        
    $('#specificationList').find('dd span').on('click', function() {
            
    // do whatever you’re trying to do (e. g. call your deleteSpecification function)
        
    });


  • #5
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,461
    Thanks
    11
    Thanked 600 Times in 580 Posts
    Code:
    respContent += '<dt>' + i + '</dt><dd onclick="deleteSpecification('+JSON.stringify(specifications[i])+')">' + specifications[i] + '</dd>';
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%

  • #6
    New to the CF scene
    Join Date
    Aug 2014
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The output of the line is

    "<dt>abc</dt><dd>123<span class="glyphicon glyphicon-remove" onclick="deleteSpecification("abc")" ></span></dd>"

    The quotation market token is not correct. I try to play around the escape a single quotation mark without a luck.

  • #7
    New to the CF scene
    Join Date
    Aug 2014
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    Something like:
    PHP Code:
    &#8230;
    success : function(response) {
        var 
    specifications response.specifications;
        var 
    respContent '';
        for(var 
    i in specifications){
            
    respContent += '<dt>' '</dt><dd>' specifications[i] + '</dd>';
        }
        $(
    "#specificationList").html(respContent);
        
    // here comes the new stuff
        
    $('#specificationList').find('dd span').on('click', function() {
            
    // do whatever you’re trying to do (e. g. call your deleteSpecification function)
        
    });

    Thanks for your information. How to pass the data in the <dt> tag into the code block?


  •  

    Posting Permissions

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