Код jquery не работает, когда содержимое с другой страницы загружается в конкретный div без перезагрузки страницы

Question

У меня проблемы с тем, чтобы мои коды jquery нормально работали на моем сайте. Я использую php, и раньше я уже завершал работу над сайтом, но я решил переделать его в ООП, используя вместо этого mysqli, а также сделать его более усовершенствованным из-за сложности сайта.

Моя версия ООП разработана таким образом, у меня есть фиксированный заголовок (заголовок содержит все мои ссылки jquery) и нижний колонтитул, но при нажатии любой навигационной ссылки перезагрузка страницы не происходит, но содержимое другой страницы загружается в конкретный div (#load_here). Это работает нормально, у меня проблема в том, что когда форма на другой странице, которая отправляется через jquery в мою базу данных, загружается в мой div (#load_here), код jquery для этой конкретной формы не работает. Я попытался включить свои ссылки jquery на страницу, содержимое которой загружается, но из-за этого мой сайт больше не работает должным образом. Любое решение?

Вот иллюстративный код:

    <html>
    <header>
            <script src="jquery-1.11.1-jquery.min.js"></script>

<scrirpt>    
    $("#nav_page_a").on("click", function () {
    $("#load_here").load("link 1.php");
    });
    $("#nav_page_b").on("click", function () {
    $("#load_here").load("link 2.php");
    });
    $("#nav_page_c").on("click", function () {
    $("#load_here").load("link 3.php");
    });
</script>

    </header>

    <body>
    <a  id="#nav_page_a" href="#">link 1</a>
    <a  id="#nav_page_b" href="#">link 2</a>
    <a  id="#nav_page_c" href="#">link 3</a>

    <div id="load_here">
    </div>

    </body>

    </html>

Загружается другая страница:

<?php
require_once 'include/initialize.php'; //Where my OOP classes are

$pages = new pages(); // a class

$pages->Link_1(); // the form html and php content
$pages->Link_1Script(); // the jquery script

?>

Даже если я решу не отделять коды jquery сценария от содержимого формы, он все равно не работает.

Это мой код jquery для отправки моей формы:

<script>   
$(document).ready(function() {
$("#submit_product").click(function() {
var category_key = $("#category_key").val();
var branch_code = $("#branch_code").val();
var product_name = $("#product_name").val();
var pieces = $("#pieces").val();
var measurement = $("#measurement").val();
var price = $("#price").val();
var reorder = $("#reorder").val();
var exp_date = $("#exp_date").val();
var note = $("#note").val();
if (exp_date == '' || reorder == '' || category_key == '' || pieces == '' || price == '' || branch_code == '' || measurement == '' || product_name == '') {
window.alert("Insertion Failed, Some Fields are Blank....!!");
} else {
if(pieces < reorder){
window.alert("Re-order Level cannot be greater than pieces available!!");
}else{
// Returns successful data submission message when the entered information is stored in database.
$.post("scripts/products.php", {
category_key1: category_key,
branch_code1: branch_code,
product_name1: product_name,
pieces1: pieces,
measurement1: measurement,
price1: price,
reorder1: reorder,
exp_date1: exp_date,
note1: note
}, function(data) {
window.alert("Product successfully created!!!");
$('#register_formProduct')[0].reset(); // To reset form fields
});
}
}
});
});
</script>

jquery

1

Ikechukwu 7 Сен 2016 в 13:46

Answer 1

Что ж, это должно сработать. Поместите это на свою родительскую страницу. Я немного изменил твой сценарий

$("#nav_page_a").on("click", function () {
    $("#load_here").load("link 1.php", function(){
        $("#submit_product").on("click", function() {
            var category_key = $("#category_key").val(),
                branch_code = $("#branch_code").val(),
                product_name = $("#product_name").val(),
                pieces = $("#pieces").val(),
                measurement = $("#measurement").val(),
                price = $("#price").val(),
                reorder = $("#reorder").val(),
                exp_date = $("#exp_date").val(),
                note = $("#note").val();
            if (exp_date == '' || reorder == '' || category_key == '' || pieces == '' || price == '' || branch_code == '' || measurement == '' || product_name == '') {
                window.alert("Insertion Failed, Some Fields are Blank....!!");
                return false;
            } 
            if(pieces < reorder){
                window.alert("Re-order Level cannot be greater than pieces available!!");
                return false;
            }
            // Returns successful data submission message when the entered information is stored in database.
            $.ajax({
                url : "scripts/products.php", 
                data : { "category_key1" : category_key, "branch_code1" : branch_code, "product_name1" : product_name, "pieces1" : pieces, "measurement1" : measurement, "price1" : price, "reorder1" : reorder, "exp_date1" : exp_date, "note1" : note}, 
                dataType : "html",
                type : "post"
            }).done(function(data) {
                window.alert("Product successfully created!!!");
                $('#register_formProduct')[0].reset(); // To reset form fields
            });
            return false;
        });
    });
 });

2

Harry Bomrah 7 Сен 2016 в 11:25

Answer 2

Спасибо всем, я смог придумать, что наконец работает

$("#nav_page_i").unbind("click").on("click", function () {
$("#load_here").load("addproduct.php", function () {

$(".table").change(function(){
var val1 = +$("#pieces").val();
var val2 = +$("#reorder").val();

if(!(val1 > val2)){
$("#reorder").val((val1));
}
});

$("#submit_product").click(function() {
var category_key = $("#category_key").val();
var branch_code = $("#branch_code").val();
var product_name = $("#product_name").val();
var pieces = $("#pieces").val();
var measurement = $("#measurement").val();
var price = $("#price").val();
var reorder = $("#reorder").val();
var exp_date = $("#exp_date").val();
var note = $("#note").val();
if (exp_date == '' || reorder == '' || category_key == '' || pieces == '' || price == '' || branch_code == '' || measurement == '' || product_name == '') {
window.alert("Insertion Failed, Some Fields are Blank....!!");
} else {
if(pieces < reorder){
window.alert("Re-order Level cannot be greater than pieces available!!");
}else{
// Returns successful data submission message when the entered information is stored in database.
$.post("scripts/products.php", {
category_key1: category_key,
branch_code1: branch_code,
product_name1: product_name,
pieces1: pieces,
measurement1: measurement,
price1: price,
reorder1: reorder,
exp_date1: exp_date,
note1: note
}, function(data) {
window.alert("Product successfully created!!!");
$('#register_formProduct')[0].reset(); // To reset form fields
});
}
}
});
});
});

Это мой реальный код из моей работы, и он работает нормально.

1

Ikechukwu 7 Сен 2016 в 11:49

Answer 3

Отключите событие щелчка или отключите события щелчка. Вы должны включить одну последнюю версию файла jquery, а не слишком много jquery.

$("#nav_page_a").unbind("").on("click", function () {
$("#load_here").load("link 1.php");
});
$("#nav_page_b").unbind("click").on("click", function () {
$("#load_here").load("link 2.php");
});
$("#nav_page_c").unbind("click").on("click", function () {
$("#load_here").load("link 3.php");
});

2

saravana kumar k 7 Сен 2016 в 10:55

Код jquery не работает, когда содержимое с другой страницы загружается в конкретный div без перезагрузки страницы

3 ответа

Похожие вопросы

Новые вопросы

jquery