jquery multi select里面的ajax返回

时间:2014-06-02 22:22:45

标签: javascript jquery ajax jquery-ui

我已经尝试了8个小时了,根本没有成功,我有一个index.php调用一个带有ajax调用的函数,这个调用,返回文本,并在文本I&内#39;对libs的一些调用以及其中的一些jquery代码,我已经尝试了所有的东西,但是我无法在我的ajax返回中使用multiselect工作,继承我的index.php ajax调用解析已经:

function mainSearch(clienteId, pedidoId, acao, success) {

    if (clienteId == "") {
        document.getElementById("txtHint").innerHTML = "";
        return;
    }

    if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else { // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange = function() {

        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

            result = xmlhttp.responseText;

            document.getElementById("txtHint").innerHTML =  parseScript(result);

            alert(document.getElementById("txtHint").innerHTML);

            //document.getElementById("txtHint").innerHTML =  xmlhttp.responseText;

            if( document.getElementById("txtHint").innerHTML == 'forcarCadastro'){
                window.location="<?php echo $siteUrl;?>clientes/index/telefone1:" + clienteId;
            }

            if (success) {

                success();
            }

        }

        var getScriptViaAjax=new ajaxObject('http://localhost/pizzaria/css/select/bootstrap.min.css',attachScript);
        getScriptViaAjax.update();

        var getScriptViaAjax=new ajaxObject('http://localhost/pizzaria/css/select/magicsuggest.css',attachScript);
        getScriptViaAjax.update();

        var getScriptViaAjax=new ajaxObject('https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js',attachScript);
        getScriptViaAjax.update();

        var getScriptViaAjax=new ajaxObject('http://localhost/pizzaria/js/select/bootstrap.min.js',attachScript);
        getScriptViaAjax.update();

        var getScriptViaAjax=new ajaxObject('http://localhost/pizzaria/js/teste.js',attachScript);
        getScriptViaAjax.update();

        var getScriptViaAjax=new ajaxObject('http://localhost/pizzaria/js/select/magicsuggest.js',attachScript);
        getScriptViaAjax.update();  

    }





    xmlhttp.open("GET", "<?php echo $siteUrl;?>ajax/mainSearch.php?clienteId=" + clienteId + "&pedidoId=" + pedidoId + "&acao=" + acao, true);
    xmlhttp.send();
}

function ajaxObject(url, callbackFunction) {
      var that=this;      
      this.updating = false;

      this.update = function(passData,postMethod) { 
        if (that.updating==true) { return false; }
        that.updating=true;                       
        var AJAX = null;                          
        if (window.XMLHttpRequest) {              
          AJAX=new XMLHttpRequest();              
        } else {                                  
          AJAX=new ActiveXObject("Microsoft.XMLHTTP");
        }                                             
        if (AJAX==null) {                             
          return false;                               
        } else {
          AJAX.onreadystatechange = function() {  
            if (AJAX.readyState==4) {             
              that.updating=false;                
              that.callback(AJAX.responseText,AJAX.status,AJAX.responseXML);        
              delete AJAX;                                         
            }                                                      
          }                                                        
          var timestamp = new Date();                              
          if (postMethod=='POST') {
            var uri=urlCall+'?'+timestamp.getTime();
            AJAX.open("POST", uri, true);
            AJAX.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            AJAX.send(passData);
          } else {
            var uri=urlCall+'?'+passData+'×tamp='+(timestamp*1); 
            AJAX.open("GET", uri, true);                             
            AJAX.send(null);                                         
          }              
          return true;                                             
        }                                                                           
      }
      var urlCall = url;        
      this.callback = callbackFunction || function () { };
}  


    function attachScript(responseText, responseStatus) {
       // This function is called by the ajaxObject when the server has finished
         // sending us the requested script.
       if (responseStatus==200) {
            eval(responseText);
         }
    }



function parseScript(_source) {
    var source = _source;
    var scripts = new Array();

    // Strip out tags
    while(source.indexOf("<script") > -1 || source.indexOf("</script") > -1) {
        var s = source.indexOf("<script");
        var s_e = source.indexOf(">", s);
        var e = source.indexOf("</script", s);
        var e_e = source.indexOf(">", e);

        // Add to scripts array
        scripts.push(source.substring(s_e+1, e));
        // Strip from source
        source = source.substring(0, s) + source.substring(e_e+1);
    }

    // Loop through every script collected and eval it
    for(var i=0; i<scripts.length; i++) {
        try {
            eval(scripts[i]);
        }
        catch(ex) {
            // do what you want here when a script fails
        }
    }

    // Return the cleaned source
    return source;
}


