CODEWITHSUNDEEP
phpjqueryincludeload
Owl
Owl

Reputation: 689

How to correct bind javascript/jquery to included php files

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?

Upvotes: 0

Views: 824

Answers (3)

Owl
Owl

Reputation: 689

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();

Upvotes: 0

colestrode
colestrode

Reputation: 10658

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();
        ...
});

Upvotes: 2

Samuel Cook
Samuel Cook

Reputation: 16828

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>

Upvotes: 1

Related Questions