I need to add a default value to a filter in Jquery mobile 1.3.0.
But the example below do not work.
<ul data-role="listview" data-autodividers="false" data-filter="true" data-inset="true" id="listviewID">
<?php foreach($countryList as $country): ?>
<li value="<?php echo trim(country); ?>"><?php echo trim(country); ?></li>
<?php endforeach; ?>
</ul>
$(document).ready(function() {
$(".ui-input-text.ui-body-c").val('Canada');
$('#listviewID').listview('refresh');
});
Refreshing the listview wont work, as it has already been rendered. The hack is modifying the input and firing an change event.
$(document).ready(function(){
$("#listviewID").prev("form").find("input[data-type=search]").val('Canada').trigger("change");
});
Note that the selector looks for the inmediate previous form (automatically created by jQM when you specify filterable) and the input with [data-type=search], thats more specific than .ui-input-text.ui-body-c.
FIDDLE
Related
I created a small youtube gallery. Clicking on one of the thumbnails plays the video in the main DIV. Although I have set REL=0 in the youtube iframe source, the related videos are still showing. Any ideas why this is happening?
This is a page where the issue is happening:
https://www.itaysharf.com/%D7%A0%D7%99%D7%95%D7%95%D7%9F-%D7%A8%D7%A9%D7%AA%D7%99%D7%AA/
HTML and JS code:
$(".video_wrapper li").click(function() {
$('html, body').animate({
scrollTop: $("#bigvid").offset().top
}, 1000);
});
$(".video_wrapper").on('click',"a", function(event) {
event.preventDefault();
event.stopImmediatePropagation();
event.stopPropagation();
$(".video_case iframe").prop("src", $(event.currentTarget).attr("href"));
});
<div class="video_case" id="bigvid">
<iframe width="705" height="445" src="https://www.youtube.com/embed/<?php the_field('main-video'); ?>?rel=0" frameborder="0" allowfullscreen allow="autoplay"></iframe>
<span class="desc"> <?php the_field('video-desc'); ?></span>
</div>
<?php if (get_field('video-id-1')): ?>
<div class="video_wrapper">
<ul>
<li class="video_thumbnail"><span class="video-btn"></span><img src="https://img.youtube.com/vi/<?php the_field('video-id-1'); ?>/mqdefault.jpg" alt="<?php the_field('video-alt-1'); ?>"/></li>
<li class="video_thumbnail"><span class="video-btn"></span><img src="https://img.youtube.com/vi/<?php the_field('video-id-2'); ?>/mqdefault.jpg" alt="<?php the_field('video-alt-2'); ?>"/></li>
<li class="video_thumbnail"><span class="video-btn"></span><img src="https://img.youtube.com/vi/<?php the_field('video-id-3'); ?>/mqdefault.jpg" alt="<?php the_field('video-alt-3'); ?>"/></li>
</ul>
</div>
<?php endif; ?>
Thanks for your help
Dan
https://developers.google.com/youtube/player_parameters#release_notes_08_23_2018
The behavior for the rel parameter is changing on or after September 25, 2018. The effect of the change is that you will not be able to disable related videos. However, you will have the option of specifying that the related videos shown in the player should be from the same channel as the video that was just played.
I load a html-partial into a ng-view directiv via a controller in AngularJS. The html-partial looks like this:
<div>
<ul data-role="listview" data-inset="true" data-theme="c">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
</div>
The problem is that the listview does not get rendered into a jquery-mobile-control. What is wrong?
I got it to work. Here is what I did:
I made a new directive that I append on the ul-element. It waits until the last li-element is rendered, then I call the trigger on the jqueryMobileTpl directive.
app.directive('jqueryMobileTpl', function () {
return {
link: function (scope, elm, attr) {
//elm.trigger('create');
}
};
});
app.directive('repeatDone', function () {
return function (scope, element, attrs) {
// When the last element is rendered
if (scope.$last) {
element.parent().parent().trigger('create');
}
}
});
and
<div jquery-mobile-tpl>
<ul data-role="listview" data-inset="true" data-theme="c" data-ng-repeat="customer in customers | orderBy:'lastName'" repeat-done="" ng-cloak>
<li>{{customer.firstName + ' ' + customer.lastName}}</li>
</ul>
</div>
Thank you #CaioToOn and #Omar !!!
This problem is not related to AngularJs. It happend that jQuery Mobile is not aware of every DOM change, and you need to give it a tip. To adivice jQuery Mobile about the change, you need to trigger a create event on the element.
According to the docs (look at "Enhancing new markup"):
However, if you generate new markup client-side or load in content via Ajax and inject it into a page, you can trigger the create event to handle the auto-initialization for all the plugins contained within the new markup. This can be triggered on any element (even the page div itself), saving you the task of manually initializing each plugin (listview button, select, etc.).
So all you got to do is to trigger the create event just after the content has been included.
I'd suggest you to create a directive that simply triggers the event on the templates for you. Something like:
app.directive('jqueryMobileTpl', function() {
return {
link: function(scope, elm, attr) {
elm.trigger('create');
}
};
});
Then you just add this directive to the root element of the template:
<div jquery-mobile-tpl>
<ul data-role="listview" data-inset="true" data-theme="c">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
</div>
You could make this directive low priority, so if you use other directives that might change the template, this one would wait for all changes before telling jQuery Mobile to render. Working sample here.
I'm using jQuery Mobile and KnockoutJS and can't get the Accordion widget to work. You can find an example of what I'm trying to do here: http://jsfiddle.net/NYTQC/1/. The accordion panels does not expand when clicked. Can anyone explain what I have done wrong and perhaps show how to correct the code? In my real project the observable knockout collection will be updated dynamically via a REST service depending on user actions.
<div data-role="collapsible-set" data-theme="c" data-content-theme="d">
<!-- ko foreach: collection -->
<div data-role="collapsible">
<h3><span data-bind="text: caption"></span></h3>
<span>TODO</span>
</div>
<!-- /ko -->
</div>
I have the similar problem and found the solution in the following link
http://jsfiddle.net/MauriceG/8QGU5/show/light/
// clean up borders
collapsiblesInSet.each( function() {
$( this ).jqmRemoveData( "collapsible-last" )
.find( $.mobile.collapsible.prototype.options.heading )
.find( "a" ).first()
.removeClass( "ui-corner-top ui-corner-bottom" )
.find( ".ui-btn-inner" )
.removeClass( "ui-corner-top ui-corner-bottom" );
});
The code accomponied is just a portion of what is required, You just view page source of the attached link and come to your own understanding about how the solution works.
I have a jquery mobile page which has a panel. Inside the panel I have a listview, and on each listitem there is a where I've added a data-rel="close" attribute. I want to be able to close the panel when ever a listitem is clicked.
Note that I also has a binding to angular.
<ul data-role="listview" data-icon="arrow-l" class="ui-icon-alt" data-inset="true" >
<li ng-repeat="task in tasks" >
{{task.Name}}
</li>
</ul>
I've testes on a link outside the listview and it works fine. I'm not sure id angularjs is playing a trick on me here or it is something else.
best regards
Rasmus
Markup
{{task.Name}}
JS
$('#closepanel').on('click', function {} {
$( "#PanelID" ).panel( "close" );
});
Okay so I am using cake PHP 2.0..just started using it so I am a total noob. I want to use dialog boxes to show some messages for an application so I am able to include the necessary javascript files and css for the jquery UI.
But when I define the function, It doesnot work instead when i look at the source code the script block in which i define the function looks incomplete as the closing tag '' is not highlighted. i hope i am making sense. here is the code snippet:
<script>
$(function() {
$( "#dialog" ).dialog();
});
</script>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
in 'index.ctp'.
I am certain that the js source files are loaded correctly
I picked it up from the jqueryUi site. I would be really grateful if some on could help me get started with writing javascript in cakePHP2.0. Thanks a ton
You should consider using cake's block or Element "mini-views." for that I'd use an element.
put something like this in app/view/Elements/loginDialog.ctp. I'll explain where the variable is decalred in the next section.
<div id="dialog" title="Basic dialog">
<?php echo $this->Form->create($ModelName); ?>
<?php
$this->Form->input('username');
$this->Form->input('password');
?>
<?php $this->Form->end('Login'); ?>
</div>
In your app/View/ControllerName/action_name.ctp, include something like this. Note that i'm able to pass in variables (Like the one that i used for the 1st Form parameter).
//in the view file
echo $this->element('loginDialog', array('ModelName'=>'User'));
Lastly you'll need to add the js. You could put this in your app/View/Layout/default.ctp. let's just say for instance you have a login link inside your navigation that you want to trigger this dialog:
<script>
$(document).ready(function(){
$("#loginNavLink").on("click", function(event){
$('#dialog').dialog();
});
})
</script>
Hope this helps!