Load MySQL data dynamically by unique id into Bootstrap modal -CodeIgniter

Question

Having successfully eliminated the issue from a previous question I posed in add limit to data passed to bootstrap modal with foreach() in codeigniter, I now find myself with the residue of that issue. As succinctly posited by @webcrazymaniac;

The idea is to have a unique modal window, with it's unique id for each article, uniquely called with the corresponding button

According to the solution listed in Send parameter to Bootstrap modal window?, I should be able to have my desired effect as stated above - adapted as;

On page Modal

    


  

     
    
      
      Title: title;?>
    
    
      Category: cat_name;?>
      Date: public_date;?>
      Content: description;?>

jQuery Script

Modal Trigger Button

 echo "View  ".

query.php

 PDO::FETCH_ASSOC, PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION, PDO::ATTR_EMULATE_PREPARES, false);      
try {
$pdo = new PDO($dsn, $user, $pass, $options);
} catch (PDOException $e) {
file_put_contents('PDOErrors.txt', $e->getMessage(), FILE_APPEND);
}

if($_POST['art_id']) {
    $id = $_POST['art_id'];
    $category = $_POST['cat_name'];
    $public_date = $_POST['public_date'];
    $description = $_POST['description'];


 // Run the Query
$sql = "SELECT `art_id`, `cat_name`, `public_date`, `description` FROM `articles` WHERE `art_id`='?'";
$stmt = $pdo->prepare($sql);        
// Fetch Records
$stmt->execute();
}
?>

It all works to call the modal, but this attempt only nets me the 5th result on-page for all (green) buttons clicked. As (maybe) an important note, I'm having trouble with data-id='#myModalart_id;?> fitting into the modal trigger button as it destroys the popup of the modal. I know I have to maybe pull a destruction mode in order to change to another ID like so;

    $('#myModal').on('hidden.bs.modal', function () {
      $(this).removeData('bs.modal');
 });

Now, mind you, I'm not especially conversant in jQuery, so what I've come up with is based on a solid few hours of reading and experimentation. Having pored over numerous examples, I'm still at a loss as to exactly how to make this all work. I'm really stuck as I'm getting the same result (off by a factor of either the display of the first or fifth result for clicking green buttons) whether I'm trying this straight PHP or jQuery. It seems like every question that I've read in this category of question gets me to the current dilemma I'm in where if I use the PHP version solution, I'm returned the 1st page result for every view button on the page. jQuery solution returns the fifth page result for each view button. This is strange indeed... Not even changing out the jQuery for simplified js like this;


//crabbed from 
//https://stackoverflow.com/questions/35702374/bootstrap-modal-with-individual-attributes

But, as par for the course, no love... There's either Human Error to blame, or I'm just missing something plainly hiding in full view. Having read more than 200-plus questions today, I'm having problems re-reading this for formatting, etc. (lol!). Learned tons, but still stuck.

UPDATE

In the time since I've looked at what @progrAmmar suggested, I went back to try and refine my approach. The key issue is how to make the jQuery reload process;

