I have a page like this:
<html>
<head>
<script language="javascript" type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script language="javascript" type="text/javascript" src="jqtouch.js"></script>
<script language="javascript" type="text/javascript" src="myfunctions.js"></script>
[...]
</head>
<body>
[...]
<div id="jqt">
<div id="home" class="current">
<div class="toolbar">
TITLE
</div>
<div class="s-scrollwrapper">
<div class="content">
<div class="container" >
LOAD ME 1LOAD ME 2
</div>
</div>
</div>
</div>
</div>
[...]
</body>
The contents of the loaded page is like this, for example:
<div id="AG3456AF002347634">
<div class="toolbar">
TITLE 1
</div>
<div class="s-scrollwrapper">
<div class="content">
<div class="container" >
<div style="display:none" id="myItemId"></div><button onclick="javascript: showItem();"/>
</div>
</div>
</div>
</div>
showItem is a function located in myfunctions.js and the contents is, for example this:
function showItem() {jQuery(jQT.hist[0].hash + ' #myItemId').show();}
so when i click on the button, after the page is loaded, jQT.hist[0].hash value is #AG3456AFGG2347634. This works fine the first time that i load a page with AJAX (well, when jQTouch does it). But if i load another page with same content (but the main identifier is different) it doesn't work. After two AJAX calls, the page dom is simmilar to this:
<html>
<head>
<script language="javascript" type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script language="javascript" type="text/javascript" src="jqtouch.js"></script>
<script language="javascript" type="text/javascript" src="myfunctions.js"></script>
[...]
</head>
<body>
[...]
<div id="jqt">
<div id="home">
<div class="toolbar">
TITLE
</div>
<div class="s-scrollwrapper">
<div class="content">
<div class="container" >
LOAD ME 1LOAD ME 2
</div>
</div>
</div>
</div>
<div id="AG3456AF002347634">
<div class="toolbar">
TITLE 1
</div>
<div class="s-scrollwrapper">
<div class="content">
<div class="container" >
<div style="display:none" id="myItemId"></div><button onclick="javascript: showItem();"/>
</div>
</div>
</div>
</div>
<div id="FC00A83473BE33457" class="current">
<div class="toolbar">
TITLE 2
</div>
<div class="s-scrollwrapper">
<div class="content">
<div class="container" >
<div style="display:none" id="myItemId"></div><button onclick="javascript: showItem();"/>
</div>
</div>
</div>
</div>
</div>
[...]
</body>
so when i click the button on the second loaded page it doesn't works cause jQuery is not finding the item. the value of jQT.hist[0].hash is correct, that is #FC00A83473BE33457. The item id #myItemId is the same on both pages, that's the reason to use the wrapper div id that it's unique, to locate each loaded item.
Why this is working on the first page but it's not when i load additional pages into the DOM??
You have to use the "live" command in jQuery for dynamic loaded content.. Pass a class to your button (like .myButton) and to your div container (.container) and use :
$('.myButton').live('click', function(){
//and scope from $(this) here
$(this).parents().find('.container:first').attr('id');
});
I suggest using the jQuery .on() method instead of live, it's a newer method (live has some problems), read about it: http://api.jquery.com/on/
As for passing parameters you can add an attribute to the element clicked or call your function from inside the .on() callback with the parameter, Or even do a little (ugly) hack and use .on for the 'load' (or 'ready') events instead of 'click' and add the onclick (if there is really no other way). Something like:
$(".myButton").on("load", function(event){
$(this).attr('onclick' , yourFunction)
});
But you probably can make it work in a cleaner way with just .on().
Ids are singular, you can not have more than one id with the same value on the page.
Change the ids to classes and reference it that way.
Related
I am looking for ways on how this HTML element is being hidden.
The HTML DOM on load looks like this for an example,
<div class="">
<header>
<!---->
<!---->
<!---->
</header>
</div>
After initiating a click event, the HTML DOM changes to this;
<div class="container">
<header>
<!---->
<div class="show"></div>
<!---->
</header>
</div>
Any suggestions on how its doing this? Also, is there a way to capture this live element? I have a click event elsewhere in the DOM that triggers the show element, I have also tried the on function but it shows as undefined. Bear in mind, this is not my own site.
I hope this makes sense, thanks let me know If I need to edit or suggest any changes
it's something similar to this, where class="show" or hide are css classes that set the element to display:none or block
this example is meant for demonstration only
div=document.querySelectorAll("div")
btn.addEventListener("click",()=>{
i=Math.floor(Math.random()*div.length)
console.log(div[i])
div[i].setAttribute("class","show")
})
.hide{display:none};
.show{display:block};
<div class="container">
<header id="h">
<div class="hide">a</div>
<div class="hide">v</div>
<div class="hide">x</div>
</header>
</div>
<button id="btn">show</button>
I made a few hide/show panels that I am hoping to use with Vue. The panels are written in Jquery - however when I mount the Jquery functions in Vue, the whole thing seems to fail. The panels do not/hide/show.
Does anyone know why? I have heard that there are issues with Jquery & Vue, but I have not worked out a solution to solve this. Do I need to convert the Jquery to Vue (I'm not even sure how to do this). Can anyone advise on how I could go about fixing this?
Fiddle here: https://jsfiddle.net/syed263/m4s9Lyed/111/
HTML
<!DOCTYPE html>
<html>
<head>
<link crossorigin="anonymous" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" rel="stylesheet">
<title></title>
</head>
<body>
<div class="container">
<!--COMPONENT START-->
<div>
<div>
<div id='panel0'>
<div class="panel_head">
TITLE
</div>
<div class="panel_body">
BODY
</div>
</div>
</div>
<div>
<span class="btn" id='click' value="Show/Hide"><span id="eee"><i class="far fa-window-maximize"></i></span></span>
</div>
</div>
<!--COMPONENT END-->
<!--COMPONENT START-->
<div>
<div>
<div id='panel2'>
<div class="panel_head">
TITLE
</div>
<div class="panel_body">
BODY
</div>
</div>
</div>
<div>
<span class="btn" id='click2' value="Show/Hide"><span id="eee"><i class="far fa-window-maximize"></i></span></span>
</div>
</div>
<!--COMPONENT END-->
<!--COMPONENT START-->
<div>
<div>
<div id='panel3'>
<div class="panel_head">
TITLE
</div>
<div class="panel_body">
BODY
</div>
</div>
</div>
<div>
<span class="btn" id='click3' value="Show/Hide"><span id="eee"><i class="far fa-window-maximize"></i></span></span>
</div>
</div>
<!--COMPONENT END-->
</div>
</body>
</html>
JavaScript
$('#click').click(function() {
$("#panel0").toggle("slide");
});
$('#click2').click(function() {
$("#panel2").toggle("slide");
});
$('#click3').click(function() {
$("#panel3").toggle("slide");
});
(function() {
$("#panel0").toggle("slide");
$("#panel2").toggle("slide");
$("#panel3").toggle("slide");
}());
Your question is actually more like two; Do this by using jQuery in Vue, or do this in pure Vue. Obviously it would be better to convert it to pure Vue, especially if you are only using the toggle() method, as importing the whole jQuery library for just one function is major overkill.
With jQuery Version:
To use jQuery in Vue you want to wrap in a Vue component and put v-once directive on the component so Vue leaves it alone. Then you would usually target the elements using window.jQuery.('#someid').toggle()
I distilled the panel component down to be reusable and am targeting it with the following method from within the panel component itself.
methods:{
toggleMe(id){
window.jQuery('#'+id).toggle('slide');
}
}
Here is the full working fiddle https://jsfiddle.net/skribe/cmwtqe7d/3/
No jQuery Version
It is quite easy to replicate jQuery's toggle() method since it is only adding/removing "display:none" You would do this with Vue's class bindings. No function even necessary in this case. Just create a hidePanel data property, write a.hideme css class, bind it to div in the template, and toggle it with hidePanel = !hidePanel with an #click event.
<div :id='panel.pId' :class="{hideme : hidePanel}">
<div class="panel_head"> TITLE </div>
<div class="panel_body"> BODY </div>
</div>
<div>
<span #click="hidePanel = !hidePanel" class="btn">
<span id="eee"><i class="far fa-window-maximize"></i></span>
</span>
</div>
Here is the working Jfiddle:
https://jsfiddle.net/skribe/L9mq20nd/14/
On my page are repeating triggers, which should open (change the visibility) a specific form on click. On some pages, there are multiple triggers and forms.
The HTML markup is like this:
<div id="form-container-1">
<a id="form-trigger-1">Open Form</a>
<div id="form-1">
content of form
</div>
</div>
<div id="form-container-2">
<a id="form-trigger-2">Open Form</a>
<div id="form-2">
content of form
</div>
</div>
I'm trying to work on a script, where on click on #form-trigger-x the resonating form (#form-x) get's displayed. That's not the problem, but I want to automate this, so if a page has one form it works and also if it has 10 forms it works, without the need to hardcode every number in the script.
I tried an approach with .each and $(this) but it opened all forms at once instead of the form that should be triggered.
First you need to add click event on all the a tag where id starts with form-trigger with
$("a[id^='form-trigger']").click(function(){
And then you just need to get the next of clicked a tag and play with its display property or whatever you want like
$(this).next()
$("a[id^='form-trigger']").click(function(){
$(this).next().slideToggle();
})
$(".btn").click(function(){
$(this).closest("div").slideToggle();
})
#form-2{
display:none;
}
#form-1{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="form-container-1">
<a id="form-trigger-1">Open Form</a>
<div id="form-1">
content of form 1
<button type="button" class="btn"><i class="fa fa-close"></i> Close form 1</button>
</div>
</div>
<div id="form-container-2">
<a id="form-trigger-2">Open Form</a>
<div id="form-2">
content of form 2
<button type="button" class="btn"><i class="fa fa-close"></i> Close form 2</button>
</div>
</div>
Here is how I approached this. You don't need to target them with specific ID value, Instead, use classes because the basic structure of each container is same it would work no matter how many different forms you got.
When you click on the anchor tag, my script would look for closest form-container class and find the showform class in that dom element and show it.
I have added the code snippet below as an example.
Hope this helps!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="form-container-1" class="form-container">
<a onclick="showform(this);" id="form-trigger-1">Open Form</a>
<div id="form-1" class="showform hide">
content of form
</div>
</div>
<div id="form-container-2" class="form-container">
<a onclick="showform(this);" id="form-trigger-3">Open Form</a>
<div id="form-2" class="showform hide">
content of form
</div>
</div>
<script>
function showform(caller){
$(caller).closest(".form-container").find(".showform").removeClass('hide');
}
</script>
Having the following html:
<html>
<body>
<div id="first">
1
<div class="first-first">
<p>1.1</p>
</div>
<div class="first-second">
<p>1.2</p>
</div>
</div>
<div id="second">
2
<div class="second-first">
<p>2.1</p>
</div>
<div class="second-second">
<p>2.2</p>
</div>
</div>
</body>
</html>
How could I extract an element from the HTML keeping his parent-child structure? e.g. if I want to extract the class 'second-first', I will have a html object that looks like this:
<html>
<body>
<div id="second">
2
<div class="second-first">
<p>2.1</p>
</div>
</div>
</body>
</html>
So #first and .second-second will be removed.
jsfiddle
I've tried different approaches but with no success at all, also if someone knows how to do that with a time complexity less than O(n^2) would be great to know.
Thanks a lot!
I'm working on a responsive tumblr-theme based on the 1140GRID. To make the static videos fit the column, I used the jquery fitvids plugin.
My setup code looks like this:
$(document).ready(function(){
$("#post_{PostID}").fitVids();
});
and the accompanying html like this:
<div class="container">
<div class="row">
<div class="ninecol"> //grid I want it to fit into
{Block:Video}
<div id="post_{PostID}">
{Video-500}
</div>
{/Block:Video}
</div>
</div>
</div>
How do I trigger fitVids for multiple, dynamically generated ids on a page?
Thank you!
You may want to put that closing DIV inside the video block.
<div class="container">
<div class="row">
<div class="ninecol"> //grid I want it to fit into
{Block:Video}
<div id="post_{PostID}">
{Video-500}
</div>
{/Block:Video}
</div>
</div>
</div>
Then, you could target all the subdivs of ninecol.
<script>
$(document).ready(function(){
$('.ninecol > div').fitVids();
});
</script>