0

I am having difficulty in understanding how to use the jQuery smart wizard.

I have managed to get it going with static html for my first three tabs but I now want to add another tab which uses an ajax call to get the data based on the data I have collected in the previous tabs.

I know there are callback functions for leaving and entering steps but the documentation is unclear on how to use them (or it maybe I don't understand enough jQuery/JavaScript to correctly interpret the documentation)

The way I read it is I would use

$("#smartwizard").on("stepContent", function(e, anchorObject, stepIndex, stepDirection) {
   // if this is the correct step index then
   // do my ajax call using a promise 
   // (Which I do not understand fully how to do. 
   // I have never used a promise before.)
   // and return my html. (Where is the html going to be put? is it the 'tabpanel'?)
   return myHTMLfromtheajaxcall;
  // else do nothing
  // How do I stop it overriding the existing content?
  // Do I return '' or false or what?
});

What and where do the parameters for the function come from. What is 'e'? What is 'anchorObject'? The other parameters are self explanatory.

I hope somebody can explain things in simple terms with some examples.

Thank you in advance.

Margaret Jarrett
  • 1
  • 1
  • Here is the complete documentation http://techlaboratory.net/jquery-smartwizard#ajax_contents – Dipu Raj Feb 22 '22 at 15:18
  • The documentation does not explain anything in simpler terms about what I am asking about. That is why I am asking this question. The part about ajax contents is confusing. I am new to the idea of promises which I am just learning about having never heard of them before this. A more concrete example would be helpful. – Margaret Jarrett Feb 23 '22 at 17:26
  • Reading the documentation and I am confused about what the 'loader' is? What element is "'anchorObject the jQuery object of the selected step'" referring to? What is 'e' that is passed? – Margaret Jarrett Feb 23 '22 at 17:34
  • When I do an ajax call I normally do a post then use 'success' ` $.ajax({ url: "./ajax/LoadFabric.php", method: "POST", //Fetching method data: { ColourId: DataArr[id], Outer: true }, success: function(data) //If data fetched successfully from the server, execute this function { $('#OuterFabricSelect').html(data); $(".tab-content").height("100%"); $("#smartwizard").smartWizard("fixHeight"); } }); ` – Margaret Jarrett Feb 23 '22 at 17:41
  • How do I convert that to a promise? – Margaret Jarrett Feb 23 '22 at 17:43
  • I have managed to get promises working after much trial and error. Basically I discovered if you dont want to do anything the just return false. That is not mentioned anywhere as far as I could see. – Margaret Jarrett Apr 21 '22 at 03:48
  • My solution works on a switch statement on the step number and then returning a promise for the content to display – Margaret Jarrett Apr 21 '22 at 03:57
  • e.g. case 6: // Confirmation return new Promise((resolve, reject) => { $.ajax({ url: "./ajax/Load_Step-6.php", type: 'POST', data: { ShoeId: gShoeId, }, success: function(data) { resolve(data) }, error: function(error) { reject(error) }, }) }); break; – Margaret Jarrett Apr 21 '22 at 03:57

0 Answers0