I need to retrieve a specific image ID from a foreach loop in CodeIgniter using AJAX

I am looking to extract a specific image record from a foreach loop and then pass this value to another page.

<?php foreach($portfolio_image as $image):?>
    <h3><?=$image->portfolio_image_title?></h3>
    <p><?=$image->portfolio_image_detail?></p>
    <a id="lin" href="#portfolio-si" data-id="<?=$image->portfolio_image_id?>">
<?php endforeach;?>

<script>
         $(document).ready(function(){
             $('#lin').click(function(evt){
               evt.preventDefault()
                   $.ajax({
                       type : 'POST',
                       url  : "<?=base_url();?>index.php/home/single_portf",
                       data : {id:$('#lin').attr('data-id')},
                       cache : false,
                       success: function(data){
                           $('#portfolio-sig').html(data);
                       }
                    });
      });
</script>

Answer №1

If you wish to utilize class="lin", here is an example:

<a id="lin" class="lin" href="#portfolio-si" data-id="<?=$image->portfolio_image_id?>">

To update the onclick function in jQuery, follow this pattern:

$('.lin').click(function(evt){

Then, incorporate the jQuery method $(this) like this:

data : {id:$(this).attr('data-id')},

In conclusion:

<?php foreach($portfolio_image as $image):?>
    <h3><?=$image->portfolio_image_title?></h3>
    <p><?=$image->portfolio_image_detail?></p>
    <a id="lin" class="lin" href="#portfolio-si" data-id="<?=$image->portfolio_image_id?>">
<?php endforeach;?>

<script>
$(document).ready(function(){
    $('.lin').click(function(evt){
        evt.preventDefault();
        var id = $(this).attr('data-id');

        $.ajax({
           type : 'POST',
           url  : "<?=base_url();?>index.php/home/single_portf",
           data : {id: id},
           cache : false,
           success: function(data){
               $('#portfolio-sig').html(data);
           }
        });
    });
});
</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

Sending an Ajax POST request from a Node.js server

I am running a Node.js server with Socket.IO that communicates with a Python server using Django. I am looking to make a POST request from the Node.js server to the Django server on a specific method without utilizing any jQuery functions due to their depe ...

Incorporating AJAX functionality into anchor interactions while preserving href links for search engine optimization benefits

Is it possible to create a link/button that triggers an AJAX/jQuery function to load new content, while still providing a link to the same content on a separate page? I am particularly concerned about SEO and how search engine crawlers will index my sitem ...

After updating to Xcode 7.0.1, my PhoneGap project is unable to establish an internet connection

Recently, I made the switch from Xcode 6.4 to 7.0.1 for my phonegap project in order to test it on a real device. However, after upgrading, my Ajax calls started failing and returning errors both in the simulator and on my iPhone. Interestingly, the ajax ...

What is the best way to access data from outside a forEach loop in JavaScript?

I am trying to access the value of my uid outside of the foreach loop in my code. Can anyone assist me with this? This is the code I am working with: var conf_url = "https://192.168.236.33/confbridge_participants/conference_participants.json?cid=009000 ...

Is there a way to trigger an Ajax function after individually selecting each checkbox in a list in MVC 4 using Razor syntax?

Is it possible to trigger an AJAX function when a checkbox within the ul below is checked? Each checkbox has a unique name attribute, such as chkbrand_1, chkbrand_2, chkbrand_3, etc. I am able to obtain the correct value using this code: $('.sear ...

How to Retrieve a Specific Line with jQuery

Could jQuery be used to retrieve the offset of the first letter in the 5th visual line of a block's content? I am referring to the visual line determined by the browser, not the line seen in the source code. ...

When using a foreach loop in CodeIgniter, encountering the error "Attempting to access a property of a non

Within the controller: if ( $training_code == null || $batch_no == null) { $data = $this->_public_data(); $no_reg = $this->sys_model->get_registration($this->session->userdata('admin'))->no_reg; ...

Dealing with Ajax errors in Django reponses

My code includes an ajax call to a Django view method: $("#formi").submit(function(event){ event.preventDefault(); var data = new FormData($('form').get(0)); $.ajax({ type:"POST", url ...

Rendering real-time data using jQuery's Ajax functionality

Imagine having a webpage that gradually returns a large amount of data over time. Here's an example code snippet to illustrate this: <?php $iTime = time(); while(time()-$iTime < 10 ) { echo "Hello world"; echo str_repeat( ' &apos ...

`How to update a PHP session variable with AJAX?`

As someone who is new to PHP and just beginning to delve into AJAX, I have a question. I am curious to know if it is possible to update a PHP SESSION VARIABLE using AJAX, and how exactly this can be achieved. I have attempted to find examples online, but ...

Submitting Forms using AJAX in Razor with MVC3

When utilizing The MVC3 Helper to create my Ajax form, it appears as follows: @using (Ajax.BeginForm("Attended", "Lesson", new AjaxOptions { HttpMethod = "GET", InsertionMode = InsertionMode.InsertAfter ...

Using a javascript variable in php within the Laravel framework

I am trying to retrieve an id from a button for use in my ajax request. Below is the code snippet for the button: <form> <div class="form-group"> <button class="btn btn-primary" name="deletecar" id="{{$car->id}}">Delet ...

The data retrieved through ajax remains consistent every time

It seems like there might be a server-side cache causing issues on my server... Every time I make a request for content using jQuery AJAX, I receive the same data, even after replacing the server-side code with echo('hello, world!'); The confi ...

Sign in with AJAX in codeigniter framework

I am currently working on implementing AJAX functionality into my project. I aim to enable user login upon clicking the login button. Below, you will find the relevant code snippets. The view is invoking the login function in my controller. View <form ...

Easily upload a file by simply selecting it, no need to fill out a form or submit anything

I am working on adding a mail feature to a WordPress admin plugin. My goal is to allow users to attach a file dynamically and send it through email as an attachment. I have implemented an AJAX method for choosing the file upload, but I seem to be stuck. Ca ...

How to style FullCalendar to apply background-color for the entire day, not just the event using the 'addEventSource' method

Is it possible to add a background color for the entire day, rather than just for the event itself? The code I've written currently only displays the events with a background color. <script> $(document).ready(function() { $.ajax({ u ...

Retrieve the key value pair from the AJAX response

I am trying to retrieve specific values from a cross domain call to a PHP script. The response I receive is as follows: response=2&count=15&id=84546379&firstname=adsa&emailstatus= My goal is to extract the values of 'response' a ...

Remove data from a database using Ajax in ASP.NET MVC without utilizing DataTables

I'm encountering a slight issue with my code. I am attempting to delete a row from the database without using DataTables in ASP.NET MVC, but it seems to be not working as expected. I have displayed all items from the database on a page within div elem ...

Is it possible to insert an image directly into the <img> tag without having to first send it to the server?

I've created an upload form that allows users to submit images: <form> <input accept="image/jpeg, image/gif, image/png" type="file" name="image" id="image" class="UploadInput" onchange="submitImageUploaderForm()"/> </form> Once t ...

Are RSS and Atom the Same? Challenges Encountered in Retrieving and Parsing

$.ajax({ type: 'GET', url : 'http://examplewebsite.com/feeds/items/123456.atom', dataType : 'xml', error: function(xhr) { console.log('Failed to parse feed'); }, ...