javascript - Opening one jquery modal dialog at a time when unable to assign div ids

89

I have been working on this issue for a few days, and am asking my question since I can't seem to find an answer on stackoverflow or from Google. If it's simply that I haven't articulated it correctly please point me to the existing question and answer.

I am writing my first web app using PHP OOP, and have implemented a search feature. The results from the user's search are put into a search results view that has this html (the view is passed to a template that has complete html formatting), and populates a button with each listing that says "contact a coordinator about this study":

<?php foreach($results as $result): ?>

 <article>

<h1><?=$result['study_name']?>: <?=$result['study_topic']?>, by <?=$result['conducting_facility']?> in <?=$result['facility_location']?><br>
Phase <?=$result['phase']?></h1><br>  
<p><?=$result['study_summary']?></p>
<br>

 <div title="Contact A Coordinator" id="specific_study">
<form id="contact_form" name="contact_form" action="/users/p_sendmessage" method="POST">
  First name: <input type="text" name="first_name" minlength="2" required><br>
  Last name: <input type="text" name="last_name" minlenth="2" required><br>
  Preferred Email: <input type="email" name="preferred_email" required><br>
  Study Name: <input type="text" name="study_name" value="<?=$result['study_name']?>">  <br>
  Your message: <textarea name="message" ></textarea> 
</form>
</div>

<button >Contact a coordinator about this study</button>

<script src="/js/main.js"></script>
<script>$("#contact_form").validate();</script>

</article> 
<br>

<?php endforeach; ?> 

The javascript that the view calls is jquery UI's dialog function, which I have written like this:

$('.contact_coordinator').click(function() {
    $('.contact_btn_info').dialog('open');
}); 



$('.contact_btn_info').dialog({
autoOpen: false, 
height: 450,
width: 350, 
modal: true,
buttons: {
    "Send Message": function() {
        $("form[name='contact_form']").submit()
        $('#contact_form').submit();
            $(this).submit();
        $('.contact_btn_info').submit();
    }
}
});

My goal is that when there are multiple search results in the view, each instance of the button should load just the dialog modal window with its respective study name pre-populated. As the JS is written now, each button click opens a modal window for all the search results, layered on each other. I understand how to select IDs versus a class to trigger just one window at a time, but my issue is that I can't pre-assign IDs in the html when the search results depend on the user input. I also tried assigning an ID to the html that is there, "specific_study," but when I employed that in the JS and tried out the page, every search result's button gave me only the first result's study name pre-populated.

I can't be the first person with this coding goal, so I hope someone can help! Thank you in advance.

72

Answer

Solution:

You can assign anything you need in the dialogopen event handler. ie:

$('.contact_btn_info').dialog({
    ...
    open : function() {
        $(this); // this = the current $('.contact_btn_info') element.
        $(this).dialog('widget'); // the dialog container surrounding your $('.contact_btn_info') element
        // you can do whatever you need with element inside here by using `find()` or `children()` on the $(this) element.
    }
});

People are also looking for solutions to the problem: PHP simplify range creation

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

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

Similar questions

Find the answer in similar questions on our website.