$('body').on('hidden.bs.modal', '.modal', function () {
    $(this).removeData('bs.modal');

clear out the modal so that upon click of another button, the corresponding table row content flows in like water. I'm having problems figuring out what sequencing is correct for the jQuery - as it stands now;

Which results in the view below:

If you look on the bottom-left of the image you'll see the corresponding id value is 3, but the open modal is pulling content from id value 5. I'm still having the process of calling the modal and displaying table row go smoothly, but the modal reload process is bent. Suggestions? I'm out of ideas at this point.

@progrAmmar, I went back to your proffered suggestion, but these are the following things preventing me from fully adapting;

article/index (controller/index function)

public function index()
{
    $modal = $this->article_model->modal($art_id=NULL);
    $category = $this->category_model->listAll();
    $article =$this->article_model->index($this->limit);
    $total_rows=$this->article_model->count();

    $config['total_rows']=$total_rows;
    $config['per_page']=$this->limit;
    $config['uri_segment']=3;
    $config['base_url']=site_url('article/index');

    $this->pagination->initialize($config);
    $page_link =$this->pagination->create_links();
    $this->load->view('admin/article',compact('article', 'page_link', 'category', 'modal'));

}

article_model.php

public function modal($art_id)
    {
      $data = array();
      $this->db->select('art_id', 'cat_name', 'public_date', 'description');
      $this->db->from('tbl_article');
      $query = $this->db->get();
       if($query->num_rows() > 0)
       {
         $results = $query->result();
       }
      return $results;

    }

Still trying to figure out where the needle is here. Thanks again for your suggestions @progrAmmar.

UPDATE ANNOYANCES

Back to purely PHP as jQuery wasn't doing anything different for me - even after playing around with @progrAmmar's code. Now I'm left back at ground zero and having read for another two hours (mainly @ the jQuery forum). :sigh:

ALMOST THERE....

After consulting the BS 3.3.5 docs, I know my answer is in the Varying modal content based on trigger button section. Tried to extrapolate this;

//Modal window trigger button  
echo "View  ".  

//jQuery code  
 $('#myModal').on('show.bs.modal', function (event) {
 var button = $(event.relatedTarget) // Button that triggered the modal
 var id = button.data('id') // Extract info from data-* attributes
 var href = button.data('href') // Extract info from data-* attributes
 var target = button.data('target') // Extract info from data-* attributes
 // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-title').text('Title:')
modal.find('.modal-body').val('Category:')
modal.find('.modal-body').val('Date:')
modal.find('.modal-body').val('Content:')
$('#myModal > div.modal-body).empty();
})

I'm pretty sure I'm doing it wrong as I just can't get my head around any attempted extrapolations - been poring over other solution examples on SO, but am still working out approaches to the above coding. Research in motion...

Extrapolating Code Proffered By @progrAmmar;

Controller Article(.php)
------------------------

    public function index()
{
       $data['modal'] = $this->article_model->modal($art_id); // Gets all the data 
       $this->load->view('('admin/article',compact('article', 'page_link', 'category', 'modal') $data);
    }  

    View article(.php)
    ------------------

    
      
         

          
       
         
         Title: title;?>
    

    
      
        
          Category: cat_name;?>
      Date: public_date;?>
          Content: description;?>
          
       
    
    
     
      
      

//Finally call the html via JavaScript
 $.get(window.base_url + 'index.php/article/'+ id, function (data) {
      $('#myModal' > div.modal-body).empty();
      $('#myModal').html('data');
      $('#myModal').modal('show');
 }

Did a little juggling to fit in this attempt, but there's no change as the fifth page result is never bumped out by another content ID as shown below;

Still stuck in the same position before...round and round we go ミ●﹏☉ミ

Of the section I'm interested in within the docs;

  $('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
 // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
 var modal = $(this)
 modal.find('.modal-title').text('New message to ' + recipient)
 modal.find('.modal-body input').val(recipient)
})

my primary issue is; HOW do I extrapolate Update the modal's content? THIS is essentially the core of my impedance and not located by an intensive search of the BS docs. If I could sync up some kind of way to force-reload the content within the modal, I have my answer. In fact the closest I've found to any example of how to (maybe) approach this was a post here (sorry forgot which one) detailing how to reload an image within a modal by targeting the src element;

//And then you just change the src attribute of the picture element from your function.
var picture = button.data('picture')    
$('#picture').attr('src',picture);

THAT'S IT!* (theoretically)...Between the above example and the Varying modal content based on trigger button example, I'm on my way to losing it. I can't believe I can't just make the logical connection required to fire off the force-reload. I just don't see it, and every example I've used thus far keeps me in the same place.

Having gone through fifty-plus JQuery code examples, not one of them did squat as far as activating any functionality, so I'm off attempting to use it as any sort of solution. NONE of the answers under this topic worked (even a little). This is the 1st time in my career where I've been completely stumped with nowhere to turn.

Here are the things I've tried:

Situation 1

Initially dealing with an HTML table

listing out the articles db elements of 'art_id', 'title', 'cat_name', 'public_date', 'image', the table elements are scooped from the db with foreach ($article->result() as $a){.

The table ends with the activity buttons, the 1st of which is the BS modal trigger (unable to change table being echoed out in PHP - just mucks it all up);

echo "View  ".

Situation 2

The modal data-toggle (as posted above) is the trigger for the modal to popup and is located on page bottom;




  
  result() as $a){    
  ?>
    
      
      
      Title: title;?>
    
    
      Category: cat_name;?>
      Date: public_date;?>
      Content: description;?>

If the modal foreach isn't both included and augmented like so;

then the modal pulls all of the $a->art_id elements into view simultaneously like so;

And, even with the necessary jQuery at the bottom (after the modal);

  
//crabbed from - https://stackoverflow.com/questions/14045515/how-can-i-reuse-one-bootstrap-modal-div/14059187#14059187

Situation 3

NOTHING WORKS.... The jQuery is not destroying and reloading the modal, so I'm only getting that 1st on-page result from the 1st button on the page (completely correct content and ID). The most frustrating thing is if I hover over each button, the correct content ID is returned. I think it's safe to say that it's not any problem with the code - I have to investigate WHY that specific code isn't working on-page. Confusing because I'm using jQuery already;

putting these two lines just above the modal and jQuery at the bottom of the page. It looks as if there is a conflict somewhere preventing the jQuery-driven script from firing. The only conflict I can maybe even see is that with the CKEditor that loads just above the jQuery.

Even with switching to another code block;

//forgotten SO crabbing

I keep getting the same results. Since throwing in the towel, I've come upon several SO solutions which suggest the scenario I want, but I can never physically fulfill them and it making me angrier than a rattlesnake in a Texans' boot. Not only were these questions completely similar to mine, but they (almost) all got upvoted @ +1 or better, and the selected solutions did nothing to extract me from my bottleneck.

This is an issue that I'd like to see cleared up as I know there's a solution, and from the numerous Fiddles and Plunkers, they're all similar in nature with slight variations that I haven't been able to employ.

Load MySQL data dynamically by unique id into Bootstrap modal -CodeIgniter

Situation 1

Situation 2

Situation 3

Answers (1)

Related Questions