0

I have been stuck on this same problem now for 2 weeks with 10-15 hours a day.

I am using dynamic buttons that append more buttons which work like tabs on my view which are dynamic.

I can only use 1 form for this so the dynamic buttons are being used to know which model ID to load.

I have to use only 1 form Simple jquery is this: 

$("#copy-link").click(function (e) {
    e.preventDefault();

    var num_tabs = $("div#tabSequence ul li").length + 1;
    $("div#tabSequence ul").append(
        "<li class='tab-button'><a data-toggle='tab' id='link" + num_tabs + "' href='#tab" + num_tabs + "'>#" + num_tabs + "</a></li>"
    );

    var data =  $('#campaign-form').serialize();



      $.ajax(
            {
                dataType: 'html',
                type: 'POST',
                url: "campaigns/sequencesave",
                data: data,
                success: function(response){
                    var campaignId = response;
                    var test2 = document.getElementById("link" + num_tabs);
                    console.log(test2);
                    test2.setAttribute("data-campaign", campaignId);
                }

            }
    )
});

Is there a way I can POST form data and also load form content for the Tab button clicked? 

$("body").on("click", ".nav-tabs li a", function() {
        var data =  $('#campaign-form').serialize();


        $.ajax(
            {
                dataType: 'html',
                type: 'POST',
                url: "campaigns/sequenceupdate",
                data: { 'campaign_uid' : $(this).attr('data-campaign'), csrf_token: csrfTokenValue },

            }
        )
    })

^^ that same button clicked has to save what is currently on the view and then load contents for the button clicked. I am appending an ID of the Model needed to the button when user clicks #copy-link and saving it automatically

Michael DaSilva
  • 157
  • 1
  • 2
  • 15
  • 3
    can you change your server side code to return the required content in the POST handling - that's how 99.9999% of websites would do it – Jaromanda X Mar 30 '17 at 01:40
  • If you must use separate Ajax requests for some reason, make the load request from within the save request's `success` handler. – nnnnnn Mar 30 '17 at 01:46
  • Thanks for help guys, the server is returning right content for button clicked, but I also need to save current active tab before clicked new tab loads its content. So it's why i think I need 2 ajax calls, one to save current active view and one to load Model id for the specific button clicked. Not sure how I can do that in the `success ` handler method since I will need to do another ajax call to get the model with the ID. – Michael DaSilva Mar 30 '17 at 02:11
  • @nnnnnn how would i do that with with ID i have for the model? I think that sounds about right for what I need – Michael DaSilva Mar 30 '17 at 02:19

1 Answers1

0

Im not a jQuery wiz but you can do this with straight up javascript in conjunction with Jquery. 

function postInfo(event){
    httpRequest = new XMLHttpRequest();
    if (!httpRequest) {
      alert('Giving up :( Cannot create an XMLHTTP instance');
      return false;
    }
    httpRequest.onreadystatechange = results;
    httpRequest.open('POST', 'ENTER YOUR URL HERE');
    httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
httpRequest.send('serverpin='+ServerPIN+'&restuarantid='+RestaurantID); //<-these are the variables you are posting
  }

function results(){
    if (httpRequest.readyState === XMLHttpRequest.DONE) {
      if (httpRequest.status === 200) {
        // WHATEVER YOU WANT TO MAKE IT DO IF THE REQUEST IS SUCCESSFUL
      } else {
        alert('There was a problem with the request.');
      }
    }
  }

And then to invoke it I use an event listener like this

document.getElementById('WHATEVERIDMATTERS').addEventListener('click',postOrder);
Usman Shahid
  • 302
  • 1
  • 9