In an iMacros script, how can you trigger a click on a link with a specific attribute? In this case, the link I would like to have clicked has a class of "i-project":
<div data-explore-index="1" >
<div class="i-project-card ">
<a href="/xxxxxxxxxxxxxxxxxx" ">
<span ></span>
</a>
<a href="blablabla" class="i-project">
<img src="https://blabla.jpg">
</a>
</div>
</div>
You should be able to select this link based upon its CLASS attribute:
TAG POS=1 TYPE=A ATTR=CLASS:i-project
Related
I am using Foundation 6.7.4.
I am trying to set up an accordion like the one in their example here https://get.foundation/sites/docs/accordion.html
I have my accordion set up as such:
<div class="grid-x">
<div class="medium-12 cell">
<ul class="no-bullet accordion" data-accordion data-allow-all-closed="true" data-multi-expand="true">
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">
My Title
</a>
<div class="accordion-content" data-tab-content>
My content
</div>
</li>
</ul>
</div>
</div>
When I click the A tag I can see the Accordion expand for a fraction of a second before closing. I can also see the CSS classes and attributes change in the inpector.
But I'm unsure why none of these are sticking and what's causing the accordion to revert its's self.
Would anyone know why?
Turned out this was because I had 2 foundation.js files referenced.
I am struggling with Jetstream modal dialog here is my code:
in my component I have the following:
public $ModalFormVisible=false;
public function ShowReportModal()
{
$this->ModalFormVisible=true;
}
in my blade.php I have:
<div>
<x-jet-button wire:click="ShowReportModal">{{ __('Reporter')}}</x-jet-button>
<x-jet-dialog-modal wire:model="ModalFormVisible">
<x-slot name="title">
{{ __('Delete Account') }}
</x-slot>
<x-slot name="content">
{{ __('Are you sure you want to delete your account?') }}
<div class="mt-4" >
<x-jet-input type="password" class="mt-1 block w-3/4" placeholder="{{ __('Password') }}"
x-ref="password"
wire:model.defer="password"
wire:keydown.enter="deleteUser" />
<x-jet-input-error for="password" class="mt-2" />
</div>
</x-slot>
<x-slot name="footer">
<x-jet-secondary-button wire:click="$toggle('ModalFormVisible')" wire:loading.attr="disabled">
{{ __('Cancel') }}
</x-jet-secondary-button>
</x-slot>
So the problems are:
whenever the page is loaded the modal shows up even if ModalFormVisible is false.
The cancel button is not working.
whene i click on Report Button it doesn't work as well.
Any help would be appreciated thank you.
Make sure your livewire component has only ONE root element and everything is in it.
another issue could be in case you are using jet-stream modal as nested livewire component. In this case it is important to add livewire key:
:wire:key="'custom-modal-'.time()"
Otherwise it can happen that modal window is not opening or not closing
explained in details here:
https://floyk.com/en/post/livewire-5-ways-to-call-and-update-value-on-click
and here:
https://floyk.com/en/post/how-to-use-laravel-jetstream-livewire-modal
This happens because your modal is not inside a general div, example:
<div>
<h1>Test</h1>
</div>
<x-jet-dialog-modal wire:model="switchRiseModal">
<x-slot name="title">
upload form
</x-slot>
<x-slot name="content">
Upload your PDF and XML files here
</x-slot>
<x-slot name="footer">
<x-jet-secondary-button wire:click="$set('switchUpMode', false)" wire:loading.attr="disabled">
{{ __('Close') }}
</x-jet-secondary-button>
<x-jet-button class="ml-2" wire:click="uploadInvoice()" wire:loading.attr="disabled">
{{ __('Load') }}
</x-jet-button>
</x-slot>
</x-jet-dialog-modal>
The solution is for the above code to be inside a div like so:
<div>
<div>
<h1>Test</h1>
</div>
<x-jet-dialog-modal wire:model="switchRiseModal">
<x-slot name="title">
upload form
</x-slot>
<x-slot name="content">
Upload your PDF and XML files here
</x-slot>
<x-slot name="footer">
<x-jet-secondary-button wire:click="$set('switchUpMode', false)" wire:loading.attr="disabled">
{{ __('Close') }}
</x-jet-secondary-button>
<x-jet-button class="ml-2" wire:click="uploadInvoice()" wire:loading.attr="disabled">
{{ __('Load') }}
</x-jet-button>
</x-slot>
</x-jet-dialog-modal>
</div>
I have created two bootstrap tabs whose data is comming from django functions. I can easily post essential data of all tabs while the tabs are loaded but I want to load data of each tab once the tab is clicked instead of loading all data together.
Bootstrap uses href or data-target to load a tab content. So, when I set django url in href attribute and activate the tab by JavaScript, the django function is invoked but bootstrap does not open the tab. It always opens the first tab.
<ul id="myTab" class="nav nav-tabs bar_tabs" role="tablist">
<li role="presentation" class="active">Profile
</li>
<li role="presentation" class="">Monitor
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div role="tabpanel" class="tab-pane fade active in" id="tab_content1" aria-labelledby="home-tab">
</div>
<div role="tabpanel" class="tab-pane fade" id="tab_content3" name="tab_content3" aria-labelledby="profile-tab">
{% include "setting/monitor.html" %}
</div>
</div>
My JavaScript code is:
<script>
$(document).ready(function(){
switch("{{section}}"){
case 'monitor':
$('#myTabContent #tab_content3').tab('show');
break;
case 'profile':
$('#myTab a[href="#tab_content1"]').click();
break;
}
})
</script>
I have also used the below javascript to activate second tab, but it does not wok.
$("#myTab").tabs("select", 2);
I appreciate your help.
Bootstrap will show the tab which you marked as "active". So when returning the HTML for 2nd tab make that tab as active by adding class="active" attribute to it.
May be you need to pass that information from view in the context and add that class to appropriate tab in the template.
I have code where FRAME NAME always different after reloading the page, how i can check for frame name with javascript
FRAME NAME="uimefgj4gktz"
TAG POS=2 TYPE=DIV ATTR=CLASS:ig-kg-Zb-Fh
Html code of the page
<div id=":6" aria-selected="false" style="-moz-user-select: none;" role="tab" class="a-lg"><div class="ig-kg-Zb-Fh">URL</div></div>
<div class="ig-kg-Zb-Fh">URL</div>
<div id=":6" aria-selected="false" style="-moz-user-select: none;" role="tab" class="a-lg"><div class="ig-kg-Zb-Fh">URL</div></div>
<div class="ig-kg-Zb-Fh">URL</div>
Where is attribute name="uimefgj4gktz" inside this?
If there is such attribute you can do following
iimPlay(someMacro);
var data=iimGetLastExtract();
var fname=data.split('name="')[1].split('"')[0].trim();
The someMacro variable u have to figure out yourself. It's home work.
I am encountering an issue with Jquery Mobile :
I want to display a grid of items using three columns. Each new item must be displayed next to the previous one and begin a new line after the third column.
To give you an example, I want something like this : JSFiddle
But my items have to be items from a splitButtonList (an icon with labels on the left and a clickable button on the right) instead of the blocks from the previous example.
The problem is : when I use the kind of code shown below, each new item is display at the bottom of the previous one, like in a list. I cannot manage to display it using my three columns grid pattern JSFiddle.
<body>
<div data-role="page" data-theme="c" id="projets">
<div data-role="header" data-position="fixed" data-theme="f" data-tap-toggle="false" id="banniere">
</div>
<div data-role="content" id="content">
<div class="ui-grid-b">
<ul data-role="listview" data-split-icon="star" data-split-theme="a" class="listview">
<li>
<a href="projects.html">
<img src="img/icon/file.png" />
<h3>A label</h3>
<p>Another one</p>
<p>And finally another one</p>
</a>
Plop
</li>
<li>
<a href="projects.html">
<img src="img/icon/file.png" />
<h3>A label</h3>
<p>Another one</p>
<p>And finally another one</p>
</a>
Plop
</li>
</ul>
</div><!-- /grid-b -->
</div>
<div data-role="footer" data-position="fixed" data-theme="f" data-tap-toggle="false" id="footer">
</div>
</div>
</body>
Do you have any idea of what to do ? Using CSS maybe ? Any clue would be very precious for me. Thank you
How about this? JSFiddle
You were basically missing the 3 child containers of the grid:
<div class="ui-grid-b">
<div class="ui-block-a">Listview 1 goes here...</div>
<div class="ui-block-b">Listview 2 goes here...</div>
<div class="ui-block-c">Listview 3 goes here...</div>
</div><!-- /grid-b -->
So, as you can see you will need three different listview.
Hope this helps!