PHP Developers Network

A community of PHP developers offering assistance, advice, discussion, and friendship.
 
Loading
It is currently Tue Sep 26, 2017 1:09 pm

All times are UTC - 5 hours




Post new topic Reply to topic  [ 35 posts ]  Go to page 1, 2, 3  Next
Author Message
PostPosted: Thu Sep 07, 2017 3:53 pm 
Offline
Forum Contributor

Joined: Wed Sep 25, 2013 4:09 am
Posts: 153
EDIT: If you want to learn jqeury/javascript this is a great thread. requinix helps me create a very nice autocomplete function in jquery with an event handler that recognze ENTER, arrow up/down where you can use the arrows to navigate the list. I never did any jquery or javascript(except the odd hello world) before and after this thread I know enough to do some basic stuff in javascript / jquery.
The autocomplete function is based upon this tutorial http://www.bewebdeveloper.com/tutorial-about-autocomplete-using-php-mysql-and-jquery. You can download the sourcecode there. For noobs like me I changed the fields:
country_id to ean_id
country_list_id to *drumroll* ean_list_id
Full scripts are located near the end of page 2. Enjoy :) (Well almost full scripts anyway, removed some db handling and loginchks.. :))

EDIT: Why does the set_item(item) function only work if result[i].x is a number and not string ???? I'm going insane over this :/
Edit again: Well I forgot this little f****er ' ... there was 3 hours of my life I never get back heh

Syntax: [ Download ] [ Hide ]
text += "<li onclick=\"set_item(" + result[i].name + ")\">" + result[i].ean + "</li>";

should be

text += "<li onclick=\"set_item('" + result[i].name + "')\">" + result[i].ean + "</li>";



Hi, I'm very new to both javascript and jquery.

I have a php function that echo a json encoded array (result[]) to the autocomplet() function.

the array is in form [0](ean=>, name=>, and so on=>)

the below function works where i send a specific value (like result[1].ean) to the set_item() function but I want the set_item function to update multiple fields on my page so I would like to pass an array like result[1] or result[3] to the set_item function and from within the set_item function extract the specific values like result[1].ean or result[1].name.

I cant get it to work when trying to pass an array..

Syntax: [ Download ] [ Hide ]
function autocomplet() {
        var min_length = 0; // min caracters to display the autocomplete
        var keyword = $('#ean_id').val();
        if (keyword.length >= min_length) {
                $.ajax({
                        url: 'ajax_php/ajax_browserefresh.php',
                        type: 'POST',
                        data: {keyword:keyword},
                        success:function(data){
                            var result = JSON.parse(data);
                            var text = "<li onclick=\"set_item(" + result[0].ean + ")\">" + result[0].ean + "</li>";
                                $('#ean_list_id').show();
                                if(result[0] == -1){    $('#ean_list_id').hide();}
                                for (i = 1; i < result.length; i++) { //från 1 eftersom jag redan satt 0 ovan
                    text += "<li onclick=\"set_item(" + result[i].ean +")\">" + result[i].ean + "</li>";
                                }
                                $('#ean_list_id').html(text);
                                $('#name_id').html(text);
                                //$('#ean_list_id').html(result[1].ean);
                                //$('#name_id').html(result[1].ean);
                        }
                });
        } else {
                $('#ean_list_id').hide();
        }
}
 
// set_item : this function will be executed when we select an item
function set_item(item) {
        // change input value
        $('#ean_id').val(item);
        // hide proposition list
        $('#ean_list_id').hide();
        $('#name_id').show();
       
}
 


I tried to just pass it as is

Syntax: [ Download ] [ Hide ]
var text = "<li onclick=\"set_item(" + result[0] + ")\">" + result[0].ean + "</li>";


but it didnt work.

I tried to json encode result[0] and then parse it within the set_item() function but it didnt work..

so is there a special trick to send arrays to functions in javascript?

EDIT: Also for some reason this function only works when result[i].something is a number but not string??? So .ean works .netweight works but .name does not work ??


Last edited by hybris on Tue Sep 12, 2017 8:26 pm, edited 4 times in total.

Top
 Profile  
 
PostPosted: Fri Sep 08, 2017 12:49 am 
Offline
Spammer :|
User avatar

