Jump to content

Potential Script Conflict - How to get both functions working?

excelmaster

By excelmaster
in Javascript Help

 Share

Recommended Posts

excelmaster Member

excelmaster

Posted
Posted

Hello all,

 

Another problem I have is that I'm unable to get two different functionalities working together, probably due to a potential script conflict.

 

So, I have one small script which allows for me to remain on a specific DIV/function (such as "Updating Records") after a Form Submit/Post...and another script which provides me a JQueryUI calendar/date-picker.

 

If I have the former (script) above the latter (script), then only the corresponding functionality will work (and the calendar/date-picker will not work). If on the other hand, I move the calendar/date-picker code above the other piece of code then only the calendar/date-picker functionality works.

 

Is there something wrong with my code, or do I have to change the order of anything, in order to get them both play nice?

 

Here's my code:

<!doctype html>

<html lang="en">

    <head>

        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

        <title>Shopping List WebApp</title>



        <!-- Latest compiled and minified CSS -->

        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">



        <link rel="stylesheet" type="text/css" href="default.css">

        <link href="demo.css" type="text/css" rel="stylesheet">

        <link rel="stylesheet" type="text/css" media="all" href="style.css" />



        <!-- Optional theme -->

        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">



        <!-- jQuery -->

        <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

        <!-- Latest compiled and minified JavaScript -->

        <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>



        <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">

        <script src="//code.jquery.com/jquery-1.10.2.js"></script>

        <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

        <link rel="stylesheet" href="/resources/demos/style.css">

        

        <script>

            // Function to return user to same tab/function after POST/SUBMIT

            $(document).ready(function(){

                $('a[href="' + window.location.hash + '"]').click();

            });

        </script>



        <script>

            // Function to display a calendar for DATE selection

            $(function() {

                $( "#datepicker" ).datepicker();

            });

        </script>

    </head>

    

    <body>

        <!-- <div class="container"> -->

            <div class="wrapper">

                <div class="body_wrapper">

                    <div class="row">

                        <div class="page-header">

                            <h1>Stores List WebApp</h1>                    

                        </div>

                    </div>



                    <?php

                        $mysqli = new mysqli('localhost', 'blah', 'blah-blah-blah', 'blah');

                        if ($mysqli->connect_error) {

                            die('Connect Error (' . $mysqli->connect_errno . ') '

                            . $mysqli->connect_error);

                        }

                        if(isset($_REQUEST["action"])){

                            switch($_REQUEST["action"]){

                                case "insert":

                                    $SQL="INSERT INTO stores (store_name, store_description) VALUES (";

                                    $SQL=$SQL."'" . $_REQUEST["store_name"] . "',";

                                    $SQL=$SQL."'" . $_REQUEST["item_description"] . "',";

                                    $SQL=$SQL.");";

                                    if ($mysqli->query($SQL)=== FALSE) {

                                        printf("Error – Unable to insert data to table " . $mysqli->error);

                                    }

                                    

                                    break;

                                case "delete":

                                    if(isset($_REQUEST['delete-selected']))

                                        {

                                            $SQL="DELETE FROM shoplist WHERE";

                                            for($i=0; $i < count($_REQUEST['checkboxes']); $i++){

                                                $SQL=$SQL . " idnumber=" . $_REQUEST['checkboxes'][$i] . " or";

                                            }

                                            $SQL= rtrim($SQL, "or");

                                            if ($mysqli->query($SQL)== FALSE) {

                                                echo '<div class="highlight-error">Error: Unable to delete value (perhaps you have not selected anything to delete!)</div>';

                                            }

                                            break;

                                        }

                                    else if(isset($_REQUEST['delete-all']))

                                        {

                                            $SQL="DELETE FROM shoplist";

                                            if ($mysqli->query($SQL)== FALSE) {

                                                echo '<div class="highlight-error">Error: Unable to delete value (perhaps there is nothing to delete!)</div>';

                                            }

                                            break;

                                        }                                        

                                case "update":

                                    if(isset($_REQUEST['highlight-purchased']))

                                        {

                                            $SQL="UPDATE shoplist SET purchased = 'Y' WHERE";

                                            for($i=0; $i < count($_REQUEST['checkboxes']); $i++){

                                                $SQL=$SQL . " idnumber=" . $_REQUEST['checkboxes'][$i] . " or";

                                            }

                                            $SQL= rtrim($SQL, "or");

                                            if ($mysqli->query($SQL)== FALSE)

                                                {

                                                    echo '<div class="highlight-error">Error: Unable to update value (perhaps you have not selected anything to update!)</div>';

                                                }

                                            else

                                                {

                                                    // echo mysqli_affected_rows($mysqli). ' Records UPDATED successfully<br />';

                                                }

                                            break;

                                        }

                                    else if(isset($_REQUEST['highlight-later']))

                                        {

                                            $SQL="UPDATE shoplist SET later_in_week = 'Y' WHERE";

                                            for($i=0; $i < count($_REQUEST['checkboxes']); $i++){

                                                $SQL=$SQL . " idnumber=" . $_REQUEST['checkboxes'][$i] . " or";

                                            }

                                            $SQL= rtrim($SQL, "or");

                                            if ($mysqli->query($SQL)== FALSE)

                                                {

                                                    echo '<div class="highlight-error">Error: Unable to update value (perhaps you have not selected anything to update!)</div>';

                                                }

                                            else

                                                {

                                                    // echo mysqli_affected_rows($mysqli). ' Records UPDATED successfully<br />';

                                                }

                                            break;

                                        }

                                    else if(isset($_REQUEST['highlight-remove-purchased']))

                                        {

                                            $SQL="UPDATE shoplist SET purchased = 'N' WHERE";

                                            for($i=0; $i < count($_REQUEST['checkboxes']); $i++){

                                                $SQL=$SQL . " idnumber=" . $_REQUEST['checkboxes'][$i] . " or";

                                            }

                                            $SQL= rtrim($SQL, "or");

                                            if ($mysqli->query($SQL)== FALSE)

                                                {

                                                    echo '<div class="highlight-error">Error: Unable to update value (perhaps you have not selected anything to update!)</div>';

                                                }

                                            else

                                                {

                                                    // echo mysqli_affected_rows($mysqli). ' Records UPDATED successfully<br />';

                                                }

                                            break;

                                        }

                                    else if(isset($_REQUEST['highlight-remove-later']))

                                        {

                                            $SQL="UPDATE shoplist SET later_in_week = 'N' WHERE";

                                            for($i=0; $i < count($_REQUEST['checkboxes']); $i++){

                                                $SQL=$SQL . " idnumber=" . $_REQUEST['checkboxes'][$i] . " or";

                                            }

                                            $SQL= rtrim($SQL, "or");

                                            if ($mysqli->query($SQL)== FALSE)

                                                {

                                                    echo '<div class="highlight-error">Error: Unable to update value (perhaps you have not selected anything to update!)</div>';

                                                }

                                            else

                                                {

                                                    // echo mysqli_affected_rows($mysqli). ' Records UPDATED successfully<br />';

                                                }

                                            break;

                                        }

                            }

                        }

                    ?>

                    

                    <div class="row">

                        <!-- Nav tabs -->

                        <ul class="nav nav-tabs">

                            <li class="active"><a href="#add" data-toggle="tab">Add</a></li>

                            <li><a href="#update" data-toggle="tab">Update/View</a></li>

                            <li><a href="#delete" data-toggle="tab">Delete/View</a></li>

                            <li><a href="#search" data-toggle="tab">Search/View</a></li>

                          </ul>



                        <!-- Tab panes -->

                        <div class="tab-content">

                            <div class="tab-pane active" id="add">

                                <h3>Add Items:</h3>

                                <p>Use this section to add new item(s).</p>

                            

                                <!-- <form action="#add"> -->

                                <form class="add-data-form" id="add-data-form" action="#add" method="POST">                                

                                    <input type="hidden" name="action" value="insert" />



                                    <div class="full-row">

                                        <div class="field-label">

                                            Store Name:

                                        </div>

                                        <select class="store-name" name="store_name">

                                            <option value="No Frills">No Frills</option>

                                            <option value="Super Store">Super Store</option>

                                            <option value="Food Basics">Food Basics</option>                        

                                            <option value="Freshco">Freshco</option>                        

                                            <option value="Wal Mart">Wal Mart</option>                        

                                            <option value="Giant Tiger">Giant Tiger</option>                        

                                            <option value="Foodland">Foodland</option>                        

                                            <option value="Metro">Metro</option>                        

                                            <option value="Sobeys">Sobeys</option>                        

                                            <option value="SDM">Shoppers Drug Mart</option>                        

                                            <option value="Target">Target</option>                        

                                        </select>

                                    </div>



                                    <div class="full-row"><div class="field-label">Store Description: </div><div class="field-input"><input class="item-desc" name="store_description" /></div></div>

                                    

                                    <input class="add-button" value="Add row" type="submit" />

                                </form>

                            </div>

        

                            <div class="tab-pane" id="update">

                                <h3>View and Update Items:</h3>

                            

                                <!-- <form action="#update"> -->

                                <form class="update-data-form" id="update-data-form" action="#update" method="POST">                                

                                    <input type="hidden" name="action" value="update" />

                                    

                                    <div class="full-row-heading">                                            

                                        <table>

                                            <tr>

                                                <th><span class="spacer-store-name">Store</span></th>

                                                <th><span class="spacer-item-desc">Desc.</span></th>

                                            </tr>

                                        </table>

                                    </div>

                                    <table>

                                        <?php

                                            $result = $mysqli->query("SELECT * FROM shoplist ORDER BY store_name ASC");

                                            while($row = $result->fetch_assoc()){

                                                print '<tr>';

                                                print '<td><span class="filler-checkbox"><input type="checkbox" name="checkboxes[]" value="' . $row["idnumber"] . '" /></span></td>';                                

                                                if ($row["purchased"] == "Y")

                                                    {

                                                        print '<td><span class="highlight-purchased">' . $row["store_name"] . '</span></td>';

                                                        print '<td><span class="highlight-purchased">' . $row["store_description"] . '</span></td>';

                                                    }

                                                else if (($row["later_in_week"] == "Y") && ($row["purchased"] != "Y"))

                                                    {

                                                        print '<td><span class="highlight-later">' . $row["store_name"] . '</span></td>';

                                                        print '<td><span class="highlight-later">' . $row["store_description"] . '</span></td>';

                                                    }

                                                else

                                                    {

                                                        print '<td>' . $row["store_name"] . '</td>';

                                                        print '<td>' . $row["store_description"] . '</td>';

                                                    }                                

                                                print '</tr>';

                                            }

                                        ?>

                                    </table>                                    

                                    <div class="full-row-buttons">                                            

                                        <input class="update-button-purchased" name="highlight-purchased" value="Highlight selected item(s) as *Purchased*" type="submit"/>

                                        <input class="update-button-later" name="highlight-later" value="Highlight selected item(s) as *Later in Week*" type="submit"/>                                    

                                    </div>

                                    <div class="full-row-buttons">                                            

                                        <input class="update-button-remove-purchased" name="highlight-remove-purchased" value="Unhighlight selected *Purchased* item(s)" type="submit"/>                                                                        

                                        <input class="update-button-remove-later" name="highlight-remove-later" value="Unhighlight selected *Later in Week* item(s)" type="submit"/>                                                                                                            

                                    </div>

                                </form>

                            </div>

        

                            <div class="tab-pane" id="delete">

                                <h3>View and Delete Items:</h3>

                            

                                <!-- <form action="#delete"> -->

                                <form class="delete-data-form" id="delete-data-form" action="#delete" method="POST">

                                    <input type="hidden" name="action" value="delete" />    



                                    <div class="full-row-heading">                                            

                                        <table>

                                            <tr>

                                                <th><span class="spacer-store-name">Store</span></th>

                                                <th><span class="spacer-item-desc">Desc</span></th>

                                            </tr>

                                        </table>

                                    </div>

                                    <table>

                                        <?php

                                            $result = $mysqli->query("SELECT * FROM shoplist ORDER BY store_name ASC");

                                            while($row = $result->fetch_assoc()){

                                                print '<tr>';

                                                    print '<td><span class="filler-checkbox"><input type="checkbox" name="checkboxes[]" value="' . $row["idnumber"] . '" /></span></td>';                                

                                                    if ($row["purchased"] == "Y")

                                                        {

                                                            print '<td><span class="highlight-purchased">' . $row["store_name"] . '</span></td>';

                                                            print '<td><span class="highlight-purchased">' . $row["store_description"] . '</span></td>';

                                                        }

                                                    else if (($row["later_in_week"] == "Y") && ($row["purchased"] != "Y"))

                                                        {

                                                            print '<td><span class="highlight-later">' . $row["store_name"] . '</span></td>';

                                                            print '<td><span class="highlight-later">' . $row["store_description"] . '</span></td>';

                                                        }

                                                    else

                                                        {

                                                            print '<td>' . $row["store_name"] . '</td>';

                                                            print '<td>' . $row["store_description"] . '</td>';

                                                        }                                

                                                print '</tr>';

                                            }

                                        ?>

                                    </table>

                                    <input class="delete-button-selected" name="delete-selected" value="Delete selected row(s)" type="submit"/>

                                    <input class="delete-button-all" name="delete-all" value="Delete ALL row(s)" type="submit"/>                                    

                                </form>

                            </div>

        

                            <div class="tab-pane" id="search">

                                <h3>Search and View Items:</h3>

                            

                                <form class="search-data-form" id="search-data-form" action="#search" method="POST">

                                    <div class="search-container">

                                        <div class="full-row">

                                            <div class="field-label">

                                                Choose search field:

                                            </div>

                                        

                                            <div class="field-input">

                                                <select name="searchtype">

                                                    <option value="store_name">Store Name</option>

                                                    <option value="item_description">Store Description</option>

                                                </select>

                                            </div>

                                            <br />

                                        </div>



                                        <div class="full-row">                            

                                            <div class="field-label">

                                                Enter search term:

                                            </div>

                                            <div class="field-input">

                                                <input name="searchterm" type="text" size="40"/>

                                            </div>

                                            <br />

                                        </div>

                                    </div>



                                    <input class="search-button" type="submit" name="submit" value="Search"/>

                            

                                    <div class="full-row-heading">                        

                                        <table>

                                            <tr>

                                                <th><span class="spacer-store-name">Store</span></th>

                                                <th><span class="spacer-store-desc">Desc.</span></th>

                                            </tr>

                                        </table>

                                    </div>



                                    <table>

                                        <?php

                                            // create short variable names

                                            $searchtype=$_POST['searchtype'];

                                            $searchterm=trim($_POST['searchterm']);



                                            if (!get_magic_quotes_gpc()) {

                                                $searchtype = addslashes($searchtype);

                                                $searchterm = addslashes($searchterm);

                                            }

            

                                            $query = "select * from shoplist where " . $searchtype . " like '%" . $searchterm . "%' ORDER BY " . $searchtype . " ASC";

                                            

                                            $result = $mysqli->query($query);

            

                                            $num_results = $result->num_rows;

            

                                            for ($i=0; $i < $num_results; $i++) {

                                                $row = $result->fetch_assoc();

                                                print "<tr>";

                                                    if ($row["purchased"] == "Y")

                                                        {

                                                            print '<td><span class="highlight-purchased">' . '      ' . $row["store_name"] . '</span></td>';

                                                            print '<td><span class="highlight-purchased">' . $row["store_description"] . '</span></td>';

                                                        }

                                                    else if (($row["later_in_week"] == "Y") && ($row["purchased"] != "Y"))

                                                        {

                                                            print '<td><span class="highlight-later">' . '      ' . $row["store_name"] . '</span></td>';

                                                            print '<td><span class="highlight-later">' . $row["store_description"] . '</span></td>';

                                                        }

                                                    else

                                                        {

                                                            print '<td>' . '      ' . $row["store_name"] . '</td>';

                                                            print '<td>' . $row["store_description"] . '</td>';

                                                        }                                                        

                                                print "</tr>";

                                            }

                                            $result->free();

                                            $mysqli->close();

                                        ?>

                                    </table>                                        

                                </form>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        <!-- </div> -->

    </body>

