Yet another interactive JQuery feature found within the JQuery UI Tabs framework, utilizing seamless Ajax page loading

Currently, I am using JQuery U Tabs with Ajax Page Calls. In my Pages, I have a custom scroller that is functioning correctly. Additionally, I have an ajax search table that works when the page is loaded by itself in the browser but not when called within the JQuery UI tabs.

Below is the code for the JQuery UI Tabs.

Javascript Call

  <script>
  $(function() {

    // getter
var heightStyle = $( ".selector" ).tabs( "option", "heightStyle" );

// setter
$( ".selector" ).tabs( "option", "heightStyle", "fill" );
  $( "#tabs" ).tabs({
    beforeLoad: function( event, ui ) {
      ui.jqXHR.error(function() {
        ui.panel.html(
          "Couldn't load this tab. We'll try to fix this as soon as possible. " +
          "If this wouldn't be a demo." );
      });
    }
  });
});
  </script>

HTML:

<div id="tabs">
                  <ul>
                    <li><a href="#tabs-1">View</a></li>
                    <li><a href="page2.html">Add</a></li>
                    <li><a href="page3.html">Modify</a></li>
                  </ul>
                  <div id="tabs-1">
</div>
</div>

The code within page2.html is as follows:

<div class="tables">
    <div id="content_3" class="content">
    <div class="search">
        <div class="searchtitle">Search</div>
        <label for="search"><input type="text" id="search"/></label>        
    </div>


    <table id="tblData" class="target">
        <tbody>
            <tr>
                <th width="110px">Course</th>
                <th width="92px">Group</th>
                <th width="204px">Period</th>
                <th width="81px">Room</th>
                <th width="117px">Actions</th>
            </tr>
            <tr>
                <td class="odd">Unit 1</td>
                <td class="odd">Group 2</td>
                <td class="odd">00-00-00 - 00-00-00 </td>
                <td class="odd">Room 1</td>
                <td class="odd"><img src="../../Images/actions-delete-icon-normal.png"/><img src="../../Images/actions-edit-icon-normal.png"/></td>
            </tr>
            <tr>
                <td class="even">Unit#</td>
                <td class="even">###</td>
                <td class="even">00-00-00 - 00-00-00 </td>
                <td class="even">Room 2</td>
                <td class="even"><img src="../../Images/actions-delete-icon-normal.png"/><img src="../../Images/actions-edit-icon-normal.png"/></td>
            </tr>
            <tr>
                <td class="odd">Unit#</td>
                <td class="odd">###</td>
                <td class="odd">00-00-00 - 00-00-00 </td>
                <td class="odd">###</td>
                <td class="odd"><img src="../../Images/actions-delete-icon-normal.png"/><img src="../../Images/actions-edit-icon-normal.png"/></td>
            </tr>


        </tbody>
    </table>
</div>

</div>


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript">
    $(document).ready(function()
    {
        $('#search').keyup(function()
        {
            searchTable($(this).val());
        });
    });
    function searchTable(inputVal)
    {
        var table = $('#tblData');
        table.find('tr').each(function(index, row)
        {
            var allCells = $(row).find('td');
            if(allCells.length > 0)
            {
                var found = false;
                allCells.each(function(index, td)
                {
                    var regExp = new RegExp(inputVal, 'i');
                    if(regExp.test($(td).text()))
                    {
                        found = true;
                        return false;
                    }
                });
                if(found == true)$(row).show();else $(row).hide();
            }
        });
    }
</script>