Joined: Wed Oct 15, 2008 2:35 am
Posts: 6556
Location: WA, USA
Rather than use an onclick to set code, use a true callback with the click event. Doing so means turning that <li> string into an LI node in the document, which suggests refactoring to append elements to #ean_list_id and #name_id (why both places) rather than setting their HTML content.

Syntax: [ Download ] [ Hide ]
var result = JSON.parse(data); // you should be making jQuery do this for you. see the .ajax docs
var $nodes = $();
$.each(result, function(key, value) {
        var $li = $("<li></li>").text(value.ean);
        $li.click(function() {
                set_item(value.ean);
        });
});

$("#name_id").empty().append($nodes);
if (result[0] == -1) {
        $("#ean_list_id").hide();
} else {
        $("#ean_list_id").empty().append($nodes.clone(true)).show();
}


Top
 Profile  
 
PostPosted: Fri Sep 08, 2017 3:54 am 
Offline
Forum Contributor

Joined: Wed Sep 25, 2013 4:09 am
Posts: 153
Hi and thanks!

requinix wrote:
/../ (why both places)

I have an inputfield where i type in the EAN code like 7612345678.. when Im typing I get up a autocomplete list from the database. If I click on an EAN code in the list it sets the ean code to the field where i was typing in the ean code. (I got that to work).
Next step was to not only send the ean code from the php script but rather all product info and have it all show up in different fields when I set the eancode.. So I have fields like name_id netweight_id and so on so when i start typing for example 7612 I get 7612345678 as a suggestion in the list. When i click it it sets the ean_id field to 7612345678 but then also set all the other fields like name_id = Proteinpudding netweight_id=200 and so on.



It seems like I'm too stupid to get the code to work heh.

