Search jQuery

jQuery Forum

Using jQuery

Johannes ..

Problem with ajax and button event

in Using jQuery • 8 years ago

Hi guys,

sorry for this stupid question, but I can't solve this.

When I click on the button , the ajax request sent as often as I have "each " elements . Plus once the regular . How can that be? The ajax request is started but only once at the end . And it should also be started only once.

I just do not come on , and prophesied no longer what I could google .

That is my jQuery code:

$('#iptableschange-save').click(function() {
    id = $(this).attr('value');
    chainid = $('#changeiptablerule #add-iptable-rule-chain input[type=radio]:checked').val();
    if( typeof chainid == 'undefined' ) {
      $('#add-iptable-rule-chain').removeClass('panel-default');
      $('#add-iptable-rule-chain').addClass('panel-danger');
    } else {
      $('#add-iptable-rule-chain').removeClass('panel-danger');
      $('#add-iptable-rule-chain').addClass('panel-success');
    }
    inputinterface = $('#add-iptable-rule-input input[type=radio]:checked').val();
    if( typeof inputinterface == 'undefined' ) {
      $('#add-iptable-rule-input').removeClass('panel-default');
      $('#add-iptable-rule-input').addClass('panel-danger');
    } else {
      $('#add-iptable-rule-input').removeClass('panel-danger');
      $('#add-iptable-rule-input').addClass('panel-success');
    }
    outputinterface = $('#add-iptable-rule-output input[type=radio]:checked').val();
    if( typeof outputinterface == 'undefined' ) {
      $('#add-iptable-rule-output').removeClass('panel-default');
      $('#add-iptable-rule-output').addClass('panel-danger');
    } else {
      $('#add-iptable-rule-output').removeClass('panel-danger');
      $('#add-iptable-rule-output').addClass('panel-success');
    }
    target = $('#add-iptable-rule-target input[type=radio]:checked').val();
    if( typeof outputinterface == 'undefined' ) {
      $('#add-iptable-rule-target').removeClass('panel-default');
      $('#add-iptable-rule-target').addClass('panel-danger');
    } else {
      $('#add-iptable-rule-target').removeClass('panel-danger');
      $('#add-iptable-rule-target').addClass('panel-success');
    }
    comment = $('#add-iptable-rule-comment textarea').val();
    active = false;
    if( $('#add-iptable-rule-last-overview input[type=checkbox]').is(":checked"))
    {
      active = true;
    }
    priority = $('#add-iptable-rule-last-overview input[type=text]').val();
    if( priority == "" ) {
      $.ajax({url: "handler/getMaxPriority.php?chainid=" + chainid, success: function(result){
        gottenResult = result.split("Priority: ");
        priority = gottenResult[1];
        $('#add-iptable-rule-last-overview input[type=text]').val(priority)
      }})
    }
    if( $('#changeiptablerule').find('.panel-danger').length == 0 ) {
      var data = {
                    chainid: chainid,
                    inputinterfaceid: inputinterface,
                    outputinterfaceid: outputinterface,
                    sourceid: {
                            hosts: { },
                            groups: { },
                          },
                    destinationid: {
                            hosts: { },
                            groups: { },
                          },
                    serviceid: {
                            hosts: { },
                            groups: { },
                          },
                    target: target,
                    comment: comment,
                    active: active,
                    priority: priority
              };
      sourceHost = 0;
      sourceGroup = 0;
      $('#add-iptable-rule-source .selectedItems ul .selectedElement').each(function(){
        if( $(this).text().indexOf("Group:") > -1) {
          data['sourceid']['groups'][sourceGroup] = $(this).val();
          sourceGroup++;
        } else {
          data['sourceid']['hosts'][sourceHost] = $(this).val();
          sourceHost++;
        }
      })
      destinationHost = 0;
      destinationGroup = 0;
      $('#add-iptable-rule-destination .selectedItems ul .selectedElement').each(function(){
        if( $(this).text().indexOf("Group:") > -1) {
          data['destinationid']['groups'][destinationGroup] = $(this).val();
          destinationGroup++;
        } else {
          data['destinationid']['hosts'][destinationHost] = $(this).val();
          destinationHost++;
        }
      })
      serviceHost = 0;
      serviceGroup = 0;
      $('#add-iptable-rule-service .selectedItems ul .selectedElement').each(function(){
        if( $(this).text().indexOf("Group:") > -1) {
          data['serviceid']['groups'][serviceGroup] = $(this).val();
          serviceGroup++;
        } else {
          data['serviceid']['hosts'][serviceHost] = $(this).val();
          serviceHost++;
        }
      })
      $.ajax({
          type:    'post',
          cache:   false,
          url:     "handler/writeIptable.php?id=" + id,
          data:    data,
          success: function(result){
            alert(result);
      }}
      )
    } else {
      // What to do if there is an error
    }
});

And this is my html button:

<button id="iptableschange-save" type="button" class="btn btn-default">Save</button>