HERE'S THE RESULT OF THE AJAX CALL: (NOW, AFTER THE PARSE, WON'T SHOW THE INCLUDES, NEITHER THE JS CODE)

<style>
<!--
.two-col {
    overflow: hidden; /* Makes this div contain its floats */
}

.two-col .col1,.two-col .col2, .two-col .col3 {
    width: 33%;
}

.two-col .col1 {
    float: left;
}

.two-col .col2 {
    float: right;
}
.two-col .col3 {
    float: right;
}

.two-col label {
    display: block;
}
-->
</style>


<div class="span2" style="margin-top: -11%; position: absolute; left: 82%;">

    <div class="widget-box">
        <div class="widget-title">
            <span class="icon"><i class="icon-th"></i> </span>
            <h5>Pedidos em aberto</h5>
        </div>
        <div class="widget-content nopadding fix_hgt" style="height: 345px; width: 180px;">

            <div class="widget-content nopadding">

            2-
                <a href="#" class="button buzz" onclick="mainSearch(2 , 4, &quot;baixa&quot;), $(&quot;html, body&quot;).animate({ scrollTop: $(document).height() + 80})" style="width: 50px; height: 46px; margin-top: 2px; margin-bottom: 1px; margin-left: 1px;">4-             </a>


                3-
                <a href="#" class="button buzz" onclick="mainSearch(3 , 3, &quot;baixa&quot;), $(&quot;html, body&quot;).animate({ scrollTop: $(document).height() + 80})" style="width: 50px; height: 46px; margin-top: 2px; margin-bottom: 1px; margin-left: 1px;">3-             </a>


                            </div>
        </div>
    </div>
</div>
<div class="container-fluid">
    <div class="row-fluid">
        <div class="span10">
            <div class="widget-box">
                <div class="widget-title">
                    <span class="icon"> <i class="icon-align-justify"></i> </span>
                    <h5>Informações do cliente</h5>
                </div>
                <div class="widget-content ">
                jona---------Rua André Gouveia--------656--------Centro--------São Paulo----------<br>015320-------6656565-------6566464---------------------Total até hoje:11.0000<br>Saldo atual:11.0000<br>              </div>
            </div>
        </div>
    </div>
</div>



<div class="container-fluid">
    <form id="formID" onsubmit="return mformPost('#formID', 3);">
        <div class="row-fluid">
            <div class="span10">
                <div class="widget-box">
                    <div class="widget-title">
                        <span class="icon"> <i class="icon-align-justify"></i> </span>
                        <h5>Pedido</h5>
                    </div>

                    <div class="widget-content ">


                        <div class="two-col">
                            <div class="col1">
                                <label for="field1">Número de sabores:</label> 
                                <p class="lead"></p><div id="ms1" class="form-control" value="[&quot;Chicago&quot;,&quot;Houston&quot;]"></div><p></p>

                            </div>

                            <div class="col2">
                                <label for="field2">Tamanho:</label> <input id="tamanho" name="tamanho" value="" type="text">
                            </div>

                            <div class="col3">
                                <label for="field2">Tamanho:</label> <input id="tamanho" name="tamanho" value="" type="text">
                            </div>
                        </div>

                        <div class="two-col">
                            <div class="col1">
                                <label for="field1">Extra:</label> <input id="extra" name="extra" value="" type="text">
                            </div>

                            <div class="col2">
                                <label for="field2">Bebida:</label> <input id="bebida" name="bebida" value="" type="text">
                            </div>
                                                        <div class="col3">
                                <label for="field2">Tamanho:</label> <input id="tamanho" name="tamanho" value="" type="text">
                            </div>
                        </div>

                        <div class="two-col">

                            <div class="col1">
                                <label for="field1">Extra:</label>
                                <textarea rows="3" cols="450" id="observacao" name="observacao"></textarea>
                            </div>

                        </div>






                    </div>


                    <input name="acao" value="insere" type="hidden"> <input name="clienteId" value="3" type="hidden">



                    <div id="">
                        <input name="Submit" value="Novo pedido" class="btn btn-success btn" type="submit"> <input class="btn btn-danger btn" value="reset" type="reset">

                    </div>


                </div>



            </div>




        </div>
    </form>
</div>



<div id="response"></div>


