Pass id from php to JS file

Question

I know very well that this question is ask many time but some how my problem is different and i didn't find the solution.

Now comes on issue.

I have a an image,so whenever i click on to the image the pop up window is open and show the data.now i want to make this dynamic and wants that the data should be come according to the id.

here is my image code.:

<div id='contact-form'>

        <a href='#' class='contact'><img src="<?php echo base_url();?>/assets/images/pre.jpg" style="height:18px; width:18px"></a>
      </div>
        <!-- preload the images -->
        <div style='display:none'>
            <img src='<?php echo base_url();?>assets/images/img/contact/loading.gif' alt='' />
        </div>  


And on its click the ajax is called from js file here is the code of that js file:
//here the provider is controller and show_coupon_pre is a function which call the view having the data.
$.get("provider/show_coupon_pre", function(data){
                    // create a modal dialog with the data
                    $(data).modal({
                        closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
                        position: ["15%",],
                        overlayId: 'contact-overlay',
                        containerId: 'contact-container',
                        onOpen: contact.open,
                        onShow: contact.show,
                        onClose: contact.close
                    });
                });

I have a table having no of records and each record having this type of image.where the user can click and get the preview in pop window. But i want to show the data in pop up according to the row like for id=1 it should be show the data of id==1 and so on. now can you you guys please help me how can i pass this id to the js file by which i can fetch the required data.

I am working in codeignitor.

Here's the answer to your problem: http://stackoverflow.com/questions/9653651/including-php-variables-in-an-external-js-file — Cas Bloem, Aug 27 '14 at 12:53

score 1 · Accepted Answer · answered Sep 18 '12 at 09:39

1

Simplest solution

<table>
<tr>
 <td><img class="banner" src="/image1.png" post_id="1"></td>
 <td>some other data 1</td>
</tr>
<tr>
 <td>
 <td><img class="banner" src="/image1.png" post_id="2"></td>
 <td>some other data 2</td>
</tr>
</table>

Javascript:

$('.banner').click(function() { 
  post_id = $(this).attr("post_id");

  // send your ajax with post_id
} );

answered Sep 18 '12 at 09:39

Maxim

1,566
10
13

1

That is not valid html. http://stackoverflow.com/questions/432174/how-to-store-arbitrary-data-for-some-html-tags – CharliePrynn Sep 18 '12 at 09:43
I just give you idea, how to solve this problem. It is impossible to solve write code for solving your problem, because i don't know how html page generated and all code works. – Maxim Sep 18 '12 at 09:47
@Maxim but how can i pass this variable to ajax calling url $.get("provider/show_coupon_pre", function(data){ – Harshal Sep 18 '12 at 09:51
I think it will look something like this: $.get('provider/show_coupon_pre?coupon_id'+post_id); – Maxim Sep 18 '12 at 09:54
I will explain logic step by step: 1. Generate html table with image attribute (see example of this html that i put on this respone) 2. Add onclick for such image (i think you already made this) 3. On "onclick" event, get from caller your attribute value 4. Initialize ajax: $.get('provider/show_coupon_pre?coupon_id'+post_id, function(data) { YOUR CODE HERE. Open Modal To user }); – Maxim Sep 18 '12 at 09:55
@maxim when i alert this post_id than it gives undefined. – Harshal Sep 18 '12 at 11:40
This is invalid HTML. So: this is not the correct answer to the problem. Using this will make your website invalid and unstable. – Cas Bloem Aug 27 '14 at 12:50

score 0 · Answer 2 · answered Sep 18 '12 at 09:41

0

If you have the ID in php when outputting the image, I would do this:

<script>
var randomId = <?php echo '"' . $phpId . '"'; ?>
</script>

answered Sep 18 '12 at 09:41

CharliePrynn

3,034
5
40
68

now how can i pass this java script variable to my js file where the ajax is calling. – Harshal Sep 18 '12 at 09:48
Place my example above the include of your JS file. You should be able to access it. e.g alert(randomId) It should be in scope. – CharliePrynn Sep 18 '12 at 09:58

Pass id from php to JS file

2 Answers2