study beats
Badges: 22
Rep:
?
#1
Report Thread starter 3 years ago
#1
i looked online and couldnt find an answer,

basically i have the code below:

if($("#favourite1".is(":checked"){
$("#favouritecontent".append("";
}

in the append i would like to add the following code:


<ul data-role="listview">
<li>
<a href="#">
<img src="chrome.png">
<h2>Google Chrome</h2>
<p>Google Chrome is a free, open-source web browser. Released in 2008.</p>
</a>
</li>
</ul>


how do i go about doing this?
0
reply
study beats
Badges: 22
Rep:
?
#2
Report Thread starter 3 years ago
#2
any idea UWS ?


cheers mate
0
reply
IWMTom
Badges: 20
Rep:
?
#3
Report 3 years ago
#3
Would be easier to hide and show the list, rather than add it programmatically.
0
reply
study beats
Badges: 22
Rep:
?
#4
Report Thread starter 3 years ago
#4
(Original post by IWMTom)
Would be easier to hide and show the list, rather than add it programmatically.
i am working in jquery mobile and this is the only way to do it i think?

i have a favourites page, when a user clicks the favourite button for a specific item, i want to show a list view on a different page, but i dont know how to add html code into the append function
0
reply
IWMTom
Badges: 20
Rep:
?
#5
Report 3 years ago
#5
(Original post by study beats)
i am working in jquery mobile and this is the only way to do it i think?

i have a favourites page, when a user clicks the favourite button for a specific item, i want to show a list view on a different page, but i dont know how to add html code into the append function
Write the markup where you want it to be, and set it to display: none. You can then show and hide the element.
0
reply
study beats
Badges: 22
Rep:
?
#6
Report Thread starter 3 years ago
#6
(Original post by IWMTom)
Write the markup where you want it to be, and set it to display: none. You can then show and hide the element.
can you please show me in code language example how it would be done please? i am not that good at javascript.

thanks
0
reply
IWMTom
Badges: 20
Rep:
?
#7
Report 3 years ago
#7
(Original post by study beats)
can you please show me in code language example how it would be done please? i am not that good at javascript.

thanks
Using the .show() and .hide() functions...
0
reply
UWS
Badges: 21
Rep:
?
#8
Report 3 years ago
#8
(Original post by study beats)
any idea UWS ?


cheers mate


This looks more like jQuery than Javascript and I've like 0 knowledge in jQuery I'm afraid
0
reply
study beats
Badges: 22
Rep:
?
#9
Report Thread starter 3 years ago
#9
(Original post by IWMTom)
Using the .show() and .hide() functions...
so for example if i have the following code below :

<ul data-role="listview">
<li>
<a href="#">
<img src="chrome.png">
<h2>Google Chrome</h2>
<p>Google Chrome is a free, open-source web browser. Released in 2008.</p>
</a>
</li>
</ul>



how would i have that initially hidden?

and then how would i show it in the append function?
0
reply
IWMTom
Badges: 20
Rep:
?
#10
Report 3 years ago
#10
(Original post by study beats)
so for example if i have the following code below :

<ul data-role="listview">
<li>
<a href="#">
<img src="chrome.png">
<h2>Google Chrome</h2>
<p>Google Chrome is a free, open-source web browser. Released in 2008.</p>
</a>
</li>
</ul>



how would i have that initially hidden?

and then how would i show it in the append function?
Give the list an ID.
Apply display: none as a style.
Don't use .append() - use .show() instead.
0
reply
study beats
Badges: 22
Rep:
?
#11
Report Thread starter 3 years ago
#11
(Original post by IWMTom)
Give the list an ID.
Apply display: none as a style.
Don't use .append() - use .show() instead.

ok i have given it an id and i have set it to display:none.

at the moment its not showing up

so what do i need to put after .show() ? what goes inside the brackets?
0
reply
study beats
Badges: 22
Rep:
?
#12
Report Thread starter 3 years ago
#12
(Original post by UWS)
This looks more like jQuery than Javascript and I've like 0 knowledge in jQuery I'm afraid
its ok mate
0
reply
IWMTom
Badges: 20
Rep:
?
#13
Report 3 years ago
#13
(Original post by study beats)
ok i have given it an id and i have set it to display:none.

at the moment its not showing up

so what do i need to put after .show() ? what goes inside the brackets?
Nothing, by default. Call the function on the element, it is as simple as that. The documentation for jQuery is pretty good if you need further clarification.
0
reply
study beats
Badges: 22
Rep:
?
#14
Report Thread starter 3 years ago
#14
(Original post by IWMTom)
Nothing, by default. Call the function on the element, it is as simple as that. The documentation for jQuery is pretty good if you need further clarification.

document.getElementById('div1'.style.display = 'block';

do you mean using something like above?


i used that.

when i press the checkbox button it shows up

however when i untick the check box , it still says there and does not remove?
0
reply
IWMTom
Badges: 20
Rep:
?
#15
Report 3 years ago
#15
(Original post by study beats)
document.getElementById('div1'.style.display = 'block';

do you mean using something like above?


i used that.

when i press the checkbox button it shows up

however when i untick the check box , it still says there and does not remove?
You're using jQuery, so just use the DOM selector like you were when using append...

You'll need to do the inverse using hide() to get it to go away again.
0
reply
study beats
Badges: 22
Rep:
?
#16
Report Thread starter 3 years ago
#16
(Original post by IWMTom)
You're using jQuery, so just use the DOM selector like you were when using append...

You'll need to do the inverse using hide() to get it to go away again.
query selector doesnt work either....

append works the best as when i uncheck it, the item also removes

any idea how to put html code or a div inside the append function ??
0
reply
IWMTom
Badges: 20
Rep:
?
#17
Report 3 years ago
#17
(Original post by study beats)
query selector doesnt work either....

append works the best as when i uncheck it, the item also removes

any idea how to put html code or a div inside the append function ??
You should be using documentation to learn, but here's a JSFiddle of a working PoC: https://jsfiddle.net/z518f72u/
0
reply
study beats
Badges: 22
Rep:
?
#18
Report Thread starter 3 years ago
#18
(Original post by IWMTom)
You should be using documentation to learn, but here's a JSFiddle of a working PoC: https://jsfiddle.net/z518f72u/
wow mate

thanks a lot

it finally worked

took up so many lines of code, had to copy and paste and change the variables for everything, but in the end i got my implementation to work
0
reply
X

Quick Reply

Attached files
Write a reply...
Reply
new posts
Back
to top
Latest
My Feed

See more of what you like on
The Student Room

You can personalise what you see on TSR. Tell us a little about yourself to get started.

Personalise

Do you think receiving Teacher Assessed Grades will impact your future?

I'm worried it will negatively impact me getting into university/college (191)
43.71%
I'm worried that I’m not academically prepared for the next stage in my educational journey (49)
11.21%
I'm worried it will impact my future career (35)
8.01%
I'm worried that my grades will be seen as ‘lesser’ because I didn’t take exams (91)
20.82%
I don’t think that receiving these grades will impact my future (46)
10.53%
I think that receiving these grades will affect me in another way (let us know in the discussion!) (25)
5.72%

Watched Threads

View All
Latest
My Feed

See more of what you like on
The Student Room

You can personalise what you see on TSR. Tell us a little about yourself to get started.

Personalise