</html>
Link to comment
Share on other sites
KevinM1 Advanced Member

KevinM1

Posted
Posted

You need to post only the relevant parts of your code. You refer to two PHP blocks, but there are four in the code provided. Also, please double-check your formatting. I know that the editor here can mess with code that's pasted in, but try to remove extraneous line breaks.

 

Beyond that, as a general tip, it's almost never a good idea to mix and match PHP and HTML like you have. It gets confusing and hard to debug. Instead, you should do all of your PHP work first, including database manipulation and anything that sets values, then use incredibly simple PHP to display those values in your HTML template.

Link to comment
Share on other sites
excelmaster Member

excelmaster

Posted
  • Author
Posted

Yes, my bad...and I apologize for that....will not include extraneous code in future!

 

>> You refer to two PHP blocks, but there are four in the code provided <<

Acutally it's JS code (not PHP)...and here's the code I talking about:

        <script>

            // Function to return user to same tab/function after POST/SUBMIT

            $(document).ready(function(){

                $('a[href="' + window.location.hash + '"]').click();

            });

        </script>



        <script>

            // Function to display a calendar for DATE selection

            $(function() {

                $( "#datepicker" ).datepicker();

            });

        </script>

I have gotten chunks of this code from books (and even various online sites)...so I wouldn't know better - about how not to mix and match PHP and HTML.

 

Is there an online place (or perhaps even a book) that I can use to learn how to do that i.e. write clean and simple code (I would much prefer to do it that way myself)?

 

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.