javascript - How to get "this" variable mixing php and jQuery?

519

I have a set of boxes:

HTML

<button >
  <div>Ajax content 1</div>
</button>
<button >
  <div>Ajax content 1</div>
</button>

In the PHP loop I do:

<?php 
$permalink = get_permalink(); // Link of the box
?>
<script>
var simple = '<?php echo $permalink; ?>';
</script>

The php loop above prints the correct link for each box link in eachsimple variable

I then call the content via ajax like this:

$(document).on( 'click', ".btn-modal", function(){
  var cont = $(this).simple +  " .content"; // Load via ajax the Box link + content 
  jQuery(".modal-body").load(cont);
});

The variablesimple is applied to all the boxes correctly but I am not gettingthis box link on click but I am getting a no found error instead

http://www.example.com/xchanges/home/work/interactive/undefined 404 (Not Found)

659

Answer

Solution:

I guess i understand what you want to do. Your approach is not the correct way, you want to save a link for each div and then use that link in some JS logic.

Then in your loop (this is Wordpress right ?) you need to set out the link in the DOM element you want inside adata-attr and also give some class name to that div so that you can actually select it using JS

echo '<div class="someClass" data-src='. get_permalink() . '> .....

The result should be:

<div class="someClass" data-src="http://..." >Ajax content 1</div>

Now, your JS

$(document).on( 'click', ".btn-modal", function(){
  var cont = $(this).children('.someClass').attr('data-src') + " .content";
  jQuery(".modal-body").load(cont);
});

People are also looking for solutions to the problem: mysql php check form for empty input fields

Source

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question