Home/ Questions/Q 8274883
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T07:53:02+00:00

I have a simple page which allows users to add language ids to items.

  • 0

I have a simple page which allows users to add language ids to items. The page loads up a list of records, by doing an ajax call. All the records are loaded into a div as a list.

Each list item is a form, so when the user inputs the lang id, they press update and the ajax call goes off, updates the database and reloads the list with the records, minus the one just updated.

The jquery call, works on page load, but if you submit a form item, it goes to the php script instead of reloading within the page you submitted on.

Any ideas why the initial call loads ‘in page’ but the form submit does not. Also is using a form per record a good idea or is there a better way to do it with jquery.

The original php script (sort_language.php) which does the ajax call

   <script id="source" language="javascript" type="text/javascript">

   function run(){
// get form data
    var eng = $('#rec #eng').val();
    var cym = $('#rec #cym').val();

    // put form data in a JSON
    var data_json = {'eng':eng, 'cym':cym};

    //post to php script to update database and return html list
    $.ajax({
      type: 'post',
      url: 'ajax/lang_api.php',
      data: data_json,
      beforeSend: function() {
        // before send the request, display a "Loading..." message
        $('#records').html('Loading...');
      },
      timeout: 10000,        // sets timeout (10 seconds)
      error: function(xhr, status, error) { alert('Error: '+ xhr.status+ ' - '+ error); },
      success: function(response) { $('#records').html(response); }
    });

    return false; //this should stop page reload
}


$(document).ready(function()
{
    $("#rec").submit(function()
    {
        run()
    });
    run()
});



 </script>
</head>
<body>

<div id="record_wrapper">
<h1>Records by title</h1>
<div id="records">
    Waiting for records to load....
</div>

Here is the php script which created the list and updates the db.

//get lang post variables if they exist
$eng_id = $_POST['eng'];
$cym_id = $_POST['cym'];
//debug - check post values are correct visually
echo 'eng' . $eng_id . ' cym ' . $cym_id;

function create_list() {    
//generate html list
$html .='   <ul>';

    //grab records from DB which have not been updated with language value to display
    if (!$query = mysql_query("SELECT `id`, `title-245` FROM `records` WHERE `catalog_lang-040` = 'eng' ORDER BY `title-245`")) {
        echo mysql_error();
    }
    //generate each item in list as a form 
    //set form id to rec
    while($row = mysql_fetch_array($query))
    {
        $html .= '  <li><form action="ajax/lang_api.php" method="post" id="rec">' . $row['title-245'] . ' <input type="text" name="cym" size="3" /><input type="hidden" name="eng" id="eng" value="' . $row['id'] . '" /> <input type="submit" value="submit" /></form></li>
        ';                                                                                      
    }

$html .= '  </ul>';
//return the html to be used
return $html;
}

//if eng and cym ids are submitted then update DB, otherwise just return the html required.
//check value is set using isset
if (isset($eng_id) && isset($cym_id)) {

if (!is_numeric($eng_id)) { $rehtml= 'Invalid English ID'; }
if (!is_numeric($cym_id)) { $rehtml= 'Invalid Welsh ID'; }

//sql to go here to update db ith language value

//and then get new list to output.
  echo create_list();
//post undefined so just return list (for first page load/refresh)  
}else{
// output the html
  echo create_list();
}

Probably missing something obvious, but first time playing with jquery/js.

And here is the HTML list that is created by lang_api.php, this loads into the records div replacing “waiting for records to load” in sort_language.php

eng417 cym 21   
<ul>    
 <li><form action="ajax/lang_api.php" method="post" id="rec">18th - 19th century ballads collection , 18th - 19th century,  <input type="text" name="cym" size="3" /><input type="hidden" name="eng" id="eng" value="417" /> <input type="submit" value="submit" /></form></li>
            <li><form action="ajax/lang_api.php" method="post" id="rec">1st The Queen's Dragoon Guards Collections , 1685 -,  <input type="text" name="cym" size="3" /><input type="hidden" name="eng" id="eng" value="1001" /> <input type="submit" value="submit" /></form></li>
            <li><form action="ajax/lang_api.php" method="post" id="rec">Aberconway Library , 20th century -,  <input type="text" name="cym" size="3" /><input type="hidden" name="eng" id="eng" value="101" /> <input type="submit" value="submit" /></form></li>
            <li><form action="ajax/lang_api.php" method="post" id="rec">Aberfan Disaster Archive , Mainly 1966 -,  <input type="text" name="cym" size="3" /><input type="hidden" name="eng" id="eng" value="303" /> <input type="submit" value="submit" /></form></li>
            <li><form action="ajax/lang_api.php" method="post" id="rec">Abergavenny Local History Collection , Prehistory to the present day,  <input type="text" name="cym" size="3" /><input type="hidden" name="eng" id="eng" value="1030" /> <input type="submit" value="submit" /></form></li>
            <li><form action="ajax/lang_api.php" method="post" id="rec">Alister Hardy Religious Experience Archive , 1924 -,  <input type="text" name="cym" size="3" /><input type="hidden" name="eng" id="eng" value="1042" /> <input type="submit" value="submit" /></form></li>
            <li><form action="ajax/lang_api.php" method="post" id="rec">Almanacs Collection , 1700 - 1850,  <input type="text" name="cym" size="3" /><input type="hidden" name="eng" id="eng" value="740" /> <input type="submit" value="submit" /></form></li>
            <li><form action="ajax/lang_api.php" method="post" id="rec">Ammanford Local Studies Collection , 1880s -,  <input type="text" name="cym" size="3" /><input type="hidden" name="eng" id="eng" value="939" /> <input type="submit" value="submit" /></form></li>
            <li><form action="ajax/lang_api.php" method="post" id="rec">Anderson Collection , 17th - 20th century,  <input type="text" name="cym" size="3" /><input type="hidden" name="eng" id="eng" value="407" /> <input type="submit" value="submit" /></form></li>
</ul>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You have a couple of problems here:

    1. I would not recommend the approach you took of creating a form for each <li>. since you can latch to any event on any element you can just put a simple button and bind a click event to it.

    2. The reason you are failing is because jquery.submit() is a helper method (as well as click,hover etc.) and those methods only bind to elements that exist on the page when it loads. You on the other hand, add the elements dynamically, so what you need to use is live or on:

      $('button').on('click',function(){//do your stuff});

    look at jquery.on() and jquery.live()

    EDIT:

    First time you load the page, there is no need for an ajax call, just create it in php.

    When the user clicks a button you can use the jquery.load() method to replace the entire list, for that you need to wrap the list in a div:

    <div id="listWrapper">....</div>

    and then using jquery:

    $('button').on('click',function()
    $('#listWrapper').load('ajax/lang_api.php',data_json);
});

    This will automatically call the php script and replace the lsit inside the div with the list returned from php script.

    • 0