1

私は非常に長い間同じ問題を抱えていて、誰かが私が間違っていることを教えてくれるかどうか疑問に思っています.

マルチページの Jquery (以下の例のようなもの) を作成しましたが、保存した .js ファイルへの参照を追加しようとすると、常にページのコンテンツが読み込まれないか、別の場所に配置されている場合は、単に機能しません！

私のHTMLコードは次のとおりです。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Find A Deal</title>

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <style>
        img.fullscreen {
            max-height: 100%;
            max-width: 100%;
        }
        </style>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript">
    $(document).on('pagebeforeshow', '#index', function(){
        $("#list").empty();
        var url="http://localhost/tmp/json4.php";
        $.getJSON(url,function(json){
            //loop through deals
            $.each(json.deals,function(i,dat){
                $("#list").append("<li><a id='"+dat.dealid+"' data-restaurantid=" + dat.restaurantid + " data-image=" + dat.image + "><h1>"+dat.name+"</h1><h6>"+dat.dname+"</h6><h5>"+dat.description+"</h5></a></li>");
                $(document).on('click', '#'+dat.dealid, function(event){  
                    if(event.handled !== true) // This will prevent event triggering more then once
                    {
                        dealObject.dealID = $(this).attr('id'); 
                        dealObject.restaurantid = $(this).attr('data-restaurantid');
                        dealObject.shortName = $(this).find('h1').html(); 
                        dealObject.image = $(this).attr('data-image');
                        //dealObject.dname = $(this).find('input').html();
                        //dealObject.dname = $(this).find('desc').val();
                        dealObject.dealName = $(this).find('h6').html();
                        dealObject.description = $(this).find('h5').html(); 
                        //dataObject.dname=$(this).find('p').html()
                        //dealObject.name = $(this).find('desc').eq(0).val(dealObject.name);

                        $.mobile.changePage( "#index2", { transition: "slide"} );
                        event.handled = true;
                    }
                });            
            });
            $("#list").listview('refresh');
        });
    });

    $(document).on('pagebeforeshow', '#index2', function(){       
        //$('#index2 [data-role="content"]').html('You have selected Link' + dealObject.dname);
        $('#index2 [data-role="content"]').find('#deal-img').attr('src',dealObject.dealObject);
        $('#index2 [data-role="content"]').find('#title').html(dealObject.name);
        //$('#index2 [data-role="content"]').find('#description').html(dealObject.dname);
                $('#index2 [data-role="content"]').find('input#desc').val(dealObject.description);
                $('#index2 [data-role="content"]').find('input#tname').val(dealObject.dealName);
                $('#index2 [data-role="content"]').find('input#dealid').val(dealObject.dealID);


    });

    var dealObject = {
        dealID : null,
        restaurantid : null,
        shortName : null,
        image : null,
        dealName : null,
        description: null
    }    
</script>

</head>     
<body>    
<div data-role="page" id="index">
    <div data-role="header" data-position="fixed">
        <h1>Current Deals</h1>
    </div>

    <div data-role="content">
        <div class="content-primary">
            <ul id="list" data-role="listview" data-filter="true"></ul>
        </div>
    </div>

    <div data-role="footer" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li><a href="http://localhost/findadeal/index.html" data-icon="home">Home</a></li>
                <li><a href="http://localhost/findadeal/mydeal.html" data-icon="grid">My Deals</a></li>
            </ul>
        </div>
    </div>
</div>

<!--New Page --> 
<div data-role="page" id="index2">
<!--<script src="js/ammend.js"></script>--!>
<div data-role="header">
        <h1> Find A Deal </h1> 
    </div>

    <div data-role="content">

 <!--       <?php
    if( !isset( $_SESSION ) ){
     session_start();
        }

    if( isset( $_SESSION['username'] ) ){
        echo ".";
        } ?>   --!>

        <form id="test">
        <label for="name">Deal Name:</label>
        <input type="text" value="" name="tname" id="tname"/>
        <label for="desc">Description</label>
        <input type="text" value="" name="desc" id="desc"/>  
        <a data-role="button" id="amend" data-icon="star" data-iconpos="left">Amend Deal </a>
        <input type="text" value="" name="dealid" id="dealid"/>

        <h3></h3>
        <!--<img src="" width="100px" height="100px" id="deal-img">
        <h1 id="title"></h1>
        <h3 id="description"></h3>
        <p id="name"></p>--!> 
    </div>

    <footer data-role="footer" data-position="fixed">
        <nav data-role="navbar">
            <ul>
                <li><a href="index.html" data-icon="home">Home</a></li>
                <li><a href="#index" data-icon="grid">My Deals</a></li>
            </ul>
        </nav>
    </footer>   
