I have the following route in my div tag.
<div class="clickable-element col-lg-3 col-md-6 location-tile js-
location-id" data-href="{{ route('report.file.details', 'id') }}">
<div>Content</div>
</>
How can I use JS to append the end of the route?
My JS builds an object and with the location id name etc. This is what I have but I receive an error saying I'm missing a parameter in my route.
$LocationTile.find('.js-location-id href').attr('href').append(this.locationid);
The attr tag does not inherently get data elements, only the data tag does that. You need to start by changing .attr('href') to .attr('data-href') or .data('href') depending on version of Jquery you are using.
Also, can you share what LocationTile is. Is it another Jquery element? As well as what this represents. Are you looping elements?
Related
I'm looping over a JSON array in VueJS and outputting each item to the screen but I need to create a link/route to a resource controller with the ID being returned for each row like so:
<tr v-for="item in searchResults.group">
<td>
<button type="button" class="btn btn-info btn-sm">Edit</button>
So I've tried putting the variable into the route like so #{{ item.id }} but get the error:
syntax error, unexpected '{' (View: /application/resources/views/admin/edit.blade.php)
The way I have done it is not the correct way obviously but I can't find anything in the documentation to achieve this.
EDIT:
Further input on this. The route function requires a second parameter, in this case, the ID of the item to edit. In pure PHP/Blade I have this and it works:
<button type="button" class="btn btn-info btn-sm">Reduce</button>
For the dynamic search page, I need to somehow pass that second parameter into blade/php from a vuejs variable but I just can't work out how to do it.
You can try this using backtick.
Its works for me. I hope it's helpful for you.
<a :href=`{{ route('admin.edit', '') }}/${item.id}`>
You are mixing two concepts that won't go together like this.
The blade template is rendered server-side, whereas the parts of your vue.js related markup will be parsed on the client side (e.g. "browser").
Because of that, referencing a property of item within a blade expression will fail (as it does).
<a href="{{ route('admin.edit', #{{ item.id }} ) }}"
route(...) refers to an expression that is related to blade, an item is supposed to be a part of your vue.js app.
What you need to do is to dynamically create the link for editing the ressource within your vue.js app once you loop your searchResult.group.
You could achieve this by injecting a "route-template" for editing the ressource into your vue.js app and bind the href property to a vue.js method, like this:
<tr v-for="item in searchResults.group">
<a v-bind:href="getEditLink(item.id)">Edit</a>
....
The according method getEditLink(id) then assembles the actual link based on the given id of item and the provided "route"-template.
You can try by appending the id to the end like so:
{{ route('admin.edit') }}/#{{ item.id }}
I'm guessing you are following a REST URI guides so that would work for you.
Use Like this
Click
I have a div with another div inside it containing an element i - a font awesome icon.
<div id="my-div-thispageme">
<a href="/anotherpage" class="div-menu" title="Edit">
<div>
<img style="vertical-align:middle;" src="/images/icon_pngs/icon.png" height="40px" width="40px">
Page Title <i id="settingsico" class="fa fa-cog fa-lg"></i>
</div>
</a>
</div>
I have had no luck adding a class 'fa-spin' to the i element (with id settingsico) with jQuery.
I have tried variants of both:
$("#my-div-thispageme").mouseover(function() {
$("#my-div-thispageme a div i").addClass("fa-spin");
});
and
$("#my-div-thispageme").mouseover(function() {
$("#settingsico").addClass("fa-spin");
});
but always get an error of
"Cannot read property 'addClass' of null"
Here is a JSFiddle - though I can't get the font-awesome icon to render!
It looks like your top-level div element is this: <div id="my-div">
However, you are using the selector #my-div-thispageme.
Do you mean to use the selector #my-div?
If so, it should be as simple as:
$("#my-div").mouseover(function() {
$("#settingsico").addClass("fa-spin");
});
UPDATE
Due to the error you're getting, it appears that your code thinks the DOM element doesn't exist. This leads me to think that maybe you are calling your code before the DOM has loaded, or that you have created some element dynamically.
If it is the first case, make sure that you either wrap all your jQuery code inside this:
$(function() {
// your code here
});
Or, make sure all your code is at the end of the body.
This first is equivalent to $(document).ready(), and the second waits until the DOM tree has been created for executing any code.
I would like to find out if there is a way to perform certain jQuery UI function (e.g. fadeout() ) on particular DIV if all div has the same name.
The thing is that, the program output data into cast/mold DIV, therefore in HTML, it appears many div of same name.
you can give a particular id to a Div:
<div id="test">.........</div>
and apply jQuery to that div id as:
$("#test").fadeOut("slow");
You can use JQuery selectors similar to CSS that is why if you have multiple divs then you should use classes.
Html
<div class="mydiv">content</div>
<div class="mydiv">aaaa</div>
<div class="mydiv">bbb</div>
JQuery
$("div.mydiv").fadeOut("slow");
this part of code affects every div with class mydiv
More about selectors you can find on JQuery manual selectors
If you know it's relative position to the other divs you can use
$("div:eq(0)")
...
$("div:eq(n)")
Clearly giving each div a unique id is preferable, but if that's not an option, try the above
I created some tabs using jQuery EasyUI tabs. The content of the tab is loaded by Ajax because I pass the href attribute to my tab like:
<div id="mytabs" class="easyui-tabs" style="width:500px;height:250px;">
<div title="Tab1" href="/app/controller/tab_content" style="padding:20px;">
tab1
</div>
<div title="Tab2" href="/app/controller/tab_content" style="padding:20px;">
tab2
</div>
<div title="Tab3" href="/app/controller/tab_content" style="padding:20px;">
tab3
</div>
</div>
As you can see above, every time a tab is selected, the action tab_content which contains the content to be displayed in the tab panel (/app/controller/tab_content is just for illustration) is called. All of this work fine, but what I'm trying to do is to make a variable available to the view tab_content.ctp when the url is called (WITHOUT passing it as a parameter in the url) like:
/app/controller/tab_content/my_variable:test
Is there any way that I can pass a variable to my view when the tab is clicked without passing it to the url of the tab content? In order words, I want my_variable to be available to the view tab_content.ctp when the tab is clicked.
Note: This is a cakephp application
Thank you
You might have solved the problem already, but I ran into a similar issue with EasyUI tabs and remote content and thought I might share it. What I ended up doing was
for the variable to be passed: declare it as a window.variable, i.e. by setting window.my_variable = my_variable
for the external tab content: call the variable via javascript in the external file - since a window.variable has global scope, it is also available in dynamically loaded content (see this answer)
Hope this is of help.
Edit jquery.easyui.min.js and search for:
$.fn.panel.defaults
Change method: "get" to method "post"
Suppose you have a page in which users can create a new, unique div every time they click a button. The content of the div is mostly based on a common single template on the server side, but as the user can create several of these, the content DOMs ids of the resulting div have to be dynamically generated for each request, so as to be able to select each individual div and its content separately through jQuery afterwards (otherwise, since these divs are based on the same template, they would naturally always have the same DOM Ids, thus making it impossible to select them individually using jQuery)
Let's say you are building a windows system with javascript and jquery. On the server side you have one template that represents the "folder" window; this template has its own buttons, menus, etc, all of them being dom elements with their ID.
The user is then, on the page, supposed to be able to open several "folder" windows, each of which is assigned a different id on its creation, but the contents are the same, since the template loaded is the same for all of these windows. That is to say, provided the user opens 3 "folder" windows, the actual markup loaded in the page may look like the following:
<div id="firstWindow">
<div id="windowContainer">
<div id="windowHead">
stuff
</div>
<div id="windowBody">
<div id="windowInfoButton">stuff</div>
stuff
</div>
</div>
</div>
<div id="secondWindow">
<div id="windowContainer">
<div id="windowHead">
stuff
</div>
<div id="windowBody">
<div id="windowInfoButton">stuff</div>
stuff
</div>
</div>
</div>
<div id="thirdWindow">
<div id="windowContainer">
<div id="windowHead">
stuff
</div>
<div id="windowBody">
<div id="windowInfoButton">stuff</div>
stuff
</div>
</div>
</div>
As you can see windowContainer, windowHead, etc are duplicated as a result of reading from the same template. By itself this is already bad, but moreover I need to be able to select each windowContainer or windowHead using jQuery in such a way that manipulating them in firstWindow doesn't affect secondWindow, so simply switching all ids to classes wouldn't do it.
There are two approaches I can think to solve this:
1) Since I'm using PHP directly as the templating language, I could easily attach some code that generates a randomid or string and replace every DOM e.g. from this:
<div id="someFixedID" class="someClass">stuff</div>
To this:
<div id="<?=$someRandomStuff?>someFixedID" class="someClass">stuff</div>
The problem is that, well, if the template has some 20 or 30 DOM elements, that would greatly pollute it, and I'm trying to have as little code in the templates as possible to be able to quickly iterate on the design.
2) Using jQuery, it's possible to load the template via ajax, loop through every element in the div and change their ids on the fly before showing it. This would help keeping the templates clean, but I'm concerned this method may add an unnecesary overhead on the client side, since it may have to loop through some 20 or 30 elements.
Which method would make more sense in terms of maintainability and performance? Is there another way to approach this I didn't think of?
If I understand your problem you need to create a DIV dynamically with a unique id. Add DIVs with unique IDs using jQuery and then load content from server side in these DIVs. You need to synchronize your client side IDs generate code with server side template names/content.
For Example:
HTML:
<div id='container'></div>
<input type='button' name='create' value='create' id='create'>
jQuery:
$('#create').live( 'click', function(){
var num = $('div.mydiv').length;
var html = '<div id="myid' + num + '" class="mydiv">My Content ' + num + '</div>';
$('#container').append(html);
});
Try Here
May be not a perfect solution but hope it will give you a direction.
You could add a parameter in the URL of the Ajax call to get the template to use your client side generated key.
A very rough (not secure) draft:
On the server (template.php):
<div id='<?= $_GET["container_key"] ?>' class='main-container'>
....
</div>
Your ajax call:
var containerKey = Math.random();
$.ajax("/template.php?container_key=" + containerKey, ....)
Use something better than Math.random() (like timestamps, guids, ...) to prevent collisions.