I suspect that the $(document).ready(function() within the Javascript in page2.html is not triggering. Any assistance in resolving this issue would be greatly appreciated.

javascriptjqueryhtmlcss

Answer №1

Testing out the search functionality in your code, I didn't encounter any issues. However, the missing html details for the starting page might be causing your problem. It's crucial to load jQuery before attempting to access other pages. Additionally, there were a few errors such as calling the tab() function multiple times on non-existent elements with the selector class. Only one call with all options set is required. I also modified heightStyle to content. Unfortunately, I couldn't create a jsfiddle demo due to the presence of two html pages. Below is the code snippet that worked successfully for me:

Starting page:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js" type="text/javascript"></script>
        <script>
            $(function()
            {
                $( "#tabs" ).tabs(
                {
                    heightStyle: "content",
                    beforeLoad: function( event, ui )
                    {
                        ui.jqXHR.error(function()
                        {
                            ui.panel.html("Couldn't load this tab. We'll try to fix this as soon as possible. If this wouldn't be a demo." );
                        });
                    }
                });
            });
        </script>
    </head>
    <body>
        <div id="tabs">
            <ul>
                <li><a href="#tabs-1">View</a></li>
                <li><a href="page2.html">Add</a></li>
                <li><a href="page3.html">Modify</a></li>
            </ul>
            <div id="tabs-1">View Page</div>
        </div>
    </body>
</html>

page2.html:

<div class="tables">
    <div id="content_3" class="content">
        <div class="search">
            <div class="searchtitle">Search</div>
            <label for="search"><input type="text" id="search"/></label>        
        </div>
        <table id="tblData" class="target">
            <tbody>
                <tr>
                    <th width="110px">Course</th>
                    <th width="92px">Group</th>
                    <th width="204px">Period</th>
                    <th width="81px">Room</th>
                    <th width="117px">Actions</th>
                </tr>
                <tr>
                    <td class="odd">Unit 1</td>
                    <td class="odd">Group 2</td>
                    <td class="odd">00-00-00 - 00-00-00 </td>
                    <td class="odd">Room 1</td>
                    <td class="odd">
                        <img src="../../Images/actions-delete-icon-normal.png"/>
                        <img src="../../Images/actions-edit-icon-normal.png"/>
                    </td>
                </tr>
                <tr>
                    <td class="even">Unit#</td>
                    <td class="even">###</td>
                    <td class="even">00-00-00 - 00-00-00 </td>
                    <td class="even">Room 2</td>
                    <td class="even">
                        <img src="../../Images/actions-delete-icon-normal.png"/>
                        <img src="../../Images/actions-edit-icon-normal.png"/>
                    </td>
                </tr>
                <tr>
                    <td class="odd">Unit#</td>
                    <td class="odd">###</td>
                    <td class="odd">00-00-00 - 00-00-00 </td>
                    <td class="odd">###</td>
                    <td class="odd">
                        <img src="../../Images/actions-delete-icon-normal.png"/>
                        <img src="../../Images/actions-edit-icon-normal.png"/>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function()
    {
        $('#search').keyup(function()
        {
            searchTable($(this).val());
        });
    });

    function searchTable(inputVal)
    {
        var table = $('#tblData');
        table.find('tr').each(function(index, row)
        {
            var allCells = $(row).find('td');
            if(allCells.length > 0)
            {
                var found = false;
                allCells.each(function(index, td)
                {
                    var regExp = new RegExp(inputVal, 'i');
                    if(regExp.test($(td).text()))
                    {
                        found = true;
                        return false;
                    }
                });

                if(found == true)
                    $(row).show();
                else
                    $(row).hide();
            }
        });
    }
</script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to execute two files concurrently in JavaScript using node.js?

I'm a beginner in the world of Javascript and Node.js, and I've encountered some issues while trying to test code I recently wrote. Specifically, I am attempting to test the code within a file named "compareCrowe.js" using another file named "tes ...

javascriptnode.jstesting

What is causing the ESLint error when trying to use an async function that returns a Promise?

In my Next.js application, I have defined an async function with Promise return and used it as an event handler for an HTML anchor element. However, when I try to run my code, ESLint throws the following error: "Promise-returning function provided t ...

javascriptreactjstypescriptnext.js

Main.js in Electron cannot find the NODE_ENV environment variable

Currently, I am in the process of developing an application which involves: React 16.4.0 Electron 2.0.2 Webpack 4.11.0 After successfully compiling and running the app using webpack (webpack dev server), my focus now shifts to showing only Chr ...

javascriptreactjswebpackelectron

Issue with NgModule in Angular application build

I'm facing an issue with my Angular application where the compiler is throwing errors during the build process. Here's a snippet of the error messages I'm encountering: ERROR in src/app/list-items/list-items.component.ts:9:14 - error NG6002 ...

javascriptangulartypescript

The JSON response is being overridden by a catch-all URL and ends up being displayed as a 404 error page

I'm dealing with a React/Express setup that looks something like this (simplified for clarity): const path = require('path') const express = require('express') const CLIENT_BUILD_PATH = path.join(__dirname, '../build') ...

javascriptnode.jsreactjsexpress

The functionalities of Google Maps are experiencing issues within AngularJS when utilizing the $route feature