</div>
</body>
</html>

読みにくい場合はご容赦ください。この JavaScript 関数は、単独で問題なく動作します。index の項目をクリックすると、index2 の新しいページが表示されます。インデックス 2 には、参照されているファイルに接続する送信ボタンがあります<script src="js/ammend.js"></script>。これは、彼らがお互いを打ち消し合っているか、単に協力していないかのように、私にとって通常うまくいかないように見えるところです.

その場所にあるjsファイルは次のとおりです。

$(document).on('pagebeforeshow', '#index2', function(){ 
$('#amend').on('click', function(){
    if($('#tname').val().length > 0 && $('#desc').val().length > 0 && $('#dealid').val().length > 0){
        userObject.tname = $('#tname').val(); // Put username into the object
        userObject.desc = $('#desc').val(); // Put password into the object
        userObject.dealid = $('#dealid').val();
        // Convert an userObject to a JSON string representation
        var outputJSON = JSON.stringify(userObject);
        // Send data to server through ajax call
        // action is functionality we want to call and outputJSON is our data
        ajax.sendRequest({action : 'index2', outputJSON : outputJSON});
    } else {
        alert('Please fill all nececery fields');
    }
 });    
});

$(document).on('pagebeforeshow', '#index2', function(){ 
if(userObject.name.length == 0){ // If username is not set (lets say after force page refresh) get us back to the login page
    $.mobile.changePage( "#index2", { transition: "slide"} ); // In case result is true change page to Index  
}
$(this).find('[data-role="content"] h3').append('Deal Amended:' + userObject.name); // Change header with added message
//$("#index").trigger('pagecreate');
});

// This will be an ajax function set
var ajax = {
sendRequest:function(save_data){
    $.ajax({url: 'http://localhost/test/login/amend.php',
        data: save_data,
        async: true,
        beforeSend: function() {
            // This callback function will trigger before data is sent
            $.mobile.showPageLoadingMsg(true); // This will show ajax spinner
        },
        complete: function() {
            // This callback function will trigger on data sent/received complete
            $.mobile.hidePageLoadingMsg(); // This will hide ajax spinner
        },
        success: function (num) {
            if(num == "true") {
                $.mobile.changePage( "#index", { transition: "slide"} ); // In case result is true change page to Index
            } else {
                alert('Deal has been added successfully'); // In case result is false throw an error
                $.mobile.changePage( "#index", { transition: "slide"} );
            }
            // This callback function will trigger on successful action
        },
        error: function (request,error) {
            // This callback function will trigger on unsuccessful action                
            alert('Error: " . mysql_error() . "Query: " . $query;');
        }
    });
}
}

// We will use this object to store username and password before we serialize it and send to server. This part can be done in numerous ways but I like this approach because it is simple
var userObject = {
tname : "",
desc : "",
dealid: ""
}

上記はボタンが押されたときに呼び出される必要がありますが、ほとんどの場合、このコードに参照を追加すると、ボタンを表示する段階に到達することさえできません。

誰かが以前にこれと同じ問題を抱えていた場合、または問題に光を当てることができれば、本当に感謝しています.

4

1 に答える 1

1

あなたの問題は、jQuery Mobile ページの処理に関連しています。

ajax を使用して DOM にロードされた複数の HTML ページを使用しているため、すべての js スクリプトは最初の HTML ファイルから参照する必要があります。他のすべての HTML ファイルは部分的にのみロードされ、HEAD は破棄され、BODY 部分のみがロードされます。

于 2013-02-20T14:42:00.733 に答える