CODEWITHSUNDEEP
javascriptjqueryajaxjquery-mobile
user2025934
user2025934

Reputation: 129

Multiple Javascript Functions in Jquery

I've been having the same issue for a very long time and I'm wondering if someone can teach me what I'm doing wrong.

I created a multipage Jquery (like the one in the example below) however, when I go to add a reference to a .js file I've saved it always tends to either not load up the pages content or if positions somewhere else it just simply wont work!

My HTML code is as follows:

<!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>

Apologies if it's hard to read. This javascript function will work just fine by itself. When an item in index is clicked it brings you to a new page in index2. On index 2 there's a submit button to which is connect to a file referenced <script src="js/ammend.js"></script>. This is where things normally seem to go wrong for me as it's like they're cancelling eachother out or just not co-operating together.

The js file at that location is:

$(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: ""
}

The above should be called when the button is being pressed but most of the time I cant even get to the stage of seeing the button once I add the referecne to this code.

If anybody has had the same issue as this before or can shed some light on the problem I'd really appreciate it.

Upvotes: 1

Views: 209

Answers (1)

Gajotres
Gajotres

Reputation: 57309

Your problem is related to jQuery Mobile page handling.

Because you are using multiple HTML pages loaded with ajax into the DOM all your js scripts must be referenced from the first HTML files. All other HTML files will be loaded only partially, only BODY part will be loaded while HEAD is going to be discarded.

Upvotes: 1

Related Questions