• 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
using jquery on checking duplicate data

#1
[eluser]clariz[/eluser]
Could anyone help me on this?

I have dynamic textfields, generated using innerhtml
I want that onblur event, the data in the textfield will be checked for duplicate in the database. The checking will be done without refreshing the page.
Then give an alert if duplicate exists.

I have a code using jquery. I've tried it using static textbox. It works fine.
But when I applied the dynamic textboxes, it doesn't works.

Here's my code:
I have a javascript code and two forms in my html code.
The code goes like this, when I enter a value in my textfield id = Que and on onblur event, the next textfield id = textQuestion gets the value of the textfield id = Que and the form id=formCheck submits the form. The data is process to a php file, checking if the value exists in the database. Then returns a value.

Code:
< script type="text/javascript">
    $(document).ready(function(){
        $('#Que').blur(function(){
            $('#txtQuestion').attr('value', $('#Que').attr('value'));
            $('#formCheck').submit();
        });
                $('#formCheck').ajaxForm({success:show_result});
                });        
                function show_result(responseText){
                        var arr = responseText.split('###');
                        if(arr[0] > 0){
                                alert("Error: Question already exists.");
                        }
                }

< /script>

&lt;form name="formCheck" method="post" id="formCheck" action="&lt;?= site_url("lessons/main/checking");?&gt;"&gt;
        &lt;input type="text" name="txtQuestion" id="txtQuestion" /&gt;
&lt;/form&gt;

&lt;form method="POST" name='formQ' id='formQ' action='&lt;?= site_url("lessons/main/saveAll");?&gt;'&gt;
   <div>
        Question &lt;input type='text' name='Que[]' id='Que' size='38' /&gt;
   </div>
   <div><a href='[removed]addQue()'>add another question</a></div> // this the call to generate dynamic textfields
   <div><span id='newQuestion'></span></div>     // here is where dynamic textfield takes place
&lt;/form&gt;

This is my controller:
It checks the value in the database

Code:
&lt;?php
  class Main extends Controller{      
      function __construct(){
        parent::Controller();
      }

      function checking(){
        $sql = "Select * from lesson_questions where UCASE(question) = '".strtoupper($_POST['txtQuestion'])."'";
        $qry = mysql_query($sql);
        
            echo mysql_num_rows($qry) . '###';
      }
} ?&gt;

And this is the code to generate dynamic textboxes

Code:
var arrInput = new Array(0);
  var arrInputValue = new Array(0);
function addQue(){
  arrInput.push(arrInput.length);
  arrInputValue.push("");
  displayQue();
}
function displayQue() {
  document.getElementById('newQuestion'). innerHTML="";
  for (intI=0;intI<arrInput.length;intI++) {
    document.getElementById('newQuestion'). innerHTML+=createQue(arrInput[intI], arrInputValue[intI]);
  }
}
function saveQue(intId,strValue) {
  arrInputValue[intId]=strValue;
}
function createQue(id,value) {
  return  " Question &lt;input type='text' name='Que[]' id='Que'&gt;";
}

#2
[eluser]Jay Turley[/eluser]
If I am not mistaken, you have run into the dreaded binding problem. ;-)

Because you bind your jquery event handlers to the static textboxes when the document is ready, you do not experience a problem. But the binding is only done once - at page load / DOM ready.

You need to do one of two things: read up on jQuery event handling (it looks something like this):

Code:
var that = this;
$('.auction_item_list').click(function(event) {
    var $target = $(event.target);
    if ($target.is('a')) {
        var picture_url = $target.attr('id');
        if (picture_url != '') {
            event.preventDefault();
            $('#large_item_picture').attr('src',picture_url);
        }
    } else if($target.is('img')) {
        event.preventDefault();
        var picture_url = $target.attr('id');
        $('#large_item_picture').attr('src',picture_url);
    }
});

or you need to rerun your document ready function each time you add a new dynamic input to the DOM.

HTH