Thank you for your help in advance!

Chears, Johannes

Replies(9)

watusiware

Re: Problem with ajax and button event

8 years ago

Plus once the regular .

What does that mean?

alert(result);

Don't use alert() for debugging. It is evil! It will stop all asynchronous events. It blocks the UI until the user responds. Use console.log() for debugging.

Johannes ..

Re: Re: Problem with ajax and button event

8 years ago

Plus once the regular .

This means:
When I doesn't add something the ajax posts one time. Every element I'll add, the ajax posts the number of the elements + the post it should do.

Use console.log() for debugging.

Thanks for this tip!

watusiware

Re: Problem with ajax and button event

8 years ago

This means:
When I doesn't add something the ajax posts one time. Every element I'll add, the ajax posts the number of the elements + the post it should do.

And is that a good thing or a bad thing?

Johannes ..

Re: Re: Problem with ajax and button event

8 years ago

This is a bad thing.
The post may be executed only once.

Background:
When the ajax post is successfully, a php script inserts the data from the array to the database. If ajaxs sends 3 times the post, for example, the item is 3 times in the database. That should not be

watusiware

Re: Problem with ajax and button event

8 years ago

The post may be executed only once.

Of course it posts multiple times, because you put it in a loop! If you don't want multiple posts, don't do that!

I've no idea what you are really trying to accomplish here.

watusiware

Re: Problem with ajax and button event

8 years ago

P.S,. You have two $.ajax() calls in your code. I assume you mean the second one, the one that is in the .each() loop.

Can you simply this example, to remove all of the irrelevant stuff?

Sµßhrånil∂

Re: Problem with ajax and button event

8 years ago

Its not clear what is the problem and what you want. I see your 2nd ajax is outside each loop so for every button click you should not have more that one ajax call for the 2nd ajax and in total you will have only 2 calls.
One call to handler/getMaxPriority.php and 2nd call to handler/writeIptable.php

I highlighted the start and end of each loop and its clear your 2nd ajax is out of each. So how your 2nd ajax fired more than once? There may be something elase

$('#add-iptable-rule-source .selectedItems ul .selectedElement').each(function() {
        if( $(this).text().indexOf("Group:") > -1) {
          data['sourceid']['groups'][sourceGroup] = $(this).val();
          sourceGroup++;
        } else {
          data['sourceid']['hosts'][sourceHost] = $(this).val();
          sourceHost++;
        }
      })
$('#add-iptable-rule-destination .selectedItems ul .selectedElement').each(function() {
if( $(this).text().indexOf("Group:") > -1) {
data['destinationid']['groups'][destinationGroup] = $(this).val();
destinationGroup++;
} else {
data['destinationid']['hosts'][destinationHost] = $(this).val();
destinationHost++;
}
})
serviceHost = 0;
serviceGroup = 0;
$('#add-iptable-rule-service .selectedItems ul .selectedElement').each(function() {
if( $(this).text().indexOf("Group:") > -1) {
data['serviceid']['groups'][serviceGroup] = $(this).val();
serviceGroup++;
} else {
data['serviceid']['hosts'][serviceHost] = $(this).val();
serviceHost++;
}
})
$.ajax({
type: 'post',
cache: false,
url: "handler/writeIptable.php?id=" + id,
data: data,
success: function(result){
alert(result);
}}
)

Johannes ..

Re: Problem with ajax and button event

8 years ago

Thank you all for your help!

I researched and found the problem. I loaded every js file several times, because I included them in my config file. What was loaded in every container I opened with js.
Now I include them all once in the header. So on I changed all my functions to this style:

$(document).on('click', '#iptableschange-save', function(){ ... };

Before I had the problem that the functions are not working when I load content via ajax.

I think this is a beginner problem.

If anyone has the same problem: I had to change all functions to this style. I don't know why, but it works great.

watusiware

Re: Problem with ajax and button event

8 years ago

It is SO important to post a COMPLETE example, in the form of a link to your site or using a collaborative-coding site (like jsFiddle or Plunkr.) It's also helpful to remove irrelevant details, and boil it down to the smallest example that will show the problem.

We seldom are able to provide a solution when some isolated bit of code is posted to the forum.

We had no way of knowing that you included the code more than once.

In the future, I will not answer questions that simply post code to the forum (unless they are trivial). It is a waste of time. We go round and round guessing what was intended and playing 20 questions trying to get the missing pieces. I will simply point out that a a complete, runnable example is the way to maximize your chances of a solution.

Top Reply

Response title

Attachments

jQuery Forum

Problem with ajax and button event

Replies(9)

Re: Problem with ajax and button event

Re: Re: Problem with ajax and button event

Re: Problem with ajax and button event

Re: Re: Problem with ajax and button event

Re: Problem with ajax and button event

Re: Problem with ajax and button event

Re: Problem with ajax and button event

Re: Problem with ajax and button event

Re: Problem with ajax and button event

Statistics

Tags

Actions