<div id="hideIfempty">
    <div class="container-fluid">


        <div class="row-fluid">





            <div class="span10">

                <div class="widget-box">

                    <div class="widget-box">
                        <div class="widget-title">
                            <span class="icon"><i class="icon-user"></i> </span>
                            <h5>
                                Histórico
                                                            </h5>
                        </div>


                        <div class="widget-content nopadding fix_hgt" style="height: 180px">

                            <table class="table table-bordered table-striped with-check">
                                <thead>
                                    <tr>
                                        <th><i class="icon-resize-vertical"></i></th>
                                        <th>Id Pedido</th>
                                        <th>Usuário</th>
                                        <th>Sabor</th>
                                        <th>Tamanho</th>
                                        <th>Bebida</th>
                                        <th>Extra</th>
                                        <th>Total</th>
                                        <th>Saldo Atual</th>


                                    </tr>
                                </thead>
                                <tbody>
                                                                    <tr>
                                        <td onclick="SelectRowPag(1)" id="pcell_1,1"><input name="pagamentosRadio[]" value="3" id="pagamentosRadio1" onclick="" type="radio">
                                        </td>
                                        <td onclick="SelectRowPag(1),   buscaPedido(3 , 3, 100)" id="pcell_1,2">3</td>
                                        <td onclick="SelectRowPag(1),   buscaPedido(3  , 3, 100)" id="pcell_1,3">                                       </td>
                                        <td onclick="SelectRowPag(1),  buscaPedido(3  , 3, 100)" id="pcell_1,4">0                                       </td>
                                        <td onclick="SelectRowPag(1),   buscaPedido(3  , 3, 100)" id="pcell_1,5">                                       </td>
                                        <td onclick="SelectRowPag(1),   buscaPedido(3  , 3, 100)" id="pcell_1,6">1                                      </td>

                                        <td onclick="SelectRowPag(1),   buscaPedido(3  , 3, 100)" id="pcell_1,7">0.0000                                     </td>
                                        <td onclick="SelectRowPag(1),  buscaPedido(3  , 3, 100)" id="pcell_1,8">11.0000                                     </td>
                                        <td onclick="SelectRowPag(1),  buscaPedido(3  , 3, 100)" id="pcell_1,9">11.0000                                     </td>



                                                                            </tr>


                                </tbody>
                            </table>


                        </div>

                    </div>

                </div>

            </div>




        </div>
    </div>
</div>







And here is an example of a working multiselect: that works anywhere outside of this ajax return:

<link href="bootstrap.min.css" rel="stylesheet">
<link href="magicsuggest.css" rel="stylesheet">


<script
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="magicsuggest.js"></script>




<p class="lead">
<div id="ms1" class="form-control" value='["Chicago","Houston"]'></div>
</p>


<script type="text/javascript">
    $(function() {
        var ms1 = $('#ms1').magicSuggest(
                {
                    data : [ 'New York', 'Los Angeles', 'Chicago', 'Houston',
                            'Philadelphia', 'Phoenix', 'San Antonio',
                            'San Diego', 'Dallas', 'San Jose', 'Jacksonville' ]
                });
    });
</script>




How can I get that to work please ????

Thank you a lot

2 个答案:

答案 0 :(得分:0)

你不能将php代码放在循环中。如果if-loop返回1计算机无法运行php导致php是服务器端语言。尝试与php不同的其他东西。

答案 1 :(得分:0)

解决了这个问题,这是一个解析器错误,eval做了诀窍:

功能mainSearch(clienteId,pedidoId,acao,success){

if (clienteId == "") {
    document.getElementById("txtHint").innerHTML = "";
    return;
}


if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.onreadystatechange = function() {

    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

        //document.getElementById("txtHint").innerHTML =  xmlhttp.responseText;

        resposta =  xmlhttp.responseText;

        $("#txtHint").html(resposta);
        $("#txtHint").find("script").each(function(i) {
            eval($(this).text());
        });


        document.getElementById("txtHint").innerHTML =  $(this).text();
        //window.alert(document.getElementById("txtHint").innerHTML);

        if( document.getElementById("txtHint").innerHTML == 'forcarCadastro'){
            window.location="clientes/index/telefone1:" + clienteId;
        }

        if (success) {
            success();
        }

    }



}

xmlhttp.open("GET", "<?php echo $siteUrl;?>ajax/mainSearch.php?clienteId=" + clienteId + "&pedidoId=" + pedidoId + "&acao=" + acao, true);
xmlhttp.send();

}