[SOLVED] AJAX Fallback

[Jabop]

So, I have this AJAX function. I want it to just submit through a normal GET if the user has JS disabled.

 

What is a good ajax fallback method?

[Jabop]

Oops, could someone move this to AJAX forum.

 

Thanks

[jacksonmj]

Hidden iframe perhaps?

 

Give the hidden iframe a name and set the target of the form to the iframe name. Use onsubmit, returning false, to do the AJAX and cancel the hidden iframe submit if Javascript is enabled.

[Jabop]

Up. This still needs to be moved to Ajax, btw.

[DarkWater]

<form action="foo.php" method="get">

    <select name="test" onchange="yourAjaxFunc()">

            <option value="1">Something</option>

            <option value="2">Something Else</option>

    </select>

    <noscript>

            <input type="submit" name="submit" value="Send" />

  </noscript>

</form>

 

Just an example.  Can you show what you're actually trying to do?

[Jabop]

Here's my slop code, and forgive my naming conventions as I mainly just have fun with them as I'm developing. Haha.

 

// the JavaScript of the function
<script type="text/javascript">
     function doDaTogga() {
          $('edit_shipping').toggle();
          document.edit_shipping_form.new_shipping.value='';
          document.edit_shipping_form.new_shipping.focus();
          return false;
     }

     function updateShipping(item_id,new_price) {
          var url = "/admin/orders.html?id=572&new_shipping="+escape(new_price)+"&balls=TRUE";

          new Ajax.Request(url, {
               method:'get',
               onSuccess: function(transport) {
                    var response = transport.responseText.split("|~|") || "err";
                    document.getElementById('new_cost').innerHTML=response[0];
                    document.getElementById('new_total').innerHTML=response[1];
                    document.edit_shipping_form.reset();
                    $('edit_shipping').toggle();
               },
               onFailure: function() { alert('Bad') }
          });
     }
</script>

 

// begin snip
<span id="new_cost"><?=number_format($ShipCost,2)?></span>
<a href="#" onclick="doDaTogga(); return false;"><img src="images/plus.gif" alt="" border="0"></a>
     <div style="display: none;" id="edit_shipping">
          <form name="edit_shipping_form" method="get" onsubmit="updateShipping(<?=$ThisID?>,$('new_shipping').value); return false;">
               <input type="text" name="new_shipping" id="new_shipping" size="2" style="border:1px solid black; width:50px"><br>
               <input type="submit" value="Update" style="border:1px solid black; width:52px">
          </form>
          <span id="new_total"><?=number_format($TotalPrice+$Tax+$ShipCost,2)?></span>
     </div>
// end snip

[DarkWater]

Oh hey, script.aculo.us!  I love that framework. Anyway, since you already have the form, did you try just turning Javascript off and seeing if it worked?  I can't see why it wouldn't, but then again I just woke up.

[Jabop]

It's actually the prototype framework. scriptaculous is mainly for graphical enhancement, imo.

 

Anyhow, it doesn't submit properly because what I really need done goes through the js function. If I submit the form with js disabled it just submits the GET data without the query string.

[DarkWater]

It's actually the prototype framework. scriptaculous is mainly for graphical enhancement, imo.

 

Anyhow, it doesn't submit properly because what I really need done goes through the js function. If I submit the form with js disabled it just submits the GET data without the query string.

 

Aww, scriptaculous is cool though. D:  The effects are really great with it though, if I had to recommend a framework.  Anyway, that could be because an action wasn't specified.  Try putting an action attribute on the form tag.  It won't matter if Javascript is on because you return false in the onsubmit handler anyway, but it should work for non-Javascript submits.

[Jabop]

<noscript>
     <input type="text" name="new_shipping_nojs" id="new_shipping_nojs" size="2" style="border:1px solid black; width:50px"><br>
     <input type="hidden" name="balls" value="TRUE">
     <input type="hidden" name="id" value="<?=$ThisID?>">
     <input type="submit" value="Update" style="border:1px solid black; width:52px">
</noscript>

 

Thanks, Dark. This works, however, I don't know if it will validate cause I have the same submit button outside of the <noscript>.

[DarkWater]

Try validating it.  If it doesn't validate, just let me know and I'll have a look at it.

[haku]

It's a side point, but I generally find it is better to develop the fallback first, and then add the javascript overtop. It takes more time at the start, but gives you a more stable system afterwards.

 

Good luck with this problem here!

[Jabop]

I didn't intend to just do the javascript, I hadn't made it live yet. I wouldn't have made it live without this JS fallback fix, that's for sure.