We Keep Coding

How could I call a JQuery function upon a button click?

I have a JQuery function that fetches and displays a page worth of images through the use of JSON files. I want to display the next set of images upon a button click, but that requires adding on a short string to the request url, which is found and stored in a var when I first run the script. I need to call this JQuery function again and pass the string var to it (lastId in code below). I am an utter noob with JavaScript in general and don't know how to go about doing that.
Here is a full version of the code:
$(function runthis(un){
var lastId;
un = typeof un !== 'undefined' ? un : "";
$('#domainform').on('submit', function(event){
event.preventDefault();
$('#content').html('<center><img src="img/loader.gif" alt="loading..."></center>');
//var lastId;
var domain = $('#s').val();
var newdomain = domain.replace(/\//g, ''); // remove all slashes
var requrl = "http://www.reddit.com/r/";
var getmore;
getmore = "?after=t3_"+un;
var fullurlll = requrl + domain + ".json" + getmore;
$.getJSON(fullurlll, function(json){
var listing = json.data.children;
var html = '<ul class="linklist">\n';
for(var i=0, l=listing.length; i<20; i++) {
var obj = listing[i].data;
var votes = obj.score;
var title = obj.title;
var subtime = obj.created_utc;
var thumb = obj.thumbnail;
var subrdt = "/r/"+obj.subreddit;
var redditurl = "http://www.reddit.com"+obj.permalink;
var subrdturl = "http://www.reddit.com/r/"+obj.subreddit+"/";
var exturl = obj.url;
var imgr = exturl;
var imgrlnk = imgr.replace("target=%22_blank%22","");
var length = 14;
var myString = imgrlnk;
var mycon = imgrlnk;
var end = mycon.substring(0,14);
myString.slice(-4);
var test1 = myString.charAt(0);
var test2 = myString.charAt(1);
var timeago = timeSince(subtime);
if(obj.thumbnail === 'default' || obj.thumbnail === 'nsfw' || obj.thumbnail === '')
thumb = 'img/default-thumb.png';
if(end == "http://i.imgur" ){
$("#MyEdit").html(exturl);
html += '<li class="clearfix">\n';
html += '<img src="'+imgrlnk+'" style="max-width:100%; max-height:750px;">\n';
html += '</li>\n';
html += '<div class="linkdetails"><h2>'+title+'</h2>\n';
/*html += '<p class="subrdt">posted to '+subrdt+' '+timeago+'</p>'; /*'+test1+test2+'*/
html += '</div></li>\n';
}
if (listing && listing.length > 0) {
lastId = listing[listing.length - 1].data.id;
} else {
lastId = undefined;
}
} // end for{} loop
htmlOutput(html);
}); // end getJSON()
}); // end .on(submit) listener
function htmlOutput(html) {
html += '</ul>';
$('#content').html(html);
}
});

The way you currently are executing the function run this doesn't ever leave you a handle to that function. This means it only really exists in the context of document.ready (what $(function()) is a shortcut for).
What you want to do instead is to keep a reference to this function for later use.
If you want to be able to put it directly into an onclick='' you will need to put the function in global,
eg:
var myFunction = function() { /*Stuff here*/}
$(myFunction)
this declares a function called myFunction and then tells jQuery to execute it on document ready
Global is generally considered pretty naughty to edit. One slightly better option would be to assign the click to the button inside your javascript
eg:
$(function(){
var myFunction = function() { /*Stuff here*/}
myFunction(); //call it here
$('#my-button-id').click(myFunction);//attach a click event to the button
)
This means that the function myFunction only exists in the scope of your document.ready, not in global scope (and you don't need onclick='' at all)

tTo add listener on some event you can use live('click',function(){}) Like yhis:
<div id="my-button">some content</div>
<script type="text/javascript">
$('#my-button').live('click',function(){
//your code
})
</script>

Select On Change not working correct

I have a select option that calls a function that needs to be triggered on change. But now it's triggered when the page is loaded and on change. See below:
$(function () {
$('select[id^="iZondagbegin_"]').on('change', uren("Zondag"));
$('select[id^="iZondageinde_"]').on('change', uren("Zondag"));
$('select[id^="iMaandagBegin_"]').on('change', uren("Maandag"));
$('select[id^="iMaandageinde_"]').on('change', uren("Maandag"));
$('select[id^="iDinsdagbegin_"]').on('change', uren("Dinsdag"));
$('select[id^="iDinsdageinde_"]').on('change', uren("Dinsdag"));
$('select[id^="iWoensdagbegin_"]').on('change', uren("Woensdag"));
$('select[id^="iWoensdageinde_"]').on('change', uren("Woensdag"));
$('select[id^="iDonderdagbegin_"]').on('change', uren("Donderdag"));
$('select[id^="iDonderdageinde_"]').on('change', uren("Donderdag"));
$('select[id^="iVrijdagbegin_"]').on('change', uren("Vrijdag"));
$('select[id^="iVrijdageinde_"]').on('change', uren("Vrijdag"));
$('select[id^="iZaterdagbegin_"]').on('change', uren("Zaterdag"));
$('select[id^="iZaterdageinde_"]').on('change', uren("Zaterdag"));
function uren(dag) {
var vandaag = datumvandaag();
var pauze = ($('[title="Pauze"]').val());
var error;
$('input[id^="i' + dag + '_"]').val("");
//get values
var tijdStart = ($('select[id^="i' + dag + 'begin_"]').val());
var uurStartControle = +($('select[id^="i' + dag + 'begin_"]').val());
tijdStart += ":" + ($('select[id^="i' + dag + 'begin_"]').filter("[id$='_$DateTimeFieldDateMinutes']").val());
var minutenStartControle = +($('select[id^="i' + dag +'begin_"]').filter("[id$='_$DateTimeFieldDateMinutes']").val());
//var datezondagstart = new Date(vandaag + tijdstart + ":00");
var tijdStop = ($('select[id^="i' + dag + 'einde_"]').val());
var uurStopControle = +($('select[id^="i' + dag + 'einde_"]').val());
tijdStop += ":" + ($('select[id^="i' + dag + 'einde_"]').filter("[id$='_$DateTimeFieldDateMinutes']").val());
var minutenStopControle = +($('select[id^="i' + dag + 'einde_"]').filter("[id$='_$DateTimeFieldDateMinutes']").val());
if (uurStartControle >= uurStopControle && minutenStartControle >= minutenStopControle || uurStopControle <= uurStartControle) {
alert("Tijd is ongeldig!");
error = 1;
}
if (error != 1) {
var totaleTijd = tijdsverschil(tijdStart, tijdStop, pauze);
if (totaleTijd != '00:00') {
$('input[id^="i' + dag + 'uren_"]').val(totaleTijd);
}
else{
alert("Tijd is ongeldig!");
}
}
}
});
Any one have an idea what i'm doing wrong? I'm i call it the wrong way?

Currently You are calling uren function when you are using uren("Zondag"). You should use an anonymous function as event handler and call uren function.
Use it like
$('select[id^="iZondagbegin_"]').on('change', uren("Zondag"));
To:
$('select[id^="iZondagbegin_"]').on('change', function () {
uren("Zondag");
});
I would recommend, You to use data-* attributes to store what need to be passed to change event handler.
Example:
HTML, Here Added a cooom class mySelect
<select class="mySelect" id="iZondagbegin_1" data-value="Zondag"> .... </select>
<select class="mySelect" id="iMaandagBegin_" data-value="Maandag"> .... </select>
Script
$('.mySelect').on('change', function () {
uren($(this).data('value'));
});

There's already two answers that point out your issue; an alternative solution is to let jQuery handle contexts with $.proxy:
$('select[id^="iZondagbegin_"]').on('change', $.proxy(uren, null, "Zondag");
More info here

Please change all lines like:
$('select[id^="iZondagbegin_"]').on('change', uren("Zondag"));
To:
$('select[id^="iZondagbegin_"]').on('change', uren);
and:
<select id="iZondagbegin_...." data-value="Zondag">.....</select>
and:
function uren() {
var value = $(this).data('value');
//.....
}
Or better still, use a common class, .myclass say, on all the select elements and do the binding with one statement.
$('select.myclass').on('change', uren);
.....
<select id="iZondagbegin_...." data-value="Zondag" class="myclass">.....</select>
.....
function uren() {
var value = $(this).data('value');
//.....
}
When you pass arguments like that or when you provide (), the function will be invoked immediately. You don't want that.

Cant find Element

So I want to write out the text inside input value item and make a another node to right of the text. But this text just shows [object HTMLParagraphElement] next to the text in the input, why doesnt it shows the text?
I dont know what I do wrong, please help me!
so the text from the input is showed but not the other p element I made?
Here is the code:
var lista = document.getElementById("lista");
var li = document.createElement("li");
var del = document.createElement("p");
var delt = document.createTextNode("remove this");
del.appendChild(delt);
var item = document.getElementById("item");
var text = document.createTextNode(item.value + " | " + del);
li.appendChild(text);
lista.appendChild(li);

You don't need to create text nodes to append the text. Just set the innerHTML on the elements you are creating:
var myPar = document.createElement('p');
myPar.innerHTML = "remove this";
li.innerHTML = myPar.outerHTML; //this would be the tag and its text <p>remove this</p>
// other code here.
Demo Fiddle

the problem is the line
var text = document.createTextNode(item.value + " | " + del);
at this time ,the 'del' referenced a paragraph element,
you could have "del.innerHtml" instead of 'del'

Change your code to use del.innerHTML.
var text = document.createTextNode(item.value + " | " + del.innerHTML);
the argument of document.createTextNode must be a string.And the innerHTML is the html code of a element object.

http://jsfiddle.net/4YgXG/
HTML:
<ul id="lista"></ul>
Js:
// EXAMPLE!
var lista = document.getElementById("lista");
var item = document.getElementById("item");
for(var i=0;i<100;i++){
var li = document.createElement("li");
var del = document.createElement("p");
del.innerHTML = 'Remove this';
li.appendChild( del );
lista.appendChild(li);
}

jQuery call function with each item in selection

I am trying to call a function using each object found in jQuery selection
a
b
c
d
Each a element has a data-code value:
<p class="output" data-value="1"></p>
<p class="output" data-value="2"></p>
<p class="output" data-value="3"></p>
Each p element has a data-value:
$(document).ready(function () {
$(".can-click").click(function () {
var code = $(this).data("code");
$("output").each(Display(code));
});
});
What I want is that when you click on the anchor a you will get an alert showing you the data-code from the anchor clicked and the data-value for each p, with the code attached I want 3 alerts to pop up.
function Display(code) {
var p = $(this);
var value = p.data("value");
alert(code + " " + value);
}
Here is a link to the code in jsfiddle: http://jsfiddle.net/mikeu/XFd4n/

You have to use . for class-selectors and pass this object when you are calling Display function like,
$(document).ready(function() {
$(".can-click").click(function(e) {
e.preventDefault();
var code = $(this).data("code");
$(".output").each(function() { // use . for class selectors
Display(code, this); // pass this from here
});
});
});
function Display(code, ths) { // ths = this, current output element
var p = $(ths), // use ths instead of this
value = p.data("value");
console.log(code + " " + value);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
a
b
c
d
<p class="output" data-value="1"></p>
<p class="output" data-value="2"></p>
<p class="output" data-value="3"></p>

Try this:-
You need to pass in function reference to the obj.each callback. obj.each(Display(code)) is wrong, it should be obj.each(Display) ; but since here you want to pass in the variable, you can invoke it inside an anonymous function.
Demo
$(".output").each(function(){
Display(code, this)});
});
Script
$(document).ready(function () {
$(".can-click").click(function () {
var code = $(this).data("code");
$(".output").each(function(){
Display(code, this)});
});
});
function Display(code,$this) {
var p = $($this);
var value = p.data("value");
alert(code + " " + value);
}

cannot set selectedIndex off select with javascript

I have this code and I keep getting undefined if I test the selectedIndex.
alert(x.selectedIndex);
So, setting it is also a problem.
Does anyone possibly see what the problem is?
//makes list off tags
function ttyps_select(data,naamsel,selectid, containerid){
if(!ttyps.length){
jQuery.each(data, function(index, itemData) {
ttyps.push( new Tagtype(itemData.tag_id, itemData.tag ));
});
}
opties = "<option value=\"-1\"></option>\n";
for(var i=0; i<ttyps.length; i++) {
var dfnkey = ttyps[i].tag_id;
var dfnsel = ttyps[i].tag;
if (dfnkey==selectid) {
opties +="<option value="+ttyps[i].tag_id+" SELECTED>"+dfnsel+"</option>\n";
} else {
opties +="<option value="+dfnkey+">"+dfnsel+"</option>\n";
}
}
$("<select name=\"" + naamsel + "\" size=\"1\" ></select>")
.html(opties)
.change(function(e){
select_tag(containerid);
})
.appendTo("#"+naamsel);
}
function select_tag(id) {
var x = $('#frmttypid'+id+' select');
var ttidx = x.val();
var tag = getTagtype(ttidx).tag;
x.selectedIndex=0;
x.blur();
if( tag ){
document.forms['frmtags']['frmtag'+id].value=tag;
}
}
thanks, Richard

$('selector') (jQuery) returns an object with array-like collection of matched DOM nodes. Your x variable is an jQuery object, not a reference to any particular <select/> element. use
x[0].selectedIndex
x[0] is a reference to the first DOM node in the jQuery object.