How to correct bind javascript/jquery to included php files

Question

I know this has been asked some time, but the solutions before did not help, and I do not understand if I am missing something

I have simple php/hmtl page with an index.php where I include the different content php pages with a simple GET check:

if (isset($_GET['section'], $section[$_GET['section']])) {
    include $section[$_GET['section']];
} else {
    include $section['home'];
}

Now one of these sections contains a form which I want to do some magical ajax/jquery action with.

In my javascript file which is loaded at the bottom of the index.php I have following jquery ajax stuff

//ajax load domain search script
$(document).ready(function(){
    $('#lookup_domain').live("click", function(e) {
        e.preventDefault();
        searchVal = $('#domain').val();
        topLevel = $('.custom_select').val();
        domain = searchVal + '.' + topLevel;
        $.ajax({
            type: 'GET',
            url: 'script_domain.php',
            data: 'domain=' + domain,
            dataType: 'html',
            beforeSend: function() {
                $('#result').html('<img style="margin-left: 80px;margin-top: 30px;" src="_assets/img/loader.gif" alt="loading..." />');
                if (!searchVal[0]) {
                    $('#result').html('<p>Syötä domain nimi.</p>');     
                    return false;
                }   
            },
            success: function(response) {
                $('#result').html(response);

            },
            error: function(response) {
                $('#result').html('<p>Haussa virheitä.</p>');
            }
        });
    });
});

I thought it would be enough to use

$(document).ready(function(){

and the live method (i have jquery 1.7.1 so live should be working?)

$('#lookup_domain').live("click", function() {

but unfortunatedly this is not working, the form just sends it to itself and loads the page again.

Here is the form:

<?php
if(!defined('indexcalled')){die('Direct access not premitted');}
?>
            <div id="domain_search">
                <h5>hae verkkotunnusta</h5>
                <form action="#" method="get" class="domain_form">
                    <input type="text" name="domain" class="domain_input" />
                    <div class="select_wrap">
                        <select class="custom_select">
                            <option value="fi">.FI</option>
                            <option value="com">.COM</option>
                            <option value="net">.NET</option>
                            <option value="me">.ME</option>
                            <option value="info">.INFO</option>
                        </select>
                    </div><!--/select wrap-->
                    <input type="submit" value="Syötä" class="domain_submit_btn" id="lookup_domain"/>
                </form>
                <div class="clear"></div>
            </div><!--/domain search-->

What am I missing here? Is there any good documentation about how to use jquery with this kind of dynamical page setup?

EDIT

My original question was, how to handle these kind of elements properly with jquery, because they are included later on.

I found that I should be working with on() instead of live because its deprecated in 1.7 too. So I edited the code like this:

$(document.body).on("click", '#lookup_domain', function(e){
    e.preventDefault();
    $(document.body).on("click", '#domain', function(event){
        alert($(this).text());
    });

But the alert does not work, it does nothing. What am I missing here?

colestrode · Accepted Answer · 2013-07-08 17:24:21Z

2

You're calling e.preventDefault(), which should keep the form from submitting, however you are not passing the event object into your click handler. Update it to this and it should work:

$('#lookup_domain').live("click", function(e) {
        e.preventDefault();
        ...
});

answered Jul 8, 2013 at 17:24

colestrode

10.7k3 gold badges32 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Owl Over a year ago

Thank you so much, I had the object befor but forgot it as I change the code to the live method. However, its still not working, the next problem is, it does not recognize the variable searchVal = $('#domain').val(); its undefinied. Does this need some trick also because of the includes?

colestrode Over a year ago

@Owl Looking at your markup, you don't have an element with an id of domain, which is what $('#domain') is looking for. You can either update the domain input to have an id of 'domain' or change your selector to something like $('input.domain_input')

Samuel Cook · Accepted Answer · 2013-07-08 17:22:44Z

1

Because you are using a submit button for your live click you need to disable the form submission.

There are two solutions:

1, Return false on the click event:

$('#lookup_domain').live("click", function() {
    // all of your code
    return false;
})

2, add an onsubmit attribute to your form:

<form action="#" method="get" class="domain_form" onsubmit="return false;">

</form>

answered Jul 8, 2013 at 17:22

Samuel Cook

16.9k7 gold badges56 silver badges65 bronze badges

1 Comment

Owl Over a year ago

Thanks I had forgot the object in the newest script correction. I added it now, but its still not working, its not recognizing the searchVal, its undefined

Owl · Accepted Answer · 2013-07-10 13:16:18Z

0

Thanks for all guys who helped me in the chat, the correct method is to first have the document ready, then use .on() with click method with body to access the element created afterwards. Then just with normal .val() to get the values, like this:

$(document).ready(function(){
    $(document.body).on("click", '#lookup_domain', function(e){
        e.preventDefault();
        searchVal = $('#domain').val();

answered Jul 10, 2013 at 13:16

Owl

6895 gold badges15 silver badges30 bronze badges

Collectives™ on Stack Overflow

How to correct bind javascript/jquery to included php files

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related