Having Issues with Google Maps in AngularJS when using <ng-view></ng-view> Routing Configuration app.config(function($routeProvider, $locationProvider) { $locationProvider.html5Mode(true); $routeProvider .when('/', { t ...

javascriptangularjsgoogle-mapsgoogle-maps-api-3angular-ui-router

Encountered an error while running npm run dev on a Laravel Vue 3 project: opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],

I am facing an issue in my Laravel 9 Vue 3 project. When I run php artisan serve and then npm run dev, I encounter the following error: opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ], library: 'di ...

javascriptvue.jsnpm

Click to move directly to a specific section

This question may be common, but despite my research efforts, I have been unable to find a solution. I want to issue a disclaimer that I am new to javascript and jQuery. Here is an overview of what I am trying to achieve: I want two images that, when cli ...

javascriptjqueryhtmlcssscroll

Utilizing the reduce() function to simultaneously assign values to two variables from data input

Looking to simplify the following function using reduce(), as the operations for variables selectedEnrolled and selectedNotEnrolled are quite similar. I attempted to use map(), but since I wasn't returning anything, it led to unintended side effects ...

javascriptangulartypescriptrxjs

Developing Your Own Local Variable in Angular with Custom Structural Directive ngForIn

I am hoping for a clear understanding of this situation. To address the issue, I developed a custom ngForIn directive to extract the keys from an object. It functions correctly with the code provided below: import {Directive, Input, OnChanges, SimpleChan ...

javascriptangulartypescriptangular-directive

After running the command "npx/npm create-react-app hello" to create a react app, I received the following message

Whenever I try to execute this command for creating a React app: C:\WINDOWS\system32> npm i create-react-app -g hello I receive the following message in my cmd prompt: npm WARN deprecated <a href="/cdn-cgi/l/email-protection" class="__cf ...

javascriptnode.jsreactjsnpm

Selecting elements by their name using vanilla JavaScript

I am facing an issue where I have to assign a value to a checkbox based on certain variables. The challenge lies in the naming convention used in the HTML I am working with: <input id="jc_1" type="checkbox" name="jc[1]"> <input id="jc_2" type="c ...

javascript

When inputting forms into the database, identifiers are used instead of names. Despite this, the user interface functions without any issues

In this demonstration, I am building a dynamic conditional drop-down list using Java script and Ajax. PHP: Add Data <html> <head> <title>Add Data</title> </head> <body> <?php //including the database connection ...

javascriptjsonajax

What is the best way to include CSS styles in a React app with Webpack?

Having an issue with my React app. Upon successfully compiling Webpack and serving the content, no styles are displayed within the app. This is the current content of my webpack.config.js file: const path = require('path'); const BUILD_DIR = pat ...

cssreactjswebpack

Issues are being faced with the execution of JavaScript on Heroku when using Rails 3.1

After upgrading a Rails 3.0 app to 3.1 on Heroku running on the cedar stack, everything seemed fine except for one major issue - the app's JavaScript wouldn't run. Despite the application.js file being compiled and accessible at myapp.com/assets/ ...

javascriptruby-on-rails-3herokuruby-on-rails-3.1

Imitation of three-dimensional camera rotation

I've been exploring the realm of creating 3D games using JavaScript and HTML's 2D canvas. I recently came across a helpful tutorial that guided me in setting up a basic interactive scene. Now, I'm facing a challenge in implementing the func ...

javascriptcanvas3dcamera2.5d

What is the best way to format the JQGrid table for better

Is there a way to indent the table in this example and create white space on the side of the rows and header? I want a white margin on the left of everything below "Stackoverflow example". I'm hoping to achieve this using only CSS. Below is the code ...

cssjqgrid

Filtering an array of objects by multiple arrays of keys

My data set consists of an array of objects const Data = [ {first_name: 'Ammy', city_name: 'LA', age: 22, designation: 'officer'}, {first_name: 'Dave', city_name: 'Paris', age: 23, designation: 'en ...

javascriptarraysobjectfilterlogic

Troubleshooting issue with AngularJS ng-repeat not functioning properly when using Object key value filter with ng-model

Is there a way to have an object with an ID as a key value pair? For example: friends = { 1:{name:'John', age:25, gender:'boy'}, 2:{name:'Jessie', age:30, gender:'girl'}, 3:{name:'Johanna', ag ...

javascripthtmlangularjs

Using React Native to dynamically change color based on API response

I'm currently working on a React Native project and I have a requirement to dynamically change the background color of a styled component based on the value retrieved from an API. However, I'm facing some challenges in implementing this feature. ...

javascripttypescriptreact-nativeexpostyled-components