Showing posts with label javascript. Show all posts
Showing posts with label javascript. Show all posts

Friday, March 2, 2012

Problem with DataTable and FancyBox in Internet Explorer

Working in a project I found a strange problem when I was mixing  FancyBox with DataTable.
Here was the issue, when placing a link inside a table generated with DataTable and this link was set to be handle with FancyBox for showing a 'div' tag, in Mozilla Firefox and Chrome everything worked just fine, but in all Internet Explorer  nothing worked as expected.

So, I used a link as a gateway, when you click in a link inside the DataTable it update the value for the 'gateway' link and later just trigger FancyBox.

Try it your self!
Of course, first download DataTable and FancyBox.

Here is the HTML code:
Email Name
Email Name
To:
Message:


Here is the JavaScript code:








This is what you should see at the end:




Friday, December 9, 2011

Adding more parameters to the GET request in the JQuery UI Autocomplete

Working with the JQuery UI Autocomplete in the remote datasource way, my problem begun when I needed to add more parameters when making the call by GET method. Lucky, I found this  page, but in that example the author was using a simple JSON structure:
[{"name":"name 1"},{"name":"name 2"}]

Here is the URL request


As you can see the parameter term is where we send our request. 

By another hand, isn't explained in the JQuery UI Autocomplete how the JSON should be return. 


Here is the structure
 -id
 -label
 -value

Example 
[{"id":"id 1","label":"label 1","value":"value 1"},{"id":"id 2","label":"label 2","value":"value 2"}]

So, knowing these details I made the little change.

$("#searchBox").autocomplete({ 
    source: function(req,add){
        $.getJSON("source.php?parameter1=param1&meter2=param2", req  , function(data){
            var suggestions = [];
            $.each(data,function(i,val){
                suggestions.push(val);
            });
            add(suggestions);
        });
    },
    select: function(event,ui){
        alert("The ID is "+ui.item.id+" the value is "+ui.item.value);
      },
    change: function(){
     $('#searchBox').val('');
    }
  });


Here an example with the parameter clientid added
Here is how must be the structure of the returned JSON

Thursday, November 17, 2011

Mixing Bing ver. 7, JQuery and JQuery UI with a simple search box.

Working with the Bing API is not so difficult but the most important thing is waste sometime reading and looking the examples in the Big documentation. JQuery is another powerful tool for work more easier JavaScript.

In this example we are going to make that while we are writing in a TextBox, indeed is an Autocomplete, it search in the Bing and if there are more than one result we'll show it as a list of the Autocomplete.




Here is the code, for the easier way to test it, I mixed all in the same *.html.

These are the results:





Is mandatory  to use a Key from Bing to test this code. Make yours before start.