I couldnt get it to work as it was with the var result = JSON.parse(data); so I tried to do .getJSON but I cant get that to work either. (in both cases the list doesn't show at all).

I don't know javascript very good and I never worked with jquery / Ajax before so Im not sure if I understood what you meant.

Also I cant figure out how to properly use getJSON in my code..
My code sends a typed in keyword to the db php file which returns the values from ... WHERE EAN like CONCAT(?,'%') ...

for that I use:
Syntax: [ Download ] [ Hide ]
$.ajax({
                        url: 'ajax_php/ajax_browserefresh.php',
                        type: 'POST',
                        data: {keyword:keyword}
 



but if I understand the getJSON correctly it means

Syntax: [ Download ] [ Hide ]
$.ajax({
                        url: 'ajax_php/ajax_browserefresh.php',
                        type: 'GET',
                        data: {keyword:keyword},
                        dataType: "json",
 


So instead of sending POST + string i will send GET + json

Syntax: [ Download ] [ Hide ]
$.ajax({
                        url: 'ajax_php/ajax_browserefresh.php',
                        type: 'POST',
                        data: {keyword:keyword},
                        success:$.getJSON('ajax_php/ajax_browserefresh.php', {keyword:keyword}, function(result) {
 


^^ didnt work either.


Syntax: [ Download ] [ Hide ]
function autocomplet() {
        var min_length = 0; // min caracters to display the autocomplete
        var keyword = $('#ean_id').val();
        if (keyword.length >= min_length) {
                $.ajax({
                        //url: 'ajax_php/ajax_browserefresh.php',
                        //type: 'POST',
                        //data: {keyword:keyword},
                        success:$.getJSON('ajax_php/ajax_browserefresh.php', {keyword:keyword}, function(result) {    /*function(data){*/
                            //var result = JSON.parse(data);*/
                            var $nodes = $();
                $.each(result, function(key, value) {
                    var $li = $("<li></li>").text(value.ean);
                    $li.click(function() {
                        set_item(value.ean);
                    });
                });
                $("#name_id").empty().append($nodes);
                if (result[0] == -1) {
                    $("#ean_list_id").hide();
                } else {
                    $("#ean_list_id").empty().append($nodes.clone(true)).show();
                }
                        }
                });
        } else {
                $('#ean_list_id').hide();
        }
}
 
// set_item : this function will be executed when we select an item
function set_item(item) {
        // change input value
        $('#ean_id').val(item);
        // hide proposition list
        $('#ean_list_id').hide();
        $('#name_id').show();
        //$('#name_id').val(name);
}
 


This old code before I tried to mess with getJson doent work either

Syntax: [ Download ] [ Hide ]
function autocomplet() {
        var min_length = 0; // min caracters to display the autocomplete
        var keyword = $('#ean_id').val();
        if (keyword.length >= min_length) {
                $.ajax({
                        url: 'ajax_php/ajax_browserefresh.php',
                        type: 'POST',
                        data: {keyword:keyword},
                        success:function(data){
                            var result = JSON.parse(data);
                            var $nodes = $();
                $.each(result, function(key, value) {
                    var $li = $("<li></li>").text(value.ean);
                    $li.click(function() {
                        set_item(value.ean);
                    });
                });
                $("#name_id").empty().append($nodes);
                if (result[0] == -1) {
                    $("#ean_list_id").hide();
                } else {
                    $("#ean_list_id").empty().append($nodes.clone(true)).show();
                }
                        }
                });
        } else {
                $('#ean_list_id').hide();
        }
}
 
// set_item : this function will be executed when we select an item
function set_item(item) {
        // change input value
        $('#ean_id').val(item);
        // hide proposition list
        $('#ean_list_id').hide();
        $('#name_id').show();
        //$('#name_id').val(name);
}
 


Top
 Profile  
 
PostPosted: Fri Sep 08, 2017 6:15 am 
Offline
Spammer :|
User avatar

Joined: Wed Oct 15, 2008 2:35 am
Posts: 6556
Location: WA, USA
I don't see any particular reasons why the old code wouldn't work. Are there any Javascript errors in the browser console?

As for the new code, besides whatever bug is also plaguing the changes to the old version, using .ajax is fine - the change I was suggesting was to set the dataType and then remove the JSON.parse() call. Just that. Same success callback and everything.

And if your ajax_browserefresh.php doesn't, it should send a Content-Type header to indicate the content is JSON.
Syntax: [ Download ] [ Hide ]
header("Content-Type: application/json");

That goes before any output. With that in place the dataType won't be necessary at all because jQuery will automatically notice that the content is JSON.


Top
 Profile  
 
PostPosted: Fri Sep 08, 2017 10:45 am 
Offline
Forum Contributor

Joined: Wed Sep 25, 2013 4:09 am
Posts: 153
requinix wrote:
Are there any Javascript errors in the browser console?


Well I haven't used console before so I dont know much how it works so bear with me..

When I open console and enter a number in the field on my homepage (that calls the ajax) console is totally blank. Do I need to enable some error logging to console in the script?

Anyway if I log key and value to the console they turn out ok so I guess the parse is working.

If I log $li to the console I get a helluva list heh so I dont really know what to look for in there but I found this:

outerHTML:"<li>756433</li>"
outerText:"756433"

which seems ok to me (756433 is one of the test ean from db)

onclick:null << I dunno if this is ok though or if it should say to call the set_item()?

Syntax: [ Download ] [ Hide ]
$.each(result, function(key, value) {
                    console.log(key);
                    console.log(value.ean);
                    var $li = $("<li></li>").text(value.ean);
                   
                    $li.click(function() {
                        set_item(value.ean);
                    });
                    console.log($li);
                });
 


Well i put in a non javascript line and it showed up as error in the console so I guess the script is fine. Its just not showing the list for some reason...


Syntax: [ Download ] [ Hide ]
$("#name_id").empty().append($nodes); // shouldnt it be ean_id here instead of name_id?
                if (result[0] == -1) {
                    $("#ean_list_id").hide();
                } else {
                    $("#ean_list_id").empty().append($nodes.clone(true)).show();
                }
 


i tried changing name_id to ean_id (the ean_id should be connected to the list ean_id_list ) but its not working anyway...


Edit: from browseproduct php page

Syntax: [ Download ] [ Hide ]
ob_start();
        ?>
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml">
            <head>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                <link rel="stylesheet" href="style/productform_style.css" />
                <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
                <script type="text/javascript" src="js/browsescript.js"></script>          
            </head>
 
            <body>
                <div class="container">        
                    <div class="content">
                        <table>
                        <tr>    
                        <form>
                            <td><div class="label_div">Enter EAN code: </div></td>
                            <td><div class="input_container">
                                <input type="text" id="ean_id" autocomplete="off" placeholder="Search EAN here.." onkeyup="autocomplet()">
                                <ul id="ean_list_id"></ul>
                            </div></td>
                           
                        </form>
                        </tr>
                        <tr>
                            <td><div class="label_div">Product name: </div></td>
                            <td><div class="input_container">
                                <input type="text" id="name_id">
                            </div></td>
                        </tr>
                       
                        </table>
                    </div><!-- content -->    
                </div><!-- container -->
            </body>
        </html>
        <?php
        $content=ob_get_contents();
        ob_end_clean();
 


Top
 Profile  
 
PostPosted: Fri Sep 08, 2017 3:16 pm 
Offline
Spammer :|
User avatar

Joined: Wed Oct 15, 2008 2:35 am
Posts: 6556
Location: WA, USA
> onclick:null << I dunno if this is ok though or if it should say to call the set_item()?
That will be the actual "onclick" attribute. It should be empty. The .click thing with jQuery uses a different, modern mechanism that probably won't be visible with a console.log().

> // shouldnt it be ean_id here instead of name_id?
I copied what you had in the first post:
Syntax: [ Download ] [ Hide ]
$('#ean_list_id').html(text);
$('#name_id').html(text);


According to that HTML, #ean_list_id is the only thing that can have the LI items. #name_id and #ean_id are both text inputs and those cannot contain list items (because they're not lists).


Top
 Profile  
 
PostPosted: Fri Sep 08, 2017 6:01 pm 
Offline
Forum Contributor

Joined: Wed Sep 25, 2013 4:09 am
Posts: 153
I still can not get it to work and I do not really follow whats happening with the node part.

I'm very new to the entire jquery thing.. the $ sign is the same as jquery (overloaded) function right?

Syntax: [ Download ] [ Hide ]
var $nodes = $();

So this say var $nodes is a jquery function?

Syntax: [ Download ] [ Hide ]
$.each(result, function(key, value) {
                    var $li = $("<li></li>").text(value.ean);
                   
                    $li.click(function() {
                        set_item(value.ean);
                    });
                });
 

Here you go through the array result[] and I guess the $li consist of like an "outher shell" (<li></li>) that surrounds the inner part (text). (Or when thinking really hard, i guess the (<li></li>) part defines the var $li as a list item function...)
Then you set what happens if i click on $li .. to call the function set_item

Syntax: [ Download ] [ Hide ]
$("#name_id").empty().append($nodes);
 

Here my brain starts to melt...

Syntax: [ Download ] [ Hide ]
if (result[0] == -1) {
                    $("#ean_list_id").hide();
                } else {
 

same as myscript... if the php file returns -1 it means no match and ean_list is hidden..

Syntax: [ Download ] [ Hide ]
} else {
                    $("#ean_list_id").empty().append($nodes.clone(true)).show();
                }
 

and looking at this my brain is starting to evaporate....
are you removing something from ean_list_id (with the .empty()) and then you insert $nodes ...that are deep copied from something and shows it all (in the ean_list_id)???

I try to follow this but my brain really hurts.. the $nodes are still just some empty $() to me... where do you (or do you..) put the $li into the $nodes?

Maybe I got it all backwards but it is really hard to try and figure it out..

why wont the damn li thingies show up in my list? When I echo to console clearly there are some $items <li>Ean code from DB</li> there... but I can't find a way to get them from the console to the ean_list.

Edit: If I look very closely it looks like the list show (1px line) when I enter a valid ean code and then dissapere when the typed in value doesnt fit any ean anylonger.. So it seems that the script might be working just that the list items doesn't show up?

Ok so I changed the height of the list so it shows clearly and as long as I type in valid numbers the list (empty) is showing but as soon as I enter the wrong number it dissaperes so it seems to be working as intended except that it is empty?


Last edited by hybris on Sat Sep 09, 2017 7:18 am, edited 1 time in total.

Top
 Profile  
 
PostPosted: Sat Sep 09, 2017 7:10 am 
Offline
Spammer :|
User avatar

Joined: Wed Oct 15, 2008 2:35 am
Posts: 6556
Location: WA, USA
> So this say var $nodes is a jquery function?

The $ function has a few uses:
- $(function) will call the function once the page has been loaded
- $(string) will use the string as a selector to find elements
- $(array) will construct a jQuery list of elements from the array
- $(nodelist) is like the array form but works when using native document methods to find elements

$() is none of the above but behaves like the $(array) version. Since there's nothing in there, it returns an empty jQuery list, just like if you had used $(string) with a selector that didn't match anything.

Thinking about it now, $([]) would have been better because it's more clear as to what it's doing: setting up an empty jQuery list.

> Here my brain starts to melt...
.empty() removes all children from an element. Before you were adding stuff by setting the inner HTML, which obviously replaces whatever was in there. Since my method adds elements, the code needs to make sure the old list (if any) gets removed. Thus the .empty().

Then .append() to add the list of nodes...

...ah. Right.

Then .append() to add the list of nodes the code built up into #name_id. Except the code never actually added anything to $nodes.
There needs to be a $nodes.add($li) in the loop.

> and looking at this my brain is starting to evaporate....
It's basically the same as the other version: remove the children, append $nodes, and then show the list (since it may have been hidden earlier).

But there's a gotcha. Since it added $nodes to #name_id earlier, if the code then tries to add them to #ean_list_id then the existing elements will just be moved over. The .clone(true) is to make sure that it appends an exact copy of $nodes, not the original nodes themselves; the true is because normally .clone() won't copy things like event listeners, meaning the .click() from before would be ignored and clicking would only work on what was in #name_id (which has the original $li elements and therefore their click handlers too).

> put the $li into the $nodes?
Exactly what I noticed. That's the bug.


Top
 Profile  
 
PostPosted: Sat Sep 09, 2017 8:02 am 
Offline
Forum Contributor

Joined: Wed Sep 25, 2013 4:09 am
Posts: 153
requinix wrote:
>
> put the $li into the $nodes?
Exactly what I noticed. That's the bug.


Aha ok then it's a little easier to follow. I couldn't for the world understand how you put the $li in the $nodes or if there was some wierd jquery function that did it automatically but then I couldn't figure out how the function would know to put in $li and not any other variable heh.

Bad news is the items still wont show up :(

Syntax: [ Download ] [ Hide ]
function autocomplet() {
        var min_length = 0; // min caracters to display the autocomplete
        var keyword = $('#ean_id').val();
        if (keyword.length >= min_length) {
                $.ajax({
                        url: 'ajax_php/ajax_browserefresh.php',
                        type: 'POST',
                        data: {keyword:keyword},
                        success:function(data){
                            var result = JSON.parse(data);                     
                            var $nodes = $([]);  // tried both with and without the []
                           
                $.each(result, function(key, value) {    
                    var $li = $("<li></li>").text(value.ean);
                                               
                    $li.click(function() {
                        set_item(value.ean);
                    });
                    $nodes.add($li); //I guess this would be the place to put it? (also tried putting it before click function)
                });
               
               // $("#name_id").empty().append($nodes); // I guess it doesnt matter for the list if i comment this out (i tried with it and with ean_id but no luck)
               
                if (result[0] == -1) {
                    $("#ean_list_id").hide();
                } else {
                    $("#ean_list_id").empty().append($nodes.clone(true)).show();
                }
                        }
                });
        } else {
                $('#ean_list_id').hide();
        }
}
 
// set_item : this function will be executed when we select an item
function set_item(item) {
        // change input value
        $('#ean_id').val(item);
        // hide proposition list
        $('#ean_list_id').hide();
        $('#name_id').show();
        //$('#name_id').val(name);
}

 


Top
 Profile  
 
PostPosted: Sat Sep 09, 2017 8:46 am 
Offline
Spammer :|
User avatar

Joined: Wed Oct 15, 2008 2:35 am
Posts: 6556
Location: WA, USA
- With and without [] apparently work the same, before or after the .click doesn't matter.
- If you're not using #name_id then you can remove the .clone(true) from the line for #ean_list_id since the reason it was needed is not longer the case.
- After the loop, what does console.log($nodes) show?
- What does console.log(result[0]) show?
- Using the browser tools to inspect the page, look at the #ean_list_id <ul>. Do you see any <li>s in it? Does it have any inline CSS saying whether it's visible or hidden?


Top
 Profile  
 
PostPosted: Sat Sep 09, 2017 1:37 pm 
Offline
Forum Contributor

Joined: Wed Sep 25, 2013 4:09 am
Posts: 153
requinix wrote:
- After the loop, what does console.log($nodes) show?


If i log $li to console from within the loop and $nodes after the loop and type in 7 (I have 5 EAN in DB that start with 7) I get:

5 x [li] in the console and
1 x [] <- this is nodes

Syntax: [ Download ] [ Hide ]
$.each(result, function(key, value) {
                    //console.log(key);
                    //console.log(value.ean);
                    var $li = $("<li></li>").text(value.ean);
                    $li.click(function() {
                        set_item(value.ean);
                    }); //console.log($li.click);
                    console.log($li);
                    $nodes.add($li); //Ny vet ej om den ska vara här
                });
                console.log($nodes);
               
               // $("#name_id").empty().append($nodes);
 


When I open a $li it says
Syntax: [ Download ] [ Hide ]
>[0]: li
          length:1
>__proto__: Object(0)
 


when I click the $nodes it just says
Syntax: [ Download ] [ Hide ]
length:0
>__proto__: Object(0)
 


So I guess the $nodes is empty


requinix wrote:
- What does console.log(result[0]) show?

it works as intended. When i type in a valid number it shows
Syntax: [ Download ] [ Hide ]
{ean: 734222, gs1_class: null, gs1_brick: null, gs1_core: null, gs1_type: null, …}
 

when i type something not in DB it shows -1

requinix wrote:
- Using the browser tools to inspect the page, look at the #ean_list_id <ul>. Do you see any <li>s in it? Does it have any inline CSS saying whether it's visible or hidden?


Yeah it has css to tell it start hidden then the function turns it visible. I changed it from no height (where I just barely noticed the border of ean_id change bottom color) to show the list min 10 px high.
This way I see that when i type a "valid number" in the box the list show (10px high) but it is empty. It continue to show until i type some number that doesnt match the DB then it dissapere.. so it seems like the showing and hiding of the list is working, it is just empty.

Example say I only have 1 EAN stored in the database 76543
When i then type 8 in the field i see no list
if i erase and type 7 the list pops up..6..list is still there...5...list is still there...9..list dissapere...erase 9...list pops up...4..list is still there...

so that part is working...

Edit: I sent you a pm with login info if you want to check out the console yourself.
Console is
$Li
$nodes
$result[0]


Top
 Profile  
 
PostPosted: Sat Sep 09, 2017 2:51 pm 
Offline
Spammer :|
User avatar

Joined: Wed Oct 15, 2008 2:35 am
Posts: 6556
Location: WA, USA
Ah. They say it right there in the documentation, it's just so unexpected that I didn't think to read.

.add returns a new jQuery list. It doesn't modify the original.
Syntax: [ Download ] [ Hide ]
$nodes = $nodes.add($li);


Top
 Profile  
 
PostPosted: Sat Sep 09, 2017 3:46 pm 
Offline
Forum Contributor

Joined: Wed Sep 25, 2013 4:09 am
Posts: 153
Thank you!!

Yeah now it works but something is messed up with the css so I only see part of the list but Im sure I'll figure it out.

I really appreciate your help, I learned a lot (or atleast i think i did hah...well I learned about console atleast :D) messing around with this. I never did javascript before or jquery so it takes a while to figure it out but it's a really fun break from just php :)

Edit: Fixed css just had to clear the cache.. Awesome, so now I'm back to where I started this thread lol but I got a much cooler function. So I went from having the php page echo <li>$result</li> to move the echo part to the js instead to change the js to this very nice script. My brain still hurts but atleast I didn't get a stroke :)

One thing that still bugs me ($nodes.add($li):

requinix wrote:
- /../ before or after the .click doesn't matter.


why put the $li.click(function) inside the $.each(result) loop if not to add it to each $li? And if you add it to each $li wouldn't i miss the click function if I add $li to $nodes before the click function?

I thought the loop was making:
1. a new $li erasing anything previously stored in $li (since not $li = $li + $li)
1b. Add the li and ean to $li
2. add to $li what to do if clicked
3. add $li to $nodes (here you DO have $nodes = $nodes + ... ) so this will retain its old value through the loops while $li is erased in 1st step.

if I'd put the $nodes.add($li) first thing in the loop before var $li= ... wouldn't the first $node be undefined? and the second $node = the first ean number and the last ean number not stored?




A totally different note.. when I log into these forums to post or reply I always have to log in 2 times in a row.. first I type in name and pw and i come to the page that redirects then Im sent back to the login and have to log in again and then im taken to the post.. Bug?


Top
 Profile  
 
PostPosted: Sun Sep 10, 2017 10:58 am 
Offline
Forum Contributor

Joined: Wed Sep 25, 2013 4:09 am
Posts: 153
Another question.. Im trying to setean upon pressing enter. Just to try I try to set a fixed value (8989)

It works for a sec and then the ean_id goes blank again. When I step through in console it works and sets the 8989 in the correct field. When exiting the set function and returning to the end of the keypress function }); 8989 is still visible but then the it dissaperes again when exiting the function?


Syntax: [ Download ] [ Hide ]
function autocomplet() {
   
    $('#ean_id').keypress(function(e) {  //Ska nog göra en if else if enter ... else gå vidare enl nedan..
        if(e.which == 13) {
            //alert('You pressed enter!');
                //$('#name_id').val("You pressed enter");
                set_item('8989');
        }
    });  // It works like intended to after returning from set_item(). Then suddenly the value is cleared and the debugging stops.
   
        var min_length = 0; // min caracters to display the autocomplete
        var keyword = $('#ean_id').val();
        if (keyword.length >= min_length) {
                $.ajax({
                        url: 'ajax_php/ajax_browserefresh.php',
                        type: 'POST',
                        data: {keyword:keyword},
                        success:function(data){
                            var result = JSON.parse(data);
                            var $nodes = $([]);
                           
                $.each(result, function(key, value) {
                    var $li = $("<li></li>").text(value.ean);
                    $li.click(function() {
                        set_item(value.ean);
                        set_item_in('name_id', value.name); //aand so on
                    });
                    $nodes=$nodes.add($li);
                });
               
               //$("#ean_id").empty().append($nodes);
                if (result[0] == -1) {
                    $("#ean_list_id").hide();
                } else {
                    $("#ean_list_id").empty().append($nodes.clone(true)).show();
                }
                        }
                });
        } else {
                $('#ean_list_id').hide();
        }
}
 
// set_item : this function will be executed when we select an item
function set_item(item) {
        // change input value
        $('#ean_id').val(item);
        // hide proposition list
        $('#ean_list_id').hide();
        $('#name_id').show();
        //$('#name_id').val(name);
}
 


Top
 Profile  
 
PostPosted: Sun Sep 10, 2017 2:21 pm 
Offline
Spammer :|
User avatar

Joined: Wed Oct 15, 2008 2:35 am
Posts: 6556
Location: WA, USA
> if I'd put the $nodes.add($li) first thing in the loop
Well yes, don't put it before the var statement. I figured that was obvious. So anywhere inside the loop callback, after the var statement, and before or after the .click.

> Bug?
Do you have it remembering your login?

> It works for a sec and then the ean_id goes blank again.
Hitting Enter normally submits a form. That "blank again" is the page reloading.

You do need to fix how the form works, but besides that the autocomplete nature of the textbox means you should prevent the form submission behavior - preferably just while the autocomplete list is up.

1a. Remember that autocomplet() runs when the user presses a key. That is not the time to be adding a .keypress handler. Something like that should be done when the page first loads using $(function() { ... }).
1b. autocomplet() is itself a keypress handler already. Reuse it instead of adding a new handler.
2. Use e.preventDefault() to prevent the default behavior of the event.

Now is also a good time to stop using onkeypress in your HTML and put an event handler on the #ean_id the right way.

Syntax: [ Download ] [ Hide ]
<input type="text" id="ean_id" autocomplete="off" placeholder="Search EAN here..">
 

Syntax: [ Download ] [ Hide ]
$(function() {
        $("#ean_id").keypress(function(e) {
                // Ska nog göra en if else if enter ... else gå vidare enl nedan..
                if (e.which == 13) {
                        set_item('8989'); // replace with code to select the first/selected entry
                        e.preventDefault(); // stop Enter from having its default behavior
                        return; // stop processing
                }

                // autocomplete
                var min_length = 0; // min caracters to display the autocomplete
                var keyword = $('#ean_id').val();
                ...
        });
});

// set_item : this function will be executed when we select an item
function set_item(item) {
        // change input value
        $('#ean_id').val(item);
        // hide proposition list
        $('#ean_list_id').hide();
        $('#name_id').show();
        //$('#name_id').val(name);
}
 


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 35 posts ]  Go to page 1, 2, 3  Next

All times are UTC - 5 hours


Who is online

Users browsing this forum: No registered users and 2 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group