Click a button to load a different view in CodeIgniter

How can I show another view of Controller using Ajax/Javascript when clicking a button? I attempted something, but it's not working as expected.

Javascript:

<script>
$(document).ready(function(){
    $("#details").click(function(){
        $( "#result" ).load( "<?php echo base_url("orders/viewDetails"); ?>" );
    });
});
</script>

View:

<button id="details" href="#" class="btn btn-info"><i class="fa fa-check"></i> Show Order Items Details</button>

<div id="result"></div>

The above code snippet isn't functioning properly. How should I modify it to make it work correctly?

Previously, I had a successful implementation for "select input". How can I adapt that code for a button click event?

Javascript:

<script type="text/javascript>

function showInfo(str){

$.ajax({

type: "POST",

data: { cusId: str },

url: "<?=base_url('vehicles/getInfo');?>",

success: function(data) {

$('#divInfo').html(data);

}

});

}

</script>

View:

<select onChange="showInfo(this.value);" class="js-example-basic-single" name="docFileDocType" required="required">

Answer №1

In my opinion, utilizing cookies to determine which view should be loaded is a more efficient approach. When a user clicks on a button, a cookie can be set and the page redirected. Then, in the header of the page, you can check if the cookie has been set; if it has, load the new view, otherwise load the old one.

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

Tips for creating a data table with nested lists within lists?

I am looking to create a table with data that includes a nested list of grades within a list of students. Is it possible to achieve this and if so, how can I do it? The object structure is as follows: public class Student { public string Num ...

What is the best method for sending React and AJAX data to a Rails server?

I'm currently working on an application using reactjs for the frontend and rails for the backend. Although I'm new to rails, I've managed to create a registration system using reactjs. Now, my next challenge is posting data to the server wi ...

Use Jquery to revert the chosen element back to its original base state

I have implemented a select box where selecting a value in the main select box "Domains" will reveal another select box called "Types" such as Diatoms or Flagellates. I have successfully achieved this functionality, but now I am facing an issue with resett ...

Guide on how to send files to an API using a form in React with MUI

I am struggling with sending an image through the front-end to my back-end application that is set up to accept data. Here is the code I have: import { useState } from 'react'; import axios from '../../config'; import { useNavigate } fr ...

The latest value has replaced the state's previous value

In my current function, I am updating an array stored in state based on the status of 9 tables. Each table calls this function to check its status, and if true, it is added to the array. const [projectSpaceTypeWarning, setProjectSpaceTypeWarning] = useSta ...

Transforming a namespaced function into an asynchronous operation by utilizing setTimeout

Looking for help with making a function that uses namespaces asynchronous. The function is currently being called on the click of a button. var ns = { somemfunc: function (data) { alert("hello"); } } Edit: ...

Learn how to properly convert a string into a valid URL using the Next JS router when pushing pages

I'm dealing with a string that looks like this: /dashboard/products/:id. My goal is to utilize Next Js's router to navigate to that URL and replace the placeholder :id with an actual id. Here's the code I've written: {products.map(prod ...

Having trouble with Next.js environment variables not being recognized in an axios patch request

Struggling with passing environment variables in Axios patch request const axios = require("axios"); export const handleSubmit = async (formValue, uniquePageName) => { await axios .patch(process.env.INTERNAL_RETAILER_CONFIG_UPDATE, formVal ...

What is the process for creating a hover linear wipe transition using CSS/JS?

It's worth noting that I can't simply stack one image on top of the other because I'll be dealing with transparent images as well. preview of linear wipe ...

Providing a user with a special discount tailored to their email address?

<script type="text/javascript"> function updatePrice() { var price = document.getElementById("product").value; var size_price = document.getElementById("size").value; var a=parseInt(price);//parsed type price var b=parseInt(size_price);//pa ...

Loading images lazily using knockout.js

I have been working on implementing lazy loading for images using knockoutjs binding. I previously successfully implemented lazy loading without the knockoutjs framework, but I am unsure of how to achieve this with knockoutjs binding. Below is my HTML code ...

Using constructor arguments in Symfony routing.yml file

I am currently facing difficulties calling a route in my Symfony2 project because the controller I am referring to requires parameters (specifically a username and password) for instantiation. Here is the scenario: I am integrating Kashflow into my proje ...

Eliminate the JSON object within jqGrid's posted data

The web page I'm working on features Filters with two buttons that load data for jqGrid when clicked. Clicking 'Filter' generates a postData json object and sends it to the server, which is working perfectly. However, I'm facing an is ...

Switch out HTML dynamically using JavaScript/JQuery, embracing the principles of DRY coding

As a newcomer to front-end development, one issue I frequently encounter is avoiding repetition when dynamically generating HTML using JS/jQuery. Imagine you have a DOM object that has various states. Typically, all you need to do with JS is switch betwee ...

How do you trigger a function in a child component that was imported when a parent element is clicked?

Is it possible to access and call a function in an imported component from the "parent element"? I have multiple modules that I want to include dynamically in my app. I thought that if I import a component like Header in my main App.vue file, it would reco ...

Guidelines on integrating Admob into Ionic framework

I tried following the steps outlined in this post: AdMob not loading ads in ionic/angular app After running the app using "ionic build ios && ionic emulate ios," I still see no ads, no black bar, nothing at all. Can someone help me figure out wha ...

Using React's useEffect function with an empty dependency array to trigger a change in the

In the React application I'm currently working on, the useEffect function is triggered whenever the prop value changes from an empty array to another empty array. I am fetching query parameters from the page and passing them down to a component that ...

Ways to prevent users from being redirected when they press the back button on a webpage

Similar Question: How can I prevent the back button from working in IE and Firefox? I'm currently working on a single page website (DAM) that requires user authentication to enter. After logging in, if a user clicks the back button, they are dire ...

Finding MongoDB data using an Express route and displaying it in a Jade template

Is there a way to retrieve data from MongoDB using an express route and display it in a jade template? Below is the code snippet of my express route (express version 2.5.8): app.get('/showData',function(req,res){ db.collection('comme ...

Working with SASS imports in an isomorphic React app: best practices

Currently, my React app is set up with SSR support as follows: React app Express server that compiles the React app using webpack Using babel-node to run the Express app with ES6 features Everything works fine until I added CSS modules to the React app, ...