Build me javascript code in Jquery
Budget: $10 – $30 USD
Hello,
I have a PHP array containing a unique ID and other details that can be reached through URL.
What I need is as follows:
Website can contain this code <div data-ident="MyNet" data-number="8"></div> as many times as required. This code can be placed either once or many times in the website.
On loading the website for the first time in browser the jQuery code must send the ajax request to the PHP array URL and get the array data.
The data then must be assigned to <div data-ident="MyNet"... where data-number means the number of array objects.
For example: <div data-ident="MyNet" data-number="8"></div> should contain only 8 objects from the array.
If there are multiple <div data-ident="MyNet"... let's say this way:
<div data-ident="MyNet" data-number="8"></div>
<div data-ident="MyNet" data-number="10"></div>
<div data-ident="MyNet" data-number="4"></div>
<div data-ident="MyNet" data-number="2"></div>
<div data-ident="MyNet" data-number="8"></div>
First "MyNet" should contain first 8 objects from PHP array, next "MyNet" should contain next 10 objects from the PHP array, next "MyNet" should contain next 4 objects from the array.
So, each "MyNet" should contain unique objects.
However, if the array doesn't contain sufficient number of objects, "MyNet" can reach the "data-number" by randomly picking the objects from the array.
Let's say if the PHP array is as follows:
[
{"product":"1"},
{"product":"2"},
{"product":"3"},
{"product":"4"},
{"product":"5"},
{"product":"6"},
{"product":"7"},
{"product":"8"},
{"product":"9"},
{"product":"10"}
]
And on the website we have following divs:
<div data-ident="MyNet" data-number="4"></div>
<div data-ident="MyNet" data-number="4"></div>
<div data-ident="MyNet" data-number="8"></div>
First data-ident="MyNet" will display:
{"product":"1"},
{"product":"2"},
{"product":"3"},
{"product":"4"},
Second data-ident="MyNet" will display:
{"product":"5"},
{"product":"6"},
{"product":"7"},
{"product":"8"},
Third data-ident="MyNet" will display:
{"product":"9"},
{"product":"10"}
{"product":"1"},
{"product":"2"},
{"product":"3"},
{"product":"4"},
{"product":"5"},
{"product":"6"},
Please, note that each data-ident="MyNet" should display the array objects in random sequence.
Note that the PHP URL should be only once called on the first load of the website that contains data-ident="MyNet"(s).
Once the PHP array is loaded it should be stored in Cookie and on every next page refresh the array should be reached from the Cookie until the Cookie expires. The Cookie should expire in 4 Minutes. On page refresh, if the Cookie is expired, the ajax code should get the array from the URL and store it in the Cookie again.
The JavaScript should check if jQuery is available on the page and of not, it should add the jQuery to the page as well.
Something like this probably:
if(typeof jQuery == 'undefined'){
document.write('<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></'+'script>');
}
In each data-ident="MyNet" the array object should be displayed in div classes.
I have a PHP array containing a unique ID and other details that can be reached through URL.
What I need is as follows:
Website can contain this code <div data-ident="MyNet" data-number="8"></div> as many times as required. This code can be placed either once or many times in the website.
On loading the website for the first time in browser the jQuery code must send the ajax request to the PHP array URL and get the array data.
The data then must be assigned to <div data-ident="MyNet"... where data-number means the number of array objects.
For example: <div data-ident="MyNet" data-number="8"></div> should contain only 8 objects from the array.
If there are multiple <div data-ident="MyNet"... let's say this way:
<div data-ident="MyNet" data-number="8"></div>
<div data-ident="MyNet" data-number="10"></div>
<div data-ident="MyNet" data-number="4"></div>
<div data-ident="MyNet" data-number="2"></div>
<div data-ident="MyNet" data-number="8"></div>
First "MyNet" should contain first 8 objects from PHP array, next "MyNet" should contain next 10 objects from the PHP array, next "MyNet" should contain next 4 objects from the array.
So, each "MyNet" should contain unique objects.
However, if the array doesn't contain sufficient number of objects, "MyNet" can reach the "data-number" by randomly picking the objects from the array.
Let's say if the PHP array is as follows:
[
{"product":"1"},
{"product":"2"},
{"product":"3"},
{"product":"4"},
{"product":"5"},
{"product":"6"},
{"product":"7"},
{"product":"8"},
{"product":"9"},
{"product":"10"}
]
And on the website we have following divs:
<div data-ident="MyNet" data-number="4"></div>
<div data-ident="MyNet" data-number="4"></div>
<div data-ident="MyNet" data-number="8"></div>
First data-ident="MyNet" will display:
{"product":"1"},
{"product":"2"},
{"product":"3"},
{"product":"4"},
Second data-ident="MyNet" will display:
{"product":"5"},
{"product":"6"},
{"product":"7"},
{"product":"8"},
Third data-ident="MyNet" will display:
{"product":"9"},
{"product":"10"}
{"product":"1"},
{"product":"2"},
{"product":"3"},
{"product":"4"},
{"product":"5"},
{"product":"6"},
Please, note that each data-ident="MyNet" should display the array objects in random sequence.
Note that the PHP URL should be only once called on the first load of the website that contains data-ident="MyNet"(s).
Once the PHP array is loaded it should be stored in Cookie and on every next page refresh the array should be reached from the Cookie until the Cookie expires. The Cookie should expire in 4 Minutes. On page refresh, if the Cookie is expired, the ajax code should get the array from the URL and store it in the Cookie again.
The JavaScript should check if jQuery is available on the page and of not, it should add the jQuery to the page as well.
Something like this probably:
if(typeof jQuery == 'undefined'){
document.write('<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></'+'script>');
}
In each data-ident="MyNet" the array object should be displayed in div classes.