I am a newbie in jQuery, obviously I don't really understand some basics, although I have read some tutorials.
I Have two buttons:
<a id="test1" onclick="getbyText()" displaymode="newcontent/events/newest">News 1</a>
<a id="test2" onclick="getbyVar()" displaymode="newcontent/events/oldest">News 2</a>
<a id="test_output"> - - -</a>
I want to use them to load content of a div with id="dashcontent"
My Route looks like this:
Route::get('newcontent/latest_events/{mode}', 'ReportsController@newcontent_partials');
My controller method is this:
public function newcontent_partials($mode)
{
if($mode == 'importance') {
$rnd = rand(4, 5); // just for testing purpose
$top5events = Event1::
->orderBy('id', 'desc')
->take($rnd)
->get();
$test_type = 'ajax OK - OLDEST';
}
else {
$rnd = rand(5, 6);
$top5events = Event1::
->orderBy('id', 'asc')
->take($rnd)
->get();
$test_type = 'ajax OK - NEWEST';
}
return View::make('partials._event_minibox', compact('test_type','top5events','rnd'));
}
My script looks like this:
This works just as expected:
function getbyText() {
$("#dashcontent").toggleClass( "col_12" ); // just to see that the script is working
$('#dashcontent').load('newcontent/latest_events/newest');
}
This works only if load target is delivered as plain text:
function getbyVar() {
$('#test_output').text($('#test2').attr("displaymode")); // printing the value of attr
var linkcode = $('#demo3').attr("displaymode"); // creating the variable
$('#dashcontent').load(linkcode); // THIS WILL NOT LOAD
$('#test_output').text(linkcode); // surprisingly, this one works!!!
}
if in the above code getbyVar function I use
$('#dashcontent').load('newcontent/latest_events/newest');
then the thing is working as expected
Please help me to solve these two problems:
Make the loading div content work with the variable displaymode. Note: it can be a different solution than the one I am trying to implement.
Make the function work extract the attr("displaymode") of the element which is clicked.
not from an element with specified ID. I have tried this:
var linkcode = $(this).attr("displaymode");
but contrary to examlpes I have found on-line, in case of my code doesn't work.
Any help appreciated. Thx
I don't see any id "demo3" in your markup code:
$('#demo3').attr("displaymode"); // creating the variable
I guess you want to use the "displaymode" attribute of clicked anchor, so for this you can pass this
as an argument:
onclick="getbyText(this)"
onclick="getbyVar(this)"
then in your functions:
function getbyText(elem) {
// use elem as a clicked elem.
}
function getbyVar(elem) { // elem is clicked element
$(elem).attr("displaymode"); // get the attr of clicked elem
}
Or more unobtrusive way:
$('a[id^="test"]').on('click', function(e){
if(this.id === "test1"){
// code for test1
}else if(this.id === "test2"){
// code for test2
}
});
even you can use switch
cases here.