Solved

' format no matches' works with json but not ajax data for select2

Posted on 2014-12-24
21
1,869 Views
Last Modified: 2015-01-24
Hi

If my select2 is populated with json and no matches are found works with format no matches. However if I my data is populated by ajax I am not notified in any way that no matches are found. There is nothing I can hook into to take appropriate action

<!DOCTYPE html>
<html>
    <head>
        <link href="js/select2.css" rel="stylesheet"/>
        <meta charset="UTF-8">
        <title>Select2 tests</title>
    </head>
    <body>
        <script src="js/jquery-1.11.1.min.js"></script>
        <script src="js/select2.js"></script>
        <label>Select2 with prepopulated data  (e2)  </label>  
        <input type="hidden" name="optionvalue" id="e2" class="input-xlarge" data-placeholder="Choose An Option.." />  
        <br/>
        <label>Select2 with Ajax data  (e3)   </label>  
        <input type="hidden" name="optionvalue" id="e3" class="input-xlarge" data-placeholder="Choose An Option.." />  
        <br/>
 
        <script>
                   var a = [{"id": "15", "text": "arc"}, {"id": "18", "text": "cat"}, {"id": "12", "text": "con"}];
            $('#e2').select2({
                data: a,
                formatNoMatches: function (term) {
                    alert("No Matches in E2 box");
                },
            });
            $('#e3').select2({
                // minimumInputLength: 2,
                // tags:true,
                // multiple: true,
                formatNoMatches: function (term) {
                    alert("No Matches E3 box");
                },
                ajax: {
                    url: 'functions.php',
                    dataType: 'json',
                    data: function (term, page) {
                        return {
                            q: term
                        };
                    },
                    results: function (data, page) {
                        return {results: data};
                    }
                },
            });
           
        </script>
    </body>
</html>

Open in new window


In the e3 select2 the alert box is never shown indicating the function is never called so I cannot respond when there are no matches. The alert for e2 is shown.

Both controls reduce the number of items in the select as you type but in e3 the format no matches is never triggered. The text that you type (that does not exist) stays displayed in the select2. A message appears saying 'no results found' but for some reason this isnt triggered so i cant respond.

 formatNoMatches: function (term) {
                    alert("No Matches E3 box");
                },

Many thanks
0
Comment
Question by:andieje
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 10
  • 9
21 Comments
 
LVL 55

Expert Comment

by:Huseyin KAHRAMAN
ID: 40517075
select2.js ??? can you attach it?

i guess you need to post a test link since it uses functions.php and without seeing what is happening, i cannot say anything...
0
 

Author Comment

by:andieje
ID: 40517819
please could you be clearer in your request as i hav posted the full page exept for populing select2 with ajax

thaks
0
 

Author Comment

by:andieje
ID: 40517821
i have posted the full page - the only thing missing is populating the page with ajax but ive just had anew router so i need to check the security
0
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 
LVL 55

Expert Comment

by:Huseyin KAHRAMAN
ID: 40517822
<script src="js/select2.js"></script>

what is this? did you post the code for this? or a link where we can find it?
also, code for functions.php ???

did you post anything related to javascript errors?

when you run in browser, and press F12, and open the console you should be seeing some errors...

so, what I am saying is, with so many unknons, we cannot help you much, unless you post a link to a demo/working site...
0
 

Author Comment

by:andieje
ID: 40517823
i use xampp. I can post the appropriate htdocs folder and and sql dump

thanks
0
 
LVL 55

Expert Comment

by:Huseyin KAHRAMAN
ID: 40517824
and I am guessing that select2 is here
0
 

Author Comment

by:andieje
ID: 40517841
yes but the code is in js/select2.js

when i post and look for errors with f12 i have to close the browser if an error is found (not the end of the world) and run the page again

select2 is definitely loading as can be seen in google resources F12

select 2 works on other pages with other functionality but not this
0
 
LVL 55

Expert Comment

by:Huseyin KAHRAMAN
ID: 40517848
there should be some errors like, cross domain security issues or something like that... check console for any errors...
0
 

Author Comment

by:andieje
ID: 40517870
There are no errors in the console or developer tools. Is there anywhere else i can look for errors/.
I will post these examples on line the day after boxig day if you are prepared to look

Much obliged
0
 
LVL 55

Expert Comment

by:Huseyin KAHRAMAN
ID: 40517889
i found a page says, there is a bug in select2.js

if you comment out this line

"this.dropdown.on("click", killEvent);"

it may work...
0
 
LVL 55

Expert Comment

by:Huseyin KAHRAMAN
ID: 40517891
check this forum
they say it will be fixed in 2.4... maybe this may also work (from developers)

var options = {
    formatNoMatches: function (term) {
        return 'No user matches "' + term + '".<br/><span class="fake-link" data-click="more-users">Click&nbsp;here</span> for more...';
    }      
};
$input.select2(options)
    .select2('data', myDataArray)
    .select2('open');

// HACK: add click events in the "no results page" template in formatNoMatches function
// This works because there is only one select2 dropdown at a time and we know it is already open from the previous line
$('#select2-drop').click(function (e) {
    if ($(e.target).data('click') === 'more-users') {
        // DO SOMETHING NOW THAT THE LINK WAS CLICKED
    }
});

Open in new window

0
 
LVL 55

Expert Comment

by:Huseyin KAHRAMAN
ID: 40517892
or instead of using alert(), maybe you should show an error message on the page (show a hidden div for example)
0
 

Author Comment

by:andieje
ID: 40517898
we are on 3.5.2 now?
0
 

Author Comment

by:andieje
ID: 40517900
re comment: ID: 40517892

Please can you explain what that will achieve or what new informaton it may reveal

thasnk
0
 
LVL 55

Expert Comment

by:Huseyin KAHRAMAN
ID: 40517901
they say it will be fixed in 2.4... maybe this may also work (from developers)

:) it should be Select2 V4.0
0
 
LVL 55

Expert Comment

by:Huseyin KAHRAMAN
ID: 40517902
maybe alert is killed somehow, but instead displaying a hidden div on the page may work...
just an idea... since i cannot test it locally...
0
 

Author Comment

by:andieje
ID: 40518597
How would you use a hidden div to fix it?

 Im a it confued already about the 2 types of select2 and one with a hidden inout and one not as they have inconsistent behaviour.
0
 

Author Comment

by:andieje
ID: 40518607
also

i found a page says, there is a bug in select2.js

if you comment out this line

"this.dropdown.on("click", killEvent);"

it may work...

didnt work :(
0
 
LVL 43

Accepted Solution

by:
Rob earned 500 total points
ID: 40548116
Here is a demo: http://jsbin.com/nubeti/1/edit?html,js,output

essentially you just needed to wrap your javascript on the jquery initializer function

$(function() {
...
});
0
 

Author Closing Comment

by:andieje
ID: 40567956
wickedly ace
0

Featured Post

Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

724 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question