yii, ajax, javascript not calling action

Question

I am trying to post data to an action with ajax in yii. Currently I am hard coding true and false in the action to see if I am even posting data, and it's not getting there. I can't seem to figure out where I am going wrong. Any Information would help, Thank you

JS/AJAX below:

    function printObject(o) {  // alerts an object
        var out = '';
        for (var p in o) {
            out += p + ': ' + o[p] + '\n';
        }
        alert(out);
    }

    $(function() {
        var dialog, form,
            //select ticket_code, I don't know if this is working properly
            ticket_code = $( "#ticket_code"), 
            allFields = $( [] ).add( ticket_code ),
                tips = $( ".validateTips" );

        function addTicket() {
            var valid = false;
            //alert ticket_code (however, it only alerts a long error message)
            //saying that the length is 1, but not sure if that is correct
            //see link at the end for error message. 
            printObject(ticket_code);
            $.ajax({
                type: "POST",
                url: '<?php echo Yii::app()->createUrl('ticket/addTicket'); ?>',
                data: {ticket_code : ticket_code},
                success: function(){
                    alert('got here');
                    valid = true;
                }
            });
            alert("after ajax");
            if ( valid ) {
                dialog.dialog( "close" );
                alert('yay');
            }
        }

actionAddTicket below:

public function actionAddTicket(){
    if(isset($_POST['ticket_code'])){
        return true;
    }
    return false;
}

form view below:

<div id="dialog-form" title="Add a Ticket">
<p class="validateTips">Please Enter Ticket Number</p>
<form>
    <fieldset>
        <label for="ticket_code">Ticket Code #</label>
        <input type="text" name="ticket_code" id="ticket_code" placeholder="000-0000" class="text ui-widget-content ui-corner-all" title="You can find this on the bottom right hand side of your ticket">
        <img src="/images/faq-ticket-codes.png" width="150";/>
        <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
    </fieldset>
</form>

the alerted object value for ticket_code

What is the HTTP response? You'll have to open your browsers debugging tools (usually F12 or Ctrl + Shift + K). — Greg Burghardt
– Greg Burghardt, Commented Jul 30, 2014 at 19:15
TypeError: 'stepUp' called on an object that does not implement interface HTMLInputElement. value = jQuery.isFunction( value ) ? value() : ( value == null ? "" : value ); — Sari Rahal
– Sari Rahal, Commented Jul 30, 2014 at 19:20
That looks like a JavaScript error, not an HTTP response. Can you update your question with this error and provide a stack trace? — Greg Burghardt
– Greg Burghardt, Commented Jul 30, 2014 at 20:09
@GregBurghardt : Is that what you meant by stack tracing, or is there a way to do it in ajax? — Sari Rahal
– Sari Rahal, Commented Jul 30, 2014 at 20:35
You should try to avoid hard code url in Ajax function body, use Yii::app-> createUrl ('controller/action') to get exact url independently from your project setup — Alejandro Quiroz
– Alejandro Quiroz, Commented Jul 31, 2014 at 4:49

Greg Burghardt · Accepted Answer · 2014-07-31 14:58:32Z

The problem appears to be caused by two things:

AJAX requests are Asynchronous, which means the line of JavaScript immediately following the call to $.ajax gets executed before the AJAX request comes back in, or most likely will. It becomes a race condition.
The line ticket_code = $( "#ticket_code") is a jQuery object. You then pass it as the ticket_code property in the request data which jQuery is trying to serialize as a string. jQuery thinks ticket_code is an HTMLInputElement (e.g. <input type="text">) when it actually is a jQuery object, so there is no way for it to be serialized as a string.

Anything you want to do after the AJAX request comes back to the browser should be done in the success callback. Secondly, you need to use ticket_code.val() when creating your data to pass along in the request:

function addTicket() {
    var valid = false;

    $.ajax({
        type: "POST",
        url: '<?php echo Yii::app()->createUrl('ticket/addTicket'); ?>',
        data: {ticket_code : ticket_code.val()},
        success: function(){
            // ticket_code is valid
            dialog.dialog( "close" );
        }
    });
}

Collectives™ on Stack Overflow

yii, ajax, javascript not calling action

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related