#3
[eluser]clariz[/eluser]
Quote:If I am not mistaken, you have run into the dreaded binding problem. ;-)

Because you bind your jquery event handlers to the static textboxes when the document is ready, you do not experience a problem. But the binding is only done once - at page load / DOM ready.


Thanks for the reply Jay Turley.
Now I got an idea about the problem.


Quote:You need to do one of two things: read up on jQuery event handling (it looks something like this):

Code:
var that = this;
$('.auction_item_list').click(function(event) {
    var $target = $(event.target);
    if ($target.is('a')) {
        var picture_url = $target.attr('id');
        if (picture_url != '') {
            event.preventDefault();
            $('#large_item_picture').attr('src',picture_url);
        }
    } else if($target.is('img')) {
        event.preventDefault();
        var picture_url = $target.attr('id');
        $('#large_item_picture').attr('src',picture_url);
    }
});

or you need to rerun your document ready function each time you add a new dynamic input to the DOM.

HTH

But I am new to jquery. Could you help me understand the code you have given?
I wish you could elaborate it to be clear to me...
And how could I return the document ready function each time?

Thanks in advance. Your reply is very much appreciated.


-clariz-

#4
[eluser]Jay Turley[/eluser]
[quote author="clariz" date="1221641773"]
Thanks for the reply Jay Turley.
Now I got an idea about the problem.

But I am new to jquery. Could you help me understand the code you have given?
I wish you could elaborate it to be clear to me...
And how could I return the document ready function each time?
[/quote]

No worries. First, here is a link to a great introductory page on event handling and event delegation in jquery.

For your case, I would read the page and then look carefully at Example 2.

event delegation with jquery

As far as rerunning the event binding, it would look something like this (please note this is example code, you will have to change it for your needs)

Code:
$(document).ready( function() {
    bind_event_handlers();
});

function bind_event_handlers() {
    // do the stuff you are currently doing in your onDocumentReady code
    // for example
    $('input[type=text]').click( function() {
        // do stuff
    });
}

#5
[eluser]clariz[/eluser]
Thanks a lot Jay Turley..
I'll try that code..

I'll just post for any changes. :-)

-clariz-

#6
[eluser]clariz[/eluser]
Thanks Jay Turley for giving new ideas.

I came up to a code which solved the problem.
I also used your code as a reference.
At the end, the code I made was not that good but it solved the problem which is more important (to have an output) :lol:

JS code in a separate file:
Code:
function clickHandlers(e){
  stat = 'False';
  $("input.inputQuestion").blur(function(){
    $("#txtQuestion").attr("value", $(this).attr("value"));
        $("#formCheck").ajaxSubmit({success:show_result});
   });
}
    
function show_result(responseText){
  var arr = responseText.split('###');
  if(arr[0] > 0){
      if(stat == 'True'){  
         return false;     //this is to prevent alert function from
                           //"popping up" twice or more in same question value
                           //since I have a hard time understanding the code of event delegation in jquery
      }
  alert("Error: Question already exists.");
  stat = 'True';
  }
}

Same html code except this line
Code:
Question &lt;input type='text' name='Que[]' id='Que' size='38' /&gt;

I changed it to
Code:
Question &lt; input type='text' name='Que[]' id='Que'
           onb lur = 'click Handlers()' class='inputQuestion' size='38' &gt;

And also in creating dynamic textfields was changed to
Code:
Question &lt;input name='Que[]' type='text' class='inputQuestion' id='Que'
          value='"+ value +"' size='38' onb lur='clickHandlers()'
          onC hange = ' [removed] saveQue("+ id +",this.value)' /&gt;


I just added a call to a function.

I hope anyone could find this post useful.
Thanks for the persons who read this post especially to Jay Turley for all the replies. ;-)


-clariz-


Digg   Delicious   Reddit   Facebook   Twitter   StumbleUpon  


  Theme © 2014 iAndrew  
Powered By MyBB, © 2002-2019 MyBB Group.