www.webdeveloper.com
Results 1 to 3 of 3

Thread: Javascript scope function

  1. #1
    Join Date
    Jul 2014
    Posts
    2

    Javascript scope function

    Hello all,

    I'm experimenting with Javascript, I would like to create a function/feature that would manage all buttons accross my pages. Building the function, assigning it to buttons is working fine except that when buttons are clicked I generate an Ajax call to my PHP server to retrieve some content that also contains buttons and those buttons don't react when clicked. It's like those button don't know the function declared earlier and that's where my problem is.

    Some code.

    index.php (js called in <header></header)
    function ButtonManager()
    {
    $( "button" ).click(function()
    {
    var context = $(this).attr('type');
    var page_type = $(this).attr('page');
    var referrer = $(this).attr('referrer');
    var form_type = $(this).attr('form');
    var object_id = $(this).attr('object');
    var postData = 'page_type='+page_type+'&form_type='+form_type+'&referrer='+referrer+'&id='+object_id;

    if (context == 'post_form')
    {
    var formData = $('#submit_content').serialize();
    postData = postData+'&context=post_form&'+formData;
    }

    if ((context == 'load_form') || (context == 'filter_form'))
    {
    postData = postData +'&context=load_form';
    if (context == 'filter_form')
    {
    var filter1 = $('select[name=filter1]').val();
    var filter2 = $('select[name=filter2]').val();
    var filter3 = $('select[name=filter3]').val();
    postData = postData + '&filter1='+filter1+'&filter2='+filter2+'&filter3='+filter3;
    }
    }


    $.ajax
    ({
    type: 'POST',
    url: 'php/sl.php',
    data: postData,
    cache: false,
    async: false,
    dataType: 'html',
    success: function(result)
    {
    $('#'+form_type+'_content').html(result);

    },
    error: function(XMLHttpRequest, textStatus, errorThrown)
    {
    alert(XMLHttpRequest.status);
    alert(XMLHttpRequest.responseText);

    },

    });

    });



    }

    An example of a button I use in index.php
    <button type="load_form" page="page" referrer="navigation" form="edit" object="">TEST</button>

    So far...everything is all right. Hitting the button submits the variables to sl.php and the output I get from sl.php is also ok.

    But, if I get buttons in the output, I would like them to use the ButtonManager function but this function is unknown there.
    The only trick I have found to make it work is to add the following to the server output: var testvar = ButtonManager();
    This works but the problem is that my function is called multiple times (at least twice).

    I'm perhaps looking at it the wrong way but given my limited experience in JS, there might be a simpler alternative.

    Any idea?

    Thanks!

  2. #2
    Join Date
    Nov 2010
    Posts
    1,102
    you appear to be using jQuery, which gives you the option of delegating events - basically, you attach an event listener to an element that you know exists (most people use document) and at the time of the event it bubbles up to the target element.

    So in this way you can attach event listeners to elements that don't exist yet, which sounds to be exactly your problem.

    You can do a similar thing in plain js, but if youˇ're using jQuery anyway, you might as well get your money's worth.

    So (if I understand your code correctly), instead of
    Code:
    $( "button" ).click(function() {
    you would have
    Code:
    $( document ).on("click", "button", function() {
    you can read more about jQuery's on() here: http://api.jquery.com/on/

  3. #3
    Join Date
    Jul 2014
    Posts
    2
    Fabulous! It is exactly what I was looking for, I have implemented it and it solves both of my problems (function not known and multiple execution)

    xelawho, a big thanks, you spared me some additional grey hair ! :-)

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles